Search the Community

First off, please take note that I'm not just new to this forum, I'm new to phaser in general. I know a lot of people had z-ordering issues before. I've read about them. And most of the replies amount to "use the built-in sorting system." Which is great... if or when it works. However, I haven't seen anything that approaches my code, so I'm not entirely sure what to do. And boy does it produce some unique issues when the group sort is applied. There is one difference between the samples I see online and my code: I don't use +/-x and +/-y to move my character; instead, I use tween. This is so I can have a "snap to tile". Without further ado, my (mess of a) code: class Gameplay extends Phaser.State { create() { this.backgroundGroup = this.game.add.group(); this.mainGroundGroup = this.game.add.group(); this.foregroundGroup = this.game.add.group(); // GET MAP this.mapFile = this.game.cache.getJSON('protomap'); // SETUP GRID AND WORLD this.colCount = this.mapFile.columns; this.rowCount = this.mapFile.rows; this.game.world.setBounds(0, 0, (this.colCount * CONST.TILESIZE), (this.rowCount * CONST.TILESIZE)); this.grid = new Grid(this.game, this.colCount, this.rowCount); this.grid.x = 0; this.grid.y = 0; this.mainGroundGroup.add(this.grid); // SETUP OBJECTS this.spawnManager = new SpawnManager(this.game, this.grid, this.backgroundGroup, this.mainGroundGroup, this.foregroundGroup, this.mapFile); // SETUP PLAYER this.player = this.spawnManager.player; this.game.camera.follow(this.player); } update() { this.mainGroundGroup.sort('y', Phaser.Group.SORT_ASCENDING); this.player.z = this.player.currentTile.z; } } class Grid extends Phaser.Group { constructor(game, p_columnCount, p_rowCount) { super(game); game.add.existing(this); this.game = game; this.columnCount = p_columnCount; this.rowCount = p_rowCount; this.gridTiles = []; this.grid2DArray = [[]]; for(var i = 0; i < this.rowCount; i++) { this.grid2DArray[i] = []; for(var j = 0; j < this.columnCount; j++) { var gridTileObj = new GridTile(this.game, (CONST.TILESIZE * j), (CONST.TILESIZE * i + yAnchorOffset), zArray, j, i); this.add(gridTileObj); this.gridTiles.push(gridTileObj); this.grid2DArray[i][j] = gridTileObj; } } } } class SpawnManager { constructor(game, grid, back, main, fore, mapFile) { this.game = game; this.grid = grid; this.main = main; this.mapFile = mapFile; this.playerStartX = 0; this.playerStartY = 0; this.playerStartTile = null; this.initializeFloor(); this.initializeObjects(); } initializeFloor() { for(var i = 0; i < this.mapFile.floors.length; i++) { if (this.mapFile.floors[i] === CONST.TILE.BASE.FLOOR) { var gridTile = this.grid.getTileAtIndex(i); gridTile.tileBaseObj = new Floor(this.game, gridTile.x, gridTile.y, null, gridTile); gridTile.tileBaseType = CONST.TILE.BASE.FLOOR; } } } initializeObjects() { for(var i = 0; i < this.mapFile.objects.length; i++) { if (this.mapFile.objects[i] === CONST.TILE.OBJECT.WALL) { var gridTile = this.grid.getTileAtIndex(i); if (gridTile.tileBaseObj) { var wall = new Wall(this.game, gridTile.x, gridTile.y, null, gridTile); gridTile.tileBaseObj.addObject(wall, CONST.TILE.OBJECT.WALL); gridTile.tileBaseObj.z = 2; } } else if (this.mapFile.objects[i] === CONST.TILE.OBJECT.START) { var gridTile = this.grid.getTileAtIndex(i); if (gridTile.tileBaseObj) { var startObj = new FloorObject(this.game, 'gridSampleStartPoint', gridTile, null); gridTile.tileBaseObj.addObject(wall, CONST.TILE.OBJECT.START); gridTile.tileBaseObj.z = 1; } } else if (this.mapFile.objects[i] === CONST.TILE.OBJECT.END) { var gridTile = this.grid.getTileAtIndex(i); if (gridTile.tileBaseObj) { var startObj = new FloorObject(this.game, 'gridSampleEndPoint', gridTile, null); gridTile.tileBaseObj.addObject(wall, CONST.TILE.OBJECT.END); gridTile.tileBaseObj.z = 1; } } } this.player = new Player(this.game, 'prohyasIdle', this.playerStartTile); this.player.z = 3; this.main.add(this.player); } } With the above code, the player doesn't actually spawn on top of anything. It's firmly behind everything. Changing the sort('y', Phaser.Group.SORT_ASCENDING) into sort by Z, or by ascending or descending, doesn't really change anything. I've tried moving the this.main.add(this.player) from SpawnManager into the main Gameplay class - no dice. About the only thing that seemed to improve it was to outright remove the sort function, which leaves me with a player that does spawn on the tiles, but is located behind every other object. Is there anything else I can try?

@ivan.popelyshev I have tried to use pixi-display plugin in my project to add sprites dynamically in runtime. But I am confused with z-order's ordering. In my understanding, the element with higher zOrder should be placed on the top and the one with smaller zOrder should be underneath other elements with higher zOrder. But in this example: zOrder example, the one with higher zOrder is placed at the back. But negative value zOrder elements always under positive value zOrder elements. So when I use pixi-display to create new sprite and want to place it underneath the previous sprite, I need to give it a z-order that is higher than the previous one, is that correct? This is very confusing. In my test, the elements with positive value z-order are also under the elements with negative value z-order.

This seems like a simple z-order or positional issue. But I have a simple top down shooting example, and I want to have a player at the bottom which can rotate in place and shoot. Now overall the example is working. But the problem I'm having is the bullets are above the player sprite location. In my test case, I have boxes, and the bullets are originating from the center anchor point of my sprite. I'm trying to figure out how I can hide that by moving the player above the bullets, or if possible reposition the firing to the front of the player. My initial test was to adjust the Y, but that doesn't work when the sprite rotates... Is there some sort of local coordinate system I should use for position the origin of the shots? Here's my current example using Phaser Sandbox: http://phaser.io/sandbox/LsJAGKsr In the sandbox demo it's only slightly noticeable, my local test with boxes, it's more evident.