Forums » Code » Tile Based Movement

I am working on porting over my Flash Rogue like game to Impact JS. I didn't find a lot of references on the forum for tile baed movement so I thought I would share my early experiment at it:

https://gist.github.com/1074546

The basic idea is that you define the tileSize of the player and from there it will automatically make sure the player stays within the grid as it moves. It still needs some work and since I have only been using ImpactJS for a day now it would be great to see if anyone has a better approach?

My biggest issue was dealing with the fact that pos x,y are not integers so without forcing the rounding during update the player would slowly get misaligned over time.

Enjoy.

I'm interested in this and so far the work that you've done is pretty good, especially for only using impact for a few days at that time.

I am just wondering if you've made any more progress on this or if you've given up...

...or maybe someone else on the forums here has come up with another method for tile-based movement since the time that this post originated, xP

Im also very interested in this to.

I tried the above example in it almost works.
But i cant really get it to work.

Anyone got some solutions?

You can use a function like this:

// Find closest number that is divisible by
Number.prototype.FindClosestNumberThatIsDivisibleBy = function(n) {
	return Math.round(this / n) * n;
};

And correct player position in update, when player is not walking:

// Center X
if(Math.round(this.pos.x) == (this.pos.x).FindClosestNumberThatIsDivisibleBy(16)) {
	this.vel.x = 0;
	this.pos.x = (this.pos.x).FindClosestNumberThatIsDivisibleBy(16);
	this.currentAnim = this.anims.idle;
} else {
	if(this.vel.x == 0 && Math.round(this.pos.x) < (this.pos.x).FindClosestNumberThatIsDivisibleBy(16)) this.vel.x = -3;
	if(this.vel.x == 0 && Math.round(this.pos.x) > (this.pos.x).FindClosestNumberThatIsDivisibleBy(16)) this.vel.x = 3;
	this.vel.x = this.vel.x * 4;
}

// Center Y
if(Math.round(this.pos.y) == (this.pos.y).FindClosestNumberThatIsDivisibleBy(16)) {
	this.vel.y = 0;
	this.pos.y = (this.pos.y).FindClosestNumberThatIsDivisibleBy(16);
	this.currentAnim = this.anims.idle;
} else {
	this.vel.y = this.vel.y * 4;
}

It's not the best or cleanest way, but gives an idea how it works.
The player should not stop until it is positioned on the grid, in this case 16px

hm interessting

was thinking something like this based on your code.

// when we are finished with the movement actions
this.vel.x = 0;

//take the current position, round it down to nice even numbers.
var awesomeVarName = (this.pos.x/32).round();

// Then multiplie it back up again.
this.pos.x = stuff*32;

In my case it was such a small difference that it this wont seam choppy at all :-)

I'm working on a simple tile based game using jessefreeman above code.

It seems to work fine in Chrome and IE, but I have problems in Firefox with the vertical movement of the player. It stops two tiles from the top. Why??

Link

Ok, solved opening the level js.
I was using an empty square inside the collision tileset to clear collision tiles, but Welt saved it as "46", not "0".

So, collision tiles must be deleted using outside boxes of the collision tileset.