# Problem with preUpdate() in extend classes

**URL:** <https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232>\
**Category:** Phaser 3\
**Created:** [May 6, 2020, 10:51pm UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232 "2020-05-06T22:51:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![samathir](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@samathir](https://phaser.discourse.group/u/samathir)\
**Post date:** [May 6, 2020, 10:51pm UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232/1 "2020-05-06T22:51:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 6, 2020, 11:04pm UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232/2 "2020-05-06T23:04:40Z")

</div>

[https://github.com/samme/phaser3-faq/wiki#how-do-i-run-a-game-objects-update-method-automatically](https://github.com/samme/phaser3-faq/wiki#how-do-i-run-a-game-objects-update-method-automatically)

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [May 7, 2020, 12:12am UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232/3 "2020-05-07T00:12:34Z")

</div>

This is what i use with preUpdate, this make animations works:

```javascript
preUpdate(time, delta) {
    super.preUpdate(time, delta);
}

```

---

<div class="post-metadata">

**Author:** ![samathir](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@samathir](https://phaser.discourse.group/u/samathir)\
**Post date:** [May 7, 2020, 4:06am UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232/4 "2020-05-07T04:06:27Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![samathir](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@samathir](https://phaser.discourse.group/u/samathir)\
**Post date:** [May 7, 2020, 4:06am UTC](https://phaser.discourse.group/t/problem-with-preupdate-in-extend-classes/6232/5 "2020-05-07T04:06:53Z")

</div>

Thanks!