画像を使用せずに凝ったボタンを作成する(graphics)(Phaser3)

やりたいこと

Phaser3ではGameObjectにクリックのイベントを登録してボタンとして使用することができます。

しかしGameObjectは四角形や円などで画像を使用する以外に凝ったボタンを作成する子は難しいです。

ここではgraphicsオブジェクトを使用して凝った(過度の丸い)ボタンを作成します。

コード

以下の関数を作成しました。

function createRoundedRectangle(scene, x, y, width, height, radius, fill, stroke, strokeThickness) {
    const graphics = scene.add.graphics();
  
    graphics.fillStyle(fill);
    graphics.lineStyle(strokeThickness, stroke);
  
    graphics.beginPath();
    graphics.moveTo(x + radius, y);
    graphics.lineTo(x + width - radius, y);
    graphics.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, 0, false);
    graphics.lineTo(x + width, y + height - radius);
    graphics.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5, false);
    graphics.lineTo(x + radius, y + height);
    graphics.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI, false);
    graphics.lineTo(x, y + radius);
    graphics.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5, false);
    graphics.closePath();
    graphics.fillPath();
    graphics.strokePath();

    
    graphics.setInteractive(new Phaser.Geom.Rectangle(x, y, width, height), Phaser.Geom.Rectangle.Contains);
    return graphics;
  }

graphics.setInteractiveを他のオブジェクトのように引数なしで呼ぶと動作しないので注意してください。

呼び出し

上の関数はSceneクラスの中から以下のように呼び出します。

let x = 100;
let y = 200;
let font_size = 10;
let fill_color  =  0xffffff ;
let stroke_color = 0x000000;
let strokeThickness = 3; 
let func = () =>{alert()};

createRoundedRectangle(this, x, y, width, height, radius, fill_color, stroke_color, strokeThickness).on('pointerup', func);

結果

画像を使用せずに凝ったボタンを作成することができました。

ただしこの関数は文字列を表示しないので、文字を表示したい場合は別に表示する必要があります。