Jump to content

SVG Animated character


lfarroco
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • 2 weeks later...

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...