Question

创建具有相同设计但不同文本（短文本，中等长度文本，长文本）的3个按钮的解决方法是什么：

a）我需要3张不同的图像作为背景吗？如果我不知道文字长度怎么办？

b）还是当文本需要更多/更少的空间来容纳文本时，我可以使用单个图像并以某种方式水平/垂直地缩放/拉伸它？

我希望每个按钮都不需要数百张图片：）

我只是一个初学者。最佳做法是什么？

这是我创建响应式按钮和文本的方式：

buttonSprite2 = game.add.sprite(352, 76,'button');
buttonSprite2.position.set(200, 0);
buttonSprite2.inputEnabled = true;
buttonSprite2.events.onInputDown.add(listener2, this);

var style = { font: "32px Arial", fill: "#ffffff", wordWrap: true, align: "center", backgroundImage:'button'};
buttonText2 = game.add.text(0, 0, "stop text", style);
buttonText2.wordWrapWidth = game.world.width - 400;

// trying to center the text within the button
buttonText2.position.set(buttonSprite2.x + 100, buttonSprite2.y+15);

// trying to make the button responsive 
if(buttonText2.width < game.world.width - 400){
    buttonSprite2.width = buttonText2.width + 200;
}
else{
    buttonSprite2.width = game.world.width - 300;
    buttonSprite2.height = buttonText2.height + 30;
}

Answer 1

您只需load（在preload功能中）一次图像。但是您需要add（在create功能中）为3个按钮提供3张图像。

用于根据文本大小更改此按钮图像的大小。首先，您添加图像，然后添加文本。现在，在添加文本之后，检查该文本对象的height或width并根据文本的height和width更改按钮图像的大小。

您可以定义单独的函数来执行此操作。因此，如果按钮过多，则可以删除多余的代码。

如何使用Phaser制作带有动态文本的按钮？

1 个答案: