Forums » Help » Approaching a tile based movement system.

I just bought my license of Impact JS and have read trough all the sample code, watched and re-watched the videos I can find online and am now thinking of what to do for my first little project.

Due to wanting this to work on tablets I've been considering tablet interfaces, specifically a tile based game where users click a tile, then pathfinding traverses the character to the destination tile.

Now Building this from scratch I know how I would go about doing it, hidden div grid of co-ordinates querying the contents of the cell in question. I am however very turn on how to build this using ImpactJS.

I would like to be able to use the Level builder to build the world but I can't really work out how I would make this boardgame esq style game into the system (It's more like a table top RPG).

The only way I can think of doing this is by having an entity type of movable tile and have this as a layer in the level, much like other games would use a colision layer.

Does anyone have any insight on building this type of user interaction with Impact? I'm likely at this point in time going to go with another idea for now just due to the limitations of tablet controlls.

You might consider using trace:

http://impactjs.com/documentation/class-reference/collisionmap#trace

Here's what I would do though:

I'd spawn an entity where ever you tap in bounds using something like this:

       if (ig.input.released('leftButton') && this.spawnTimer.delta() > 0) {
            ig.game.spawnEntity(EntityTarget,ig.input.mouse.x + ig.game.screen.x, ig.input.mouse.y + ig.game.screen.y, {iAm:1})
            //Prevent double clicking
            this.spawnTimer.set(.1);
    	}

The entity would be invisible and affect nothing.

But the player would move toward the entity
until they overlap, then the entity would die.

With something like this:

//Get the target
walkHere= ig.game.getEntityByName('target')

//Walk toward the target
var angle = this.angleTo( walkHere );
this.vel.x = Math.cos(angle) * this.speed;
this.vel.y = Math.sin(angle) * this.speed

Best wishes!

Here is a tile-based movement plugin for Impact: http://impactjs.com/forums/code/top-down-rpg-style-tile-based-grid-movement

and here is a solid JS Pathfinding API that I am using: https://github.com/qiao/PathFinding.js

Here is what I am doing for my game:
1.) Take the Pathfinding API and create a Grid in memory (var grid = new PF.Grid(worldWidth, worldHeight);)

2.) When the player issues a movement command, I do one of two things: If a touched-based device, I take the screen-coordinates of the touch position and change it into in-game world co-ordinates and then run the AStarFinder from the PF API. If not a touch-based device, I simply check the Grid to see if the next tile is passable (The destination), if it is, then move to that Grid by accelerating the entity towards the center-point of that tile.

3.) If a touch-based device, I now have a list of tiles that the entity has to move towards, so I simply pass these co-ordinates and then move sequentially to each one, always targeting the center position of the tile.

4.) I update the Grid by changing the last tile (Where the Entity is moving off of) to Passable and set the new tile (The destination) to unpassable.

5.) Repeat until the final destination tile is reached, or the final destination co-ordinates changes.