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.