Phaser 3游戏Android端自定义Dropdown弹窗黑屏问题求助

在Phaser 3游戏中使用原生DOM创建的自定义Dropdown组件，在iOS和Web端运行正常，但在Android（通过Capacitor打包的APK）环境下，点击展开下拉列表时屏幕会变黑。Dropdown通过原生DOM创建并动态添加选项，代码实现如下：

// Create a dropdown using HTML
const dropdown = document.createElement('select');
dropdown.style.position = 'absolute';
dropdown.style.zIndex = '1000';

const option1 = document.createElement('option');
option1.value = '1';
option1.text = 'Option 1';
dropdown.appendChild(option1);

const option2 = document.createElement('option');
option2.value = '2';
option2.text = 'Option 2';
dropdown.appendChild(option2);

document.body.appendChild(dropdown);
dropdown.addEventListener('change', (event) => {
  const selectedValue = (event.target as HTMLSelectElement).value;
  console.log('Selected Value:', selectedValue);
  if (selectedValue === '1') {
    console.log('Option 1 selected');
  } else if (selectedValue === '2') {
    console.log('Option 2 selected');
  }
});

游戏配置代码：

export class RobotGame extends Phaser.Game {
constructor() {
    super({
        type: Phaser.AUTO,
        scale: {
            width: Dimensions.designResolution.width,
            height: Dimensions.designResolution.height,
            mode: Phaser.Scale.NONE,
        },
        backgroundColor: "#000000",
        banner: false,
        zoom: 1,
        autoMobilePipeline: true,
        plugins: {
            global: [

            ],
            scene: [
                {
                    key: "rexGestures",
                    plugin: gestures,
                    mapping: "rexGestures",
                },
            ],
        },
        loader: {
            crossOrigin: "anonymous",
            baseURL: CDN_PATH,
        },
        parent: "DOMElementParent",
        dom: {
            createContainer: true,
        },
        render: {
            transparent: true,
            powerPreference: "high-performance",
            autoMobilePipeline: true,
        },
    });

    this.canvas.className = "game_canvas";

    SafeArea.getSafeAreaInsets().then((safeArea) => {
        this.bootGame(safeArea);
    });
}

private bootGame(safeArea: SafeAreaInsets): void {
    const ppi = window.devicePixelRatio;
    Dimensions.safeAreaInsets = {
        top: safeArea.insets.top * ppi,
        right: safeArea.insets.right * ppi,
        bottom: safeArea.insets.bottom * ppi,
        left: safeArea.insets.left * ppi,
    };

    this.scene.add("Boot", new Boot());
    this.scene.start("Boot");
}
}

使用版本：

• Phaser: 3.x
• Capacitor: 6
• @capacitor/android: ^6.0.0

调试与修复思路 #

1. 调整DOM元素挂载位置 #

• 当前代码将dropdown直接添加到document.body，而Phaser游戏指定了parent: "DOMElementParent"，尝试将dropdown挂载到该父容器内，避免Android WebView中的DOM层级冲突：

  // 替换document.body.appendChild(dropdown)
  const gameParent = document.getElementById('DOMElementParent');
  if (gameParent) gameParent.appendChild(dropdown);
  

• 显式设置Phaser canvas的z-index为999，确保dropdown的z-index（1000）高于canvas，避免被游戏画布覆盖。

2. 禁用Phaser自动移动渲染管线 #

• 配置中开启的autoMobilePipeline: true可能在Android WebView中与原生DOM元素存在渲染冲突，尝试在游戏配置和render配置中均关闭该选项：

  // 游戏根配置
  autoMobilePipeline: false,
  // render子配置
  render: {
      // ...其他原有配置
      autoMobilePipeline: false,
  }
  

3. 调整Android WebView硬件加速设置 #

• Android WebView的硬件加速可能导致DOM元素与Canvas渲染冲突，可通过Capacitor项目的AndroidManifest.xml禁用对应Activity的硬件加速：

  <activity
      android:name="com.getcapacitor.BridgeActivity"
      android:hardwareAccelerated="false">
      <!-- 其他原有配置 -->
  </activity>
  

  注意：禁用硬件加速可能影响游戏性能，测试后根据实际情况调整。

4. 替换原生select为模拟Dropdown组件 #

• 原生<select>在Android WebView中存在兼容性问题，改用纯CSS/JS模拟的Dropdown组件，避免依赖系统原生控件。例如使用Phaser DOM插件创建自定义下拉框：

  // 示例：用Phaser DOM插件创建触发按钮和自定义选项列表
  this.add.dom(100, 100, 'button', 'padding: 10px; background: #fff;', 'Select Option')
      .addListener('click')
      .on('click', () => {
          // 创建并显示自定义选项列表DOM元素
          const optionsList = document.createElement('div');
          optionsList.style.position = 'absolute';
          optionsList.style.top = '130px';
          optionsList.style.left = '100px';
          optionsList.style.background = '#fff';
          optionsList.style.padding = '10px';
          optionsList.innerHTML = '<div data-value="1">Option 1</div><div data-value="2">Option 2</div>';
          document.getElementById('DOMElementParent')?.appendChild(optionsList);
          
          // 绑定选项点击事件
          optionsList.querySelectorAll('div').forEach(item => {
              item.addEventListener('click', () => {
                  const value = item.getAttribute('data-value');
                  console.log('Selected Value:', value);
                  optionsList.remove();
              });
          });
      });
  

5. 远程调试Android WebView渲染状态 #

• 使用Chrome DevTools远程调试Android设备上的WebView：连接设备后，在Chrome浏览器中输入chrome://inspect，找到对应APK进程，查看DOM元素的样式、层级，排查是否有元素异常覆盖导致黑屏。
• 检查是否有visibility、opacity、transform等CSS属性在Android WebView中异常生效。

6. 调整Phaser透明背景设置 #

• 配置中设置了transparent: true，尝试改为transparent: false，测试是否是透明背景与WebView原生控件的渲染冲突导致黑屏。

内容的提问来源于stack exchange，提问作者Sahana Dattatreya Hegde