Using an Alignment Grid

Why I’m using an Alignment Grid

I’ve been writing a lot of Phaser Code for an app for my company. I’ve been using percentages of the game’s width to be able to place the elements. This does work but it has been very time consuming to put together pop-up screens quickly. I needed to come up with something quicker and easier to use. Now you can use this method for placing sprites in a game, but it is most useful for placing static elements like buttons and text.


The Old Way Using X and Y

When I was using Flash, or any of my old software meant for developing for desktop I could simply place an element at an x and y coordinate and that would be fine. The problem lies in with mobile devices all being different sizes. I could place an element at an x position of 450 and it would be at different places on different devices.

I still need my X and Y!

I need a coordinate system that is standard across all devices and need to be able to use an x and y position system.

The Align Grid Code

This test code will make a grid 3 columns by 9 rows and place the 3 ducks at random rows.

If using chrome check different mobile sizes, and you’ll see there is a consistent layout regardless of screen size.

See The Demo

Using The Code

The AlignGrid Class

Leave a Reply