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
Taylor Nodell

Taylor Nodell

31 Followers

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor