Jump to content

Depth issue with isometric plugin


julacariote
 Share

Recommended Posts

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).

 

post-6203-0-12164200-1414741648.png

 

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');};

post-6203-0-79646900-1414754445.png

post-6203-0-91681900-1414754445.png

post-6203-0-04940700-1414754446.png

post-6203-0-18907900-1414754446.png

post-6203-0-75704300-1414755563.png

Link to comment
Share on other sites

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: 

post-7918-0-39137800-1414754987.png

Link to comment
Share on other sites

  • 5 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...