Phaser 3中Tween方法导致按钮恢复原始尺寸而非自定义尺寸问题

问题根源：高亮和清除高亮的补间动画中，你直接将按钮图片的scale设为1.1或1，但这个scale是相对图片原始尺寸的比例，而非你初始设置的适配屏幕的缩放值。初始计算的缩放比例存在全局变量this.xScale/this.yScale中，会被后续创建的按钮覆盖，且补间重置时直接回到图片原始大小。

修复步骤 #

1. 给每个按钮图片单独保存初始缩放比例，避免全局变量覆盖
2. 补间动画基于保存的初始缩放值计算目标比例

修改后的代码 #

1. 修正createAnswerButton方法

createAnswerButton(x, y, buttonWidth, buttonHeight, imageKey, answer, row, col) {
    // Create button container
    let buttonContainer = this.add.container(x, y);

    // Button background image
    let buttonImg = this.add.image(0, 0, imageKey);

    // 给当前按钮图片单独存储初始缩放比例
    buttonImg.initialScaleX = buttonWidth / buttonImg.width;
    buttonImg.initialScaleY = buttonHeight / buttonImg.height;

    buttonImg.setScale(buttonImg.initialScaleX, buttonImg.initialScaleY);
    console.log("SCALE: ", buttonImg.initialScaleX, buttonImg.initialScaleY);
    console.log("Img size: ", buttonImg.width, buttonImg.height);
    console.log("Display size: ", buttonImg.displayWidth, buttonImg.displayHeight);
    
    // Display answer text centered inside the button
    let text = this.add.text(0, 0, answer.text, {
        fontSize: `${Math.floor(buttonHeight * 0.3)}px`, // Scale text based on button height
        fill: '#000000',
        fontWeight: 'bold',
        fontFamily: 'Arial'
    }).setOrigin(0.5, 0.5);

    // Add elements to container
    buttonContainer.add([buttonImg, text]);

    // Calculate the size of the container based on its children (button image and text)
    const bounds = buttonContainer.getBounds(); // Get bounds of the container
    buttonContainer.setSize(bounds.width, bounds.height); // Set the size of the container based on the bounds
    console.log("BOUNDS CONTAINER: ", bounds.width, bounds.height);

    // Store button in buttons array
    if (!this.buttons[row]) this.buttons[row] = [];
    this.buttons[row][col] = { 
        container: buttonContainer,
        correct: answer.correct 
    };
}

2. 修正highlightButton方法

highlightButton(buttonObject) {
    let buttonImage = buttonObject.container.list[0];
    let buttonText = buttonObject.container.list[1];

    console.log("Image: ", buttonImage);
    console.log("Text: ", buttonText);

    this.tweens.add({
        targets: buttonImage,
        scaleX: buttonImage.initialScaleX * 1.1,
        scaleY: buttonImage.initialScaleY * 1.1,
        duration: 200,
        ease: 'Power5'
    });

    this.highlightText(buttonText);
}

3. 修正clearHighlight方法

clearHighlight(buttonObject) {
    let buttonImage = buttonObject.container.list[0];
    let buttonText = buttonObject.container.list[1];

    this.tweens.add({
        targets: buttonImage,
        scaleX: buttonImage.initialScaleX,
        scaleY: buttonImage.initialScaleY,
        duration: 200,
        ease: 'Power5'
    });

    this.clearHighlightText(buttonText);
}

4. 修正displayAnswerButtons中的按钮销毁逻辑

displayAnswerButtons(answers) {
    const buttonYStart = window.innerHeight / 6 * 4;
    const buttonSpacingY = window.innerHeight / 6 / 10;

    const buttonWidth = this.screenWidth * .4;
    const buttonHeight = window.innerHeight * .12;

    // 正确销毁二维数组中的所有按钮容器
    if (this.buttons.length > 0) {
        this.buttons.forEach(row => {
            row.forEach(button => { button.container.destroy(); });
        });
        this.buttons = [];
    }

    for (let i = 0; i < answers.length; i++) {
        let row = Math.floor(i / 2);
        let col = i % 2;
        let x = (col == 0) ? this.screenWidth / 4 : (this.screenWidth / 4) * 3;
        let y = (row == 0) ? buttonYStart : buttonYStart + buttonHeight + buttonSpacingY;

        this.createAnswerButton(x, y, buttonWidth, buttonHeight, this.buttonImages[i].key, answers[i], row, col);
    }
    this.highlightButton(this.buttons[this.selectedButtonIndex.row][this.selectedButtonIndex.col]);
}

内容的提问来源于stack exchange，提问作者maarten van hove