var skeletons = [];
var tileWidthHalf;
var tileHeightHalf;
var d = 0;
var scene;
var player;
// GameObject Skeleton
class Skeleton extends Phaser.GameObjects.Image {
constructor(scene, x, y, motion, direction, distance) {
super(scene, x, y, 'skeleton', direction.offset);
this.startX = x;
this.startY = y;
this.distance = distance;
this.motion = motion;
this.anim = anims[motion];
this.direction = directions[direction];
this.speed = 0.15;
this.f = this.anim.startFrame;
this.depth = y + 64;
scene.time.delayedCall(this.anim.speed * 1000, this.changeFrame, [], this);
}
changeFrame ()
{
this.f++;
var delay = this.anim.speed;
if (this.f === this.anim.endFrame)
{
switch (this.motion)
{
case 'walk':
this.f = this.anim.startFrame;
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
break;
case 'attack':
delay = Math.random() * 2;
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
case 'idle':
delay = 0.5 + Math.random();
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
case 'die':
delay = 6 + Math.random() * 6;
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
}
}
else
{
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
}
}
resetAnimation ()
{
this.f = this.anim.startFrame;
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(this.anim.speed * 1000, this.changeFrame, [], this);
}
update ()
{
if (this.motion === 'walk')
{
this.x += this.direction.x * this.speed;
if (this.direction.y !== 0)
{
this.y += this.direction.y * this.speed;
this.depth = this.y + 64;
}
// Walked far enough?
if (Phaser.Math.Distance.Between(this.startX, this.startY, this.x, this.y) >= this.distance)
{
this.direction = directions[this.direction.opposite];
this.f = this.anim.startFrame;
this.frame = this.texture.get(this.direction.offset + this.f);
this.startX = this.x;
this.startY = this.y;
}
}
}
}
// GameObject Player
class Player extends Phaser.GameObjects.Image {
constructor(scene, x, y, motion, direction, distance) {
super(scene, x, y, 'skeleton', direction.offset);
this.startX = x;
this.startY = y;
this.distance = distance;
this.motion = motion;
this.anim = anims[motion];
this.direction = directions[direction];
this.speed = 0.15;
this.f = this.anim.startFrame;
this.depth = y + 64;
scene.time.delayedCall(this.anim.speed, this.changeFrame, [], this);
}
changeFrame ()
{
this.f++;
var delay = this.anim.speed;
if (this.f === this.anim.endFrame)
{
switch (this.motion)
{
case 'walk':
this.f = this.anim.startFrame;
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
break;
case 'attack':
delay = Math.random() * 2;
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
case 'idle':
delay = 0.5 + Math.random();
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
case 'die':
delay = 6 + Math.random() * 6;
scene.time.delayedCall(delay * 1000, this.resetAnimation, [], this);
break;
}
}
else
{
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(delay * 1000, this.changeFrame, [], this);
}
}
resetAnimation ()
{
this.f = this.anim.startFrame;
this.frame = this.texture.get(this.direction.offset + this.f);
scene.time.delayedCall(this.anim.speed * 1000, this.changeFrame, [], this);
}
update ()
{
if (this.motion === 'walk')
{
this.x += this.direction.x * this.speed;
if (this.direction.y !== 0)
{
this.y += this.direction.y * this.speed;
this.depth = this.y + 64;
}
// Walked far enough?
}
}
}
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.json('map', 'assets/tests/iso/isometric-grass-and-water.json');
this.load.spritesheet('tiles', 'assets/tests/iso/isometric-grass-and-water.png', { frameWidth: 64, frameHeight: 64 });
this.load.spritesheet('skeleton', 'assets/tests/iso/skeleton8.png', { frameWidth: 128, frameHeight: 128 });
this.load.image('house', 'assets/tests/iso/rem_0002.png');
}
create ()
{
scene = this;
this.buildMap();
this.placeHouses();
skeletons.push(this.add.existing(new Skeleton(this, 240, 290, 'walk', 'southEast', 100)));
skeletons.push(this.add.existing(new Skeleton(this, 100, 380, 'walk', 'southEast', 230)));
skeletons.push(this.add.existing(new Skeleton(this, 620, 140, 'walk', 'south', 380)));
skeletons.push(this.add.existing(new Skeleton(this, 460, 180, 'idle', 'south', 0)));
skeletons.push(this.add.existing(new Skeleton(this, 760, 100, 'attack', 'southEast', 0)));
skeletons.push(this.add.existing(new Skeleton(this, 800, 140, 'attack', 'northWest', 0)));
skeletons.push(this.add.existing(new Skeleton(this, 750, 480, 'walk', 'east', 200)));
skeletons.push(this.add.existing(new Skeleton(this, 1030, 300, 'die', 'west', 0)));
skeletons.push(this.add.existing(new Skeleton(this, 1180, 340, 'attack', 'northEast', 0)));
skeletons.push(this.add.existing(new Skeleton(this, 1180, 180, 'walk', 'southEast', 160)));
skeletons.push(this.add.existing(new Skeleton(this, 1450, 320, 'walk', 'southWest', 320)));
skeletons.push(this.add.existing(new Skeleton(this, 1500, 340, 'walk', 'southWest', 340)));
skeletons.push(this.add.existing(new Skeleton(this, 1550, 360, 'walk', 'southWest', 330)));
this.cameras.main.setSize(1600, 600);
// this.cameras.main.scrollX = 800;
player = new Player(this, 240, 290, 'idle', 'southEast', 250);
this.add.existing(player);
}
update ()
{
skeletons.forEach(function (skeleton) {
skeleton.update();
});
// return;
const cursors = this.input.keyboard.createCursorKeys()
if (cursors.left.isDown)
{
player.direction = directions['west'];
player.motion = 'walk';
player.anim = anims['walk']
}
else if (cursors.right.isDown)
{
player.direction = directions['east']
player.motion = 'walk';
player.anim = anims['walk']
}
else if (cursors.up.isDown)
{
player.direction = directions['north']
player.motion = 'walk';
player.anim = anims['walk']
}
else if (cursors.down.isDown)
{
player.direction = directions['south']
player.motion = 'walk';
player.anim = anims['walk']
}
else
{
player.direction = directions['east']
player.motion = 'idle';
player.anim = anims['idle']
}
player.update();
}
buildMap ()
{
// Parse the data out of the map
const data = scene.cache.json.get('map');
const tilewidth = data.tilewidth;
const tileheight = data.tileheight;
tileWidthHalf = tilewidth / 2;
tileHeightHalf = tileheight / 2;
const layer = data.layers[0].data;
const mapwidth = data.layers[0].width;
const mapheight = data.layers[0].height;
const centerX = mapwidth * tileWidthHalf;
const centerY = 16;
let i = 0;
for (let y = 0; y < mapheight; y++)
{
for (let x = 0; x < mapwidth; x++)
{
const id = layer[i] - 1;
const tx = (x - y) * tileWidthHalf;
const ty = (x + y) * tileHeightHalf;
const tile = scene.add.image(centerX + tx, centerY + ty, 'tiles', id);
tile.depth = centerY + ty;
i++;
}
}
}
placeHouses ()
{
const house_1 = scene.add.image(240, 370, 'house');
house_1.depth = house_1.y + 86;
const house_2 = scene.add.image(1300, 290, 'house');
house_2.depth = house_2.y + 86;
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#ababab',
parent: 'phaser-example',
scene: [ Example ]
};
const game = new Phaser.Game(config);
const moveCamera = (game) => {
if (d)
{
game.cameras.main.scrollX -= 0.5;
if (game.cameras.main.scrollX <= 0)
{
d = 0;
}
}
else
{
game.cameras.main.scrollX += 0.5;
if (game.cameras.main.scrollX >= 800)
{
d = 1;
}
}
}