Multiple sprites for sprite.input.boundsSprite

[in mono]

Hey there.

 

I'm stuck with the following problem: I have a game board and some tiles on it. I want to constrain the tiles' movement to a certain paths only. That path is in this case drawn by the red rectangles in the example (which are each a separate sprite), but the problem is that I can only assign one sprite to sprite.input.boundsSprite. I tried adding the other sprites to the first one as children (and adjusting their position accordingly), but that didn't change anything. If I draw all the rectangles to a single sprite, it won't work either as it will only get its outer bounds (and won't take into account the "holes" in this cage).

 

Here's the example.

 

There's only one tile for the sake of the example and it is constrained only to the first rectangle.

 

Any help is greatly appreciated. I might also consider another approach that I may be able to implement. I've also tried other stuff like not using Phaser's InputHandler and implementing drag input myself, but that didn't work reliably. I feel that this example is the closest thing to what I expect to happen, I think that I'm just missing something very obvious.

Thanks.

[drhayes]

I would not use the physics system to check for this. If the paths for the tiles really is constrained in this way you're probably better off creating a bunch of JS objects that have these properties, move those, then use the Phaser game as a "view" on that simulation rather than smooshing it all together using Phaser concepts.

 

I'm not sure I'm explaining it right. You want a tile to be constrained to a path and you're trying to get Phaser to do the work for you using a combination of Sprites and some kind of physics. It would be much simpler to write this code yourself using a bunch of plain JS objects that get updated on the timestep. You can then move the Phaser sprites in response to whatever these JS objects do during update... such as move on these predefined tracks.

[in mono]

Well, as far as I know, the same concept (bounds checking) is used in physics simulation as well (for stuff like collision detection), but that's rather just a coincidence - I'm not using any physics at all and this is more related to the input.

 

Edit: just came up with something that basically works and just needs some refinement. Here it is: in the update loop I'm checking for how many of these bounds sprites contain the currently dragged tile's current position and I store these sprites in an array in that tile. That array is emptied at the beginning of each update loop (so it would contain 2 sprites at most); at the end of the loop (after the checks), if the array has length of 2, I release the tile's boundsSprite, otherwise, if length === 1, I use the only sprite in the array as boundsSprite.

 

P.S. I had tried something similar before, but instead of using boundsSprite, I was using sprite.input.allowHorizontalDrag = false (or the same for vertical drag) and manually setting x or y. It was close to working, but in some cases it made the sprite recursively jump between two positions.

[drhayes]

Ah, okay: I hadn't seen boundsSprite before. I see what you mean about it not being physics related.

 

I think what I'm saying still applies, though. Don't use "boundsSprite". Instead, create a getter/setter on your Sprite's x and y properties that enforce the paths you want since it's more complex than having just one rectangular bounds.

 

e.g.

Object.createProperty(this, 'x', {  get: function() {    return this.position.x;  },  set: function(newValue) {    // If newValue isn't along path don't set it.  }});

Or something?