JSFiddle - React, Tailwind, and code Playground

by shiqangpan

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

JavaScript

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, 0, 2 * Math.PI * this.hiddenPercent, 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);