Forums » Code » Top Down RPG Style Tile Based Grid Movement

I had the following entity requirements:
- Align to the grid when not moving.
- Move smoothly (don't teleport) between tiles.
- Only "snap" to grid as much as is absolutely necessary.

Here is a demo.
Here is the source.

This is the style of movement used in the Pokemon games.

Nice! I was thinking about writing a roguelike with Impact and was thinking about how I'd do grid-based movement.

Thank you!

Nice work. Have you considered releasing this as a plugin?

Nice ! (y)

Quote from wachunga
Nice work. Have you considered releasing this as a plugin?

That's a pretty cool idea.

This is a nice example. I have forked your source on Github and made a few changes, specifically:
1.) I made it into a plugin
2.) I added Entity on Entity collision support

Link to Live Demo
Linky

Source Code
Github

Usage:
1.) Require plugins.gridmovement in your entities that need GridMovement.
2.) Create a new instance of GridMovement, passing the Entity as the constructor parameter:
this.movement = new GridMovement(this);
3.) Add this.movement.update() to your entitiy Update method.
4.) Add this.movement.collision(); to your entity check method
5.) Set the movement direction like so:

                if (ig.input.state('left'))
                    this.movement.direction = GridMovement.moveType.LEFT;
                else if (ig.input.state('right'))
                    this.movement.direction = GridMovement.moveType.RIGHT;
                else if (ig.input.state('up'))
                    this.movement.direction = GridMovement.moveType.UP;
                else if (ig.input.state('down'))
                    this.movement.direction = GridMovement.moveType.DOWN;

Uncaught TypeError: Cannot read property 'x' of undefined gridmovement.js:161
2984
Uncaught TypeError: Cannot read property 'x' of undefined

Any idea why I might be having this problem?

Quote from farman
Uncaught TypeError: Cannot read property 'x' of undefined gridmovement.js:161
2984
Uncaught TypeError: Cannot read property 'x' of undefined

Any idea why I might be having this problem?

Whoops. Forgot to mention: Give your entity a gridSpeed property:

gridSpeed: {x: 100, y:100}

The grid speed should actually be in the plugin itself and not in the Entity, an oversight from me and I'll push an update moving it into the plugin in the near future.

EDIT: I just updated GitHub with the change. Access movement speed with:

this.movement.speed.x or .y

thank you

What would be a good solution to lock the player into it's animation until the tile move has finished?

if (ig.input.state('up')) {
			this.movement.direction = GridMovement.moveType.UP;
			this.currentAnim = this.anims.walkFacingUp;
			this.facing = 'up';
		} else if (ig.input.state('down')){
			this.movement.direction = GridMovement.moveType.DOWN;
			this.currentAnim = this.anims.walkFacingDown;
			this.facing = 'down';
		} else if (ig.input.state('left')) {
			this.movement.direction = GridMovement.moveType.LEFT;
			this.currentAnim = this.anims.walkFacingLeft;
			this.facing = 'left';
		} else if (ig.input.state('right')) {
			this.movement.direction = GridMovement.moveType.RIGHT;
			this.currentAnim = this.anims.walkFacingRight;
			this.facing = 'right';
		} else {
			switch (this.facing) {
				case this.facing = 'right':
					this.currentAnim = this.anims.idleFacingRight;
					break;
				case this.facing = 'up':
					this.currentAnim = this.anims.idleFacingUp;
					break;
				case this.facing = 'down':
					this.currentAnim = this.anims.idleFacingDown;
					break;
				case this.facing = 'left':
					this.currentAnim = this.anims.idleFacingLeft;
					break;
			}
		}

If the player spams the movement keys the hero turns around like a madman in my game with this code.

I appreciate your time. The plugin is very helpful.

You can force the animation if isMoving(), like so:

                if (!this.movement.isMoving()) {
                    // Animate.
                    if (this.movement.direction == GridMovement.moveType.DOWN) {
                        this.currentAnim = this.anims.down;
                    }
                    else if (this.movement.direction == GridMovement.moveType.UP) {
                        this.currentAnim = this.anims.up;
                    }
                }

You rule dude! Thanks so much.

Guys, your work helped me a lot!

As a complement I made a plugin to give smooth rotation to cardinal points to any entity, I posted it in github and also made a demo.

