"Java Objects (Retired)" was retired on January 31, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
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