Lesson 3 - Scrolling and Animation
Lesson 3 - Scrolling and Animation
-
3.1 - Math!!!
- Video explanation
- Helpful functions for angles, distances, and random numbers
-
3.2 - Scrolling
- Sample Code - HTML
- Sample Code - JS -- Take a look at functions TheWorld.draw(), TheWorld.scrollIfNeeded, and TheWorld.drawIfOnScreen().
- Video explanation
-
3.3 - Animating a Sprite
- Sample Code - HTML
- Sample Code - JS -- Take a look at the RunningHuman.draw() function.
- Sample Code - The image file containing frames of animation
- Video Explanation
- Kajan demonstrates how to do a similar technique using CSS only, no canvas, with the backgroundPosition CSS property.
- 3.4 - Controlling Animation Speed (dealing with slowdown)
More Examples:
Sprite animation and scrolling put together
A very primitive first-person maze crawler (no turning animation, but could be used as a basis for an old-school RPG, Phantasy Star or Ultima style.)
A tile-based top-down RPG style map (doesn't even use Canvas, it's just a table of images)