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 the steps to install and configure Phaser using NPM, and leverage Vite's hot module reloading and development server for a smooth and efficient dev environment.
Phaser config code:
const config = {
type: Phaser.AUTO,
parent: 'game',
width: 1920,
height: 1080,
backgroundColor: '#2F2F2F',
scale: {
mode: Phaser.Scale.FIT,
},
scene: LevelOne,
physics: {
default: 'arcade',
arcade: {
gravity: false
}
},
}
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 this video, we're going to learn how
to set up Phaser using Node.js and Vite.
0:00
Now, you may be wondering why we're having
another video to set Phaser up since
0:07
we already did that in the previous stage.
0:11
Well, in the previous stage
our game was quite small so
0:14
we didn't need many tools to manage it.
0:17
The game we're going to build in
this stage is a bit bigger and
0:19
we're going to be using multiple
files in our source code.
0:23
So we're going to need some sort of tool
to help put these files together, and
0:26
that tool is called Vite.
0:31
Vite is a fast and
efficient build tool for JavaScript,
0:34
which provides us with
a development server.
0:37
This means we're not going to need
Live Server for this project.
0:40
Vite also bundles multiple JS files
into one, which is useful for
0:44
when we want to deploy or
put our game live on the internet.
0:48
Let's go into our terminal and
set up a Phaser project with Vite.
0:53
We need to first make sure that
Node.js is installed on our computer.
0:59
To check that, you can simply run
this command node -v and hit Enter.
1:04
If you get a version number
then you're good to go.
1:10
If not,
1:13
you can check out the teacher's notes
below to learn how to install Node.js.
1:13
It's a really simple process.
1:18
Okay, with Node.js installed we can
create a new project using Vite.
1:20
Make sure you're in the part of your
machine where you want the game files to
1:26
be installed.
1:30
To check what directory you're
in you can press pwd and
1:32
hit Enter on a Linux machine and
this will give you your directory.
1:35
You can see I'm in a folder called
richardoliverbray which is inside a folder
1:40
called Users.
1:44
This is where my project
will be installed.
1:46
Next let's write the command
npm create vite@latest and
1:49
here we can give our
project a folder name.
1:54
Let's call it platform_game.
1:58
After that write -- space -- template
space vanilla and hit Enter.
2:02
If this is the first
time you're using Vite
2:11
then you may see this prompt
to install create-vite.
2:14
Press y and hit Enter to proceed.
2:18
What this will do is create a project
called platform_game, using the latest
2:22
version of Vite and the Vanilla JavaScript
template to scaffold the project.
2:27
If you want to know what other
templates you can use with Vite I've
2:33
put a link to the documentation
in the teacher's notes, cool.
2:36
Now that we've created our project,
let's follow the commands it suggests.
2:40
First, we'll change
directory to our project.
2:45
We can do that by typing in cd
platform_game and hit Enter.
2:48
This will put us in the correct folder for
our project.
2:54
Next, let's install the dependencies.
2:57
To do that we can type npm space i and
hit Enter.
2:59
I is a shorthand for install.
3:04
Since we're not installing a lot of
packages the installation process should
3:07
be very quick.
3:11
Sweet.
3:12
Now just before we run the dev
server let's go ahead and
3:13
install Phaser using npm.
3:17
Write the command npm i phaser and
hit Enter.
3:19
This shouldn't take too long to install.
3:23
Now that this is done
let's run the dev server.
3:26
Type the command npm run dev.
3:29
This should show the path to
where our game is being run.
3:33
We can see it's being
run in local host 5173.
3:36
Let's highlight this URL,
copy it by pressing command C and
3:39
paste it in our browser.
3:43
As you can see we have a page that says,
Hello Vite.
3:47
This is what we get from
the Vite JavaScript template,
3:50
a page with two icons and a button that
increments the count when it's clicked on.
3:53
Let's have a look at
the code that produces this.
4:00
As you can see,
there are a lot of files in here, and
4:04
most of these files would be really useful
if we were building a web application.
4:07
But since we're building a game there
are a few files that we don't need.
4:12
Let's first delete the style.css file.
4:16
We can do that by right-clicking
on the file and going to Delete.
4:21
Let's also delete the javascript.svg file,
and then the counter.js file.
4:25
Now, let's create a folder called
src which is short for source.
4:34
To do that, let's right click in
the Explorer and choose New Folder,
4:39
then type src in the prompt that shows.
4:44
Let's follow the same process to
create a folder called assets.
4:48
Finally, let's move the main.js
file into the source folder.
4:52
We can do that by clicking and
dragging on that file and
4:57
dropping it in the src folder.
5:00
Cool, we can keep the .gitignore file
since this will be useful if you want
5:03
to upload your project to GitHub.
5:07
Okay, let's open up
the index.html file and
5:11
change the title from Vite App
to something like Platform Game.
5:15
And we can also change the id of the div
on line 10 from app to game, nice.
5:21
This index.html file looks very similar
to the one we used in the previous stage,
5:27
however because we're using
npm to manage our dependencies
5:33
we don't need to add a script
tag to load the Phaser library.
5:37
Vite takes care of that for us.
5:42
Also, you may notice the script tag
here contains a type module attribute.
5:44
This means we can use the import and
5:50
export keywords in our JavaScript
files to import and export modules.
5:53
We'll talk a bit more about
this later in the course.
5:58
Before we leave this file
let's change the src attribute
6:02
in the script tag from
main.js to /src/main.js.
6:07
Cool, let's now open the main.js file.
6:12
Again, you'll notice all the code in this
file is great if we're building a web
6:18
application, but since we're building
a game we can get rid of all of this code.
6:24
Let's do that by pressing
Command A on the keyboard,
6:30
then pressing the Backspace
button to delete all the code.
6:33
Cool.
6:37
Now here we can add our Phaser
config code just like we did for
6:38
the game in the previous stage.
6:42
Go ahead and copy the config
variable from the teacher's notes and
6:45
paste it in here.
6:48
The majority of the code in this config
variable is similar to what we had in
6:50
the previous game, but
there are a few small changes.
6:54
You'll first notice that the width
property on line 4 contains a width
6:58
of 1920 instead of 1280,
which is what we had in the previous game.
7:03
The height property on line 5
also contains a larger number,
7:09
1080 instead of 720.
7:13
I've also added a background
color property to make
7:15
it easier to see the game.
7:18
And finally, we're loading in a class
instead of multiple functions for
7:21
the scene property on line 10.
7:26
Because we've already installed Phaser
using NPM we have access to its
7:28
type definition files.
7:33
These are the files that TypeScript will
use to determine the types of Phaser
7:35
methods and properties.
7:40
Although we're not using TypeScript for
this project,
7:42
the type definition files contain
a lot of useful information.
7:45
For example, if we were to hover
over the word AUTO on line 2,
7:50
you'll see it tells us that
auto has a type of number, but
7:55
it also tells us exactly what AUTO does.
7:59
This saves us from having to look through
the Phaser documentation to find out what
8:03
certain things do.
8:08
We can even hold on to the Option
key on our keyboard and
8:10
click on the word AUTO to go to
the actual type definition file
8:14
which shows us even more variables
under the face and namespace.
8:18
If Option click doesn't work for you,
you can try Command click instead.
8:24
In fact, throughout this course if I
suggest a shortcut using the Option key
8:29
with something else, if that doesn't
work try the Command key instead.
8:34
Depending on where you are in the world,
one of these options will work.
8:39
Okay, back to the config object.
8:43
Let's finish this off by using the config
to create a new game instance.
8:47
At the end of line 17, hit Enter a few
times and write new Phaser.Game.
8:52
Make sure game has a capital G,
then add parentheses and
8:59
inside the parentheses put in
a config object as an argument.
9:02
Next, let's import Phaser
to the top of this file,
9:07
so that this file has access
to the Phaser game class.
9:11
At the beginning of line 1, hit Enter
a few times and write import Phaser
9:15
from then add quotation marks and
write phaser but with a small p.
9:20
Sweet, as I mentioned earlier, we're using
a class called LevelOne for the scene
9:26
property instead of multiple functions,
but this class doesn't yet exist.
9:31
So let's go ahead and create it.
9:36
Let's open up the Explorer by pressing
command B on the keyboard and
9:38
in the source folder let's create
another folder called scenes.
9:43
To do that right click on the source
folder, then click on new folder, and
9:48
then write scenes.
9:52
In this folder,
let's create a file called LevelOne.js.
9:55
We can do that by right
clicking on the scenes folder,
9:59
then click on new file and
write LevelOne.js.
10:02
Make sure one has a capital O.
10:06
We're using uppercase here for
10:09
the name because we're going to be
exporting a class called LevelOne.
10:11
Inside this file,
let's write the following code.
10:15
Export default class LevelOne,
then add curly braces and hit Enter.
10:19
This class has access to all the methods
related to a Phaser scene, so
10:26
preload, create, update and much more.
10:30
In fact,
10:34
let's test that this is all working by
adding a console log to the update method.
10:35
On line 2, write update add parentheses,
then add curly braces and hit Enter.
10:40
Then on line 3 we're going to write
console.log, add parentheses and
10:48
in those parentheses we're going to add
a string of game space height as the first
10:53
argument and for the second argument we're
going to write this.game.config.height.
10:59
This is going to console log the height
number that we're using for the config.
11:05
Cool.
11:11
Right now, if we were to hover over
the update method or even the config or
11:12
height properties we don't
get any useful information.
11:17
This is because this particular file
doesn't know anything about Phaser.
11:22
We can change this by extending the
Phaser.Scene class to our LevelOne class.
11:27
Let's do that now.
11:33
On line 1, at the end of LevelOne,
11:35
write extends Phaser.Scene, perfect.
11:39
Now, if we hover over config on line 3,
or even height, or
11:44
even the update method, we get some
useful information about what it does.
11:49
This also supports the ability
to auto complete methods and
11:56
properties which saves us from
typing them out manually.
12:00
We're going to be doing this
a lot throughout the course.
12:04
Okay, before we test this code
there's one more thing we need to do.
12:08
Let's go to the main.js file, and
12:13
here we need to import the LevelOne
class we just created.
12:15
The NPM IntelliSense plugin
makes this really easy.
12:20
All we have to do is delete the word
LevelOne on line 12 and write it again.
12:24
This should show a pop up with LevelOne
as the first option loading in from our
12:31
scenes folder.
12:34
If we hit Enter, we'll see that LevelOne
is imported perfectly on line 2.
12:36
Now let's test this code in our browser.
12:42
We should see a dark grey rectangle
where our game is going to be.
12:45
Let's open the console in the dev tools
to check our game height is being logged
12:51
properly.
12:54
To do that, we can right click anywhere
on the page and go to inspect.
12:55
Next, let's click on the two gray
arrows next to the Elements tab and
13:00
click on console.
13:04
Cool.
13:06
We can see that our game height is
being console logged correctly.
13:07
But right now because it's in
the update class, it's been locked for
13:11
every frame, which is 60 times per second.
13:16
For testing purposes we only
want this to be logged once.
13:19
So let's change the code to support this.
13:23
Phaser provides us with
a method called init.
13:26
This method runs only once
when a scene is created.
13:29
This is useful for
setting up variables and
13:33
other things that we
only want to run once.
13:36
Let's change the update method to init.
13:39
Let's double click on the word update
on line 2 and change it to init.
13:42
Nice.
13:48
If we save the file and
13:49
go back to our browser we'll see that
the game height is only locked once.
13:50
Nice.
13:58
We can already see the benefits of using
Vite and NPM to create a game in Phaser.
14:00
In the next video, let's focus on
adding a main character to our game.
14:05
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