Friday, October 15, 2010

Four methods of Javascript animation

Quoting Wikipedia:
Animation is the rapid display of a sequence of images in order to create an illusion of movement.

There are few methods to achieve that effect in JS, and I will discuss four of them in here.

1. Canvas animation
I used canvas animation in my Javascript game tutorial, but let's describe it once again. As an example, I will animate jump frames from my very favorite game days ago, Prince of Persia, you can find it on the right side of the post.
Before stating any animation related stuff it's necessarily to define few variables common for all four methods. Let's do this:
var width = 100,
    height = 86,
    frames = 10, 
//our PoP jumping animation has 11 frames, but we count from 0
    
    actualFrame = 0,
       
    posX = 100,
    posY = 100,
//X & Y position of the element

    canvas = document.createElement('canvas'),
//'canvas' variable will be always main element of an animation, not always  type
    canvasStyle = canvas.style,
    ctx = canvas.getContext("2d"),
    image = document.createElement('img');
 
    image.src = 'sprite.jpg';
 
    canvasStyle.position = "absolute";
    canvasStyle.top = posX;
    canvasStyle.left = posY;

    canvas.width = width;
    canvas.height = height;
//width & height are assigned directly to th canvas, not to the canvasStyle because in the other case it would scale the element, not change its size.
    document.body.appendChild(canvas);
 
var draw = function(){
//main function for rendering each frame, here will all the animation logic goes.
} 

setInterval(draw, 80);
//main loop        
To animate our character we need just to display next frames of the jump on the canvas. It's not necessarily to clear whole surface each time in this particular case, because it has the same size as single frame. The draw function will looks like that:
var draw = function(){
    ctx.drawImage(image, 0, height * actualFrame, width, height, 0, 0, width, height);
//the attributes are: image to draw, X coord of the source image, Y coord of the source image, width & height of the cut piece (frame size), X & Y destination coords (our canvas) and destination frame size (not always the same as the source one, eg in case of scaling the frame)

    if (actualFrame == frames) {
        actualFrame = 0;
    } else {
        actualFrame++;
    }
//looping the frames, it is also the common part of all draw() function in this post
} 
So that is the first method of JavaScript animation.
Pros:
- it uses canvas (the future of HTML5 games)
- it's possible to scale, rotate, flip, etc. the frames in browsers that support canvas but no CSS3
- probably much more

Cons:
- need to clear whole canvas to draw another frame
- not supported in old browsers
- quite complex math for display single frame

Life example: [1. Canvas Animation]

2. Background looping
I think it was one of the firstmethods of sprite's animation in web browsers. It is the simplest way ever. Just create div element with background, and change backgroundPosition on each frame. Piece of cake. Try:
var canvas = document.createElement('div'),
//div element is now our 'canvas'
    canvasStyle = canvas.style;
    
    canvasStyle.backgroundImage = "url(sprite.jpg)";
//and our image is just it's background
    canvasStyle.position = "absolute";
    canvasStyle.top = posX;
    canvasStyle.left = posY;

    canvasStyle.width = width;
    canvasStyle.height = height;
//width & height are now assigned to the 'style', not directly to the element
    document.body.appendChild(canvas);
    
var draw = function(){
    canvasStyle.backgroundPosition = "0 -"+height * actualFrame;
//each frame background image moves up, that's why there is minus sign before the value, you can multiply (height * actualFrame) by negative one, it gives the same effect
(...) //here goes frame changing logic from the 1st example
}
Pros:
- simplicity
- works everywhere

Cons:
- not possible to scale, rotate, etc. without CSS3

Example: [2. Background looping animation]

3. Clip-rect method
Hmm, but what when we wan't our game to run on full screen, or on different devices with various resolutions? Changing size of the div from second example gives nothing, just looks ugly. So this is where I introduce clip:rec(), Css attribute of img element. Quoting W3schools:

The clip property lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape.

Let's try:
var canvas = document.createElement('img'),
//image is not the canvas
    canvasStyle = canvas.style;
    
    canvas.src = 'sprite.jpg';
