[Game] Dragon Swoopers

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

Nate wrote
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

Shiu wrote
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!