Enjoy!

Hey everyone! Been using this plug in for a very long time!

I'm having an issue where if a guard catches my player between two cells then my player continues to move after I have reset his x,y to the last check point. If for instance he is caught as he moves left, after moving him to a checkpoint where a left-bound cell is no longer available, he will run into the wall infinitely. That seems to be the case anyway.

EDIT: My thought is that it has to do with the plug in's moveIntention. I'm not a strong enough programmer to know how to alter that data though.

Would really appreciate some help troubleshooting this case.

Thanks so much,
Farman

If you&039;re using the original entity code, you will probably need to set #this.destination to null. If you&039;re using lTyl's version, I think you will have to set #this.movement.destination to null.

When there is no destination, the entity should no longer try to "get there".

Thanks Joncom! That definitely has helped with the infinite movement.

I still do have a problem however. My game requires exact pixel calculations to function and unfortunately if the player is caught mid-cell movement when I reset his position it is off by a pixel or so.

I am thinking this is related to calculations performed by the gridmovement plug in but honestly I'm not positive that is the case.

Regardless here is my guard's detection code.

Maybe it would be helpful to see my prototype?

Thank you again so much for your time. I'm so glad to have helpful members like yourself in the ImpactJS community! I would be lost without your help at these crucial times.

check: function(other){
            if (other instanceof EntityPlayer) {
		     ig.game.guardFoundYou.play();
		     ig.game.sadGirl.play();
		     other.movement.destination = null;
		     other.pos.x = other.checkPointPosX;
		     other.pos.y = other.checkPointPosY;
		     ig.game.screen.x = ig.game.checkPointScreenX;
		     ig.game.screen.y = ig.game.checkPointScreenY;            
	    }
	},

when I reset his position it is off by a pixel or so.

What do you mean by this?
What do you see?
And how would you like it to behave instead?
Are you saying that the entity is moved close to, but not precisely to the checkpoint?

Are you saying that the entity is moved close to, but not precisely to the checkpoint?

Yes exactly. My game is always on a 16*16 grid. If ever the player is off of this grid is it a serious problem because he will be unable to move properly.

To troubleshoot I have the game draw the player's x and y on screen. After the player is caught mid-grid movement his x position becomes 15.6 rather than 16, etc.

Maybe try setting this.vel.x and this.vel.y to 0 when you snap the entity to the checkpoint...

Yes I had tried that previously but it didn't help so i pulled it from the code.

Edit: Put it back in and things seem to be working. Must not have worked before because of messy debugging. Thanks.

Hi Guys

Im using this plugin for a frogger style game and I have some water elements and others which I need to use collision layers for, when the player collides with a collision layer I need to execute a function that does something... killls the player etc...

