SVG Animated character

[lfarroco]

Hi there,

 

I'm new to html5gamedevs and I'm sharing my experiences on a personal side-project of mine: a HTML5 Ogre Battle styled game.

 

During the project I noticed that it would be quite hard to change equipment in the characters, as I was using frames. So, instead of using frames, I started wondering if some CSS and jQuery animations could be used over SVG files.

Here's the results:

http://studioaudax.com/dev/ayruma

 

Each equipment is a SVG file drawn on Inkscape. The cool things is that the SVGs might be manipulated after they are rendered, so changing colors on specific paths is also possible.

 

The downside for this method, I think, would be its performance on mobile devices.

 

I hope that these experiments are helpful for anyone looking to animate objects in their games!

[PixelPicoSean]

Curious about how do you make the character animation? Any SVG animation tool, or just use the jQuery to animate them?

Regarding the performance, I think you can render each part into a canvas when character loaded or equipment changed, then draw directly those canvas.

[lfarroco]

Here's the animation logic: the character is a HTML tree. There's a parent div for the whole unit, and inside it children divs to each part of the body (trunk, arms, legs...). Inside each div, there's a SVG file with the equipment for that body part (gloves, armor, boots...).

 

The animations are CSS based. If I want to make the legs move, I use jQuery to add the "moving" class to the parent div. There's a style that applies an pendulum animation to the "leg" classes if they have the parent "moving". As CSS allow us to define anchors to the div (in this case, in the top middle), the movement becomes more natural. Also, CSS includes some easings without the need for plugins.

@-webkit-keyframes leftLegMove{0%   {-webkit-transform: rotate(-60deg);}50%   {-webkit-transform: rotate(60deg);}100%  {-webkit-transform: rotate(-60deg);}animation-timing-function: ease-out;}.moving .leg.left{   animation: leftLegMove 0.7s infinite;  -webkit-animation: leftLegMove 0.7s infinite;}

 

jQuery animations were required to make the character move around the screen.

 

About canvas usage, I have this other version where I used an online tool to convert the SVG files to canvas, as the results were surprising loyal to the original files. Adding an local solution (canvg) to convert the assets on rendering might be an alternative, but I didn't test it yet.

 

A curious fact: to total size of the equipment in SVG is 38kb. My older sprite-sheet were about 150kb per character. Here's a gallery: http://imgur.com/a/3poBk

[ragnarok]

This looks awesome. I tried something like this some time ago (without css-animation but rather with timed js-based css manipulation), however I stopped when I didn't get the following to work:

The cool things is that the SVGs might be manipulated after they are rendered, so changing colors on specific paths is also possible.

 

IIRC my svgs were embedded as img-tags and I couldn't access the svg-data. Did you get access somehow?

[lfarroco]

In order to modify external SVG files you need to "extract" them from the object and place their source in the DOM.

 

First, instead of using the img element, use "object":

 

<object data="assets/svg/armor.svg" type="image/svg+xml" onload="extract($(this));" id="elema"></object>

Note that this object has a function attached to the "onload" event. As soon as it finishes loading, it will run the function extract(obj).

 

 

function extract(obj) {  myid = obj.attr('id');  var svg = document.getElementById(myid);  var svg = svg.contentDocument;  var svg = svg.documentElement;  $('#' + myid).replaceWith(svg);}

After the extract the elements inside the SVG will be available for query using standard the native JavaScript selectors and jQuery`s.

 

To change a path you might use:

$('.leather').css('fill','#0bffab'); //CHANGE FILL COLOR$('.leather').css('stroke','#0ccccc'); //CHANGE STROKE COLOR$('.leather').css('stroke-width','2'); //STROKE WIDTH$('.ghost-boots').css('fill-opacity','0.6'); //AN OPACITY CONTROL FOR JUST THE FILL

[ragnarok]

Awesome! Thank you very much!

[aberrantmind]

Have you run any tests on how different devices handle this technique?