Conclusion

For displaying 2d visuals, sprite sheets are wildly popular. They are most commonly used in games, but as you saw here, you can also use sprite sheets to define normal (and boring) things. Now that you’ve seen how to implement an animation using a sprite sheet, it all seems pretty easy, right? All you do is just load your sprite sheet and use drawImage to display a frame of your sprite sheet at a time. The fun starts to happen when you have no control over the sprite sheets you have to work with. In those cases, your drawImage shifting logic might be more involved than just incrementing one variable by a fixed amount. Anyway, no need to worry about that now. When you get to that point, you’ll know what to do. If not, just comment here or post on the forums, and I or somebody else will try to help you out :P

Get hands-on with 1200+ tech skills courses.