Discord Waitlist

📣 📣 📣Coming Soon: a huge new course called JavaScript Game Development.

Join the waitlist here

Build Video Games from Scratch

120+ step-by-step coding video tutorials

Finally finish your gamedev projects

Ship your game for the world to play

Play Video Drew introducing Co-Op Mode

Featured Series

Get the whole bundle on Gumroad
Danger Crew Code Tour Action Multiplayer Ciabatta's Revenge Next.js Level Editor Front End Interview Bootcamp Canvas RPG Kit Pizza Legends Godot View All
Canvas RPG Kit

Canvas RPG Kit

In this series, we'll build a lightweight top-down game engine using only JavaScript and HTML Canvas. We'll use the systems to create common RPG features. You can build on top of this to make the game your own.

23 Videos

View Series Get Access
The Game Canvas

13:24

1. The Game Canvas

Premium

To start the project, we'll set up the project repository, create a canvas tag, and draw initial environment artwork to the screen.

Sprite Class

20:01

2. Sprite Class

Premium

Our game will require some semi-complicated drawing functions, so let's create a dedicated Sprite class to help manage the nuances of each drawing.

Game Loop

08:56

3. Game Loop

Premium

State and drawing updates will need to happen at a consistent rate. Let's set up a fixed step Game Loop to control the activity of each frame.

Keyboard Input

07:25

4. Keyboard Input

Premium

Now with a loop in place, we can wire up the keyboard to control the Hero and walk him around the map.

Grid Movement

11:14

5. Grid Movement

Premium

Some top-down games lock characters and objects to grid cells. Let's add that constraint to this project.

Walls

04:36

6. Walls

Premium

Our grid is working great, but the Hero can barge through trees, water, and walls. Let's designate those grid cells to be solid.

View all 23 videos ›
Action Multiplayer

Action Multiplayer

In this series, we're going to build a GBC style Zelda-like multiplayer game. We'll cover Zelda-ish character animations, movement, attacks, and enemies. We'll then create peer-to-peer connections with other players to bring the game online.

14 Videos

View Series Get Access
Project Basics

12:31

1. Project Basics

Premium

We'll quickly set up the repository, implement basic character movement and collisions.

Character Animations

10:46

2. Character Animations

Premium

Let's bring the characters to life by giving them animated sprite appearances.

Camera

04:25

3. Camera

Premium

Let's set up an easing camera system to follow our characters around the map.

Sword Action

18:01

4. Sword Action

Premium

Let's implement a Sword melee attack with animations and collisions.

Arrow Action

05:17

5. Arrow Action

Premium

Similar to the Sword, we'll add an Arrow projectile as a second attack.

Changing Skins

02:41

6. Changing Skins

Premium

Since this is multiplayer, identity is a big deal! Let's wire up multiple skins that can be used by characters.

View all 14 videos ›
Ciabatta's Revenge

Ciabatta's Revenge

In this series, we build an action-puzzle game with React. It's grid-based, action packed, and all about bread! We'll include many puzzle game features and the ability to edit levels in real time.

48 Videos

View Series Get Access
Setting up the Repository

04:02

1. Setting up the Repository

Premium

To kick off the project, we'll create a new blank React app and include Prettier for automatic code formatting.

Using Next JS

05:09

1b. Using Next JS

Premium

Next JS is another great starter kit for this project. In this video, we'll create a fresh instance of a Next JS app for building the game.

The Sprite Component

18:01

2. The Sprite Component

Premium

We're going to be rendering a lot of graphics to the screen, so let's create a reusable component to handle the job.

Scaling the Game Viewport

09:57

3. Scaling the Game Viewport

Premium

Pixel art is small by nature, but we can upscale the graphics to make the most of our device screen real-estate.

Rendering Sprites

06:15

4. Rendering Sprites

Premium

Now that we have a <Sprite /> component, we can render anything from our spritesheet to the game screen. We'll create a nice system for doing so.

Level Backgrounds

17:17

5. Level Backgrounds

Premium

We can create a dynamic grid of wall and floor tiles that pull from our spritesheet. We'll be able to configure each level with a custom size.

View all 48 videos ›
Pizza Legends Godot

Pizza Legends Godot

Let's use Godot 4 to create a top down Overworld setting. We'll put characters in a city that can interact with each other and enter buildings.

17 Videos

View Series Get Access
Project Setup

02:35

1. Project Setup

Premium

We'll create a new project in Godot and tweak the settings for our specific needs.

Main Scene

10:16

2. Main Scene

Premium

Let's set up the Main scene that our whole game will operate within. This is our foundation for everything else.

People

10:49

3. People

Premium

Let's add People game objects to the scene and be able to configure them in a variety of ways.

Control the Hero

14:45

4. Control the Hero

Premium

Now that we have People, we can designate a Hero that is controlled by the player.

Camera and Hero Spawn

07:05

5. Camera and Hero Spawn

Premium

We'll implement a camera system that follows the Hero as he walks around the maps.

People Animations

07:17

6. People Animations

Premium

Now that moving is working, let's make the game feel more polished by adding walking character animations.

View all 17 videos ›