SpriteLoop + Defold Extension Development Log

:waving_hand:Hi everyone! Is there anything specific you’d like me to show or cover during the presentation next week?

2 Likes

Since this is before the game jam, maybe a few practical “jam workflow” tips: what is the quickest way to get from artwork to something working in Defold, what features you can ignore at first to grasp the basics quickly, and also any common pitfalls :wink:

2 Likes

Yeah I would like a full workflow demo:
From an artwork in krita => export / import into spriteloop => build an anim with one variant => add an event and add a anchoring point => export for Defold => use animation in defold: change variant, make a sound when the event is fired, make a gameobject follow the anchor (with an fx or as a factory to fire bullets)

For example a character with a gun.
Make anim of walking and one of fireing.
Add event for sounds when walking,
Add event for firing the bullet + anchor at the top of the gun for firing effect and spawning bullet.

4 Likes

This might be a bit technical and boring, but I’m curious about how you handle the rendering and optimisation side of things.

2 Likes

Thanks to everyone who joined the presentation today! I hope you found it useful. Below you can find the Defold project from the presentation, including the animation files.

12 Likes

Thank you very much for the workshops @Sam! :heart:

1 Like

I missed the talk. Will the video be uploaded at some point?

2 Likes

Yes, it will be on Defold’s YT :wink:

@Sam one thing I didn’t ask on the talk was about assymetric characters animations. Usually, I use just flipped sprites to move left/right, but I want to design some characters with assymetric features, e.g. one leg disabled, or even simpler - I want a character’s sword to be on its right side, so when going left, I don’t want to see the sword (or put it in the back)

How would you design something like this? Do you suggest making two animations (left + right) on differently setup limbs, or one setup, but 2 animations and changing order, or is it possible inside one animation (variants?)

I’m thinking about 2D side scriller characters (like the Clockwork robot)

If we assume your character has different details on all parts let’s say it’s a pirate. You may need to setup two heads one with patched eye and one without. Depending on the body clothes you may want also two images. You can link everything and hide some depending on the direction (left or right). For the arms and legs you also will need 4 arms and 4 legs, e.g arm with sword and arm with hook. Let’s say one leg is not a leg (pirate) and it can be single image without any links or limb setup, but you will still need to duplicate it for the other side if it has different look from that side. Variants can also be used for some parts e.g. the normal leg can use variants when behind the body (and use only two legs instead of 4). You can also change z order from the inspector if needed, but I will definitely animate everything only on left or right in terms of movement and just flip inside the game. The left and right views may need to be two separate animations. With more tinkering it’s probably possible to have the two views as skins if you won’t need the skins for any character customization.

1 Like

Thank you very much for the tips! :heart:


Btw. Samuil and Sprite Loop are now in the Defold Asset Portal:

3 Likes

Thank you for the support @Pawel and you are welcome!

P.S. Now I definitely have to update that profile photo. :baby: :old_man:

1 Like

Hi, I have another use case but kind of similar.

My graphist guy has a character already animated with frame by frame animation (each frame a png), but I want him to use spriteloop so that he can add anchor points and events information on the animation, and maybe add other moving parts to it (like weapons). so that he can design all of it himself and then I can get back all the information in Defold and code without knowing anything about the anim content (just names of anchors and events)

How would you integrate frame by frame animations into spriteloop?

Was thinking to create a group and add all png inside the group as parts, place them all at the same place, then on each spritloop frame just use visibility to toggle the right png frame. A bit cumbersome but should work.
Then I can animate the group if I need to move it.

How would you handle this use case?

I guess you really want this artist to suffer! :grinning_face_with_smiling_eyes:

There are no groups in SpriteLoop, but yes, you can import each frame as a png or only some of the frames, depending on the animation. Some artists animate on 3s, for example, and have the same image held for a few frames. You can do that in SpriteLoop with Step keyframes. You can adjust the FPS and total frames if needed.

Then, yes, you can toggle the opacity to show and hide each image. With Step keyframes, there will not be any interpolation, so the images will show and hide instantly, as they do in traditional frame-by-frame animation.

After that, you can use as many Empty Parts as you need for anchor points and manually adjust their positions for each frame.

In theory, it should work, but it will be a bit finicky to match the weapon positions. I would probably add the weapons while animating so you can position everything correctly, and then disable those parts afterward so they do not get exported.

1 Like

He use FULLCAPS for directory names and Firstcap for filenames, he HAS to suffer!

Thanks I will try and see how it goes.

1 Like

Defold 1.14.0 doesn’t seem to play nicely with SpriteLoop. I’ll try to push an update this week if I can figure out what’s causing the issue.

In the meantime, if you rely on SpriteLoop, I recommend sticking with Defold 1.13.2.

wave_idle

4 Likes

Could it be this? Are you using native code?

1 Like

It seems to not like some lines in the .clj file. Don’t worry I will figure it out. :face_with_hand_over_mouth:

1 Like


I created some cute animations using SpriteLoop.

SpriteLoop is a fantastic animation tool for Defold.

6 Likes

Fixes editor compatibility with Defold 1.14.0

The Clojure plugin still used the old resource loader API and custom editor shaders. It now supports the new loader API and uses Defold’s shared rendering helpers.

The extension also replaces the old Intel iOS Simulator target (x86_64-ios) with the Apple Silicon target (arm64_sim-ios), since Bob rejects the old target in both versions.

CI validation passing on 1.13.2 and 1.14.0.

6 Likes