Как сделать кнопку с динамическим текстом с помощью Phaser? - PullRequest
Новая
       9

Как сделать кнопку с динамическим текстом с помощью Phaser?

0 голосов
/ 14 февраля 2019

Какой обходной путь для создания 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;
}

1 Ответ

0 голосов
/ 14 февраля 2019

Вам нужно load (в функции preload) изображение только один раз.Но вам нужно add (в функции create) 3 изображения для 3 кнопок.

Для изменения размера этой кнопки изображения в соответствии с размером текста.Сначала вы добавляете изображение, затем добавляете текст.Теперь, после добавления текста, проверьте height или width этого текстового объекта и измените размер изображения кнопки в соответствии с height и width текста.

Вы можете определить отдельную функцию для этого.Таким образом, вы можете избавиться от избыточного кода, если у вас слишком много кнопок.

...