fruvos Posted March 22, 2017 Share Posted 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> Link to comment Share on other sites More sharing options...
FakeWizard Posted March 23, 2017 Share Posted 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 Link to comment Share on other sites More sharing options...
fruvos Posted March 23, 2017 Author Share Posted 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. Link to comment Share on other sites More sharing options...
FakeWizard Posted March 23, 2017 Share Posted 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 Link to comment Share on other sites More sharing options...
samme Posted March 23, 2017 Share Posted 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. Link to comment Share on other sites More sharing options...
fruvos Posted March 23, 2017 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts