SuperAPI AI 工具集

phaser-mobile

编程与开发

查看项目

更新于 10-15 23:24

技能介绍

用途:面向 Phaser 4 的移动端与响应式游戏开发,涵盖屏幕适配、触控操作、性能约束与打包发布。

主要能力:

  1. Scale Manager:通过 GameConfig 的 scale 字段配置模式。FIT 保持宽高比并加黑边,适合固定分辨率游戏;ENVELOP 填满屏幕可能裁边;RESIZE 让画布随窗口变化,需配合 resize 事件重新布局 UI;NONE 不缩放。
  2. 触摸控制:Phaser 的 pointerdown、pointerup、pointermove 在移动端自动对应触摸;点击目标最小建议 44×44 逻辑像素。
  3. 响应式布局:用屏幕宽高的比例定位 UI 与字号,避免固定像素。
  4. 手势拦截:文档级 touchmove 阻止滚动缩放、touchend 判断双击缩放、contextmenu 阻止长按菜单,场景内可调用 this.input.mouse?.disableContextMenu()。
  5. 音频解锁:Phaser 在首次指针或按键事件后恢复 AudioContext;加载即播放音频时可用“TAP TO START”遮罩并监听 Phaser.Sound.Events.UNLOCKED。
  6. 设备检测:this.sys.game.device 提供 os、browser、input.touch、features.webGL 等标记。
  7. 性能:图集最大 2048×2048(低端设备建议 1024×1024),移动端同时动态物理体控制在 50 个以下,粒子上限 50–100,慎用 camera.shake() 与快速 zoom;像素画可开启 pixelArt 与 roundPixels。目标 60fps,无法维持时用 30fps 优于不稳定的 45fps。
  8. Capacitor 部署:npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android;npx cap init "My Game" com.mygame.app --web-dir=dist;npm run build;npx cap add ios / android;npx cap sync;npx cap open ios / android。可通过 Haptics、ScreenOrientation 等插件提供震动与方向锁定。
  9. PWA:提供 manifest.json、相关 meta 标签与 viewport 设置,离线支持可配合 vite-plugin-pwa 的 service worker。

适用场景:手机网页游戏、Capacitor 原生壳应用、可安装 PWA 游戏,以及需要跨桌面与移动端的响应式项目。

限制与注意:RESIZE 模式要求所有 UI 与布局响应尺寸变化;屏幕方向锁在 Web 上支持有限,原生插件更可靠;各平台音频格式、图集大小、震动与离线能力存在差异,需按目标平台分别配置。具体参考资料见 references/mobile-patterns.md 与 references/device-profiles.md。