здесь я пытаюсь создать прокручиваемую панель, создав эту небольшую панель
const COLOR_PRIMARY = 0x4e342e;
var CreatePanel = function (scene) {
var panel = scene.rexUI.add.sizer({
width: 100,
orientation: 'y',
space: { item: 4 }
})
for (var i = 0; i < 50; i++) {
var name = `item-${i}`;
var label = scene.rexUI.add.label({
height: 350,
width: 1500,
background: scene.rexUI.add.roundRectangle({
color: COLOR_PRIMARY
}),
text: scene.add.text(
10,
10,
'Lorem Ipsum is simply dummy text of the pinting'),
name: name,
})
panel.add(label, { expand: true });
}
return panel;
}
но я не знаю, как добавить изображение в качестве значка и как изменить размер текста внутри панели. я добавил setWordWrapWidth, но когда я набираю длинное слово, я больше не могу переносить его Пожалуйста помоги!
В зависимости от вашего варианта использования вы можете использовать setFontSize
(ссылка на документацию ) или setScale
в тексте GameObject ( ссылка на документацию).
Для изображения/значка просто используйте свойство icon
(подробности см. в документации плагина ).
Вот короткая демонстрация:
document.body.style = 'margin:0;';
class ExampleScene extends Phaser.Scene {
constructor() {
super('ExampleScene');
}
preload() {
this.load.scenePlugin({
key: 'rexuiplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
sceneKey: 'rexUI'
});
}
create() {
let graphics = this.make.graphics();
graphics.fillStyle(0xffffff);
graphics.fillRect(0, 0, 10, 10);
graphics.generateTexture('icon', 10, 10);
var panel = this.rexUI.add.sizer({
x: 10, y: 10,
width: 300,
height: 100,
orientation: 1
}).setOrigin( 0 );
panel.add(this.rexUI.add.label({
x: 0,
y: 0,
text: this.add.text( 0, 0, 'Label 1 Normal Text'),
icon: this.add.image(0, 0, 'icon'),
squareFitIcon: true,
space: {
left: 10, right: 10, top: 10, bottom: 10,
icon: 10, text: 10,
}
}), { proportion: 1, expand: true });
panel.add(this.rexUI.add.label({
x: 0,
y: 40,
text: this.add.text( 0, 0, 'Label 2 18px Text')
.setFontSize('18px'),
icon: this.add.image(0, 0, 'icon'),
squareFitIcon: true,
space: {
left: 10, right: 10, top: 10, bottom: 10,
icon: 10, text: 10,
}
}), { proportion: 1, expand: true });
panel.add(this.rexUI.add.label({
x: 0,
y: 80,
text: this.add.text( 0, 0, 'Label 3 Scale x1.25 Text')
.setScale(1.25),
icon: this.add.image(0, 0, 'icon'),
squareFitIcon: true,
space: {
left: 10, right: 10, top: 10, bottom: 10,
icon: 10, text: 10,
}
}), { proportion: 1, expand: true });
panel.layout();
}
}
var config = {
width: 536,
height: 183,
scene: [ ExampleScene ],
parent: 'phaser-example',
banner: false
};
new Phaser.Game(config);
console.clear();
<script src = "//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
<div id = "phaser-example"></div>
Обновление к вопросу из комментария:
Как уже упоминалось в комментарии, есть много вариантов решения этой проблемы. Самый простой способ — «вложить» измерительный прибор.
Короткая демонстрация:
Эта демонстрация основана на этом примере, в примере используется один значок, я изменил его так, чтобы можно было отображать два значка, в свойствах icon1
и icon2
.
const Random = Phaser.Math.Between;
class Demo extends Phaser.Scene {
constructor() {
super({ key: 'examples' });
}
preload() {
this.load.scenePlugin({
key: 'rexuiplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
sceneKey: 'rexUI'
});
}
create() {
this.createTexureForIcons();
var x = config.width/2,
y = config.height/2,
minWidth = 300,
minHeight = undefined,
table = {
title: 'Title/Title/Title',
data: [{
icon1Texture: 'icon1',
icon2Texture: 'icon2',
name: 'AAA',
content: 'Hello',
},
{
icon1Texture: 'icon1',
icon2Texture: 'icon3',
name: 'BBBB',
content: 'World',
},
]
};
var sizer = getTable(this, x, y, minWidth, minHeight, table);
sizer.drawBounds(this.add.graphics(), 0xff0000);
}
createTexureForIcons(){
let graphics = this.make.graphics();
graphics.fillStyle(0xffffff);
graphics.fillRect(0, 0, 10, 10);
graphics.generateTexture('icon1', 10, 10);
graphics.fillStyle(0xff0000);
graphics.fillRect(0, 0, 10, 10);
graphics.generateTexture('icon2', 10, 10);
graphics.fillStyle(0x00ff00);
graphics.fillRect(0, 0, 10, 10);
graphics.generateTexture('icon3', 10, 10);
graphics.fillStyle(0x0000ff);
graphics.fillRect(0, 0, 10, 10);
graphics.generateTexture('icon3', 10, 10);
}
}
var getRow = function (scene, data) {
var icon1 = scene.add.image(0, 0, data.icon1Texture);
var icon2 = scene.add.image(0, 0, data.icon2Texture);
var nameLabel = scene.add.text(0, 0, data.name, {
fontSize: '24px',
color: 'white'
});
var contentLabel = scene.add.text(0, 0, data.content, {
fontSize: '24px',
color: 'white'
});
var sizer = scene.rexUI.add.sizer({
orientation: 'x',
})
.add(icon1, {expand: true, fitRatio: true})
.add(icon2, {expand: true, fitRatio: true})
.add(nameLabel, 2, 'left')
.add(contentLabel, 5, 'left');
return sizer;
}
var getTable = function (scene, x, y, width, height, table) {
var title = scene.add.text(0, 0, table.title, {
fontSize: '32px',
color: 'white'
});
var sizer = scene.rexUI.add.sizer(x, y, width, height, {
orientation: 'y',
})
.add(title);
var padding = {
top: 10,
//bottom: 10,
left: 10,
right: 10,
}
var data = table.data;
for (var i = 0, cnt = data.length; i < cnt; i++) {
sizer.add(getRow(scene, data[i]), 0, 'left', padding);
}
sizer.layout();
return sizer;
}
var config = {
width: 510,
height: 180,
scene: Demo
};
var game = new Phaser.Game(config);
<script src = "//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
На самом деле все зависит от вашего варианта использования, мне пришло в голову, что вы можете ограничить размер метки, обернув длинный текст, с помощью этой функции setWordWrapWidth
ссылка на документацию, ссылка на эту панель не должна расширяться, но текст будет состоять из нескольких строк.
большое спасибо, я отредактировал свой вопрос, можете ли вы дать мне другой ответ. большое спасибо и извините за мой ломаный английский
Ну, проблема в том, что фазер не может переноситься, если нет пробелов, но вы можете использовать функцию/свойство метки плагина rexUI wrapText
, вам придется установить его на 2
, это разбивает текст даже без пробелов.
большое спасибо. Я работаю так, как хочу. ты буквально спасатель жизни
Можете ли вы помочь мне, как добавить значок множителя в одну метку, я несколько раз читал документацию rexUi, но не могу найти, как добавить 3 или 4 значка вместо одного
Я думаю, что обычный сайзер не может добавлять несколько значков, но вы можете попробовать использовать плагинgridSizer. ссылка на документацию. В верхней части этой страницы есть несколько примеров. Или вы можете попробовать раскройные размеры, но это будет довольно сложно. Или создайте свой собственный класс изображений (который выводит/объединяет несколько изображений). Лучший способ зависит от вашего конкретного варианта использования.
Извините, что снова беспокою вас, но я не могу найти способ добавить значок в размер. Вы можете быть более конкретным
@ViễnThôngĐiệntử Я обновил свой ответ решением, надеюсь, это поможет.
@ViễnThôngĐiệntử Я обновил свой ответ, чтобы он работал для изображений. Кстати: вам следует создать новый вопрос, а не задавать дополнительный вопрос в комментариях (если это новый вопрос). Так как на StackOverflow должны быть вопросы/ответы должны быть сосредоточены (Статья по SO-вопросам ).
Большое спасибо. Могу ли я задать еще один вопрос? Когда я пытаюсь увеличить размер текста, ширина панели автоматически увеличивается. Знаете ли вы, как этого избежать?