Cocos 游戏跨平台——Web 构建后丢进 PakePlus 即成多端客户端

PakePlus 文档明确支持的场景

PakePlus 官方文档站的使用场景里第一条就是：

你的 Cocos 游戏是不是想要跨平台客户端运行？完全没有问题。

原理和 Vue/React 一样——Cocos Creator 的 Web 平台构建产物本身就是标准静态文件。

流程概览

Cocos Creator 项目 → 构建 WebMobile 平台 → release/web-mobile-desktop/ 目录 → PakePlus 打包

步骤一：Cocos Creator 构建

平台选择

Cocos Creator 提供多种构建平台：

构建配置

1. 菜单 → 项目 → 构建发布
2. 选择平台：Web Mobile 或 Web Desktop（通常选 Web Mobile，适配范围更广）
3. 填写构建路径（建议默认）
4. 点构建按钮等待完成

产物目录结构

build/web-mobile-desktop/
├── index.html
├── assets/                  ← 游戏素材（图片、音频、Prefab）
├── src/                     ← 编译后的 JS 代码
├── settings.json            ← 游戏配置
└── cocos2d-js-min.js        ← Cocos 引擎 JS

步骤二：调整 index.html（关键）

Cocos Creator 默认生成的 index.html 里，资源引用是相对路径——这点和 PakePlus 兼容性好。但有两个常见坑：

坑一：Canvas 尺寸硬编码

默认 index.html 里 Canvas 可能写死了 1280×720。PakePlus 打包的窗口尺寸不一定是这个比例。

解决：让 Canvas 自适应窗口：

<!-- index.html 里找到 Canvas 样式 -->
<style>
  canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
</style>

坑二：全屏按钮和触控交互

PakePlus 桌面端窗口内，游戏的全屏按钮可能无效（WebView 里的全屏需要 Tauri 的额外处理）。建议：

• 桌面端直接让 Canvas 填满窗口（上面的 CSS 已解决）
• 移动端用 PakePlus 的窗口模式设成 iPhone/Android 尺寸

步骤三：PakePlus 打包

1. 创建项目 → 类型选"定制"
2. 软件配置页面的"网站地址"字段，选择构建产物目录（如 build/web-mobile-desktop/）
3. 预览 → 确认游戏正常运行、画面填满窗口、无白屏
4. 发布 → 云端或本地

Cocos 游戏的特殊注意点

资源文件超大

Cocos 游戏的资源包（贴图、音频）通常有几十甚至上百 MB。

如果资源文件超过 GitHub 限制但又想云端打包，可以：

1. 把大资源文件（贴图、音频）放到对象存储（OSS/S3）
2. 改 Cocos 构建配置，让游戏从外部 URL 加载资源
3. PakePlus 打包时 index.html 里的远程资源引用

性能

Cocos 游戏跑在 WebView 里，性能表现：

触控事件

游戏里的触控（Tap、Swipe）在 PakePlus WebView 里能正常工作——Tauri WebView 原生支持 touch event。桌面端可以加 JS 注入把 mouse 事件转成 touch 事件：

// 如果你想在桌面端模拟触控
const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', (e) => {
  const touch = new Touch({
    identifier: 0,
    target: canvas,
    clientX: e.clientX,
    clientY: e.clientY,
  });
  canvas.dispatchEvent(new TouchEvent('touchstart', { touches: [touch] }));
});

Cocos Creator 版本兼容

Cocos Creator 3.8 调整了构建输出目录结构——如果发现 PakePlus 找不到 index.html，手动确认构建输出路径。

为什么要这么做

有人会问：Cocos Creator 自己就能导出原生 Android/iOS/Windows 安装包，为什么还要套一层 PakePlus？

结论：如果游戏不依赖原生特定能力（陀螺仪、蓝牙、高精度传感器），PakePlus Web 套壳是最快的多平台发布路径。