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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Baking SQL: Know the recipe

A React-Redux Trivia App

You Probably Wrote Some Buggy JSX Code You Didn’t Realize

The Weather Sunny App Project

How to write polyfills for the call(), apply(), and bind() methods in JavaScript

Headers propagation with hpropagate

JavaScript Functions =]

Express vs Koa

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

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

More from Medium

[Tech Blog]How to manage the values of the items you add on the Shopify signup page with meta…

A Gilded Rose story… (of tests, coverage, mutations, and how to conquer applications)

Everything you need to know about One Time Passwords!

Best SSO Provider: Why LoginRadius Is Considered As The Best SSO Solution