Esoteric Software

[tescott]

This isn't nearly as sexy as the example Dragon in Spine, but I think things turned out rather nice considering this is my first real attempt at doing some animations. My goal was more for subtlety than larger, sweeping motions.

http://www.youtube.com/watch?v=L_0S2R-gMhc
http://www.youtube.com/watch?v=C-FqNO_X-nk

** 10/28/2013 UPDATE **

Game Release will happen on Google Play this weekend. Here are some sneak peek screenshots:

http://www.gushikustudios.com/content/g ... n-swoopers
http://www.gushikustudios.com/content/g ... n-swoopers
http://www.gushikustudios.com/content/g ... n-swoopers
http://www.gushikustudios.com/content/g ... stic-moose
http://www.gushikustudios.com/content/g ... ry-volcano

--tim

[Nate]

Aww that's cute! I'm no animator, but I think you should be able to do more movement with the torso, maybe rotation and/or scaling. You might also put the blink into a separate animation and apply it at runtime at random intervals. Just apply it after applying the main animation, as long as the blink doesn't affect the same bones.

[tescott]

Aww that's cute! I'm no animator, but I think you should be able to do more movement with the torso, maybe rotation and/or scaling. You might also put the blink into a separate animation and apply it at runtime at random intervals. Just apply it after applying the main animation, as long as the blink doesn't affect the same bones.

Thanks for the comment. I'll play around with that and see what I can come up with.

--tim

[tescott]

Animated the body slightly.

http://www.youtube.com/watch?v=69dBvqdgmjo

--tim

[Nate]

Nice, I think that helps a lot. Shiu, any suggestions?

[tescott]

First lesson learned: don't jack with the root bone keyframes. Instead, create a "body" bone that everything else is based off of. Otherwise, the root bone settings override whatever your run-time settings are. Doh!

I don't fully understand how mixing works. I know it's for transitioning from one animation to another (I've got the sample libgdx project up and running w/spineboy and goblins), but I don't fully understand what exactly the mixing is doing. Is it just interpolating between animation keyframe timelines? From the current position in the 'from' animation mix with the start of the 'to' animation, over the course of the setMix() duration, maybe?

So far, things seems pretty seamless -- I have my little dragon switching up between flying and walking. I half-expected to see some jerkiness but it actually looks pretty sweet.

--tim

[Nate]

Mixing blends the animations. First it poses the first animation at its current time, then it poses the second animation at its time, then it interpolates between those poses to choose a pose in between. How much interpolation is what the alpha parameter passed to mix does (0 to 1 for 0% to 100% of the second animation).

When using AnimationState, the interpolation is changed over mix duration from 0 to 1. So if you are walking and you set the animation to jumping with a mix duration of 0.5, the mix alpha starts at 0 and goes to 1 over the course of 0.5 seconds. This makes the walk animation continue to play, but you get less of the walk and more of the jump until you reach 0.5 seconds, when you get only the jump and no more walk.

[Søren]

Cute character! The only thing I would suggest is thinking a little more about weight. He is one fat fella and his motions kinda indicate he is somewhat thinner, so what you could do is take longer steps but slower and have a little more secondary motion going on with the body to indicate that he is heavy.

[ArtizensAnimator]

I do like his little head wobble !!

[tescott]

It's still a little rough around the edges, but here's a WIP of the animation as presented "in-game":

http://youtu.be/-sK-bwwXSEs

This was done AFTER scaling all my images down from their original size to about 0.18x. Ugh. That was painful! The original images filled a 1024x1024 and a 1024x512 texture. The scaled down versions all fit on a single 512x128 texture.

I think the following item would have saved me about 2 hours of time:

https://trello.com/card/bone-checkbox-t ... c0059d9/33

(hint hint)

--tim

[Søren]

Love it Not sure exactly what you were doing, but you could maybe just have used bone/image compensation to scale things down.

[tescott]

Love it Not sure exactly what you were doing, but you could maybe just have used bone/image compensation to scale things down.

Got any videos explaining what you mean?

--tim

[tescott]

Here's an easy, yet tedious method for rescaling bones and images:

1) Start off with your standard/large images and bone definitions. Let's assume they are in the directory named "Dragon-Plain".
2) Select your scale rate. Example: 0.18.
3) Create an image directory for your scaled images. Let's assume "Dragon-Plain-Small".
3) Scale your standard images according to your scale rate. Something that is 256 pixels wide now becomes 256 * 0.18 = 46 pixels wide. I use GIMP for rescaling.
4) Do not change the image names. Instead, just store these smaller images to the "Dragon-Plain-Small" dir.
5) With Spine closed, rename "Dragon-Plain" to "Dragon-Plain-Large". Rename "Dragon-Plain-Small" to "Dragon-Plain"
6) Launch Spine. The bones will still be in their standard places, and all the images will be small and appear disjointed. Don't panic.
7) Select the root bone. Scale the X & Y to 0.18
8) EVERYTHING will shrink down... even the images.
9) Lock the image and bone settings.
10) Go through the structure bone by bone and change the scale from 0.18 back to 1. You'll notice that before doing this, images have a scale of 1, after doing this, images have a scale of 0.18. You may have to adjust the length of the bones points to improve their appearance. The locking will prevent any joints you've created from moving around. Yes. This is tedious and sucks.
11) Go through the structure image by image and change the scale to 1.0. Be sure to do this for multiple images in each slot. Yes. This is also tedious and sucks.
12) Done.

Enjoy your new scaling without having to redo any animation or create any new bone scalings.

Here's a quick video showing a couple of the steps:

http://youtu.be/OwxmDDWtBGU

If there's an easier way to do this, I'd be interested to know!

--tim

[Søren]

If you turn on image compensation you can transform bones without the images following

[Nate]

You can also work in Spine at any size, then use smaller (or larger) images at runtime. Set scale on SkeletonJson or SkeletonBinary at runtime for how much smaller/larger your images are compared to what you used in Spine.

[tescott]

Update:

- added sheep animations to the game
- sheep have basic "run away!" or "graze when idle" behaviors implemented.

http://youtu.be/iWcP1up73Pg

--tim

[tescott]

I hope to post some more videos today. I've been using Spine to create dragon variants. At run-time, I want to be able to switch between these variants while using the same animations. The variants will alter which attachments are used for a particular animation (I have a few different wing sets for example), color tints, and the overall appearance on 'passive' attachments -- such as horns and other dragon decorations.

The idea is that the player will be able to upgrade their dragon as they gain gold and gems in the game. Various dragons will be stronger than others, faster, have more stamina, have a breath weapon, etc. Yeah, pretty much bringing out my inner D&D nerd.

--tim

[Søren]

Looking forward to seeing it Great job so far

[chrismweb]

Looks nice!

The walk animation looks very nice, but the flying animation could look better with something more complex like the example dragon.

Are you using box2d for handling collisions / building the physical level, or something else?

Looks good!

[tescott]

I don't have the assets for enhancing the flying, unfortunately, otherwise I would.

Yes, I'm using Box2d for collisions and level construction.

I haven't posted new videos yet.... I just learned about skin attachment handling in Spine yesterday and have been busy migrating things to use that. Looks to be really really useful!

--tim

[Nate]

A couple notes on skins:

- Skins are a convenient way to make a group of attachment changes. However, attachments can be changed at runtime so this is not their main purpose.

- Skins are for reusing all the animations for a character that has the same skeleton but looks different.

- A skin attachment is a placeholder for an image that comes from a skin.

- See the blinking in the goblin animation. Skins allow this animation to be reused. Without skins, the eyes-closed image change key is specific to how the character looks so you'd need a separate animation for the goblin and goblingirl.

[tescott]

Some colors are slightly messed up, but this is a proof-of-concept for using skin attachments to create dragon variants for my WIP game:

http://youtu.be/5OweMhKCp9Q

Skins are super easy to use and very flexible. I plan to set the tinting at run-time to create different chromatic dragons after defining the various parts.

Only annoyance right now is that switching skins causes expanding on some of the tree structures on the right. I had to keep collapsing the root node as you'll see in the video.

EDIT: Looks like I had a bone selected when I was running my animation. That is what seemed to be causing the tree structure to expand every time. Deselecting everything makes things work as normal.

[Nate]

Very nice! The flying animation is a perfect use of skins. The image changes in the flying animation are specific to how the character looks, so skins allow you to reuse the animation.

[Søren]

With those eyes, some blinking would really make those dragons come alive, you could do the blinking randomly. Love the mean looking dragon

[tescott]

Yep, I've already defined some blinking eyelids. I plan on doing that (eventually) in code.

One for the wish list (and I believe it is already on Trello), is to have the ability to associate color tint to the skin attachment instead of / in addition to the slot. That would make my dragon variations a snap.

--tim