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
Discover how to set up a local server to fix CORS issues that we have from our assets.
Set up a local development server
- Launch a local development server with the Live Server VS Code extension
- Use the http-server packege and run
npx http-server . -o -c-1in your terminal. Making sure you are in thebreakout_gameproject folder in your terminal.
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 learned how
to load assets into our game.
0:00
In this video, we're going to learn
how to set up a local server so
0:04
that we can prevent any
cross origin errors.
0:08
We're going to use a VS Code
extension called Live Server.
0:12
If you have it already,
you can skip the installation step.
0:16
If you don't have it, then you can
just follow what I'm going to do.
0:20
First, let's navigate to
the Extensions tab in VS Code.
0:23
You'll see there some extensions
with a search bar at the top.
0:27
Let's search for
Live Server and hit Enter.
0:30
Let's click on the first
option with a purple logo and
0:34
you'll see some options appear
on the right-hand side.
0:37
Let's close the Explorer
by pressing Cmd+B.
0:41
You can see there are two blue buttons,
one, Disable, and another, Uninstall.
0:46
If you don't have Live Server,
the Disable button should say Enable.
0:52
Go ahead and click on that to install it.
0:57
You may have to restart your VS Code for
the installation to work.
1:00
Once you've installed it,
1:05
there should be a Go Live button in
the bottom right-hand corner of VS Code.
1:06
I've currently hidden that button
because I don't want to confuse you, so
1:11
let me enable it.
1:15
This is the Go Live
button I'm referring to.
1:16
If we click on this button, it should
create a new server at Port: 5500.
1:20
After that, Live Server may automatically
open this port in any browser.
1:27
But if it doesn't, don't worry, I can
show you how to navigate to it manually.
1:33
In our browser,
let's go to the address bar and
1:37
type in http://127.0.0.1:5500,
and hit Enter.
1:43
We should see that our paddle
image is being loaded correctly.
1:52
This means that we don't have any
cross origin errors anymore, nice.
1:56
One cool thing about Live Server
is that whenever a file is saved,
2:01
it will automatically reload the page.
2:05
Which means we don't
have to do that manually.
2:08
Okay, let's go back to our code and
finish loading the rest of our images.
2:10
Let's load in the ball image the same
way we loaded in the paddle.
2:16
Since the code is going to be very similar
to the way we loaded in the paddle,
2:21
let's duplicate line 20 by pressing
the keyboard shortcut Option+Shift+Down.
2:26
And on our new line,
let's change the word paddle to ball, and
2:32
we'll do the same in
the second argument as well.
2:36
Let's stay in the preload method and
preload our brick image as well.
2:39
Let's duplicate line 21 by pressing
Option+Shift+Down again, and
2:44
let's change the word ball to
brick in the first argument, and
2:49
we'll do the same in
the second argument as well.
2:53
Cool, that's all we need to do
in the preload function for now.
2:56
Let's add our ball to the scene
using the create function.
3:00
Again, we want our ball to be
in the middle horizontally,
3:05
but just above the paddle vertically.
3:09
So let's go ahead and
write the code for that.
3:12
Let's create a new line below line 25 and
write this.add.image,
3:16
open parenthesis, and we'll use our
config variable to get the width value.
3:21
So config.width, and
we'll divide that by 2.
3:27
This will place the ball in the center
of the screen horizontally.
3:31
For the second argument, we want the ball
to be slightly above the paddle.
3:36
So we're going to do config.height and
instead of minusing it by 50,
3:40
we'll minus it by 90, so
it'll be 40 pixels above the paddle.
3:46
Let's now tell Phaser which image you want
to add to the scene by adding the string
3:52
ball as the third argument.
3:56
And we'll close with a semicolon, sweet.
3:59
The code is almost good to go, but let's
refactor it slightly by destructuring
4:02
the config object so we're getting
the width and the height directly.
4:07
Let's create a new line below line 24 and
4:12
write const {} and
we want to extract the width and
4:16
the height as variables
from the config variable.
4:20
Now let's rename width to screenWidth.
4:25
And do the same with height by
renaming it to screenHeight.
4:28
So now in our code, wherever we've
used config.width or config.height,
4:36
we can replace it with screenWidth and
screenHeight.
4:41
So let's select the first
instance of config.width, and
4:45
we can select the next occurrence of this
string by pressing Cmd+D in VS Code.
4:49
Let's change both of them to screenWidth.
4:54
And we'll do the same with screenHeight
by selecting the first occurrence of
4:56
config.height, selecting the second
occurrence with Cmd+D and
5:01
then changing them both to screenHeight.
5:06
Perfect, let's now save this file and have
a look at what we've got in the browser.
5:09
We can see that the ball is
now showing up in our game and
5:15
it's slightly above our paddle, perfect.
5:18
Let's now add some bricks to the scene.
5:22
If you recall from an earlier video, we
need to add a lot of bricks to the scene.
5:25
27 to be exact.
5:29
This will require a lot of code if
we were adding them in one by one,
5:31
the same way we added the paddle and ball.
5:35
Luckily, Phaser provides a group method,
5:39
which makes it easy to
add multiple objects.
5:41
In the next video,
5:45
we'll learn how to use Phaser's grouping
features to add our bricks to the scene.
5:46
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