Game Development in JS/TS - The Complete Guide (w/ Phaser 3)
Master game dev with Javascript/Typescript and Phaser 3. Create popular browser games from scratch. Publish on Facebook.
What is Phaser?
Phaser is a framework for creating HTML-based games in Javascript. It’s very simple to use and get started with. It provides a full set of features to create professional games ready to be published on different platforms. Such as Facebook Instant Games, IOS, or Android platforms.
What is in the course?
During this course, you will acquire hands-on experience in developing three games entirely from scratch. The games include a clone of Flappy Bird, a well-known Dino game from Google Chrome, and a custom Platformer game. No shortcuts will be taken throughout the course, ensuring a comprehensive understanding of the development process. The curriculum encompasses JavaScript, with an added section dedicated to creating a game using TypeScript.
This course is designed to teach you how to create your own games from scratch using Javascript and the Phaser framework. Through a series of practical exercises, you will learn how to develop games that are engaging, challenging, and fun. By the end of the course, you will have created your own games that can be published on Facebook Instant Games.
The course will cover a range of important concepts in game development, including how to initialize the Phaser Game, manipulate physical concepts like gravity and velocity, create and recycle game objects, and use multiple scenes like menu, score, pause, and play. You will also learn how to create difficulty systems and keep track of scores.
In addition to these foundational concepts, the course will also teach you how to create more complex games like platformers. You will learn how to use the Tiled editor to design maps and levels, create different types of attacks like melee and projectile attacks, and animate game objects like characters and enemies. We will also cover advanced concepts like Raycasting, which will allow you to detect enemies and traps, and create a health system that triggers game over when health reaches zero.
The final project of the course will be to create a multi-level platformer game. You will learn how to unlock levels and display credits once the player reaches the end of the game. Throughout the course, you will gain valuable experience that can be applied to other game development platforms like Unity or Unreal Engine.
In conclusion, this course offers an extensive and practical introduction to game development with Javascript and the Phaser framework. Whether you're a beginner or an experienced developer, you will gain valuable insights and skills that will enable you to create your own engaging and fun games.
Minimal Javascript or other programming language knowledge
Section Introduction
FREE PREVIEWInit Project Error Fix
Init Project
Inspect App
Creating Phaser App
Displaying image
Origin Points
Create Sprite
Velocity
Gravity
Moving back and forth
Flapping feature
Restarting the game
Credit the authors
Place Pipes
Pipe Vertical Distance
Pipe vertical position
Render Multiple Pipes
Place pipe refactor
Pipe Group
Get right most pipe
Recycle pipes
Play Scene
Shared Config
Moving all code to play scene
More refactoring
Add collider
Pause game physics
World bound colliders
Restart the game
Keep Score
Keep Best Score
Pause button
Pausing the game
Menu Scene
Preload Scene
Optimization in Scenes
Base Scene
Menu items
Setup menu events
Navigate to correct scene
Best Score
Back button
Pause Scene
Resume the game
Resume event
Count down
Fixing the flap
Adding difficulties
Increase difficulty
Bird Spritesheet
Play bird animation
Game finished
Section Intro
FREE PREVIEWInit project
Add and inspect assets
Create more scenes
Add parts of the ground
Game height and types
Create Player
Types and modules
Make Dino Jump + Namespace
Adds gravity to player
Trigger contact
Player class
Update loop
Player Jump Done
Move Trigger Down
Roll out the ground
Push player to the front
Play run animation
Set texture while jumping
Is game running check
Game scene type
Fix first jump display
Spawn obstacle prep
Spawn obstacle
Preload config
Add obstacle speed
Remove obstacles after passing bounds
Move the ground
Collide with obstacle
Handle dino loose
Display Game over text
Display game over container
Handle Restart Click
Code cleanup
Restart the game
Get dino down
Play down animation
Spawn enemy birds
Enemy anims + Small improvements
Display clouds
Display score text
Keep score value
Display score value
Game speed modifier
Increase game speed
Create highscore text
Compute high score
Add tween to score text
Jump sound
Hit sound
Progress Sound and game done
Section Introduction
FREE PREVIEWInit Platformer Game
Tiled version
Tiled Explanations
Create your first map
Add map to the game
Layer Refactor
Add Player
Platform as the layer collider
Adds Collidable layer
Section Introduction
FREE PREVIEWHandle Player Movements
Create player class
Player class preUpdate
Player Update Event
Running animation
Idle animation
Switching the animations
Jumping
Double Jump
Play Jump Animations
Mixins
Function to init player colliders
Map offset
Setup camera
Player Zones
Player Spawn Point
Create end zone
End zone overlap
Section Introduction
FREE PREVIEWCreates a enemy
Enemy body size
Player body size
Create multiple enemies
Enemy super class
Enemies group
Birdman anims
Section Introduction
FREE PREVIEWDraw the line
Draw the line in real time
Check tile hits
Colliding tile color
Add raycast on the enemy
Detect the platform in raycast
Optimize performance in raycasting
Turn with the enemy
Fixing direction
Max patrol distance
Small Refactor of patrol
Add Steepnes to raycast
Section Introduction
FREE PREVIEWPlayer takes a hit
Bounce off
Set timeout to set velocity
Timed Event
Delay call + Debug
Animation tween
Section Introduction
FREE PREVIEWStarting Health Bar
Display Health Bar
Drawing Correct Position
Display healthbar on correct position
Display White Background
Display Green Health
Decrease the health
Healthbar scaling
Section Introduction
FREE PREVIEWProjectile
Destroy Projectile
Projectiles Group
Fix the projectile
Correct direction of projectile
Centering the projectile
Projectile Cooldown
Throw anim
Projectile collides with enemy
Section Introduction
FREE PREVIEWDelivers hit
Sprite Effect
Destroy the effect
Place Effect on update
Effect Manager
Correct effect position
Play enemy hurt effect
Terminate the enemy
Cleanup enemy instance after terminate
Section Introduction
FREE PREVIEWMelee Weapon
Sword anim
Hide the animation
Update hit position
Delivers melee hit
Delay the attack
Create new enemy
Adjusting enemy body
Section Introduction
FREE PREVIEWShoot projectiles with enemy
Direction of enemy
Projectiles animations
Get hit by enemy projectile
Delivers hit when player hit
Sliding feature
Getting sliding done
Fix deliver hit
Section Introduction
FREE PREVIEWCollectables
Adds overlap on diamond
Diamond Shine anim
Diamond tween
Collectable group
Get layer properties
Get object properties
Keep track of the score
Creates Hud
Add more items to Hud
Add image to container
Updates the score
Add Traps
Deal damage with trap
Correct bounce off
Section Introduction
FREE PREVIEWEvent emitter
Restart the game
Restart when falling
Create BG
Sky Image + Tileset
Parallax Effect
Load multiple levels
Switch between levels
Menu Scene
Levels Scene
Back button in play
Credits Scene
Add theme music
Section Introduction
FREE PREVIEWSound effect
Running sound
Create FB App
Start game in FB env + Loader
Set FB env variable
Deploying the app
Course Finish
Filip Jerga
Every video contains a discussion where you can create a post describing an issue. The instructor responds usually within 1 business day.
Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture, just download the correct version of the project attached to the lecture resources.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now