Creating an Isometric View in Phaser 3

Programmer art
The interaction demo for the isometric plugin
//scene.js
import Phaser from "phaser";
import { preload } from "./preload";
import { create } from "./create";
import { update } from "./update";
class playGame extends Phaser.Scene {
constructor() {
const sceneConfig = {
key: "IsoInteractionExample",
mapAdd: { isoPlugin: "iso" }
};
super(sceneConfig);
}
preload() {
return preload.call(this);
}
create() {
return create.call(this);
}
update() {
return update.call(this);
}
}
export default playGame;
//preload.js
import IsoPlugin from "phaser3-plugin-isometric";
import grassTileData from "../assets/spritestack/grassTile.json";
import flowerHeadData from "../assets/spritestack/flowerHead.json";
import stemData from "../assets/spritestack/stem.json";
export function preload() {
this.load.scenePlugin({
key: "IsoPlugin",
url: IsoPlugin,
sceneKey: "iso"
});
// load 3d assets
this.load.spritesheet("grassTile", "src/assets/spritestack/grassTile.png", {
frameWidth: grassTileData.width, // from json
frameHeight: grassTileData.height, // from json
startFrame: 0 // only using this frame, this could be a this.load.image
});
...
//init.js
import { store } from "../index.js";
import { add3dFlower } from "./isometric/add3dFlower";
import { addTiles } from "./isometric/addTiles";

export function init(game) {
// create tile group
game.isoTiles = game.add.group();
// set camera placement
game.iso.projector.origin.setTo(0.5, 0.3);
// add Tiles
addTiles(game);
game.flowersOnScreen = [];
/* First Flower */
const storeFlowers = store.getState().flowers;
add3dFlower(storeFlowers.byId.flower1, "flower1", game);
game.flowerToFlyTo = game.flowersOnScreen[0];
}
//addTiles.js
import grassTileData from "../../assets/spritestack/grassTile.json";
export const addTiles = game => {
let tile;
const height = grassTileData.height - 2;
for (let xx = 0; xx < 256; xx += height) {
for (let yy = 0; yy < 256; yy += height) {
tile = game.add.isoSprite(xx, yy, 0, "grassTile", game.isoTiles);
tile.setInteractive();
tile.on("pointerover", function() {
this.setTint(0x86bfda);
this.isoZ += 5;
console.log(this);
if (this.flowerSprite) {
this.flowerSprite.isoZ += 5;
this.flowerSprite.stem.isoZ += 5;
}
});
tile.on("pointerout", function() {
this.clearTint();
this.isoZ -= 5;
if (this.flowerSprite) {
this.flowerSprite.isoZ -= 5;
this.flowerSprite.stem.isoZ -= 5;
}
});
}
}
};
Isometric grass tiles with mouse over events
import { determineFlowerShape } from "../../determinants/determineFlowerShape";
import { determineStem } from "../../determinants/determineStem.js";
import { getHexColor } from "../../determinants/determineColor";
export function add3dFlower(currFlower, currFlowerId, game) {
const phenotype = currFlower.phenotype;
// determine position
const tile = game.isoTiles.children.entries[22];
const posX = tile._isoPosition.x;
const posY = tile._isoPosition.y;
// set position and shape
let newFlowerSprite = game.add.isoSprite(
posX,
posY,
2,
"flower3d" //flowerShape
);
// setFrame because ^ isoSprite doesn't set frame correctly
newFlowerSprite.setFrame(0);
// add stem
newFlowerSprite.stem = game.add.isoSprite(
newFlowerSprite._isoPosition.x,
newFlowerSprite._isoPosition.y,
1,
"straightStem3d" // stem Shape
);
newFlowerSprite.stem.setFrame(0);
// set color
newFlowerSprite.setTint(getHexColor(phenotype.color));
//add flower reference for the tile
tile.flowerSprite = newFlowerSprite;
// add the flower to the array of onscreen flowers for bee to fly to
game.flowersOnScreen.push(newFlowerSprite);
}
The finished product of the tutorial. An isometric view of a voxel flower on a grass field.
Before and after

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store