Making a group of sprites in phaser with group.create
In this post on Phaser ce I will be covering some examples of making a collection of sprites using Group.create. There is also Group.add that can be used to add sprites, as well as many display objects as well, however in this post the emphasis will be just on sprites.
1 - What to know
2 - Example of many Sprites in a group, moving around in the group, that is also moving.
So In this example I will be making a group using the phaser.Group constructor, and then add a bunch of sprites to the group using the Group.create method. I will also be creating a very basic sprite sheet using canvas, which is a great way for making basic sprite sheets for simple examples like this.
2.1 - Making a simple block sprite sheet
So in order to make a bunch of sprites I will want to have a sprite sheet. In a real project, rather than a simple quick demo, I might want to load external assets, however for this post I will be using a method that involves canvas. This method when called will just make a simple single frame sheet of a red box, that will have a single key set by way of a string literal.
This will get the job done, for this example. In addition I can add to it to make it more robust if I choose to make a more interesting example for this. Which I might at some point of this post gets some traction.
2.2 - The create blocks method
So here is the method where I will be creating the sprites with Group.create. In This method I also made the beginnings of a Block class the instances of which will end up being the data object for each sprite created with Group.create. In this method I just have the Class in the body of the method itself, but if this project where to group more complex the class would of course be placed elsewhere.
This method will not make the group itself, but will accept a group as the old argument that is given to it.
When I use Group.create an instance of the sprite is what is returned, just like the plain old Phaser.Sprite container that could also be used as a way to make sprites, and then add to a group as well using the more versatile Group.add, but that is a matter for another post.
2.3 - The make block group helper
This method creates the actual group, and appends a data object to it that will be used to store some values that will be used for the movement of the group. It also calls the create blocks method mentioned above, passing the group as the single argument to it.
This wil result in a group that has everything I need to make the group do what I want it to do. In this example I am just moving the group back and forth, but it a real project the movement might be governed by something else a bit more complex.
2.4 - The phaser Game object instance, and single state object
So now it is time to get all of this working with a Phaser.Game instance, and a single state object. In the create method of the state object I call my helper that makes the block sheet, and then the helper that makes the block group. Then in the update method I can grab a reference to the group with the name that I assigned to it, and use the Group.forEach method to call the tick Block class method that I have made for each sprite in the group. I also Call the main tick method for the group itself as well.
This results in a bunch of sprites moving around randomly inside the dimensions of the group, and the group itself moving from side to side. For this simple example that is not all that interesting, but a greater potential for this exists where this can be a kind of unit where it is actually a collection of smaller units. There are many games that come to mind where A mechanic like this exists.