• +0033 (0)290 568 348
  • contact@thehiveprojet.fr
/storage/photos/33/canvas-banner.jpg

HTML5 CANVAS ELEMENT

Using characters modelled in Maya (3d software) to create 2d sprite sheets in Photoshop for HTML canvas element animations.

Below is an HTML iframe and it is an HTML5 Canvas element. No 3rd party plug-ins are needed to achieve this just pure HTML, CSS & Javascript!.

I am sure you are already thinking to yourselves 2d game?. If it is the case you are going to have to study advanced Javascript. Apart from this obvious one, there are so many other uses for the canvas element the fact that it is drawing 2d images in real-time directly to the HTML page it's almost magic!. Here in this example, you can see the rabbit character (Floppy) I modelled in Maya (if you want to learn more about him it is all explained in detail in another blog article called 'Rigging a Character in Maya'). It is in the form of a short animated clip (.mp4/ .webm video) go and check it out if you want to learn all about custom attributes, setting up SDK and dynamic joint chains used here on the ears. Important if you are creating looping animations the first & last frames must be the same otherwise you will get a jump! in the animation image sequence.

Below is the character sprite sheet I built in Photoshop:

For this demonstration, there are just 3 actions (1) Walk (2) Run (3) Jump. In the sprite sheet, you will notice there are 3 rows but the columns vary walk and jump have 23 images whilst run has just 16. Learning how to create an array in javascript and loop through your sprite sheet is not really the motive behind this article. There are many good references on the net on how to achieve all this and javascript starts counting sprite sheet rows from zero so don't forget that whilst you are coding otherwise you will get a flashing effect as the frame (23) in this particular case would be empty!.

You need to Login or Register to comment.

Comments (0)