JavaScript Game Development for Beginners: Sprite Animation

Learn how to animate any sprite sheet and practice vanilla JavaScript at the same time.

4.91 (192 reviews)
Udemy
platform
English
language
Web Development
category
instructor
6,476
students
1 hour
content
May 2021
last update
FREE
regular price

What you will learn

How to use vanilla JavaScript to animate any sprite sheet for interactive web games and animation projects.

Description

Do you want to build polished, beautiful JavaScript games and bring your game characters to life? Let me show you 2 of my favourite techniques you can use to get complete control over any sprite sheet. This is advanced vanilla JavaScript sprite animation, explained for beginners! Have fun :)


Adding animated sprite sheets to your JavaScript games is one of the fastest and the most impactful ways to bring your games to the next level and to add that professional look and polish you want. Games with sprites are great at pulling your audience into the fantasy you are trying to create and they are also really fun to make. Today I will show you everything you need to know about sprite animation with vanilla JavaScript and by the end of this course, you will be able to have complete control over any sprite sheet you choose.


I will show the easiest beginner friendly sprite animation technique first and then we will go a bit deeper and learn how to properly set up different player animations, so we can swap between them by changing just one variable and use it in our game. Do you want to learn more about 2D game development? Have you been learning HTML, CSS and JavaScript for a while and want to bring your front end web development projects to the next level? Then this course is for you. Let's dive deep into JavaScript game development and learn about sprite animation together. This course is for beginners.

Content

Sprite animation with vanilla JavaScript explained

Introduction, project preview, HTML CSS setup
Basic JavaScript setup
How to create animation loop
Built-in drawImage() method explained
How to navigate within sprite sheet with JavaScript
Simple sprite animation technique for beginners
Advanced sprite animation technique
Sprite animation practice project

Screenshots

JavaScript Game Development for Beginners: Sprite Animation - Screenshot_01JavaScript Game Development for Beginners: Sprite Animation - Screenshot_02JavaScript Game Development for Beginners: Sprite Animation - Screenshot_03JavaScript Game Development for Beginners: Sprite Animation - Screenshot_04

Reviews

Richard
April 5, 2023
I know JavaScript pretty well, so the coding was no problem. You'll need to work harder if you don't know JavaScript. Dvorak is personable, clear, and kind. He knows his stuff and makes it simple to understand.
Matthew
January 22, 2023
This is a great course that covers the fundamentals of using a sprite sheet image to select and draw individual sprites! Thank you very much for an engaging and very useful lesson!
Alejandro
January 14, 2023
It was great. I mean, I watched the other one, and then this one. This was actually was I was looking for. This way of teaching, the content taught, great experience.
John
October 26, 2022
Good course! The only thing I'd mention is that 'The Advanced sprite animation technique' was kinda interesting, but very complex. It seemed a bit outside the range of the rest of the class. That said, I'd still recommend the course.
Jeff
October 22, 2022
This was a great introduction to sprite sheets and how to use them. I particularly liked the aspects that said why, specifically, we were adding certain code in and how it worked. Even the complicated bits were explained with enough context that a patient learner can watch once but then go back again and easily begin to absorb the details. Also helpful was the fact that a detailed sprite sheet was included that differed in its columns so as to allow better exploration of these ideas.
Douglas
October 11, 2022
The portions of the course on how to draw and animate sprites was great. You will walk away from this course being comfortable animating sprites. I only saw two weaknesses in the material. To keep the sprite frames from drawing to quickly, the author uses a hack whereas using performance.now() to determine the current monitor's framerate would be better to give a more stable and identical playback on all devices. The second weakness was that the author doesn't use either CSS's flexbox or grid to position elements on the page. The old ways do work, but the standard and quick way of doing CSS today is with either flexbox or grid for most things.
Javi
October 2, 2022
Excellent course and even better teacher. This course is kind of advance but he managed to make beginner-friendly. Keep up the good work!!
Chris
February 14, 2022
I really enjoy Frank's courses. You pay a lot more $$ for worse instructional videos in most courses. He has an approach to teaching and learning that recognises that context ( pardon the html5 canvas context joke 8D ) really helps you better understand what is going on. So, instead of saying "just do this and then this and then this....", he walks you through how the functions work, and why you may want to approach things in different ways. I hope Frank launches a great online education career out of these courses - they're fun, and easy to follow along with.
Model1
January 23, 2022
I was a small beginner in this field. and I have studied a lot from this lessons. Thanks a lot for this free course!
Ivan
July 10, 2021
This is a good entry to javascript game development. Everything is explain really well, one downside is that don't show what I do have to write in index.html and style.css, what I did was use another html and css from another course in his youtube channel
Jean-Pierre
May 12, 2021
Very good course. Clear explanations and at a slow flow for comprehension even for non-English speakers.

Charts

Price

JavaScript Game Development for Beginners: Sprite Animation - Price chart

Rating

JavaScript Game Development for Beginners: Sprite Animation - Ratings chart

Enrollment distribution

JavaScript Game Development for Beginners: Sprite Animation - Distribution chart
4037390
udemy ID
5/9/2021
course created date
5/10/2021
course indexed date
Bot
course submited by