Isometric (8 directions)
Press the arrow keys to move. This is a basic demo of isometric maps with 8 directions.
Code
📖 How to execute examples locally
js
const game = new Phaser.Game(config(preload, create, update));
function preload() {
this.load.image("tiles", "../../assets/iso_tile.png");
this.load.tilemapTiledJSON("iso-map", "../../assets/isometric.json");
this.load.spritesheet("player", "../../assets/iso_char.png", {
frameWidth: 15,
frameHeight: 32,
});
}
function create() {
const cloudCityTilemap = this.make.tilemap({ key: "iso-map" });
cloudCityTilemap.addTilesetImage("iso-tileset", "tiles");
for (let i = 0; i < cloudCityTilemap.layers.length; i++) {
const layer = cloudCityTilemap.createLayer(i, "iso-tileset", 0, 0);
layer.scale = 3;
}
const sprites = {
"player": this.add.sprite(0, 0, "player"),
"npc0": this.add.sprite(0, 0, "player"),
"npc1": this.add.sprite(0, 0, "player"),
"npc2": this.add.sprite(0, 0, "player"),
};
Object.entries(sprites).forEach(([_key, sprite]) => sprite.scale = 3);
this.cameras.main.startFollow(sprites["player"], true);
this.cameras.main.setFollowOffset(
-sprites["player"].width,
-sprites["player"].height
);
createPlayerAnimation.call(this, "up", 21, 24);
createPlayerAnimation.call(this, "up-left", 16, 19);
createPlayerAnimation.call(this, "left", 11, 14);
createPlayerAnimation.call(this, "down-left", 6, 9);
createPlayerAnimation.call(this, "down", 1, 4);
createPlayerAnimation.call(this, "down-right", 36, 39);
createPlayerAnimation.call(this, "right", 31, 34);
createPlayerAnimation.call(this, "up-right", 26, 29);
const gridEngineConfig = {
characters: [
{
id: "player",
sprite: sprites["player"],
startPosition: { x: 3, y: 4 },
offsetY: -9,
speed: 2
},
{
id: "npc0",
sprite: sprites["npc0"],
offsetY: -9,
startPosition: { x: 5, y: 5 },
speed: 3
},
{
id: "npc1",
sprite: sprites["npc1"],
offsetY: -9,
startPosition: { x: 10, y: 10 },
},
{
id: "npc2",
sprite: sprites["npc2"],
offsetY: -9,
startPosition: { x: 5, y: 10 },
speed: 2
},
],
numberOfDirections: 8
};
this.gridEngine.create(cloudCityTilemap, gridEngineConfig);
this.gridEngine.moveRandomly('npc0');
this.gridEngine.moveRandomly('npc1', 500);
this.gridEngine.moveRandomly('npc2', 1500);
this.gridEngine
.movementStarted()
.subscribe(({ charId, direction }) => {
sprites[charId].anims.play(direction);
});
this.gridEngine
.movementStopped()
.subscribe(({ charId, direction }) => {
sprites[charId].anims.stop();
sprites[charId].setFrame(getStopFrame(direction));
});
this.gridEngine
.directionChanged()
.subscribe(({ charId, direction }) => {
sprites[charId].setFrame(getStopFrame(direction));
});
}
function update() {
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown && cursors.up.isDown) {
this.gridEngine.move("player", "up-left");
} else if (cursors.left.isDown && cursors.down.isDown) {
this.gridEngine.move("player", "down-left");
} else if (cursors.right.isDown && cursors.up.isDown) {
this.gridEngine.move("player", "up-right");
} else if (cursors.right.isDown && cursors.down.isDown) {
this.gridEngine.move("player", "down-right");
} else 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 createPlayerAnimation(name, startFrame, endFrame) {
this.anims.create({
key: name,
frames: this.anims.generateFrameNumbers("player", {
start: startFrame,
end: endFrame,
}),
frameRate: 5,
repeat: -1,
yoyo: false,
});
}
function getStopFrame(direction) {
switch (direction) {
case "up":
return 20;
case "up-left":
return 15;
case "up-right":
return 25;
case "right":
return 30;
case "down":
return 0;
case "down-left":
return 5;
case "down-right":
return 35;
case "left":
return 10;
}
}
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;
}