Introduction to Phaser
Add to favorites
Make your first web game with Phaser 3
Play video
Create a Javascript Game
What is Phaser?
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers supporting Canvas and WebGL rendering. Phaser 3 is the new version of the Phaser Game Framework series. It includes a brand-new custom WebGL renderer designed specifically for the needs of modern 2D games. Phaser uses both a Canvas and WebGL renderer internally and automatically switch between them based on browser support. This allows for lightning fast rendering across Desktop and Mobile.
Why use Phaser?
Phaser is one of the best game engines for the Web using Javascript. It is a free framework that allows you to render your game across different platforms. The community is still growing, the documentation is really well explained and there's a ton of examples on their lab page to help you build your game. Phaser is powerful and easy to use if you want to start your own game.
Project
To follow this tutorial, you need a code editor of your choice. In this course, we are using Visual Studio Code. You also need the project template of Phaser 3, Tiled.
Setup
We will be using the Project Template It is a template using Phaser with all the dependencies already installed for you so you can start building the game as soon as possible.
First, we will choose a location for the folder. Open your terminal. Enter this code inside the terminal to access your Desktop or the location of your choice.
cd DesktopThen, we will clone the project template.
git clone https://github.com/photonstorm/phaser3-project-template.gitInstalling dependencies
Now, you have your project. Drag and drop the folder inside Visual Studio Code. Use the shortcut CONTROL + ~ to open the internal terminal. Enter these code. You need to install the dependencies of Phaser that we need to create our game.
npm iPhaser is already installed but, just to be sure, enter this command in your terminal to install the latest version of Phaser 3.
npm i phaserLocal environment
When you build your game, you need an environment for your code to be able to preview on your browser. This code will enable the local environment. When you close Visual Studio Code, you need to run this command to re-access it.
npm startAfter running the project, it will tell you if the compilation was successful or failed. Then, in your web browser, search this link.
Now, you see your project. This is the Project template of Phaser.
Settings
Let's have an overview of the Project. The first file is index.html, it contains all the HTML and styling of the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="build/project.bundle.js" charset="utf-8"></script>
</body>
</html>Configuration
Inside the src folder, this code is the Phaser 3 basic template, you define the renderer, the configuration of the size of the game container, also the gravity of this world. In Phaser 3, games are structured around Scene objects. The scene has 2 functions.
import 'phaser';
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config)3 Main functions
The scene is defined with these 3 functions:
- function preload: Run 1 time. Loads up all the assets inside the scene like images and audio
- function create: Run 1 time. Position the assets that are already preloaded, animations, physics ...
-
function update: Run 1 time per frame, takes care of everything related to the game logic
function preload() { } function create() { } function update() { }Update Function
As you can see, there's no update function so let's create one. In the config, add to the scene an update parameter.
update: update,Also, create a new function for update.
function update() { }Then, let's use this new function. We will apply a transformation that runs over time to the logo. The transform will be a rotation. Declare the logo variable under the player and remove the var inside create function. Inside the update function, run the rotation action.
logo.rotation += 0.01Conclusion
In this section, we learned what Phaser 3 is and how to set it up. I hope you enjoyed the first step into making your javascript game.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Videos
ePub
Assets
Subtitles
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs
