Discord Waitlist
Ciabatta's Revenge screenshot

Premium

Ciabatta's Revenge

Ciabatta's Revenge is a 48-video code-along tutorial series where we build action puzzle game mechanics from scratch about bread characters. These concepts can be composed to create unique games of your own.

Get this Series on Gumroad

Foundations

Setting up the Repository

1Setting up the Repository
04:02
Using Next JS

1bUsing Next JS
05:09
The Sprite Component

2The Sprite Component
18:01
Scaling the Game Viewport

3Scaling the Game Viewport
09:57
Rendering Sprites

4Rendering Sprites
06:15
Level Backgrounds

5Level Backgrounds
17:17
Refactoring with Recoil

6Refactoring with Recoil
08:43
The Level Class

7The Level Class
10:41
Game Object Classes

8Game Object Classes
11:31
Game Loop

9Game Loop
06:24
Rendering Objects

10Rendering Objects
03:15

Hero and Core Gameplay

Object Movement

11Object Movement
10:36
Direction Controls

12Direction Controls
08:32
Animating the Hero

13Animating the Hero
12:10
Room Limit Collisions

14Room Limit Collisions
03:56
Solid Wall Placements

15Solid Wall Placements
12:38
Object Layering

16Object Layering
03:33
Floating Flour Pickups

17Floating Flour Pickups
09:33
Flour Count Remaining

18Flour Count Remaining
06:18
Particle Celebration Effect

19Particle Celebration Effect
10:26
Goal Tile

20Goal Tile
07:20

Level Mechanics

Changing Levels

21Changing Levels
08:55
Keys, Locks, and Inventory

22Keys, Locks, and Inventory
07:42
Unlockable Doors

23Unlockable Doors
09:19
Water and Death

24Water and Death
08:27
Water Pickups and Swimming

25Water Pickups and Swimming
07:36
Enemy Bodies

26Enemy Bodies
12:37
Enemy Behaviors

27Enemy Behaviors
07:37
Roaming Enemy

28Roaming Enemy
05:16
Conveyor Belts

29Conveyor Belts
10:28
Ice Movement

30Ice Movement
10:10
Ice Pickup

31Ice Pickup
06:32
Fire

32Fire
03:16
Animated Tiles

33Animated Tiles
07:35
Switchable Doors

34Switchable Doors
07:45
Teleports

35Teleports
07:12
Thief

36Thief
06:07

Presentation

Camera

37Camera
10:18
Clock

38Clock
06:39
HUD Styles

39HUD Styles
09:31
Styled Popups

40Styled Popups
13:27
Inventory HUD

41Inventory HUD
04:08
Sound Effects

42Sound Effects
07:23
Ciabatta Boss Battle Movement

43Ciabatta Boss Battle Movement
19:28
Ciabatta Boss Battle Damage

44Ciabatta Boss Battle Damage
07:03

Bonus

Bonus: Planning in Figma 1

45Bonus: Planning in Figma 1
07:19
Bonus: Planning in Figma 2

46Bonus: Planning in Figma 2
04:59
Editing Levels

47Editing Levels
16:14