Depth issue with isometric plugin

[julacariote]

Hello,

 

I work on a project using @lewster32's isometric plugin. By the way, thank you very much lewster32 for this, it's really a huge add-on to Phaser .

 

I have an issue with the topological sort: as you can see on the screenshot, the robot sprite should be drawn on top of the switch. I don't know what I'm doing wrong, could anyone help me?

 

All the sprites used here are from separate pictures and the sprites edges are the same as the pictures (I mean there is no blank area in the pictures except in the corners).

 

 

Thanks!

 

The code:

window.onload = function() {	var game = new Phaser.Game(480, 260, Phaser.AUTO, 'test', null, true, false);	var BasicGame = function (game) { };	BasicGame.Boot = function (game) { };	var isoGroup, isoGroup2, tilesMap, tilesMap2;	var TILE_SIZE = 33;	BasicGame.Boot.prototype =	{	    preload: function () {	        game.load.image('tile_floor', 'assets/rust-sprites/tile_floor.png');	        game.load.image('alt_robot', 'assets/rust-sprites/enemy_resized.png');	        game.load.image('switch', 'assets/rust-sprites/tile_power_supply.png');	        game.load.image('block', 'assets/rust-sprites/tile_block.png');	        game.time.advancedTiming = true;	        game.plugins.add(new Phaser.Plugin.Isometric(game));	        game.iso.anchor.setTo(0.5, 0.25);	    },	    create: function () {	    	// the floor	        isoGroup = game.add.group();	        this.spawnTiles();	        // elements on top of the floor (red switch, blue blocks and the bot)	        isoGroup2 = game.add.group();	        this.spawnTiles2();	        // -26 is to center the bot in the middle of a floor tile	        this.bot = game.add.isoSprite(	        	TILE_SIZE * 3 - 26,	        	TILE_SIZE * 5 - 26,	        	0, 'alt_robot', 0, isoGroup2	        );	        this.bot.anchor.set(0.5, 1);	        game.iso.topologicalSort(isoGroup2);	    },	    update: function () {	        game.iso.topologicalSort(isoGroup2);	    },	    render: function () {	        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");	    },	    spawnTiles: function () {	    	tilesMap = [	    		[0,0,0,0,0,0],	    		[0,0,0,0,0,0],	    		[0,0,0,0,0,0],	    		[0,0,0,0,0,0],	    		[0,0,0,0,0,0],	    		[0,0,0,0,0,0],	    	];	        var tile;	        for (var j = 0; j < tilesMap.length; j++) {	            for (var i = 0; i < tilesMap[j].length; i++) {	                if(tilesMap[j][i] == 0) {	                     tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, 0, 'tile_floor', 0, isoGroup);		        }		        tile.anchor.set(0.5, 1);	            }	        }	    },	    spawnTiles2: function () {	    	// 2nd layer, on top of the first one (height +16px)	    	var HEIGHT = 16;	    	tilesMap2 = [	    		[0,0,0,0,0,0],	    		[0,5,0,6,0,0],	    		[0,5,0,0,0,0],	    		[0,5,5,5,5,0],	    		[0,0,0,0,0,0],	    		[0,0,5,0,0,0],	    	];	    	var tile;	        for (var j = 0; j < tilesMap2.length; j++) {	            for (var i = 0; i < tilesMap2[j].length; i++) {	                if(tilesMap2[j][i] == 5) { 	                	tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, HEIGHT, 'switch', 0, isoGroup2);		        }	                if(tilesMap2[j][i] == 6) {	                	tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, HEIGHT, 'block', 0, isoGroup2);		        }		        if(tile) tile.anchor.set(0.5, 1);	            }	        }	    },	};	game.state.add('Boot', BasicGame.Boot);	game.state.start('Boot');};

[lewster32]

Looks like a bug to me! I'll look into this for you.

[julacariote]

Thank you very much lewster!

[lewster32]

Just out of interest, what happens if you put the blue block in place of the bot? It looks to me like in your sprite the bot is a little low compared to the rest of the tiles - remember that the bottom center of the bot should be at the same position as the blocks, so the isometric bottom of the bot should be the same distance from the bottom of the image as the isometric bottom of the blocks, like in the attached image: 

[julacariote]

The blue block appears in front of the red one but there is flickering. I will check on the tile size as soon as I get some free time.

[julacariote]

You're right, it's an issue related to the size of my sprite. It works now . Thank you!

 

[lewster32]

No problem, but thanks for raising it. It is an issue with topological sorting that should the objects intersect at all, they flicker - this should ideally be handled more elegantly.

[Hung.H]

Hi, 

I think I'm having similar problems to those you were, but only when I'm moving the isoSprites.

debugging shows their depth may have changed. Do you have anymore insights into that?