"Ruby Core and Standard Library" was retired on June 1, 2025.
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 to create groups of similar images in your game and understand the benefits of using groups to efficiently manage and manipulate multiple images with shared settings and properties.
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, we installed
the VS Code extension called Live Server
0:00
to help us load images into our game.
0:04
In this video, we're going to learn how
to use Phaser's grouping features to add
0:07
multiple bricks to our game.
0:11
Grouping in Phaser is similar to
grouping in something like Photoshop or
0:13
any other design software.
0:17
It makes it easy to manage and
0:19
manipulate multiple objects
as if they were one object.
0:21
As usual, to access grouping,
we'll need to use this keyword.
0:26
Let's create a new line under line 27 and
write the following code,
0:32
this.add.group with parenthesis and
a semicolon to close.
0:38
The group method takes
an object as an argument which
0:43
contains configuration options for
the group.
0:47
Let's add that now.
0:51
Let's create a new object and we're
going to give it the property of key.
0:53
The key is the name of the image that
we want to be used in this group.
0:58
In this case,
we want to use the brick image.
1:02
So let's type in brick.
1:04
The next property to add
is the repeat property, and
1:07
this specifies the number of times we want
to repeat the image after the first image.
1:11
So let's put a value of 8 here, and
this will give us 9 bricks in total.
1:17
Next, let's add a property called setXY.
1:23
This is an object that allows
us to set configurations for
1:27
the first image in the group,
including the X and Y coordinates.
1:31
Let's give it an x value of 115 and
a y value of 200.
1:35
Here, we're also going to
add the stepX property,
1:41
which is the distance between
each image in the group.
1:44
We'll set this to 120.
1:48
Perfect, let's now save this file and
see what it looks like in the browser.
1:50
Nice, as you can see, there's a line
of bricks at the top of the screen.
1:56
This is a great start, but
we need two more rows like this.
2:00
Let's go back to the code and add them.
2:04
To do this,
let's duplicate the first group.
2:07
We can achieve this by selecting
all the values in the group,
2:10
pressing Cmd+C to copy and
pressing Cmd+V to paste.
2:15
Then because we want this lower
than the first row of bricks,
2:19
let's change the y value from 200 to 140.
2:23
Let's press Cmd+V to paste
another row of bricks and
2:27
change the value from 200 to 80.
2:31
This will make it even
lower than our second row.
2:33
Now let's see the results in the browser.
2:37
Very cool.
2:40
This is exactly what we want.
2:41
Our game is starting to come together.
2:42
We can already imagine what it would
be like to move the paddle and
2:45
hit the ball into the bricks.
2:49
But there's a lot of duplication in
the code in order to create these bricks.
2:51
Let's go back into VS Code and
do some refactoring.
2:55
We can see that all the codes for
our three brick groups
3:00
are pretty much identical, the only
thing that changes is the y value.
3:04
So, we can create an array of numbers
that contain the y value for each group.
3:08
Then we can loop over this array
to create our three groups.
3:14
Let's do this.
3:18
Let's scroll up in this document and just
below our destructured config variables,
3:20
let's create a new constant
variable called brickGroupYValues.
3:27
This will equal an array with
three numbers, 200, 140, and 80.
3:32
Now we can use the array forEach method
to loop over each of these values and
3:39
create a group for each one.
3:45
Since we only need one group,
let's select the last two brick groups and
3:47
get rid of them by pressing
the delete button.
3:53
Now just below where we've written
the code to add the ball image,
3:56
let's write brickGroupYValues and apply
the forEach method by typing .forEach.
4:01
This is going to contain a callback
function with an argument of yValue.
4:08
And for now,
let's create an empty function.
4:14
In this callback function,
4:17
we want to create a group object which
has similar syntax to what we have below.
4:19
So let's copy our group objects and
paste it into our callback function.
4:23
Perfect, all we have to do now
is delete the value of 200 and
4:28
replace it with our yValue argument.
4:32
And that's it.
4:35
Let's save this file and
go to the browser.
4:37
And as we can see, we have the exact same
result as we did before with less code.
4:39
Nice, before moving on to the next
stage of game development,
4:44
we're going to have a short quiz to
test what you've learned so far.
4:48
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