Do It Yourself – Website Tutorials
#javascript #html5canvas #frankslaboratory
In the next couple of videos we will focus on gamedev from scratch with plain vanilla JavaScript. In each tutorial we learn a new technique while building a complete project. Feel free to code along and come up with your own games just to practice your frontend skills or to show off on your personal portfolio website, GitHub or CodePen.
We will learn how to make games from scratch. focusing on important gamedev techniques such as collision detection, sprite manipulation, frame rate optimization, adding sound, player input, enemy AI and so on using just JS & HTML Canvas element. We already did Sprite animation with CSS, now we will take it to the next level and get complete control of the sprite sheet with JavaScript.
In this tutorial we will take a closer look at character animation from sprite sheet using just plain vanilla JavaScript specifically using drawImage canvas method.This method is the single most important thing you need to understand if you want to animate sprites with JavaScript and we will go through it in detail. We will then replicate and randomize that same character with ES6 classes to show you how to generate groups of NPCs or enemies for isometric top down games.
*** Sprite Animation with Vanilla JavaScript, Gamedev series | How to make games from scratch with JS & HTML Canvas ***
I always like to start with basic game skeleton and underlying logic using just rectangles or circles and then I dress it up with images or animated sprites. I will show you how to build games and how to use sprites and images of your own choice to make them unique.
Sprite sheet is an image, that combines multiple animation frames into one larger file. There is one big advantage to using sprites, especially for larger projects with a lot of graphics resources, so basically all games. Placing all your frames into 1 large image reduces the number of HTTP requests to the server, each server call adds latency. Instead of calling server 51 times to get all the frames for our animated character, you call it just once.
All the graphics you see in this video are just for educational purposes and were found using google search.
I will show you how to use 4 directional sprites where we have 4 rows, up down left right and once we master that we will make our player character with 8 directional sprite which can also move diagonally top left, top right, down left and down right
Animating sprites with JavaScript is very simple if you understand the basic rules, it also gives you much more flexibility than animating with CSS keyframes, like we did in the previous video. We will go through JavaScript sprite sheet animation step by step in detail now
Relevant links:
Floor Textures
https://opengameart.org/content/tileable-brick-ground-textures-set-2
Character sprite sheet
https://www.spriters-resource.com/pc_computer/cupheaddontdealwiththedevil/sheet/97184/
G-G-Games! – gaming pen collection by Chris Coyier
https://codepen.io/collection/Jjkix/?cursor=ZD0wJm89MSZwPTEmdj02MTA0ODM=
JS Planet defense game
Final code from this project
Featured sprite sheet artist
https://bevouliin.com/
NOTE:
If you find a sprite sheet that’s separated into individual image files you can easily combine them into one file using one of many free online tools such as
https://www.codeandweb.com/free-sprite-sheet-packer
I explained how to use this in detail is my CSS Sprite animation tutorial https://youtu.be/pzHRDsOcUBg
If you liked this video I’m sure you will enjoy other videos on my channel. You can find HTML Canvas Animation Tutorials, JavaScript tutorials, animated effects and step by step animation guides, each video shows many examples of the final effect. I will help you learn modern web development techniques by building real projects you can show off on your personal website or GitHub. Code along with me and gain skills to get your first job in the industry. If I could do it you can do it too. If you decide to code along and modify the effects, share your Codepen/JS Fiddle in the comments, I want to see what you came up with.
I have pure vanilla JavaScript animation series. No plugins, no libraries, no frameworks. If you want more creative JavaScript tutorials & HTML canvas animations check out the playlist here:
CSS experiments playlist:
*** Sprite Animation with Vanilla JavaScript, Gamedev series | How to make games from scratch with JS & HTML Canvas ***
Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com
source