Maintaining Spacing between Two tweened bitmapText objects

Phaser 3
1

Good Afternoon,

I am running into an issue with maintaining spacing between two separate bitmapTexts.

Currently I am outputting the text “Streak x2” (or “x3”, “x4” etc…). The word “Streak” is one bitmap text and the multiplier text (x2) is another bitmap text. The multiplier text is in it’s own bitmapText because it has a different tint to set it apart.

My goal is to fade the text in and make yoyo in scale to look more exciting.

This is my tween currently

// bitmapText objects
const textTargets = [streakText, multiplierText]

_this.#scene.tweens.add({
    targets: textTargets,
    alpha: {value: 1, duration: 200, ease: "Cubic.easeIn"},
    scale: {value: 1.5, duration: 200, yoyo: true, ease: "Power2", repeat: 1},
    onComplete: function () {
        _this.#scene.tweens.add({
            targets: textTargets,
            alpha: 0,
            duration: 300,
            delay: 900,
            ease: "Power2",
        })
    }
})

The fade and scaling works well. However, the problem I’m running into is that the space between the two text targets remains the same as the scale increases. This causes the two to overlap towards the end of the tween.

Towards the beginning of the tween:
image

Towards the end of the tween:
image

My goal is that the spacing between the two text objects would scale as well so that there is no overlap.

Could anyone help direct me as to how to make this happen?

Thank you!

2

You could put those in a container and scale it instead, or adjust the origins of the text objects, or tween them separately and add an x to the tweens.

3

Thank you so much @samme!
The container solution was exactly what I needed.

  1. I added each of my text objects to the container
  2. I adjusted the location of each object to be relative to the container
  3. I removed the alpha and depth properties from the text objects and applied them to the container
  4. I adjusted the tween to apply to the container instead of the array of text objects

It works exactly as I was hoping. Thank you very much :smiley: :bowing_man:

1 Like