Confused by graphics methods

Phaser 3
1

I have a scene, with graphics that follow a player character around.

One of them is a circle called volumeMarker and one of them is a speech bubble.

If i create a speech bubble (set the fill color to white) then use updateVolumeGraphic, the volume marker becomes white, instead of fillStyle(0x000000, 0.1). Is this a bug? It’s easy to fix, but it’s annoying that I have to set all the styles anytime anything changes for another graphic?

Here is the code in question:

// volume marker
constructor() {
     this.volumeMarker = scene.add.graphics({ x: 0, y: 0 })
     this.volumeMarker.lineStyle(4, 0x000000, 0.1)
     this.volumeMarker.fillStyle(0x000000, 0.1)
     this.innerVolumeMarker = scene.add.graphics({ x: 0, y: 0 })
     this.innerVolumeMarker.lineStyle(4, 0x000000, 0.1)
     this.innerVolumeMarker.fillStyle(0x000000, 0.1)
}
// speech bubble
showSpeechBubble = (text: string, bubbleWidth: number = 150) => {
  this.removeSpeechBubble()
  this.bubbleWidth = bubbleWidth
  let bubblePadding = 10
  let content = this.scene.add.text(0, 0, text, {
    fontFamily: 'Roboto, Helvitica, Arial',
    color: '#000000',
    wordWrap: { width: bubbleWidth - bubblePadding * 2 },
  })

  this.content = content
  let b = content.getBounds()
  this.bubbleHeight = Math.max(b.height, 40)
  let arrowHeight = this.bubbleHeight / 4

  //  Calculate arrow coordinates
  let point1X = Math.floor(bubbleWidth / 7)
  let point1Y = this.bubbleHeight
  let point2X = Math.floor((bubbleWidth / 7) * 2)
  let point2Y = this.bubbleHeight
  let point3X = Math.floor(bubbleWidth / 7)
  let point3Y = Math.floor(this.bubbleHeight + arrowHeight)

  let bubble = this.scene.add.graphics(this.calculateBubblePosition())
  this.bubble = bubble
  //  Bubble shadow
  bubble.fillStyle(0x222222, 0.5)
  bubble.fillRoundedRect(6, 6, bubbleWidth, this.bubbleHeight, 16)

  //  Bubble color
  bubble.fillStyle(0xffffff, 1)

  //  Bubble outline line style
  bubble.lineStyle(4, 0x565656, 1)

  //  Bubble shape and outline
  bubble.strokeRoundedRect(0, 0, bubbleWidth, this.bubbleHeight, 16)
  bubble.fillRoundedRect(0, 0, bubbleWidth, this.bubbleHeight, 16)

  //  Bubble arrow shadow
  bubble.lineStyle(4, 0x222222, 0.5)
  bubble.lineBetween(point2X - 1, point2Y + 6, point3X + 2, point3Y)

  //  Bubble arrow fill
  bubble.fillTriangle(point1X, point1Y, point2X, point2Y, point3X, point3Y)
  bubble.lineStyle(2, 0x565656, 1)
  bubble.lineBetween(point2X, point2Y, point3X, point3Y)
  bubble.lineBetween(point1X, point1Y, point3X, point3Y)
  this.bubble = bubble
  this.updateContentPosition()
  bubble.depth = 50
  content.depth = 51
  this.speechBubbleTimeout = setTimeout(
    this.removeSpeechBubble,
    5000 + text.length * 100,
  )
}
  // update the volume graphic to match what the player selects
  updateVolumeGraphic = (
    scale: number,
    volume: number,
    { clear = true } = {},
  ) => {
    const radius = volume * scale
    if (clear) {
      this.innerVolumeMarker.clear()
      this.volumeMarker.clear()
    }
    this.volumeMarker.fillCircle(0, 0, radius)
    this.innerVolumeMarker.fillCircle(0, 0, radius / 2)
    this.innerVolumeMarker.strokeCircle(0, 0, radius / 2)
  }
2

:wave:

clear() resets the styles, but the fill shouldn’t change to white. You can set defaultFillColor etc. if you don’t want to set the fill again.

3

Every method you call on a Graphics object, including fill styles, is stored in an internal command queue. clear just clears that queue, which is why it resets the fill style, too. @samme’s suggestion is good.

4

Got it. Setting the defaults worked. I’m feeling a bit nervous now though. I guess I need to set defaults everywhere I use graphics.

Thanks for the advice.