Add Generated Textures as Animation Frames

Phaser 3
1

I’m using the Phaser.GameObjects.Graphics library to create a sequence of rounded rectangles as follows:

let testGraphics = this.add.graphics(),
  startSize = [300, 100],
  endSize = [600, 400],
  frameTotal = 32,
  widthStep = Math.floor((endSize[0] - startSize[0]) / frameTotal),
  width = startSize[0],
  height = startSize[1],
  testAnim = this.anims.create({key: 'testAnimX'})

testGraphics.lineStyle(1.2, 0xffffff)

for(width; width <= endSize[0]; width += widthStep) {
  let frameKey = `outlineSquircle${width}x${height}`
  if (!this.textures.exists(frameKey)) {
    testGraphics
      .clear()
      .strokeRoundedRect(2, 2, width, height, 15)
      .generateTexture(frameKey, width + 4, height + 4)
      .clear()
  }
  // TODO: add the texture I just generated as an animation frame, but how??
}

In that for loop above, I am generating a sequence of rounded rectangles of increasing width, and I would like to add each of these as an animation frame, but I’m not sure how to do this. The only Phaser 3 example that seems remotely similar to what I’m trying to do is this:

https://labs.phaser.io/edit.html?src=src\animation\create%20animation%20from%20canvas%20texture.js

But in that example, he is creating a spritesheet by concatenating all of the textures together in a big grid. This seems unnecessary in my case, since I already have my textures separated out into individual sprites. I feel like it should be simple to add them each as animation frames without creating a giant spritesheet, but I don’t know how to do that.

If anybody has done something like this before, and can point me to the right spot in the documentation, it would be much appreciated.

2

I didn’t test it, but I think you can just pass an array of { key: frameKey } to Animation config’s frames.

The reason why that example creates a single texture is because it’s not much more difficult, but a lot faster on webgl (every texture change means another draw call).