Game Development in JS - The Complete Guide (w/ Phaser 3)
Start building your own games and publish them on Facebook. Learn how to create HTML5 games in Javascript with Phaser 3.
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 we are going to build?
In this course, you will learn how to create your own games from scratch in Javascript with the Phaser framework.
All concepts will be taught by creating real games which we are going to publish on Facebook Instant Games.
You will get an understanding of concepts you can use in any other game development platform like Unity or Unreal engine.
Now, let's introduce briefly games & concepts you are going to work on,
The first game will be a simple flappy bird clone. You will learn how to initialize the Phaser Game and how to use and manipulate physical concepts like gravity and velocity among many others.
We will show, how to create different game objects such as player and pipes blocking the way. You will learn how to re-use game objects so every time pipe will reach the start of the screen it will get recycled at the end.
We will create a difficulty system and we will keep track of the score. Our game will contain multiple scenes such as menu scene, score scene, pause, and play scene.
The second game will be more complicated. We will work on a platformer game where the main character will be able to jump on platforms. The main goal of the game will be to collect as many diamonds as possible, avoid or eliminate enemies and make it to the second level,
On the design of the map, we will be working in the Tiled editor. I will show you how to create different tile and object layers which we will later bring to life in our game.
You will learn how to create different types of attacks like melee attacks and launch projectiles. We will create different types of enemies and we will animate them.
We will work on a well-known detection concept called Raycasting which we will create completely from the scratch. The player will be able to receive damage from enemies & traps and when health will reach 0 or the player will fall off, game will be lost and restarted
Our game will have multiple levels that will be unlocked after the player will reach the finish line. Unlocked levels will be displayed in the level scene. Upon reaching the last level game will be finished and credits will be displayed.
Guys, that should be it from the preview. There is much much more covered in the lectures so I hope to see you in the course!
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 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