Graphics not working as per examples (specifically clear, on both WEBGL and CANVAS)

[ERBarratt]

Hi chaps,

I have written a custom physics class, and I want to be able to draw debug graphics when the game is in debug mode.

The class is passed the current scene, various bodies and static objects.

The debug block is pretty simple, I just want to loop over some objects and draw either a point or line for that object. The physics object has a property I set in the constructor called this.gfx.

Please see https://labs.phaser.io/edit.html?src=src\game objects\graphics\health bars demo.js - I am doing the same as far as I can tell to the health bar object.

this.debugpoint is used to use it's location to draw points instead of making new points for every object in the dynamic objects loop.

So, I try to clear(), then set a style, draw the various points, set a line style, and then draw a number of lines. However, there are a few problems:

1. If I just use this.gfx = this.scene.add.graphics();  --- OR --- this.gfx = new Phaser.GameObjects.Graphics(this.scene); in the constructor, and then leave the code as below - it doesn't work (nothing drawn).
2. If I un-comment this.gfx = this.scene.add.graphics(); from the code below, it works but doesn't clear the previous frame (see screenshot)
3. If I un-comment this.gfx = new Phaser.GameObjects.Graphics(this.scene); it doesn't work (nothing drawn) - but no console errors??

I obviously don't want to instantiate a graphics object on every update, but currently it's the only way to get these points and lines drawn to the screen. Am I missing something? I thought clear removes all previous drawn things + styles?

Am I using graphics incorrectly? Does each object to be drawn require a gfx object of it's own? Do I need to manually flush the drawing if using new Phaser.GameObjects.Graphics vs Scene.add.graphics?

This debug block is called in the Scene update() function.

if (this.debug == true) {
  // why does this make things draw?
  // this.gfx = this.scene.add.graphics();

  // but this doesn't?
  // this.gfx = new Phaser.GameObjects.Graphics(this.scene);

  this.gfx.clear();
  this.gfx.fillStyle(0x2266aa, 1.0);

  // dynamic
  for (var i = 0; i < this.dynamicObjects.length; i++) {
    let obj = this.dynamicObjects[i];
    this.debugPoint.x = obj.x;
    this.debugPoint.y = obj.y + obj.body.pointOffset.y;
    this.gfx.fillPointShape(this.debugPoint, 2);
  }

  this.gfx.lineStyle(1, 0xFF00FF, 1.0);

  // static lines
  for (var i = 0; i < this.staticObjects.length; i++) {
    let obj = this.staticObjects[i];
    this.gfx.strokeLineShape(obj);
  }
}

 

[samme]

You need only one debug graphic per scene. Try to get it working that way, separate from any custom physics class. Create once, then clear and draw during update. Use the scene methods only.

Usually it should be the topmost (last) object in the scene. You can use 

console.log(this.children.list);

at the end of scene create() to check this.

[ERBarratt]

Hi Samme,

I have had graphics working just fine in the Scene's Create() and Update() methods before - is there any reason why it shouldn't pass by reference through to another class? The example in the link I gave does just that - I'm using 3.15.1 too.

I will do as you suggested and report back.

Thanks,

Elliott.

[ERBarratt]

Samme you amazing chap you.

I was instantiating the physics class (thus in it's constructor also the scene graphics object) at the top of the Scene's create(), and everything else - sprites, images etc AFTER that.

I have now moved the call to make gfx to the bottom of the Scene's create() to: this.physics.gfx = this.add.graphics();

All now works as expected!