JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
<script src="https://rawgit.com/lewster32/phaser-plugin-isometric/master/dist/phaser-plugin-isometric.min.js"></script>
JavaScript
var selectedTile;
function init() {
var game = new Phaser.Game(1024, 800, Phaser.CANVAS, '', null, true, false);
var BasicGame = function (game) { };
BasicGame.Boot = function (game) { };
var tileGroup, itemGroup, playerGroup, isoGroup, player, box, cursorPos
BasicGame.Boot.prototype =
{
preload: function () {
game.load.crossOrigin = 'anonymous';
game.load.image('tile', 'http://i.imgur.com/FqYQBfI.png');
game.load.image('box', 'http://i.imgur.com/Z5b96kv.png');
game.load.spritesheet('characterAnim', 'http://i.imgur.com/HFbuaEL.png', 70, 74);
game.time.advancedTiming = true;
// Add and enable the plug-in.
game.plugins.add(new Phaser.Plugin.Isometric(game));
// This is used to set a game canvas-based offset for the 0, 0, 0 isometric coordinate - by default
// this point would be at screen coordinates 0, 0 (top left) which is usually undesirable.
game.iso.anchor.setTo(0.5, 0.2);
game.input.onDown.add(movePlayer,this);
// Start the physics system
game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);
},
create: function () {
// Create ISO groups
tileGroup = game.add.group();
playerGroup = game.add.group();
itemGroup = game.add.group();
isoGroup = game.add.group();
// Let's make a load of tiles on a grid.
this.spawnTiles();
// Provide a 3D position for the cursor
cursorPos = new Phaser.Plugin.Isometric.Point3();
// player = game.add.isoSprite(185, 185, 0, 'characterAnim', 0, playerGroup);
player = game.add.isoSprite(185, 185, 0, 'characterAnim', 0, isoGroup);
player.anchor.set(0.5,0.5);
//box = game.add.isoSprite(200, 90, 0, 'box', 0, itemGroup);
//box = game.add.isoSprite(38*5, 38*1, 0, 'characterAnim', 0, itemGroup); // 38 is tilesize
box = game.add.isoSprite(38*5, 38*1, 0, 'characterAnim', 0, isoGroup); // 38...