Phaser中如何实现按钮图片根据动态文本自适应调整大小

两个异常交替随机出现，本质是三个代码逻辑错误共同导致的：

• 数组索引越界触发cannot read properties of undefined (reading getBounds)报错：你初始化count取的是1-4的随机值，还把自增的count值直接push进gorp数组当索引用，但answs数组在for循环里总共只会存入4个文本对象，合法索引范围是0-3。当初始count随机到4时，gorp[0]的值就是4，answs[4]不存在，自然读不到getBounds方法。
• API调用方式错误触发按钮消失：Phaser.Geom.Rectangle.GetSize返回值是一个包含width、height属性的对象，而setDisplaySize要求传入两个独立数值参数分别对应宽、高，你直接传入整个对象会导致参数解析异常，按钮宽高被设为非法值，无法正常渲染。
• 代码块存在语法问题：你贴的代码末尾多了一个多余的闭合大括号}，会在部分运行场景下触发语法解析异常。

当初始count随机到1-3时，索引暂时合法但参数传错，就会出现按钮消失的现象；当初始count随机到4时直接触发越界报错，所以页面重载时两个问题会交替出现。

直接替换成以下逻辑即可，额外加了按钮内边距避免文本贴边：

// count从0开始初始化，对齐数组索引规则
let count = 0;
for(let i = 50;i <= 750;i = i +200){
    // quiz的文本索引从1开始取，和之前的取值逻辑对齐
    const bingus = this.add.text(i, 400, quiz[category][difficulty][quest][count + 1]);
    answs.push(bingus);
    // 存入文本对象在answs数组中的真实索引，不要存count变量值
    gorp.push(answs.length - 1);
    count++;
}

// 单独获取文本边界，拆分宽高作为参数传入，额外加40px水平内边距、20px垂直内边距
const textBounds = answs[gorp[0]].getBounds();
this.butt1.setDisplaySize(textBounds.width + 40, textBounds.height + 20);

后续如果要让文本居中显示在按钮上，直接给文本对象调用setOrigin(0.5)，再把文本坐标对齐到按钮的中心坐标就行，不需要手动计算偏移值。

内容的提问来源于stack exchange，提问作者Aciddragon