I’m trying to make a 4-directions game and I’m stuck on how to add the update() function to a custom class because I need to add this character to the scene.
It works well in a single scene, this is an example.
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player = new Phaser.Class({
Extends: Phaser.GameObjects.Sprite
,
});
function create ()
{
this.add.image(400, 300, 'sky');
platforms = this.physics.add.staticGroup();
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('npc3', { start: 4, end: 7 }),
frameRate: 5,
repeat: 5
});
this.anims.create({
key: 'down',
frames: this.anims.generateFrameNumbers('npc3', { start: 0, end: 3 }),
frameRate: 5,
repeat: 5
});
this.anims.create({
key: 'turn',
frames: [ { key: 'npc3', frame: 0 } ],
frameRate: 5
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('npc3', { start: 8, end: 11 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'up',
frames: this.anims.generateFrameNumbers('npc3', { start: 9, end: 11 }),
frameRate: 5,
repeat: 5
});
var graphics = this.add.graphics();
// the path for our enemies
// parameters are the start x and y of our path
path = this.add.path(150, 150);
path.lineTo(300, 150);
path.lineTo(300, 300);
path.lineTo(150, 300);
path.lineTo(150, 150);
graphics.lineStyle(3, 0xffffff, 1);
path.draw(graphics);
//add pathFollower
guard = this.add
.follower(path, 150, 150, "npc3")
.startFollow({
duration: 30000,
loop: -1
});
}
function update (){
//animation
// Approximate tangent
var t = guard.pathTween.getValue();
var p1 = path.getPoint(Clamp(t - 1e-6, 0, 1));
var p2 = path.getPoint(Clamp(t + 1e-6, 0, 1));
var dir = p2.clone().subtract(p1);
if (dir.x > 0) guard.anims.play("right", true);
else if (dir.x < 0) guard.anims.play("left", true);
else if (dir.y > 0) guard.anims.play("down", true);
else if (dir.y < 0) guard.anims.play("up", true);
else guard.anims.stop();
}
Now I have a custom class in the scene.
This is the scene
import { PatrolGuard } from "../game-objects/patrol_guard.js";
export class Level1Scene extends Phaser.Scene {
constructor() {
super('Level1Scene');
}
init() {
var Clamp = Phaser.Math.Clamp;
//code for other objects
this.scene.launch('InventoryScene');
this.inventoryScene = this.scene.get('InventoryScene');
Phaser.GameObjects.GameObjectFactory.register('player', function(x, y) {
var sprite = new Player(x, y, this.scene);
this.displayList.add(sprite);
this.updateList.add(sprite);
return sprite;
});
//adding custom class
Phaser.GameObjects.GameObjectFactory.register('patrolGuard', function(x, y, w, h) {
var sprite = new PatrolGuard(x, y, w, h, this.scene);
this.displayList.add(sprite);
this.updateList.add(sprite);
return sprite;
});
}
//load sprite sheet
preload() {
this.load.spritesheet('npc3', 'assets/_old-test-sprites/Guard.png', { frameWidth: 32, frameHeight: 32 });
this.load.spritesheet('patrol_guard', 'assets/_old-test-sprites/Guard.png', { frameWidth: 32, frameHeight: 32 });
this.load.spritesheet('player', 'assets/_old-test-sprites/Guard.png', { frameWidth: 32, frameHeight: 32 });
}
create() {
//create animation
this.anims.create({
key: 'player-left',
frames: this.anims.generateFrameNumbers('patrol_guard', { start: 4, end: 7 }),
frameRate: 5,
repeat: 5
});
//create Instance
var guard2 = this.physics.add.existing(this.add.patrolGuard(360, 650, 300, 40));
}
and this is the custom class
export class PatrolGuard extends Phaser.GameObjects.PathFollower {
constructor(x, y, w, h, scene) {
var path = scene.add.path(x, y);
path.lineTo(x + w, y);
path.lineTo(x + w, y + h);
path.lineTo(x, y + h);
path.lineTo(x, y);
super(scene, path, 0, 0, 'patrol_guard');
this.startFollow({
positionOnPath: true,
duration: 8000,
repeat: -1,
rotateToPath: false,
verticalAdjust: true
});
}
//the problem for updating, NPC stops moving even there is no code inside preUpdate().
preUpdate(){
var Clamp = Phaser.Math.Clamp;
var t = this.pathTween.getValue();
var p1 = this.path.getPoint(Clamp(t - 1e-6, 0, 1));
var p2 = this.path.getPoint(Clamp(t + 1e-6, 0, 1));
var dir = p2.clone().subtract(p1);
if (dir.x > 0) this.anims.play("player-right", true);
else if (dir.x < 0) this.anims.play("player-left", true);
else if (dir.y > 0) this.anims.play("player-down", true);
else if (dir.y < 0) this.anims.play("player-up", true);
else this.anims.stop();
}
I tried to move preUpdate() into constructor and it will be the same as adding update() into create() in the first example.
I think there is something wrong with preUpdate(), I tried use update() or postUpdate() instead of preUpdate(), then NPC can move, but the code inside which is animation part doesn’t work.
Any suggestions will be appreciated.