Aligning Sprites in a group into a grid in phaser ce with group.align
If you have a collection of sprites in a phaser ce project and you want to align them into a grid, it is not to hard to just do it by working out a method. However why bother with that when there is a method that is part of the group class itself? There is of course group.align that can be used to do this, and it does it fairly well with some nice features that can be used to tweak things a bit. Never the less in this post I will be writing about some examples that have to do with aligning sprites, and other display objects in a group in phaser ce.
1 - what to know
1.1 - This is a phaser ce 2.x post
In this post I am using phaser community edition 2.11.0
2 - Basic example of group.align to arrange text objects
For a basic example of group.align I put together an example that aligns a bunch of text objects into a grid. Not the most interesting example but will serve fine as a quick simple example. After I create the group, and add some text objects to it with group.add I then pass the grid tile width and height, as well as the pixel width and hight as the first four arguments. Then I can also define how the display objects are to be aligned within there space.
This is a great way to quickly align sprites and other display objects such as these text objects into a grid. In many cases though it might be better to go with tile maps as a way to go about doing this.
3 - Conclusion
So it is nice that phaser includes this method for aligning display objects into a grid, but it is not so hard to do so with just some plain old vanilla js code. If you have any questions, or would like to see some more examples of this aspect of phaser ce development be sure to let me know in the comments, and thanks for reading.