Sign in to follow this  
Eric Mulvihill

Good examples of different types of animation in games

Recommended Posts

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!

Share this post


Link to post
Share on other sites
An example where I used Dragon Bones skeleton animation a lot in a game is 'Outdoor Fun' the cbeebies Nelly & Nora game

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Here's an example of a spritesheet:

 

fighter.pngBasically 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:

spineboy.png

 

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.
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.