Forums » Code » TwoPointFive Tile Based movement?

Anyone try to apply tile-based movement similar to the code in the below thread to a TwoPointFive level?

http://impactjs.com/forums/code/tile-based-movement

That's currently something I'm really looking to implement but I am having trouble translating into TPF logic. Basically I want to make something similar to those old first-person dungeons, much like http://www.playkeepout.com

EDIT: I've got...something working with a kind-of convoluted solution I cooked up, using Super Blob Blaster as my base with custom tiles. I've created a variable for direction and have switch blocks to determine where to go depending on where the player is facing. I changed turn speed to 90 degrees and have each turn update the direction variable accordingly. Test it out here: https://teach.mccc.edu/impacttest/

The important bits of the code are below, unchanged code is in "...":

...

.defines(function(){

EntityPlayer = tpf.Entity.extend({
	type: ig.Entity.TYPE.A,
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	size: {x: 64, y: 64},
	
	angle: 0,
	internalAngle: 0,
	turnSpeed: (90).toRad(),
	moveSpeed: 192,
	direction: 1,
	health: 100,
	tileSize: 64,

	...
	
	update: function() {
		if (this.direction < 1){
			this.direction = 4;
		} else if (this.direction > 4){
			this.direction = 1;
		}
		// Move
		var dx = 0, 
			dy = 0;
		
		if( ig.input.pressed('forward') ) {
			switch(this.direction){
				// if north
				case 1:
					this.pos.y -= this.tileSize;
					break;
				// if east
				case 2:
					this.pos.x += this.tileSize;
					break;
				// if south
				case 3:
					this.pos.y += this.tileSize;
					break;
				// if west
				case 4:
					this.pos.x -= this.tileSize;
					break;
			}
			dy = -1;
		}
		else if( ig.input.pressed('back') ) {
			switch(this.direction){
				// if north
				case 1:
					this.pos.y += this.tileSize;
					break;
				// if east
				case 2:
					this.pos.x -= this.tileSize;
					break;
				// if south
				case 3:
					this.pos.y -= this.tileSize;
					break;
				// if east
				case 4:
					this.pos.x += this.tileSize;
					break;
			}
			dy = 1;
		}
		
		// Turn viewpoint with mouse?
		// if( ig.system.isFullscreen || ig.system.hasMouseLock ) {
		// 	this.internalAngle -= ig.input.mouseDelta.x / 400;
		// }

		// Turn with keys
		if( ig.input.pressed('left') ) {
			this.internalAngle += this.turnSpeed;
			this.direction -= 1;
		}
		else if( ig.input.pressed('right') ) {
			this.internalAngle -= this.turnSpeed;
			this.direction += 1;
		}

		// Sidestep
		if( ig.input.pressed('stepleft') ) {
			switch(this.direction){
				// if north
				case 1:
					this.pos.x -= this.tileSize;
					break;
				// if east
				case 2:
					this.pos.y -= this.tileSize;
					break;
				// if south
				case 3:
					this.pos.x += this.tileSize;
					break;
				// if west
				case 4:
					this.pos.y += this.tileSize;
					break;
			}
			dx = -1;
		}
		else if( ig.input.pressed('stepright') ) {
			switch(this.direction){
				// if north
				case 1:
					this.pos.x += this.tileSize;
					break;
				// if east
				case 2:
					this.pos.y += this.tileSize;
					break;
				// if south
				case 3:
					this.pos.x -= this.tileSize;
					break;
				// if west
				case 4:
					this.pos.y -= this.tileSize;
					break;
			}
			dx = 1;
		}


		...

		// Set the desired velocity based on our angle and which keys are
		// pressed
		this.vel.x = -Math.sin(this.angle) * dy 
			-Math.sin(this.angle+Math.PI/2) * dx;

		this.vel.y = -Math.cos(this.angle) * dy 
			-Math.cos(this.angle+Math.PI/2) * dx;
		
		...

		this.parent();
		
		...
});

});

I was working on a 3D tile-based prototype not too long ago, I pretty much did the same thing.

I'm unable to play your game (webpage won't load), so I can't tell how it plays, but the code looks to be pretty good.

I do remember having it be that when the player would move forward, the velocity would slowly carry him to the tile (I say 'slowly', but really the player moved tiles in under a second), I did this in order to prevent jumping from tile to tile, and add a little easing/polish. Doing this, I had to set a variable that made the player unable to accept keyboard inputs, until after they arrived at the tile they were moving to. This was done to prevent the user being able to spam the up key and glitch around.

Good luck on your game!

Thanks for taking a look at this, IAmSpencer! Jumping around has become a consequence of this method, and velocity has become inapplicable through my above method. I do like your idea about limiting input to let the animations finish, if only mine weren't instant lol!

Since this build, I've implemented tile-based movement using hurik's A* pathing plugin, works like a charm. The code above is essentially still the same, but now cases for position movement have been changed to creating paths to be followed:

if( ig.input.pressed('forward') ) {
			switch(this.direction){
				// if north
				case 1:
					this.getPath(this.pos.x, this.pos.y - this.tileSize, false);
					break;
				// if east
				case 2:
					this.getPath(this.pos.x + this.tileSize, this.pos.y, false);
					break;
				// if south
				case 3:
					this.getPath(this.pos.x, this.pos.y + this.tileSize, false);
					break;
				// if west
				case 4:
					this.getPath(this.pos.x - this.tileSize, this.pos.y, false);
					break;
			}
		}

I've moved my test build to my personal server, so it should be playable now. Now all that's left is to figure out how to get smooth turns, aka animating the turn over time like the paths are.