Jump to content

Good examples of different types of animation in games


Eric Mulvihill
 Share

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!

Link to comment
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

Link to comment
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.

Link to comment
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.
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...