Animating bitmaps with math


show more Animating bitmaps with math provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look show less
please wait ...

Animating bitmaps with math

So far, we've animated objects with simple motion. When building games and interfaces, you'll often want to animate things with more interesting motion patterns. So let's take a look at a couple of types of animation patterns: randomness and oscillation. I started out with both an HTML as well as a JavaScript file with some starter code. In this JavaScript function, I set up the canvas and the stage then create a variable to keep track of the center of the stage and then I place a bitmap on the center of the screen. Then I add that bitmap as a child of the stage and create a simple animation function.

If you need to review some of this, make sure you check out the movie on importing bitmap and vector graphics. So let's say for example that we want our ship to shake on screen. Maybe it's experiencing some turbulence. For that we can move its position by a random amount on every frame using JavaScript's random function. But make sure that it's on the center, and then we&...

Animating bitmaps with math
Video duration: 4m 58s 1h 28m Beginner

Viewers:

Animating bitmaps with math provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look

Subject:
Web
Software:
CreateJS EaselJS
Author:
please wait ...