Criando botões sofisticados sem usar imagens (DOM) (Phaser3)

Coisas que eu quero fazer

No Phaser3, você pode registrar eventos de clique em um GameObject e usá-lo como um botão.

No entanto, com GameObjects, é difícil criar botões elaborados, a não ser usando imagens com formas simples como retângulos e círculos.

Aqui, usaremos o objeto DOM para criar um botão sofisticado.

Como criar

O método para criar objetos DOM foi explicado no seguinte artigo.

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

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

blog.marunokan.com

2024.12.25

Com base no artigo, criei a seguinte função.

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;
}

A variável `style` é usada para definir o estilo do botão.

Adicionei border-radius e user-select.

Em particular, é mais seguro definir `user-select` como `none`, porque, caso contrário , o texto interno poderá ser selecionado arrastando-o.

chamar

A função acima é chamada de dentro da classe Scene da seguinte forma:

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 )

O HTML também pode conter outras tags, como mostrado no exemplo. Quebras de linha também podem ser criadas usando tags como
.

Resultado

Consegui criar um botão elaborado sem usar nenhuma imagem.

O texto exibido é MASTONELADA.