Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":2021,"date":"2017-10-03T23:01:02","date_gmt":"2017-10-03T23:01:02","guid":{"rendered":"https:\/\/phasergames.com\/?p=2021"},"modified":"2017-10-03T23:01:02","modified_gmt":"2017-10-03T23:01:02","slug":"using-alignment-grid","status":"publish","type":"post","link":"https:\/\/phasergames.com\/using-alignment-grid\/","title":{"rendered":"Using an Alignment Grid"},"content":{"rendered":"

Why I’m using an\u00a0Alignment\u00a0Grid<\/h3>\n

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.<\/p>\n

 <\/p>\n

The Old Way Using X and Y<\/h3>\n

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.<\/p>\n

I still need my X and Y!<\/h3>\n

I need a coordinate system that is standard across all devices and need to be able to use an x and y position system.<\/p>\n

The Align Grid Code<\/h3>\n

This test code will make a grid 3 columns by 9 rows and place the 3 ducks at random rows.<\/p>\n

If using chrome check different mobile sizes, and you’ll see there is a consistent layout regardless of screen size.<\/p>\n See The Demo<\/span><\/a>\n

Using The Code<\/h3>\n
var StateMain = {\r\n    preload: function() {\r\n        game.load.image(\"duck\", \"images\/duck.png\");\r\n    },\r\n    create: function() {\r\n       \/\/make an align grid\r\n        var grid = new AlignGrid(3, 9);\r\n        \/\/turn on the lines for testing\r\n        \/\/and layout\r\n        grid.show();\r\n        for (var i = 0; i < 3; i++) {\r\n            var duck = game.add.sprite(0, 0, \"duck\");\r\n            duck.anchor.set(0.5, 0.5);\r\n            \/\/pick a random row\r\n            var yy = game.rnd.integerInRange(0, 8);\r\n            \/\/place the duck at i for the column\r\n            \/\/and yy as the random row\r\n            grid.placeAt(i, yy, duck);\r\n        }\r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
The AlignGrid Class<\/h3>\n
class AlignGrid extends Phaser.Group {\r\n    constructor(cols = 3, rows = 3, par = null) {\r\n        super(game);\r\n        \/\/if not parent is passed then use the game\r\n        if (par == null) {\r\n            par = game;\r\n        }\r\n        \/\/cw cell width is the parent width divided by the number of columns\r\n        this.cw = par.width \/ cols;\r\n        \/\/ch cell height is the parent height divided the number of rows\r\n        this.ch = par.height \/ rows;\r\n        \/\/promote to a class variable\r\n        this.par = par;\r\n    }\r\n    \/\/place an object in relation to the grid\r\n    placeAt(xx, yy, obj) {\r\n        \/\/calculate the center of the cell\r\n        \/\/by adding half of the height and width\r\n        \/\/to the x and y of the coordinates\r\n        var x2 = this.cw * xx + this.cw \/ 2;\r\n        var y2 = this.ch * yy + this.ch \/ 2;\r\n        obj.x = x2;\r\n        obj.y = y2;\r\n    }\r\n    \/\/mostly for planning and debugging this will\r\n    \/\/create a visual representation of the grid\r\n    show() {\r\n        this.graphics = game.add.graphics();\r\n        this.graphics.lineStyle(4, 0xff0000, 1);\r\n        \/\/\r\n        \/\/\r\n        for (var i = 0; i < this.par.width; i += this.cw) {\r\n            this.graphics.moveTo(i, 0);\r\n            this.graphics.lineTo(i, this.par.height);\r\n        }\r\n        for (var i = 0; i < this.par.height; i += this.ch) {\r\n            this.graphics.moveTo(0, i);\r\n            this.graphics.lineTo(this.par.width, i);\r\n        }\r\n    }\r\n}<\/pre>\n\t
\n\n\t\t\n\t\t
\n\t\t\t