how to make image background of text in phaser js? - phaser-framework

Question

my Image is the and code is here i want to make nameplate of text. This is scorolble panel.
const updatePanel = (panel, content) => {
const sizer = panel.getElement("panel");
const { scene } = panel;
var nameImage, nameText;
sizer.clear(true);
const lines = content.split("\n");
for (let li = 0, lcnt = lines.length; li < lcnt; li += 1) {
const words = lines[li].split(" ");
for (let wi = 0, wcnt = words.length; wi < wcnt; wi += 1) {
nameText = sizer.add(
scene.add
.text(0, 0, words[wi], {
fontSize: 20,
fill: "#f4b331",
})
.setInteractive()
.on("pointerdown", () => {
// this.scene.print.text = this.text;
// this.setTint(Phaser.Math.Between(0, 0xf4b331));
})
);
console.log("new line")
}
if (words != '' && content != "Loading...") {
nameImage = sizer.add(scene.add.sprite(0, 0, "nameplate"));
}
if (li < lcnt - 1) {
sizer.addNewLine();
}
}
panel.layout();
return panel;
};
my Image is the and code is here i want to make nameplate of text. This is scorolble panel.

Answer 1

const updatePanel = (panel, content) => {
const sizer = panel.getElement("panel");
const { scene } = panel;
var nameImage, nameText;
sizer.clear(true);
const lines = content.split("\n");
for (let li = 0, lcnt = lines.length; li < lcnt; li += 1) {
const words = lines[li];
for (let wi = 0, wcnt = words.length; wi < wcnt; wi += 1) {
}
sizer.add(
scene.add
.text(0, 0, ' ', {
fontSize: 20,
fill: "#f4b331",
})
);
if (words != '' && content != "Loading...") {
nameImage = sizer.add(
new ScoreBg(
scene,
0,
0,
"nameplate",
"nameplate",
words,
"",
"",
"#f4b331"
)
// scene.add.sprite(0, 0, "nameplate"),
);
// nameImage
}
if (li < lcnt - 1) {
sizer.addNewLine();
}
}
panel.layout();
return panel;
};