249
Lectures
27
Hours
Watch Intro Video

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.


Requirements

  • Minimal Javascript or other programming language knowledge

Course curriculum

  • 2

    Flappy Bird Clone

    • Section Introduction

      FREE PREVIEW
    • Init 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

  • 3

    Dino Game Clone

    • Section Intro

      FREE PREVIEW
    • Init 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

  • 4

    Platformer game intro

    • Section Introduction

      FREE PREVIEW
    • Init 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

  • 5

    Create a player

    • Section Introduction

      FREE PREVIEW
    • Handle 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

  • 6

    Enemies

  • 7

    Raycasting

    • Section Introduction

      FREE PREVIEW
    • Draw 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

  • 8

    Player takes a hit

  • 9

    Healthbar

    • Section Introduction

      FREE PREVIEW
    • Starting Health Bar

    • Display Health Bar

    • Drawing Correct Position

    • Display healthbar on correct position

    • Display White Background

    • Display Green Health

    • Decrease the health

    • Healthbar scaling

  • 10

    Projectiles

    • Section Introduction

      FREE PREVIEW
    • Projectile

    • Destroy Projectile

    • Projectiles Group

    • Fix the projectile

    • Correct direction of projectile

    • Centering the projectile

    • Projectile Cooldown

    • Throw anim

    • Projectile collides with enemy

  • 11

    Collide Effects

    • Section Introduction

      FREE PREVIEW
    • Delivers 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

  • 12

    Melee Weapon

  • 13

    Enemy Projectiles & Sliding

    • Section Introduction

      FREE PREVIEW
    • Shoot 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

  • 14

    Collectables and Traps

    • Section Introduction

      FREE PREVIEW
    • Collectables

    • 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

  • 15

    Sound Effects + More scenes

    • Section Introduction

      FREE PREVIEW
    • Event 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

  • 16

    Publishing the app

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    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.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Game Development in JS/TS - The Complete Guide (w/ Phaser 3)"

    $29.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now