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

やりたいこと

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

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

ここではDomオブジェクトを使用して凝ったボタンを作成します。

作成方法

Domのオブジェクトは以下の記事で作成方法を紹介しました。

Domオブジェクトを使うまとめ(Phaser3)

やりたいことPhaser3上にHTMLのタグ(DOM)を配置するDomオブジェクトを使用すると、他のGameObjectとは使用方法が異なったため使用方法と注意点をまとめます。使用方法準備DOMオブジェクト...

blog.marunokan.com

2024.12.25

記事を踏まえて以下の関数を作成しました。

export function createBtn(scene, x, y, text, font_size, color, callback){
    let el = document.createElement('div');
    el.innerHTML = text
    el.onclick =callback;
    let style = "font: ' + font_size + 'px Arial;color:' + color + ';border-color:' + color + ';border:solid; ";// you should add button style
    let btn = scene.add.dom(x, y, el, style); 

    return btn;
}

style変数にはボタンのスタイルを設定します。

私は追加でborder-radiusとuser-selectを設定しました。

特にuser-selectはnoneに設定しないと中の文字列がドラッグで選択できてしまうため設定していたほうが無難です。

呼び出し

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

let x = 100;
let y = 200;
let html = "BUT<i>TON</i>"
let font_size = 10;
let color  =  "#000000" ;
let func = () =>{alert()};
createRadiusBtn(this, x, y, html ,font_size , color ,func )

htmlは例のように他のタグを含むこともできます。<br>などで改行することもできます。

結果

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

表示している文字列は”BUT<i>TON</i>”です。