Calculate sprite size including children not working

fruvos · March 22, 2017

I'm experiencing some problems with calculating the size of a sprite once a number of child sprites are added to it, which I think is also having a knock on effect of preventing a boundsRect restriction once the sprite is made draggable from working correctly.

What I'm trying to achieve;

1. Create a Phaser game with width 225px and height 400px
2. Add a full-screen red section, 225px x 400px
3. Above the red section add a full-screen blue section, 225px x 400px
4. Below the red section, add a green section 225px x 400px
5. At this point I would expect the parent sprite to be 1200px tall, yet it reports as 32px tall from each of .height, .getBounds() and .getLocalBounds()
6. Make the container sprite draggable, and constrain it such that it can be dragged up and down but not beyond the top of the top blue section, not below the green section
7. It is possible to scroll beyond both top and bottom sections, showing the black background of the game. This should not be possible.

There are therefore two issues that need resolved;

1. Why does the parent sprite (containerSprite) continue to report a height of 32px, even when calling getBounds() and getLocalBounds()? How can I retrieve the height of the sprite accurately?
2. Why does the bounding rectangle once the sprite is draggable not work? this.containerSprite.input.boundsRect = new Phaser.Rectangle(0, -800, 225, 2000); I suspect this may be because of the negative y-coord in the rectangle - is this not supported? How would this alternatively be constructed?

Here is sample code which shows the problem, which is also available as a Plunker at https://embed.plnkr.co/UC8ys1aN2pd17cK4i6eN/

<html>

	<body>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>

		<script>

			var game = new Phaser.Game(225, 400, Phaser.AUTO, 'SpriteExample');

			var SpriteExample = function(){};

			SpriteExample.prototype = {

				create: function(){

					// Create a container to hold all game objects
					this.container = game.add.group();

					// Create an empty sprite to hold all our child sections
					this.containerSprite = this.container.addChild(game.make.sprite(0,0,null));
					this.containerSprite.anchor.setTo(0,0);

					// Empty sprite reports a height of 32px for some reason
					console.log("Empty sprite height " + this.containerSprite.height);

					// Add a red child section, 225px wide and 400px tall
					this.childOne  = game.add.graphics(0,0);
					this.childOne.beginFill(0xFF0000, 1);
					this.childOne.drawRect(0, 0, 225, 400);
					this.childOne.anchor.setTo(0,0);
					this.containerSprite.addChild(this.childOne);

					// Force a screen refresh to try and update bounds
					game.stage.updateTransform();

					// Log out the height, getBounds and getLocalBounds values for the container sprite
					// Each of these reports as 32px, even though the sprite now contains a child 400px tall
					// The expected height of this should be 400px
					console.log("One Section (height) " + this.containerSprite.height);
					console.log("One Section (getBounds().height " + this.containerSprite.getBounds().height);
					console.log("One Section (getLocalBounds().height " + this.containerSprite.getLocalBounds().height);

					// Add a second green child section, 225px wide and 400px tall below the red one
					this.childTwo  = game.add.graphics(0,0);
					this.childTwo.beginFill(0x00ff00, 1);
					this.childTwo.drawRect(0, 400, 225, 400);
					this.childTwo.anchor.setTo(0,0);
					this.containerSprite.addChild(this.childTwo);

					// Force a screen refresh to try and update bounds
					game.stage.updateTransform();

					// Log out the height, getBounds and getLocalBounds values for the container sprite
					// Each of these reports as 32px, even though the sprite now contains two children each 400px tall
					// The expected height of this should be 800px
					console.log("Two Sections (height) " + this.containerSprite.height);
					console.log("Two Sections (getBounds().height " + this.containerSprite.getBounds().height);
					console.log("Two Sections (getLocalBounds().height " + this.containerSprite.getLocalBounds().height);

					// Add a third blue child section, 225px wide and 400px tall above the red one
					this.childThree  = game.add.graphics(0,0);
					this.childThree.beginFill(0x0000ff, 1);
					this.childThree.drawRect(0, -400, 225, 400);
					this.childThree.anchor.setTo(0,0);
					this.containerSprite.addChild(this.childThree);

					// Force a screen refresh to try and update bounds
					game.stage.updateTransform();

					// Log out the height, getBounds and getLocalBounds values for the container sprite
					// Each of these reports as 32px, even though the sprite now contains three children each 400px tall
					// The expected height of this should be 1200px
					console.log("Three Sections (height) " + this.containerSprite.height);
					console.log("Three Sections (getBounds().height " + this.containerSprite.getBounds().height);
					console.log("Three Sections (getLocalBounds().height " + this.containerSprite.getLocalBounds().height);

					// Let's allow the sprite to be draggable and set it to be draggable on the vertical axis only
					this.containerSprite.inputEnabled = true;
					this.containerSprite.input.enableDrag(false);
			        this.containerSprite.input.setDragLock(false, true);

					// Define a bounds rectangle for the draggable object
					// This doesn't appear to work
					this.containerSprite.input.boundsRect = new Phaser.Rectangle(0, -800, 225, 2000);

				}

			};

			game.state.add("SpriteExample", SpriteExample);
			game.state.start("SpriteExample");

		</script>

		<div id="SpriteExample"></div>

	</body>

</html>

FakeWizard · March 23, 2017

I think it may be a bug with adding Phaser.Graphics in a group..For some reason it doesn't update Group's width and height. Have you tried testing it with sprites?

Not sure if this is related, but it's similar issue reported after upgrading Phaser to 2.3.0

fruvos · March 23, 2017

My actual use case is using Sprites as the children - I swapped them out for Phaser.Graphics in this example to make it easier to post to Plunkr without any CORS problems.

With reference to the thread you linked, my parent is a Phaser.Sprite rather than a Parent.Group (as I need to use Input events on it), so there may well be some differences in how the calculations work there too.

FakeWizard · March 23, 2017

For a second I thought Phaser.Graphics don't have their width, height properties set at all. But I've just tested it and turned out they do .

So you say this is also happening when you adding sprites as child to sprite?

Btw. you can also have input events working for sprites in a Phaser.Group - example

samme · March 23, 2017

Sprite width/height always refers to the sprite itself (texture size × scale), never its children, so that part is correct. 32 × 32 is the size of the default texture.

fruvos · March 23, 2017

2 hours ago, FakeWizard said:

For a second I thought Phaser.Graphics don't have their width, height properties set at all. But I've just tested it and turned out they do .

So you say this is also happening when you adding sprites as child to sprite?

Btw. you can also have input events working for sprites in a Phaser.Group - example

Yeah, it's happening with both Sprites and Graphics. The input events in Phaser.Groups example isn't quite what I'm looking for, as I'm looking for events on the Group itself (making the whole group draggable) rather than on all the Sprites within the Group (via CallAll) via input.enableDrag

3 minutes ago, samme said:

Sprite width/height always refers to the sprite itself (texture size × scale), never its children, so that part is correct. 32 × 32 is the size of the default texture.

Thanks for clarifying. My understanding is that getBounds() and getLocalBounds() should, however, include the children yet they're still returning 32.

Sign In

Calculate sprite size including children not working

Recommended Posts

fruvos

Link to comment

Share on other sites

FakeWizard

Link to comment

Share on other sites

fruvos

Link to comment

Share on other sites

FakeWizard

Link to comment

Share on other sites

samme

Link to comment

Share on other sites

fruvos

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity