apike.ca

Pike's SVG JS Mana-mation

By mbystedt on Feb 28, 2014, 6:14:16 PM

JS Mana-mation Instructions

Click on the control pad in the top-left corner. She'll stop when she reaches the edge or when you click the red button.

Javascript in SVG

The above example shows off SVG's Javascript capabilities. The character is encapsulated in an object which stores the state of the character. When a buttons are pushed, a command is sent and the state of the character is updated. A simple timed loop in the SVG document makes the object to update the animation based on its state and the time since the last update about every tenth of a second. It would be nearly impossible to do this using SMIL animation in such a clear and effective manner.

For more information see Javascript Animation.

Why Make This?

Right, so I have to admit that I did this just to see it done. Sprite animation in SVG is just not what you expect and I love Secret of Mana.

Secret of Mana 2 - Seiken no Densestu (c) Square.

Source code may be freely downloaded and examined. Please do not plagiarize.

Related Topics