Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by wachunga

In a topdown game where entities can overlap, you sometimes want entity a to display on top of entity b, and sometimes vice versa.

compare:
/><br /> <br /> and:<br /> <img src=

1 decade ago by Arantor

You have two options, either to make sure the draw order is correct yourself (time consuming, awkward) or to use the zIndex which is really what it's there for.

I wouldn't necessarily assume that the entity's pos.y is implicitly related to drawing order, either. It would appear to be for your specific case but none of the cases I've done so far have that, and I know that if you were ever to do an isometric game with entities as world elements like floors, you'd explicitly have to override that behaviour.

1 decade ago by Datamosh

In main draw you can add something like this (untested)

for (entity in ig.game.entities) {
	if (ig.game.entities.hasOwnProperty(entity)) {
		var entity = ig.game.entities[entity];
		if(entity != ig.game.getEntitiesByType(EntityPlayer)[0]) {
			entity.zIndex = entity.pos.y + entity.offset.y;
		}
	}
}
ig.game.sortEntitiesDeferred();

1 decade ago by quidmonkey

I'd do something like this:

ig.Entity.inject({

update: function(){
    this.parent();
    this.zIndex = this.pos.y * ig.system.width + this.pos.x;
}

)}

Then in your game update() call sortEntitiesDeferred().

1 decade ago by dominic

Or sort by .pos.y instead of .zIndex in your Game's update:

update: function() {
	this.entities.sort( function(a,b){ return a.pos.y - b.pos.y; } );
	this.parent();
}

By the way: sorting an almost sorted array is quite fast, so there should be very little impact when you do this every frame.

1 decade ago by wachunga

Sorting by pos.y works well. Thanks for your assistance everyone.

1 decade ago by wachunga

And in case anyone hits this thread later, Impact 1.19 has built-in support for this by adding these properties to your Game:
	autoSort: true,
	sortBy: ig.Game.SORT.POS_Y,

1 decade ago by IAmNino

I would like to do this but can't seem to figure out where exactly to place those 2 lovely lines of code. Either nothing happens, or I get errors.

1 decade ago by IAmNino

I got this to work by putting it as the first line of my update function in main:
this.entities.sort( function(a,b){ return a.pos.y - b.pos.y; } );

I STILL cannot get this to work as the first lines inside ig.Game.extend:
autoSort: true,
sortBy: ig.Game.SORT.POS_Y,

Can somebody advise what I'm doing wrong please?

1 decade ago by dominic

IAmNino: if you put those two lines in your Game class, it should work. However, calling the sort() function manually will then conflict with the autoSort.

Post the code of your game class, so we can have a look.

1 decade ago by IAmNino

Here's the current source of my game class. Note that the solution I have that currently works:

MyGame = ig.Game.extend({

	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ), //Original impact font
	//font: new ig.Font( 'media/04b04.font.png' ), // vallhalla's font
	
	init: function() {
		// Initialize your game here; bind keys etc.
		ig.input.bind( ig.KEY.A, 'left' );
		ig.input.bind( ig.KEY.D, 'right' );
		ig.input.bind( ig.KEY.W, 'up' );
		ig.input.bind( ig.KEY.S, 'down' );
		
		ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind( ig.KEY.UP_ARROW, 'up' );
		ig.input.bind( ig.KEY.DOWN_ARROW, 'down' );
		
		this.loadLevel (LevelSOM_test1);
	},
	
	update: function() { // Called 60 times per second.
		// Sorts all entites by Y Position instead of Z-Index 
		this.entities.sort( function(a,b){ return a.pos.y - b.pos.y; } );
		 
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
		var player = this.getEntitiesByType( EntityPlayer )[0];
		if( player ) {
			this.screen.x = player.pos.x - ig.system.width/2;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
	},
	
	draw: function() { // Called right after update 60 times per second.
	// Draw all entities and backgroundMaps
		this.parent();
	
		// set variables		
		var player = this.getEntitiesByType( EntityPlayer )[0];
		
		/****************
		*  Message Box  *
		****************/
			player.messageboxtimer = player.messageboxtimer - 1;
			
			if(player.messageboxtimer < 1) {
				player.messageboxtimer = 5;
				var newtext = "";
				var newsplit = player.messagebox.split("\n");
				for(var i = 0;i < newsplit.length; i++) {
					if(i > 1) {
						newtext = newtext + "\n" + newsplit[i];
					}
				}
			
				player.messagebox = newtext;
			}
			
			this.font.draw( player.messagebox, 1, 10);
		/***************/
		
		/********************
		*  Player Name Box  *
		********************/
			/*
			var x_center = (ig.system.width/2) + 16,
				y_center = (ig.system.height/2) - 40;
		
			this.font.draw( player.namebox, x_center, y_center, ig.Font.ALIGN.CENTER );
			*/
		/*******************/
		
		////////////////////////////////
		
	}
});

