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 Joncom

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.

1 decade ago by drhayes

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

1 decade ago by Terry

Thank you!

1 decade ago by wachunga

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

1 decade ago by Xatruch

Nice ! (y)

1 decade ago by Joncom

Quote from wachunga
Nice work. Have you considered releasing this as a plugin?
That's a pretty cool idea.

1 decade ago by lTyl

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;

1 decade ago by 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?

1 decade ago by lTyl

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

1 decade ago by farman

thank you

1 decade ago by farman

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.

1 decade ago by lTyl

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;
                    }
                }

1 decade ago by farman

You rule dude! Thanks so much.

1 decade ago by amanya

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!

1 decade ago by farman

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

1 decade ago by Joncom

If you're using the original entity code, you will probably need to set this.destination to null. If you'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".

1 decade ago by farman

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;            
	    }
	},

1 decade ago by Joncom

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?

1 decade ago by farman

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.

1 decade ago by Joncom

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

1 decade ago by farman

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.

10 years ago by BlondGorilla

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?

10 years ago by Apiheld

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.

10 years ago by BlondGorilla

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;
			}

		});

});

10 years ago by Apiheld

The function is called

handleMovementTrace

not

HandleMovementTrace

10 years ago by BlondGorilla

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

10 years ago by Joncom

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

10 years ago by BlondGorilla

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.

10 years ago by Joncom

@BlondGorilla: No problem. Good luck.

10 years ago by henonchesser

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();
		}
	
	});
});

Page 1 of 2
« first « previous next › last »