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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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