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":9210,"date":"2019-01-16T11:38:29","date_gmt":"2019-01-16T04:38:29","guid":{"rendered":"https:\/\/phasergames.com\/?p=9210"},"modified":"2019-01-16T11:40:58","modified_gmt":"2019-01-16T04:40:58","slug":"phaser-3-container-size-get-height-and-width","status":"publish","type":"post","link":"https:\/\/phasergames.com\/phaser-3-container-size-get-height-and-width\/","title":{"rendered":"Phaser 3 Container Size – Get Height and Width"},"content":{"rendered":"\n

How do you get the height and width of a container? If you’ve been playing around with Phaser 3 containers for a while, and are accustomed to using Phaser 2 groups, you may notice some familiar things missing. A few months ago I added some sprites to a container for building some user interface components. I needed to know the container size, so I could line things up properly and found that the width wasn’t set. Here is an example of what I mean.<\/p>\n\n\n\n

First let’s start by preloading some images, and placing them on the stage and adding them inside a container<\/p>\n\n\n\n

class SceneMain extends Phaser.Scene {\n    constructor() {\n        super('SceneMain');\n    }\n    preload() {\n        for (var i = 0; i < 4; i++) {\n            this.load.image(\"dot\" + i, \"images\/\" + i + \".png\");\n        }\n    }\n    create() {\n        this.container = this.add.container();\n        this.dot1 = this.add.image(100, 250, \"dot0\");\n        this.dot2 = this.add.image(400, 250, \"dot1\");\n        \/\/\n        \/\/\n        this.dot3 = this.add.image(100, 400, \"dot2\");\n        this.dot4 = this.add.image(400, 400, \"dot3\");\n        \/\/\n        \/\/\n        \/\/\n        this.container.add(this.dot1);\n        this.container.add(this.dot2);\n        this.container.add(this.dot3);\n        this.container.add(this.dot4);\n        \/\/\n        \/\/        \n        console.log(this.container);\n    }\n}<\/code><\/pre>\n\n\n\n
\"\"
Dots in a container<\/figcaption><\/figure><\/div>\n\n\n\n
Inspecting the container<\/h2>\n\n\n\n
When we look in the developer console where we logged out the container and locate the displayWidth and displayHeight properties, we can see that the values are 0. (You’ll need to click the …). <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Containers do not update their size, but it can be done manually. This can be done by using the setSize method of the container class. First, though we need to know what the size is.  If we are making something like a message box, or anything that has a square background we can use the background’s size for the container. If we have several sprites inside like the example above we need to use some simple maths to accomplish this.  <\/p>\n\n\n\n
Calculate the container size<\/h2>\n\n\n\n
To get the size we need to make a square out the sprites. We can do this by getting the extreme positions of all the child sprites of the container. By this I mean the topmost, bottom most, and the greatest left and right positions. <\/p>\n\n\n\n
getSize(con) {\n        \/\/set the top position to the bottom of the game\n        var top = game.config.height;\n        var bottom = 0;\n        \/\/set the left to the right of the game\n        var left = game.config.width;\n        var right = 0;\n        \/\/\n        \/\/\n        \/\/loop through the children\n        \/\/\n        con.iterate(function(child) {\n            \/\/get the positions of the child\n            var childX = child.x;\n            var childY = child.y;\n            \/\/\n            \/\/\n            \/\/\n            \/\/test the positions against\n            \/\/top, bottom, left and right\n            \/\/\n            if (childY > bottom) {\n                bottom = childY;\n            }\n            if (childY < top) {\n                top = childY;\n            }\n            if (childX < left) {\n                left = childX;\n            }\n            if (childX > right) {\n                right = childX;\n            }\n        }.bind(this));\n\n        \/\/calculate the square\n        var h = Math.abs(top - bottom);\n        var w = Math.abs(right - left);\n\n        \/\/set the container size\n        con.setSize(w, h);\n    }<\/code><\/pre>\n\n\n\n
Usage<\/h2>\n\n\n\n
In the create function call the following code<\/p>\n\n\n\n
 this.getSize(this.container);\n console.log(this.container);<\/code><\/pre>\n\n\n\n
Now when we log out the container, we can see the size has been set to 300 for the displayWidth and 150 for the displayHeight. <\/p>\n\n\n\n
<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
More Precision<\/h2>\n\n\n\n
 While this gives us a size, it is not an exact size because it doesn’t take the origin of the image into account. Let’s add in that part now.<\/p>\n\n\n\n
getSize(con) {\n        \/\/set the top position to the bottom of the game\n        var top = game.config.height;\n        var bottom = 0;\n        \/\/set the left to the right of the game\n        var left = game.config.width;\n        var right = 0;\n        \/\/\n        \/\/\n        \/\/loop through the children\n        \/\/\n        con.iterate(function(child) {\n            \/\/get the positions of the child\n            var childX = child.x;\n            var childY = child.y;\n            \/\/\n            \/\/\n            \/\/\n            var childW = child.displayWidth;\n            var childH = child.displayHeight;\n            \/\/\n            \/\/\n            \/\/calcuate the child position\n            \/\/based on the origin\n            \/\/\n            \/\/\n            var childTop = childY - (childH * child.originY);\n            var childBottom = childY + (childH * (1 - child.originY));\n            var childLeft = childX - (childW * child.originX);\n            var childRight = childX + (childW * (1 - child.originY));\n            \/\/test the positions against\n            \/\/top, bottom, left and right\n            \/\/\n            if (childBottom > bottom) {\n                bottom = childBottom;\n            }\n            if (childTop < top) {\n                top = childTop;\n            }\n            if (childLeft < left) {\n                left = childLeft;\n            }\n            if (childRight > right) {\n                right = childRight;\n            }\n        }.bind(this));\n        \/\/\n        \/\/calculate the square\n        var h = Math.abs(top - bottom);\n        var w = Math.abs(right - left);        \n        \/\/set the container size\n        con.setSize(w, h);\n    }<\/code><\/pre>\n\n\n\n
Testing the code<\/h2>\n\n\n\n
Now how can we make sure that this is getting the container size correctly? Let’s draw a square based on the positions, just to test it out. Add this code to the end of the getSize function<\/p>\n\n\n\n
this.graphics = this.add.graphics();\nthis.graphics.fillStyle(0xff00ff, .4);\nthis.graphics.fillRect(left,top,w,h);<\/code><\/pre>\n\n\n\n
\"container<\/figure><\/div>\n\n\n\n
More Testing<\/h2>\n\n\n\n
This works well for our dots that are already in a square, but will it work if we more the dots? That’s the beauty of using maths to find the container size. Let’s change how we are placing the dots. Let’s add the dots into random positions. Replace the code in the create function with the following code:<\/p>\n\n\n\n
create() {\n        this.container = this.add.container();\n        for (var i = 0; i < 4; i++) {\n            var xx = Phaser.Math.Between(200, 400);\n            var yy = Phaser.Math.Between(100, 500);\n            var dot = this.add.image(xx, yy, \"dot\" + i);\n            this.container.add(dot);\n        }\n        this.getSize(this.container);       \n}<\/code><\/pre>\n\n\n\n
And here is the result<\/p>\n\n\n\n
\"random
Random<\/figcaption><\/figure><\/div>\n\n\n\t
\n\n\t\t\n\t\t
\n\t\t\t