Estoy tratando de hacer un botón con animación de enfriamiento con Phaser 3. Aquí está el código.
class BootScene extends Phaser.Scene { constructor() { super(); } preload() { this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/cooldown/'; for (var i = 0; i < 16; i++) { this.load.image("cooldown" + i, "cooldown" + i + ".png"); } this.load.image('magicAttack', 'magicAttack.png'); } create() { this.add.image(100, 100, 'magicAttack').setScale(1) var cd = this.add.sprite(100, 100, 'cooldown1').setFlipX(false).setScale(1.5) let ani_frames = []; for (var i = 0; i < 16; i++) { ani_frames.push({ key: "cooldown" + i }) } this.anims.create({ key: 'right', frames: ani_frames, frameRate: 11, repeat: 0 }); cd.play('right'); let circle2 = this.add.circle(100, 100, 150, 0x000000, 0).setScale(.2) cd.on('animationcomplete', () => { cd.setVisible(false) }); // circle.lineStyle(10, 0xffffff, 0.9); circle2.setStrokeStyle(50, 0x000000, 1); } } var config = { width: 400, height: 300, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false // set to true to view zones } }, backgroundColor: 0x000000, scene: [BootScene] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>El código anterior funciona como se esperaba, pero puede ser un poco pesado.
Sé que puedo hacer una hoja de sprites, pero todavía está en la forma de la imagen. ¿Es factible usar recorte o interpolaciones en Phaser 3 para hacer el trabajo?
Sé que también podría poner un DOM en la escena usando div para que la animación parezca más fácil. Sin embargo, parece menos estilo Phaser, ¿verdad?
El código de esta solución no es mucho más corto, pero es un poco más limpio/reutilizable.
Yo usaría Phaser Masks ( aquí está el enlace a la documentación )
Y cree una clase de ayuda, para abstraer toda la lógica de enmascaramiento e interpolación fuera de la escena.
Esta clase auxiliar hace que el botón también sea reutilizable (el nombre de la clase auxiliar quizás no sea el mejor).
La idea principal es:
Actualización menor: se corrigió el ángulo de inicio de la máscara para que coincida con su ejemplo.
class Button { constructor(scene, gameObject){ this.scene = scene; this.mask = scene.add.graphics().setVisible(false); this.mask.x = gameObject.x; this.mask.y = gameObject.y; gameObject.mask = new Phaser.Display.Masks.BitmapMask(scene, this.mask); } play(){ this.scene.tweens.add({ targets: this, hiddenPercent: { from: 0, to: 1 }, ease: 'Power0', repeat: 0, duraton: 300, onUpdate: _ => this.render() }); } render(){ this.mask.clear(); this.mask.fillStyle(0, 1); this.mask.beginPath(); this.mask.slice(0, 0, 24, -Math.PI/2, (2 * Math.PI * this.hiddenPercent) -Math.PI/2 , false); this.mask.fillPath(); } } class BootScene extends Phaser.Scene { preload() { this.load.image('magicAttack', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/cooldown/magicAttack.png'); } create() { let hand = this.add.image(100, 100, 'magicAttack').setScale(1); let button = new Button(this, hand); button.play(); } } var config = { width: 400, height: 300, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false // set to true to view zones } }, backgroundColor: 0x000000, scene: [BootScene] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>