Canvas RPG Kit - JavaScript Game Development Tutorial

In this tutorial series, we're going to build a lightweight game engine from scratch with vanilla JavaScript and HTML5 Canvas. Check out this video for a full overview:

▶️ The first half of this series is viewable for free on YouTube! Here is the YouTube video

Full list of topics

📺 Setting up an HTML <canvas> tag to render the game

🎨 Creating a Sprite class for drawing subportions of a Sprite Sheet to the canvas

🔄 Using a requestAnimationFrame game loop for both Animation and Physics process changes on every frame

⌨️ Handling Keyboard input

🗺️ Locking the Hero character to a grid cell position in the map

🪨 Grid-based collision detection to block off areas the Hero cannot walk on

🏃 Animating the Hero's walk cycle in multiple sprite sheet frames

🧩 Refactoring to "GameObject" building blocks

📡 Setting up an Event system for decoupling GameObjects

🎥 Creating a Camera system that follows the Hero around the map

💰 Picking up Items in the Map

📺 Displaying Items in a HUD section

🗺️ Changing to different levels

📍 Configuring the Hero object where to start on each level

🙋‍♂️ NPCs that can be interacted with

💬 Two different approaches for creating Text Boxes in canvas games

📝 Typewriter text effect for speech dialog

🖼️ Portraits for Text Boxes to show which character is talking

📓 A Story Flag progress system to change what characters do and say

FAQ

Why build your own game engine with HTML Canvas?

It all depends on what you are looking for.

You may have your own opinions or mental models for how the inner systems of your game should work. In these cases, it often is beneficial to have full control over all aspects of your game rather than delegating to an existing engine.

In addition, our solution is very lightweight and portable compared to working with other dedicated engines. It's a balance of preference and features!

Building an engine system like this is a great way to appreciate and better understand how fully featured engines work under the hood.

What is the difference between this offering on Gumroad and the YouTube video?

This version is longer and extended with way more content. In this full extended version, we build many features on top of the systems created in the first section. Check out the list above for a full feature set!

What JavaScript skill level is required?

Beginners to JavaScript are welcome! Fair warning: we do move pretty quick! Watching the first few sections on YouTube is a good idea to get a feel for the pacing and technical skill required. You can always pause and rewatch sections as needed.

We use NPM to install a build tool called Vite for local development. If you are unfamiliar NPM, it's a good idea to learn more about NPM before diving into this series. Technically using Vite is optional but highly recommended!

Keep in mind you can always join the Discord and ask for help.

Are the Sprites and Artwork included?

Yes, the included Assets .zip download has everything you need to follow along. There are some extra bonus sprites and backgrounds in there as well!

You may use the sprites in your own games without the need for credit.

What if I have a question or get stuck?

Feel free to reach out to me anytime! Also, feel free to post your projects and questions to the Game Dev Shift Discord for a full community of fellow HTML game developers. If you're stuck on something, there is certainly somebody around who can help bounce ideas around.

Full List of Videos
Part I: Beginnings

01. The Game Canvas (13:24)

02. Sprite Class (20:01)

03. Game Loop (08:56)

04. Keyboard Input (07:25)

05. Grid Movement (11:14)

06. Walls (04:36)

07. Animations (20:40)

08. Game Objects (17:15)

09. Events (09:00)

10. Camera (06:11)

11. Item Pickups (19:00)

12. Inventory HUD (10:21)

13. The Ready Method (04:00)

Part II: Extended (Exclusive to Gumroad)

14. The Exit Object (05:25)

15. Changing Levels (19:34)

16. Starting Position (08:03)

17. NPCs (10:54)

18. Font Text Boxes (10:28)

19. Sprite Text Boxes (17:58)

20. Typewriter (09:01)

21. Input Actions (12:16)

22. NPC Text Portraits (11:27)

23. Story Flags (14:48)