Here is my game class changed to using autoSort and sortBy that does not work.

MyGame = ig.Game.extend({
	autoSort: true,
    sortBy: ig.Game.SORT.POS_Y,
	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ), //Original impact font
	//font: new ig.Font( 'media/04b04.font.png' ), // vallhalla's font
	
	init: function() {
		// Initialize your game here; bind keys etc.
		ig.input.bind( ig.KEY.A, 'left' );
		ig.input.bind( ig.KEY.D, 'right' );
		ig.input.bind( ig.KEY.W, 'up' );
		ig.input.bind( ig.KEY.S, 'down' );
		
		ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind( ig.KEY.UP_ARROW, 'up' );
		ig.input.bind( ig.KEY.DOWN_ARROW, 'down' );
		
		this.loadLevel (LevelSOM_test1);
	},
	
	update: function() { // Called 60 times per second.
		// Sorts all entites by Y Position instead of Z-Index 
		//this.entities.sort( function(a,b){ return a.pos.y - b.pos.y; } );
		 
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
		var player = this.getEntitiesByType( EntityPlayer )[0];
		if( player ) {
			this.screen.x = player.pos.x - ig.system.width/2;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
	},
	
	draw: function() { // Called right after update 60 times per second.
	// Draw all entities and backgroundMaps
		this.parent();
	
		// set variables		
		var player = this.getEntitiesByType( EntityPlayer )[0];
		
		/****************
		*  Message Box  *
		****************/
			player.messageboxtimer = player.messageboxtimer - 1;
			
			if(player.messageboxtimer < 1) {
				player.messageboxtimer = 5;
				var newtext = "";
				var newsplit = player.messagebox.split("\n");
				for(var i = 0;i < newsplit.length; i++) {
					if(i > 1) {
						newtext = newtext + "\n" + newsplit[i];
					}
				}
			
				player.messagebox = newtext;
			}
			
			this.font.draw( player.messagebox, 1, 10);
		/***************/
		
		/********************
		*  Player Name Box  *
		********************/
			/*
			var x_center = (ig.system.width/2) + 16,
				y_center = (ig.system.height/2) - 40;
		
			this.font.draw( player.namebox, x_center, y_center, ig.Font.ALIGN.CENTER );
			*/
		/*******************/
		
		////////////////////////////////
		
	}
});

1 decade ago by IAmNino

Got your message on irc Dominic. I'm definitely running v.1.19.

1 decade ago by dominic

In 1.19 the sortBy property gets overwritten when the Game instance is created. As a workaround, just set the sortBy property in your game's init():

MyGame = ig.Game.extend({
	init: function() {
		this.sortBy = ig.Game.SORT.POS_Y;
	}
});

This is fixed in the recent version in the git repo. Sorry about that.

1 decade ago by Bushstar

Nice one Dominic, thanks for sorting that bug out. I was just about to do some weird bubble sort when I found this thread.

Is there a change log for the version on the git repository?
Page 1 of 1
« first « previous next › last »