Move Character To
Press the arrow keys to move. This demo demonstrates how you can command characters (including the player) to move to the desired tile, and they will pathfind the shortest route to their destination. Follow the NPCs to their destination!
Code
📖 How to execute examples locally
js
const game = new Phaser.Game(config(preload, create, update));
function preload() {
this.load.image("tiles", "../../assets/cloud_tileset.png");
this.load.tilemapTiledJSON("cloud-city-map", "../../assets/cloud_city_large.json");
this.load.spritesheet("player", "../../assets/characters.png", {
frameWidth: 52,
frameHeight: 72,
});
}
function create() {
const cloudCityTilemap = this.make.tilemap({ key: "cloud-city-map" });
cloudCityTilemap.addTilesetImage("cloud_tileset", "tiles");
for (let i = 0; i < cloudCityTilemap.layers.length; i++) {
const layer = cloudCityTilemap.createLayer(i, "cloud_tileset", 0, 0);
layer.scale = 3;
}
const playerSprite = this.add.sprite(0, 0, "player");
playerSprite.scale = 1.5;
this.cameras.main.startFollow(playerSprite, true);
this.cameras.main.setFollowOffset(-playerSprite.width, -playerSprite.height);
tintTile(cloudCityTilemap, 18, 15, 0xff7a4a);
tintTile(cloudCityTilemap, 19, 15, 0xffcc4a);
tintTile(cloudCityTilemap, 20, 15, 0x6eff94);
const npcSprite = this.add.sprite(0, 0, "player");
npcSprite.scale = 1.5;
const npcSprite1 = this.add.sprite(0, 0, "player");
npcSprite1.scale = 1.5;
const npcSprite2 = this.add.sprite(0, 0, "player");
npcSprite2.scale = 1.5;
const gridEngineConfig = {
characters: [
{
id: "player",
sprite: playerSprite,
walkingAnimationMapping: 6,
startPosition: { x: 8, y: 8 },
},
{
id: "npc0",
sprite: npcSprite,
walkingAnimationMapping: 0,
startPosition: { x: 12, y: 5 },
speed: 3,
},
{
id: "npc1",
sprite: npcSprite1,
walkingAnimationMapping: 1,
startPosition: { x: 14, y: 8 },
},
{
id: "npc2",
sprite: npcSprite2,
walkingAnimationMapping: 3,
startPosition: { x: 5, y: 10 },
speed: 2,
},
],
};
this.gridEngine.create(cloudCityTilemap, gridEngineConfig);
this.gridEngine.moveTo("npc0", { x: 15, y: 18 });
this.gridEngine.moveTo("npc1", { x: 15, y: 19 });
this.gridEngine.moveTo("npc2", { x: 15, y: 20 });
}
function update() {
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
this.gridEngine.move("player", "left");
} else if (cursors.right.isDown) {
this.gridEngine.move("player", "right");
} else if (cursors.up.isDown) {
this.gridEngine.move("player", "up");
} else if (cursors.down.isDown) {
this.gridEngine.move("player", "down");
}
}
function tintTile(tilemap, row, col, color) {
for (let i = 0; i < tilemap.layers.length; i++) {
tilemap.layers[i].tilemapLayer.layer.data[row][col].tint = color;
}
}
html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../styles.css" />
<script src="../../js/phaser-3.80.1.min.js"></script>
<script src="../../js/grid-engine-2.44.3.min.js"></script>
<script src="../../js/examplePhaserConfig.js"></script>
<script src="code.js"></script>
</head>
<body></body>
</html>
js
function config(preload, create, update) {
return {
title: "GridEngineExample",
render: {
antialias: false,
},
type: Phaser.AUTO,
plugins: {
scene: [
{
key: "gridEngine",
plugin: GridEngine,
mapping: "gridEngine",
},
],
},
scale: {
width: 700,
height: 528,
},
scene: {
preload: preload,
create: create,
update: update,
},
parent: "game",
backgroundColor: "#48C4F8",
input: {
mouse: {
preventDefaultWheel: false
},
touch: {
capture: false
}
}
};
}
css
body {
margin: 0;
padding: 0;
background: #1e1e20;
font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color: #cacaca;
}
.settings {
margin-top: 20px;
display: flex;
flex-direction: column;
/* border: 1px solid white; */
background: #282828;
margin-bottom: 20px;
width: 640px;
padding: 0 30px;
}
label {
font-weight: bold;
margin-top: 30px;
margin-bottom: 10px;
}
select {
width: 100px;
}
input {
width: 100px;
}
button {
width: 120px;
margin-top: 30px;
margin-bottom: 20px;
}
.wait-timeout-group {
display: flex;
align-items: center;
justify-content: flex-start;
}
.wait-timeout-group input {
width: auto;
margin-right: 10px;
}
.wait-timeout-group label {
margin:0;
}
#json-config {
margin-bottom: 10px;
}
#json-config pre {
font-family: "Consolas", monospace;
}
.disabled {
display: none;
}