Bringing a Circle To Front

Phaser 3
1

tldr:
How do you bring a this.add.circle to front? Is it possible?

Hi all. I am developing a mobile/desktop game which is based on the original GTA demo. I am very new to phaser. Everything has gone well so far, but I have one question.

For movement on mobile, I am using the RexVirtualJoystickPlugin. The plugin works great for my application, but I am running into an issue. The joystick plugin uses this.add.circle to display the joystick, but this.add.circle seems to default to the very back of the z index. The joystick still works, but you can’t see it.

Here is a demo of the game (Archived because the joystick will be removed when on computer):

2

Add the joystick at the end of create().

Or use setDepth().

1 Like
3

Putting it at the end worked perfect for me, but I could not figure out how to use setDepth. I tried doing:
joystick.setDepth(100);
but that gave an error. I know I’m using it wrong, so how do I use it?

4 
this.joyStick = this.plugins.get('rexVirtualJoyStick').add(this, {
  x: 400,
  y: 300,
  radius: 100,
  base: this.add.circle(0, 0, 100, 0x888888).setDepth(1),
  thumb: this.add.circle(0, 0, 50, 0xcccccc).setDepth(2)
});