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