197
Lectures
21
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 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! 


Requirements

  • Minimal Javascript or other programming language knowledge

Course curriculum

  • 1

    Introduction

  • 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

    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

  • 4

    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

  • 5

    Enemies

  • 6

    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

  • 7

    Player takes a hit

  • 8

    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

  • 9

    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

  • 10

    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

  • 11

    Melee Weapon

  • 12

    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

  • 13

    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

  • 14

    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

  • 15

    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 - 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