Untitled

<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>

// Code goes here

/* Styles go here */