Good examples of different types of animation in games

[Eric Mulvihill]

Hi all,

 

My company is NOT a games company but we have a lot of educational content which is very much similar to a game. We're in the beginning stages of porting our products to HTML. What we have now is 2D Flash-based (vector) frame-by-frame animation.

 

I'm trying to explain to a bunch of VERY non-gamery people, who know nothing about coding or art, what it means to redo a Flash game in HTML. 

 

Anyway, my first task is to try to make them understand the major types of animation that are used in modern mobile games. I'm not a huge mobile gamer myself so I would like some suggestions about what people think is a great example of the following types of animation. I want to show this stuff to my coworkers so they can start to even understand the options.

 

• 2D sprite sheet based
• 2D Bones-based
• 2D vector-based (not sure this really exists outside of Flash)
• 3D

 

Best examples would be web or mobile-base and have characters with a cartoony look for kids. Educational would be even better, but I mostly just need good examples of the genres to show to people.

 

All your input is appreciated!

[Ninjadoodle]

Hi @Eric Mulvihill

 

I do most of my animations using Tweening

 

Here is one of my kid-friendly games where most of the animation is done this way ...

 

http://www.ninjadoodle.com/clickplaytime-5

[alex_h]

An example where I used Dragon Bones skeleton animation a lot in a game is 'Outdoor Fun' the cbeebies Nelly & Nora game

 

http://www.cbeebies.com/za/nelly-and-nora#activity-306057

 

Also this is not an example from within a game but rather a standalone example of dragonbones skeleton animation with pixi.js

 

http://www.alexh.org/pixiDragonBones/

 

and a zip of the source here:

 

http://www.alexh.org/pixiDragonBones/pixiDragonBones.zip

 

if that helps, as you can see the individual images in the atlas

[Eric Mulvihill]

Hi @Eric Mulvihill

 

I do most of my animations using Tweening

 

Here is one of my kid-friendly games where most of the animation is done this way ...

 

http://www.ninjadoodle.com/clickplaytime-5

Thanks @Ninjadoodle for the example. Fun games!

 

I definitely agree that tweening/programmatic animation is a key to space efficiency for html games. Unfortunately none of our old content was done using this method, because Flash was just so damn good at placing things on a frame-by-frame basis that we've got stuff like a ball being thrown that's just 30 frames of a ball going across the screen...  these differences are what I must explain to my coworkers.

[Eric Mulvihill]

 

An example where I used Dragon Bones skeleton animation a lot in a game is 'Outdoor Fun' the cbeebies Nelly & Nora game

 

http://www.cbeebies.com/za/nelly-and-nora#activity-306057

 

Wow this example is perfect! I really like this style!

[dimumurray]

Here's an example of a spritesheet:

 

Basically all your in-game graphics is packed into a single image and each frame of the animation is extracted from the sheet when needed. As in this example:

 

http://adireddy.github.io/demos/pixi-haxe/spritesheet.html

 

Bone-based animation still uses a spritesheet, but the animation is done piece-wise where a subject is comprised of components that are programatically animated. Here's an example of a sprite-sheet used for bone-based animation:

 

And the bone-based animation in action:
http://adireddy.github.io/demos/pixi-haxe/spine.html

As for vector-animation, it is possible. You have the option of using the canvas 2D graphics api. However performance may be an issue on mobile devices. PixiJs has a custom webgl implementation for drawing vector graphics but your team will need to be technically savvy to leverage it for complex animations (beyond drawing basic shapes and such).

 

Here's a simple vector-based animation:
http://adireddy.github.io/demos/pixi-haxe/graphics.html

 

Vector graphics really shine when it comes to UIs. Plus you never loose the crispness of an illustration regardless of resolution.