(...)//rest of the attributes
var draw = function(){
    var frameTop = height * actualFrame, 
        frameLeft = 0, 
        frameRight = width, 
        frameBottom = frameTop + height;
//a little math here for each frame
                                 
    canvasStyle.clip = "rect("
        +frameTop +"px " //top
        +frameRight +"px " //right
        +frameBottom +"px " //bottom
        +frameLeft +"px )"; //left
                                      
    canvasStyle.top = posY - height * actualFrame;
//IMPORTANT: even if we crop piece of source image, it's top & left attrs dont change - it's necessarily to move it to the fixed position. That's what I made above.
Pros:
- only one element needed (just img)
- possibility of scaling without CSS3
- crossbrowser

Cons:
- not possible to rotate, flip, etc
- very lot of math needed on each move/frame changing.

Example: [3. Clip-rect method]

4. Div with overflow:hidden
The last way of animation I want to present is simplest than 3rd one, better than 2nd, and doesn't use canvas. The whole philosophy is to create one div element with image inside, display only part visible in div, and move the image in proper way. Like this:
var canvas = document.createElement('div'),
    canvasStyle = canvas.style,
    image = document.createElement('img'),
    imageStyle = image.style;
    
    image.src = 'sprite.jpg';
//div is the 'canvas' now, but it has an image inside
    
    canvasStyle.position = imageStyle.position = "absolute";
    canvasStyle.top = posX;
    canvasStyle.left = posY;
    canvasStyle.overflow = "hidden";
//that is very important
    canvasStyle.width = width;
    canvasStyle.height = height;
    
    imageStyle.top = 0;
    imageStyle.left = 0;
    canvas.appendChild(image);
    document.body.appendChild(canvas);
//put image in the canvas/div and add it all to the body of the document.    
var draw = function(){
                                 
    imageStyle.top = -1*height * actualFrame;
//as in the 3rd example - direction of the move must be negative. Otherwise animation will be played backwards   
    if (actualFrame == frames) {
        actualFrame = 0;
    }
    else {
        actualFrame++;
    }
    
} 
Pros:
- possibility of scaling without CSS3
- crossbrowser
- much simpler than clip:rect()

Cons:
- not possible to rotate, flip, etc
- two elements needed (img & div)

Example: [4. Div with overflow:hidden]

Changing size of animated elements is very important in gamedev. So as simplicity. That's why in my new JS game engine I will implement both, canvas and overflow:hidden methods. You can find all the sources on my GitHub account: [Javascript animation]

45 comments:

  1. nice one. Write this damn book :)

    ReplyDelete
  2. great great, thank you for sharing, I was looking for this post, and I've found. very helpful in completing my job

    ReplyDelete
  3. Thanks for making the above tutorials. Good tutorials like what you posted above are very very very very hard to find over the internet. I've been through hell and back looking for good and CLEAR examples on how to do the above animations. Most tutorials about Animations I found only tells a person how to move a stinking box and who the heck wants to do boring animations like that?? I wouldn't even call that animation. So thus, thanks. I can get back to the business of making my game and website. I have only one suggestion. Could a very simple HTML parts be included in what is above so that a person could just come to this site, copy the code, paste it into their text editor (such as notepad,etc), download the frame image file above, save them all into one folder and just run the code that way? Thanks again!

    ReplyDelete
  4. Good Information...you have mentioned very rare points on java script animation. Best software Training institute in Bangalore

    ReplyDelete
  5. Thanks for your great and helpful presentation I like your good service. I always appreciate your post. That is very interesting I love reading and I am always searching for informative information like this. Well written article
    Machine Learning With TensorFlow Training and Course in Muscat
    | CPHQ Online Training in Singapore. Get Certified Online

    ReplyDelete
  6. Together with loving just what exactly looks very similar to a good day spa day time, your cousins within The japanese dedicate their particular times languishing within sizzling hot rises, despite the fact that thrilled sightseers take on his or her's pictures. http://0r96qvf3fp.dip.jp http://1p97u9mhpn.dip.jp https://imgur.com/a/2Z6N6zZ https://imgur.com/a/9zdI7Xh https://imgur.com/a/wG7OzCi http://yqzv7a0xna.dip.jp https://imgur.com/a/KAUU3VD

    ReplyDelete
  7. Interesting information and attractive.This blog is really rocking... Yes, the post is very interesting and I really like it.I never seen articles like this. I meant it's so knowledgeable, informative, and good looking site. I appreciate your hard work. Good job.
    Salesforce Training in Chennai | Certification | Online Course | Salesforce Training in Bangalore | Certification | Online Course | Salesforce Training in Hyderabad | Certification | Online Course | Salesforce Training in Pune | Certification | Online Course | Salesforce Online Training | Salesforce Training

    ReplyDelete
  8. Can you make animation for tiktok? I would use this method, because my video people like very seldom and I have to get tiktok likes from this page https://soclikes.com/buy-tiktok-likes

    ReplyDelete
  9. This is my first time visit to your blog and I am very interested in the articles that you serve. Provide enough knowledge for me. Thank you for sharing useful and don't forget, keep sharing useful info:

    Java Training in Gurgaon

    ReplyDelete
  10. Read trending & Latest news from India & World. Daily news on Indian politics, elections, environment, government, business, technology and Bollywood & Hollywood.

    ReplyDelete
  11. Managed Dispatch services
    We provide the resources you need to make sure that you’re devoting all the time necessary to your own specialities rather than firefighting IT issues.

    ReplyDelete
  12. 4Movierulz is the center of pirate movies and TV shows. When it comes to releasing the latest movies, no other free streaming site can match it. As the name suggests, this website is the owner of pirated movies. No streaming sites like 4Movierulz or Movierulz4 have gained popularity.

    ReplyDelete
  13. virtual edge. Could this solution be a win-win for both corporate registrants and event planners? Conference organizers often have to book large room blocks. How to Create an Original Name for a Company and 9 Steps to Organize a Digital Event

    ReplyDelete
  14. Thanks for sharing great info … Hiring a limousine are excellent option to make your special occasion more delightful. Limo Hire MelbourneLimo Hire Melbourne Prices .

    ReplyDelete
  15. Authentic and Classical Yoga, Online Yoga, Bali Private Yoga, and Meditation Classes, At convenient timings for you, taught by professional and experienced yoga teachers at a unique center set amidst ancient trees and nature, free from pollution, in the heart of Bali – Canggu. Join our center and practice Yoga from the best yoga center in Bali, Yoga Baliby Billy Beate & Cultural Centre, for a lifestyle holistic and enriching experience. Make us part of your yoga journey! Join the best yoga school in Bali and the best yoga Bootcamp in Bali, Billy Yoga & Yoga Bali Centre, for a happy and healthy life.

    ReplyDelete
  16. Your post is extremely useful and the data is dependable. I'm happy with your post. Much thanks for sharing this great post.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Jobs in MNC’s
    Only MNC & established companies are using DFP(doubleclick for publishers) at this point. so learn doubleclick for publishers to get hired in these companies.

    ReplyDelete
  19. Very awesome post! I like that and very interesting content.
    pega testing
    pega testing training

    ReplyDelete
  20. Thanks for the post. It was very interesting and meaningful. I want share about Aaraa couture

    ReplyDelete
  21. Sigmatest understands the significance of purity of water for human consumption and industrial works. This water testing lab offers competitive facilities for testing of drinking water and waste. They own an exceptionally equipped laboratory that possesses the most advanced and contemporary tools and instruments required for carrying out a complete analysis for all sorts of water samples.
    More info:
    Major Types of Non Destructive Testing Methods
    water testing lab near me

    ReplyDelete
  22. In the case of so-called permanent laser hair removal, the laser acts directly on melanin, which is responsible for hair and skin color. The area to be shaved must be shaved before applying the laser.

    types of laser hair removal

    ReplyDelete
  23. Your blog posts provided me with excellent information

    ReplyDelete
  24. React JS Training in Hyderabad

    ReplyDelete
  25. This information is really amazing, thanks for sharing. Looking for more post from you.

    ReplyDelete