If I dont use the plugin it works fine using the instructions from the collision tutorial (http://impactjs.com/documentation/collision) e.g. the code below makes the entity ignore collision layers alltogether.

handleMovementTrace: function( res ) {
    // This completely ignores the trace result (res) and always
    // moves the entity according to its velocity
    this.pos.x += this.vel.x * ig.system.tick;
    this.pos.y += this.vel.y * ig.system.tick;
}

However with the moment plugin this function has no effect at all... and calling
ig.game.collisionMap.getTile(this.pos.x,this.pos.y) always gives a value of 0.....

Any ideas guys?

Don't know for sure from the top of my head, but in the update method of your entity, do you still call this.parent? If so, do you call it before or after you call this.movement.update? Try experimenting with the order here.

Normally, the plugin shouldn't have any effect on handleMovementTrace.

Thanks @Apiheld

Unfortunately moving them around didn't help, tried every possible combination.

Eve included the entity code here:

ig.module(
	'game.entities.player')
.requires(
	'impact.entity',
	'plugins.gridmovement')
.defines(function () {

	EntityPlayer = ig.Entity.extend({

			size : {
				x : 72,
				y : 72
			},
			maxVel : {
				x : 100000,
				y : 100000
			},

			type : ig.Entity.TYPE.A, // Player friendly group
			checkAgainst : ig.Entity.TYPE.NONE,
			collides : ig.Entity.COLLIDES.PASSIVE,

			gridSpeed : {
				x : 10000,
				y : 10000
			},

			init : function (x, y, settings) {

				this.parent(x, y, settings);
				this.addAnim('idle', 1, [0]);
				this.movement = new GridMovement(this);

				ig.game.player = this;

			},

			update : function () {
				ig.input.state("left") ? this.movement.direction = GridMovement.moveType.LEFT : ig.input.state("right") ? this.movement.direction = GridMovement.moveType.RIGHT : ig.input.state("up") ? this.movement.direction = GridMovement.moveType.UP : ig.input.state("down") && (this.movement.direction = GridMovement.moveType.DOWN)

					this.parent();
				this.movement.update();

			},

			check : function () {
				this.parent();
				this.movement.collision();

			},

			HandleMovementTrace : function (res) {
				// This completely ignores the trace result (res) and always
				// moves the entity according to its velocity


				this.pos.x += this.vel.x * ig.system.tick;
				this.pos.y += this.vel.y * ig.system.tick;
			}

		});

});

The function is called

handleMovementTrace

not

HandleMovementTrace

yeah, that was a typo from me prettying the code. same effect unfortunately.

Quote from BlondGorilla
The code below makes the entity ignore collision layers altogether. However with the moment plugin this function has no effect at all...

Maybe the reason it has no effect is because the plugin does its own checking to see if a tile is walkable.

canMoveDirectionFromTile:function (tileX, tileY, direction) {
    var newPos = this.getTileAdjacentToTile(tileX, tileY, direction);
    var x = Math.round(newPos.x);
    var y = Math.round(newPos.y);
    return ig.game.collisionMap.data[y][x] === 0;
},

You're going to need to account for your custom "water" tile collisions, because you're no longer talking about a simple case of "is walkable" and "is not walkable".

Bamm, that was it! thanks Joncom!!!

Ive modified that function to check for a water tile and if the next move is a water tile then set a flag to kill them, when stopMoving() is called... kill the player... need to do some animations first but should be easy.

Thanks again mate.

@BlondGorilla: No problem. Good luck.

Plugged this in, and I can't for the life of me see what I'm doing wrong here. My player won't move during any controls. I'm using the newest plugin and this is my entity:

ig.module (
	'game.entities.actor'
	)
.requires (
	'impact.entity',
	'plugins.gridmovement'
	)
.defines (function() {

	EntityActor = ig.Entity.extend ( {

		movement: null,

		//LOCAL VARIABLES/////////////////////////////////////////////////////////
		name: 'player1',
		//Size, Bounds, Orientation
		  size : {
                x : 24,
                y : 24
            },
            maxVel : {
                x : 100000,
                y : 100000
            },

		 type : ig.Entity.TYPE.A, // Player friendly group
         checkAgainst : ig.Entity.TYPE.NONE,
         collides : ig.Entity.COLLIDES.PASSIVE,

          gridSpeed : {
                x : 10000,
                y : 10000
            },
	

		animSheet: new ig.AnimationSheet( 'media/character.png',  24, 24 ),

		init: function( x, y, settings) {
			//defualt settings, overides anything before it
			this.parent( x, y, settings);


			this.movement = new GridMovement(this);

			this.addAnim( 'idle', 1, [0]);

		}, //INITIALIZE 

		upate: function(){

			
			
			if (ig.input.state('left')) {
                    this.movement.direction = GridMovement.moveType.LEFT;
                }
                else if (ig.input.state('right')){
                    this.movement.direction = GridMovement.moveType.RIGHT;
                }
                else if (ig.input.state('up')){
                    this.movement.direction = GridMovement.moveType.UP;
                }
                else if (ig.input.state('down')){
                    this.movement.direction = GridMovement.moveType.DOWN
                }
                	
                // ig.input.state("left") ? this.movement.direction = GridMovement.moveType.LEFT : ig.input.state("right") ? this.movement.direction = GridMovement.moveType.RIGHT : ig.input.state("up") ? this.movement.direction = GridMovement.moveType.UP : ig.input.state("down") && (this.movement.direction = GridMovement.moveType.DOWN)



                this.parent();
               this.movement.update();

                
		},

		check: function(){
			this.parent();
			this.movement.collision();
		},

		draw: function(){
			this.parent();
		}
	
	});
});