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
Learn how we can use a service like Netlify to deploy our game for others to play as well as looking at what improvements can be made to our game.
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, we added some music and
sound effects to our game.
0:00
In this video, we're going to learn
how to deploy our game to the web so
0:03
that we can share it with others.
0:07
But we're also going to talk about a few
improvements that can be made to our game.
0:09
Right now, we've been testing our
game using the Vite dev server.
0:14
This is great because it helps
test our game as we build it, but
0:18
it's not useful for
creating a final build of the game.
0:22
Luckily, Vite provides a script that can
prepare the game for its final build.
0:26
Let's take a look at
the package.json file.
0:31
We can see that there are three different
scripts in the script object on line
0:35
7, the first one is called dev, which is
what we've been using to run our game.
0:40
This starts up the Vite dev server.
0:45
The second one is called build, which is
what we'll use to create the final build
0:48
of our game, this will build the game and
put it in a folder called dist.
0:53
And the third one is called preview,
0:57
which is what we can use to start
a server just for the build of our game.
0:59
This will only serve the code from
the dist folder, so we can check that
1:04
the game is running properly before
deploying it to a web server.
1:09
Let's try the build
script in our terminal.
1:13
If you're already running the Vite dev
server, you can stop it by pressing
1:16
Ctrl C, this shortcut should work for
both Windows and Mac users.
1:21
Now let's run the build script,
in the terminal,
1:24
write npm run build, then hit enter.
1:29
Let's wait for the script to complete.
1:32
Don't worry too much about
the warnings you see here in yellow,
1:39
Vite is telling us that the minified
code is more than 500 kilobytes.
1:43
This means the site might be slow, but at
this moment in time, I'm not too worried,
1:47
because this is a game, users don't mind
waiting a bit longer for it to load.
1:52
Let's go back to the code.
1:57
Let's open up our file explorer and we can
see that there's a new folder called dist,
1:59
this contains all the files we'd
need to put onto a web server.
2:06
If we open it up, we can see it have
an assets folder and in this folder,
2:10
there's a JavaScript file
that starts with index.
2:15
This has combined all of our separate JS
files into one compressed JavaScript file.
2:19
But there's a problem.
2:25
Notice that none of our assets
are inside the dist folder,
2:26
we don't have any sound,
any music, any images or any data.
2:30
This is because by default
Vite will only look for
2:35
assets inside the public folder,
so you can see our vite.svg file
2:38
is inside the dist folder because
it was inside the public folder.
2:43
We can change it so that Vite looks for
files inside the assets folder,
2:48
instead of the public folder.
2:53
Let's start by creating a new file called
vite.config.js in the root of our project.
2:55
Let's right click on the space
under the package.json file and
3:02
create a new file called vite.config.js.
3:07
As you'd expect, this will be
a configuration file for Vite.
3:10
In this file, let's import
something called defineConfig.
3:15
On line 1, let's write import,
3:19
add curly braces and inside the curly
braces write defineConfig.
3:22
You'll see that our npm IntelliSense
plugin gives us the option to finish this
3:26
import.
3:31
So let's select the first
option it gives and
3:32
you can see our function
will be imported correctly.
3:35
DefineConfig is a helper function
provided by Vite that allows us to
3:38
create a configuration object,
we could create a config without it,
3:43
but this gives us some nice type
checking and autocompletion.
3:48
Now let's write our config.
3:53
At the beginning of line 3,
write export, default,
3:55
defineConfig, then add parentheses.
3:59
The defineConfig method takes
an object as an argument.
4:02
So let's add curly braces and hit enter.
4:06
Then on line 4, write publicDir,
which is short for
4:09
public directory, and
give it a value of assets and that's it.
4:14
If you want to know more about what
else you can configure in Vite,
4:19
I've put a link to all the options
in the teacher's notes below.
4:23
We're almost done, but there's one
more thing to change in our codebase.
4:27
When Vite creates a build of the project,
4:31
it moves all the static assets
into the root of the dist folder.
4:34
So because of that, we need to change
the path of our assets in the code.
4:38
Luckily we preload all our
assets in one place, so
4:42
this won't be too difficult to do.
4:46
Let's open the preload.js file.
4:49
Cool.
4:51
Let's double click on the word
assets anywhere in this file,
4:52
I'm going to do on line 27.
4:56
Then press Shift Command L to select every
occurrence of that word in this file,
4:58
and then press Delete nice,
5:04
we can also delete the slash that
was in front of the word assets.
5:06
Cool.
5:10
Now save the file and
let's go back to the terminal.
5:11
Let's run the build script again instead
of typing the full command to run
5:15
the build scripts,
5:19
you can just press up on the keyboard,
which will bring up the last command.
5:20
Then hit enter wait for it to finish
building and then let's go back to our
5:24
code and check if the files
are being put in the right place.
5:29
Okay, let's open up the file explorer and
5:33
we can see now that's in dist directory we
have more folders, data, images, music and
5:36
sound and if we open them up, we can see
then I'll contain the correct files.
5:42
Awesome, let's go back to our terminal and
5:47
run the preview script to
check if our game is working.
5:50
Let's write npm run preview and hit enter.
5:53
Okay, our preview server is running and
we can see we have a url to test
5:57
our game with, so,
let's check out this url in the browser.
6:02
Okay, we can see our game has loaded fine,
and if we move the character,
6:06
the sound is triggering correctly
even if we overlap an enemy.
6:10
We can also press R to restart and
everything works fine, nice.
6:14
To give your ears a break from hearing
the game sound, let's go back to the code.
6:18
The next thing to do is to go ahead and
deploy our game,
6:22
to do that we're going to use a service
called Netlify Drop, the link for
6:26
it is in the teacher's notes below.
6:30
Clicking on it should take you
to a site that looks like this.
6:32
In my opinion,
Netlify Drop is the quickest and
6:36
easiest way to deploy a static site.
6:39
All you have to do is to drag and
drop a folder into the circle or
6:42
click on the browse to upload link and
select a folder, once that's done,
6:46
this will deploy the folder
onto the Netlify service.
6:51
We don't have to sign up or create
an account, everything will just work.
6:54
Let's try it.
6:59
I'm going to click on
the browse upload link,
7:00
select the disk folder for
my game and click Upload.
7:03
If you see this alert box in your
browser as well go ahead and
7:07
click the Upload button.
7:11
Now our game is being
uploaded to their servers.
7:12
After a few seconds, we should see this
tick, and it gives us a link to our game.
7:19
It also prepares a screenshot for
what our game looks like, and
7:24
right now it just shows
the loading screen, which is fine.
7:28
Let's go ahead and
click on the link to test our game.
7:31
Okay, it starts by showing our loading
screen and a few seconds later,
7:35
our game is here, the music is working and
we can go ahead and play our game.
7:39
I can interact with the character,
collect a few coins and
7:44
even interact with an enemy.
7:47
[MUSIC]
7:49
If you can get this link in the address
bar and share it with anyone in the world,
7:51
and they can play our game,
wherever they are.
7:55
And this marks the end of the course.
7:58
I hope you had as much fun learning
to make a game in Phaser as I had
8:01
putting this course together.
8:04
Now if you're thinking you can make
some improvements to our platform game,
8:06
I encourage you to do so.
8:10
In fact I'm going to give you a few
suggestions of things that can be
8:11
improved.
8:15
The first improvement that could be
made is to have a level complete
8:16
screen similar to the game over screen.
8:20
This could be added when the player
collides with an exit and an exit can
8:23
be added to the end of every level even
if there isn't another level to go to.
8:28
The next thing that could be done is to
add a start screen to the game telling
8:33
the player how to play before they start.
8:38
We added a similar thing to the breakout
game in the previous stage.
8:41
You could also add a pause screen to
the game, which will stop the music and
8:46
the player when they press
the button on the keyboard
8:51
like escape this could function in
a similar way to the game over screen.
8:54
The enemies can also be animated
in the same way the player
8:59
has been animated when they're running.
9:03
There is a link in the teacher's notes
below that goes to the website where I got
9:06
the assets from and there's a sprite
sheet on that site with more enemies and
9:11
more frames for
the enemies which can be used in the game.
9:15
A feature could be added to the game
where the player has health,
9:19
so there could be three hearts
displayed in the top left or
9:23
right corner of the screen and
when the player collides with an enemy,
9:26
they lose a heart when all their
hearts are lost the game over.
9:31
The heart assets can also be
found from Kenny's website,
9:35
where I got the assets from.
9:39
The final suggestion I have for
improving this game is to add more levels,
9:41
but also to add levels that have a gap
in the floor, so the player has to
9:46
jump over the gap, this will make
the game more challenging and more fun.
9:51
I'm sure all my suggestions have
given you some ideas of your own.
9:56
And with that said, I'll let you loose
to go and make improvements to the game.
10:00
Have fun.
10: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