Overlap Sprites on top of another

cocos2d-x JavaScript
1

I have a board with different tiles, set. Since this a board game i need pieces to go on those tiles. I’m trying figure out the most effecient way to get this done, i thought about adding a new layer for the board pieces. Not sure how this would be done because, i need to place the game pieces on specific tiles on the screen. and the tiles are generated by a loop. How can i add piece to be set on the the tiles or specific tiles.

      for (i=0; i<64; i++){
    	var tile = cc.Sprite.create(res.Tile_png);
    	this.addChild(tile,0);
    	tile.setPosition(x,y);
    	
    }
  // I was thinking of adding a new layer here for the pieces but not sure how to get it on specific tiles because the tiles are generated on a loop.
2

well, according to your code, all your tiles are at the same x,y location, so not sure what your are really trying to do!

But. If each tile has an x,y coordinate that is known (even if it is calculated in the loop) then you can calculate it for a sprite to put ‘on top’ of it.

e.g.

A chess board where each square us 32x32 pixels, then the pixel position of the square at (x,y) where x,y is 0-8 representing the relative position of the square (i.e. not the pixel position) is x32, y32

So you can create your pieces at the right location (no need, in fact, for a separate layer, though that might be a nice way to approach it).

3

@Maxxx does changing the z-order of Sprites during run time consumes… too much process? or consumes memory?

4

Short answer - no.

When the rendering process happens, items are rendered in z-order (so higher numbers are rendered last, ‘on top of’ lower numbers)

So in your case, your player pieces could have a higher Z-order to guarantee they are on top of a tile.