Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Explore how to set up a basic Phaser game by simply using a local server.
Download the project files
Phaser configuration for our breakout game:
const config = {
type: Phaser.AUTO,
parent: 'game',
width: 1280,
height: 720,
scale: {
mode: Phaser.Scale.FIT,
},
scene: {
preload,
create,
update,
},
}
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video,
0:00
we spoke about the game we're going
to build in this stage of the course.
0:01
In this video, we're going to
set up a simple phaser project.
0:05
Let's start off by opening
the project files.
0:09
This can be found in the teacher's
notes section below this video.
0:12
I've already downloaded and
extracted this folder, so
0:16
I'm going to open it in VS Code.
0:20
The project contains a folder called
assets and three files, one called
0:22
breakout.js, another index.html,
and one more called phaser.min.js.
0:27
Let's go through the assets folder.
0:32
The assets folder should only be used for
static assets,
0:35
such as images, videos, fonts,
or any other things like that.
0:40
Right now, it contains three images and
three audio files,
0:45
which will all be used for our game.
0:49
Let's move on to the index.html file.
0:51
The majority of this code is boilerplate
HTML code, and the only thing
0:56
that we really need to focus on is the div
with the id of game and the script tags.
1:01
The div with an id of game is
where our game will be rendered.
1:10
You can think of it as a container for
our game.
1:14
The first script tag is where
the Phaser library code gets loaded in.
1:18
Right now,
it's loading Phaser version 3.60.0.
1:23
However, I am aware that Phaser
version 4 is being worked on at
1:28
the time of recording.
1:32
So if you're watching
this video in the future,
1:34
the contents of the phaser.min.js
file may be different.
1:37
The third script tag is where we're
going to write all the code for
1:42
our breakout game.
1:46
If we go to the breakout.js file now,
we'll see that it's empty.
1:48
Let's write some code for it.
1:55
We'll start by setting some
configuration for Phaser so
1:57
it knows how to render our game.
2:01
To save you from typing everything in,
2:03
I've placed the configuration
code in the teacher's notes.
2:05
Go ahead and
copy the variable called config and
2:09
paste it at the top of the breakout file.
2:12
Now, let's close the Explorer on the left
by pressing the keyboard shortcut Cmd+B.
2:15
You can use the shortcut to toggle
the Explorer open and close.
2:21
Now, let's save this file and
go through what the code is doing.
2:26
The configuration variable is an object
that specifies the properties of the game.
2:30
You can call the variable
whatever you want, but to me,
2:35
config makes the most sense.
2:39
The type property is used
to specify a render type.
2:41
Phaser.AUTO lets Phaser choose
the best render type for
2:47
the user between WebGL and Canvas.
2:51
The parent property is used to
specify the DOM element where
2:54
the game gets rendered to.
2:59
If you remember, in the index.html file,
that was a div with an id of game.
3:01
This is how Phaser knows
where to render the game to.
3:08
The width property specifies
the width in pixels of the game, and
3:12
the height property specifies
the height in pixels.
3:16
Right now, the game is going
to be rendered at 1280 by 720.
3:19
The scale object is used to
set the scale of the game.
3:25
This contains a key called mode, which is
used to set the scale mode of the game.
3:30
And right now,
it's set to Phaser.Scale.FIT because this
3:36
scale's the game to fit
the parent element.
3:40
So if the parent element changes size,
the game will scale to fit that size.
3:44
The scene property is used to define
the scenes that will be in a game.
3:50
You can imagine a scene in Phaser
to be like a scene in a movie.
3:55
This could contain an array
of multiple scenes, but
4:00
since we're only going to have one scene
in our game, we're going to use an object.
4:03
Phaser has a few set function names for
scenes that do different things,
4:09
and we're going to use
three of them in our scene.
4:14
First is preload, this function is
called once at the beginning of a scene,
4:17
and it loads assets into memory.
4:23
Next is create,
this is called after the preload function,
4:25
and is used to create game objects.
4:30
And finally, update,
this is called on every frame, and
4:33
is used to update game objects.
4:38
Our game by default will run
at 60 frames per second.
4:40
So the update function will be
called 60 times every second.
4:44
Now that we have our configuration object,
4:50
we need to create a new
Phaser game instance.
4:53
This is responsible for
setting up all the Phaser's systems.
4:55
To do that,
let's write the following code.
5:00
Let's press Return a few times to make
some space and type new Phaser.Game,
5:03
open the parenthesis, type in our config
variable and end with a semicolon.
5:09
The Phaser.Game method is used
to create a new game instance.
5:15
This takes care of starting the game loop,
updating the game, and
5:20
managing the scenes.
5:24
Now, let's actually create
our scene functions, but
5:25
we'll leave them empty for now.
5:28
Let's create some space by
pressing Enter a few times and
5:30
write function preload with
parentheses and curly braces.
5:34
Next, we'll write function create with
parentheses and curly braces again.
5:37
And finally, we'll write function update
with parentheses and curly braces.
5:42
And that's it.
5:48
Let's see what this looks
like in the browser.
5:49
Let's open up the Explorer
by pressing Cmd+B,
5:53
right click on the index.html file,
and choose Copy Path.
5:57
Now, let's go to our browser,
and in our browser,
6:02
let's go to the address bar,
paste the Copy Path and hit Enter.
6:06
We should see a black rectangle
that matches the height and
6:11
width dimensions we set
in our config variable.
6:15
In the breakout.js file, this is where
our game is going to be rendered.
6:18
Nice, in the next video, we're going
to load some assets into our game.
6:23
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up