Add mini game doc

docs/zh/_meta.json

@@ -59,6 +59,12 @@
       "collapse": true
     }
   },
+  "platform": {
+    "title": "多平台发布",
+    "theme": {
+      "collapse": true
+    }
+  },
   "device": {
     "title": "设备",
     "theme": {

docs/zh/art/digital-human.md

@@ -25,7 +25,7 @@ title: 数字人项目
 
 ### 2. 编辑器项目
 
-你可以按照 [导入教程](/docs/graphics/model/importGlTF/) 等一步步实现编辑器的预览，最后进行[项目导出](/docs/assets/build/)到需要的平台。
+你可以按照 [导入教程](/docs/graphics/model/importGlTF/) 等一步步实现编辑器的预览，最后进行[项目导出](/docs/platform/platform/)到需要的平台。
 
 ### 3. 高级动画定制
 

docs/zh/assets/overall.md

@@ -20,6 +20,6 @@ flowchart LR
 
 - 如何[自定义资产加载器](/docs/assets/custom)
 - 编辑状态下[资产的增删改查](/docs/assets/interface)
-- 构建项目后[资产如何导出并部署](/docs/assets/build)
+- 构建项目后[资产如何导出并部署](/docs/platform/platform)
 - 运行时如何[加载资产](/docs/assets/load)
 - 运行时如何[垃圾回收](/docs/assets/gc)

docs/zh/core/canvas.md

@@ -41,7 +41,7 @@ flowchart TD
     C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
 ```
 
-若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](/docs/assets/build)渲染导出配置处控制**设备像素比**即可。
+若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](/docs/platform/platform)渲染导出配置处控制**设备像素比**即可。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
 

docs/zh/core/engine.md

@@ -49,7 +49,7 @@ classDiagram
     }
 ```
 
-编辑器导出的项目通常自动设置了编辑器配置的相关选项，比如开发者可以在 [导出界面](/docs/assets/build) 设置上下文的渲染配置：
+编辑器导出的项目通常自动设置了编辑器配置的相关选项，比如开发者可以在 [导出界面](/docs/platform/platform) 设置上下文的渲染配置：
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*WZHzRYIpUzQAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
 

docs/zh/graphics/2D/spine/editor.md

@@ -125,7 +125,7 @@ SpineAnimationRenderer 组件的配置如下：
 - Priority：渲染优先级
 
 ## 4. 项目导出
-最终，完成场景编辑器后，可以参考[项目导出](/docs/assets/build/)流程，导出编辑器项目。
+最终，完成场景编辑器后，可以参考[项目导出](/docs/platform/platform/)流程，导出编辑器项目。
 
 </br></br></br></br>
 下一章节：[在代码中使用 Galacean Spine 运行时](/docs/graphics/2D/spine/runtime)

docs/zh/graphics/2D/spine/runtime.md

@@ -24,7 +24,7 @@ Galacean spine 加载器既能加载编辑器上传的资产，也能过加载
 ## 加载资产并添加至场景
 
 ### 加载 Galacean 编辑器中的上传的资产
-[导出编辑器项目后](/docs/assets/build/)，`已添加至场景中的 Spine 动画，会在加载场景文件时，自动完成加载`：
+[导出编辑器项目后](/docs/platform/platform/)，`已添加至场景中的 Spine 动画，会在加载场景文件时，自动完成加载`：
 
 ```typescript
 // 加载场景文件时，已添加至场景中的 Spine 动画会自行完成加载

docs/zh/graphics/texture/2d.md

@@ -111,4 +111,4 @@ material.baseTexture = texture;
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
 
-[项目发布](/docs/assets/build)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。
+[项目发布](/docs/platform/platform)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。

docs/zh/graphics/texture/compression.md

@@ -36,7 +36,7 @@ KTX2 的生成可以使用：
 
 ### 编辑器
 
-编辑器在项目打包时，可以配置选项生成 KTX2，可以参考『[项目发布](/docs/assets/build/)』文档。项目导出是全局的配置，也可以独立给不同的纹理资源配置不同的压缩格式。在编辑器的纹理面板下勾选 overwrite 可以覆盖全局配置：
+编辑器在项目打包时，可以配置选项生成 KTX2，可以参考『[项目发布](/docs/platform/platform/)』文档。项目导出是全局的配置，也可以独立给不同的纹理资源配置不同的压缩格式。在编辑器的纹理面板下勾选 overwrite 可以覆盖全局配置：
 
 <img src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249" style="zoom:50%;" />
 

docs/zh/platform/h5.md

@@ -0,0 +1,64 @@
+---
+order: 1
+title: 导出到 H5
+type: 多平台导出
+label: Platform
+---
+
+## 平台配置说明
+
+导出到 H5 平台，除了通用导出配置外，并没有额外的平台相关导出配置，故无需配置
+
+## 导出
+
+选择好 H5 平台后，点击导出面板最下方的下载按钮，即可导出所需工程：
+
+<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*jINgTIhAuDgAAAAAAAAAAAAADjCHAQ/fmt.webp" />
+
+导出到本地后，目录结构如下：
+
+```shell
+├── public # 📁 公共资源目录
+│		├── scene.json # 场景文件
+│   └── ... # 其他
+├── src # 📁 源代码目录
+│   └── ... # 其他
+├── index.html # ⚙️ 示例项目入口文件
+├── main.js # ⚙️ 组件代码入口
+├── package.json # ⚙️ 项目配置文件
+├── project.json # ⚙️ 编辑器导出工程配置
+├── tsconfig.json # ⚙️ TypeScript 配置文件
+├── vite.config.ts # ⚙️ vite 配置文件
+└── ... # 其他
+```
+
+**备注：** 因为 React/Vue/Vanilla JS 均属于 H5 平台，且大同小异，文档统一以 React 进行说明
+
+## 调试
+
+1、进入导出工程的根目录，执行安装命令如下：
+```bash
+npm i 或者 pnpm i
+```
+
+2、执行 dev 命令将项目本地跑起来，如下：
+```bash
+npm run dev
+```
+执行完上述命令后，如果成功，将出现如下内容：
+
+<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*FJI5Q7qhFu4AAAAAAAAAAAAADjCHAQ/fmt.webp" />
+
+3、在浏览器中，输入上述 Local 或者 Network 的 URL 即可预览实际运行效果，如下：
+
+<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*Q9qwQqivKp8AAAAAAAAAAAAADjCHAQ/fmt.webp" />
+
+## 构建
+
+本地完成开发调试后，执行 build 命令进行构建，如下：
+```bash
+npm run build
+```
+如果命令执行成功，会在根目录下生成一个 **dist** 文件夹，里面存放了构建产物。可以将产物上传 CDN，当作动态加载的内容，如果项目是当作一个 React 组件，也可以发布至 NPM。
+
+> 导出到 H5 平台的 React/Vue/Vanilla JS 各类项目，根据各自框架说明自行部署即可

docs/zh/platform/platform.md

@@ -0,0 +1,52 @@
+---
+order: 0
+title: 多平台导出总览
+type: 多平台导出
+label: Platform
+---
+
+为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，Galacean 1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。
+
+## 前置准备
+项目在编辑器中开发完成后，就可以导出各个平台的工程并进行发布了。在导出之前，我们先来了解一下导出面板和导出设置。
+
+### 导出面板
+当我们完成项目开发，需要导出到某个平台（以导出至微信小游戏平台为例）的时候，可以按如下步骤操作：
+
+1、点击编辑器左侧的导出按钮：
+
+<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*U2RuQLwwNXIAAAAAAAAAAAAADjCHAQ/fmt.webp" />
+
+2、在唤出的导出面板的左侧，选择导出平台：
+
+<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*50WSQoBlxpcAAAAAAAAAAAAADjCHAQ/fmt.webp" />
+
+3、导出面板的右侧为项目相关的一些导出配置，主要分为 2 块：**通用配置**（红色框内）和**平台相关配置**（黄色框内）：
+
+<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*aCiZTLygoQwAAAAAAAAAAAAADjCHAQ/fmt.webp"/>
+
+### 导出配置说明
+
+平台相关的导出配置将在平台导出的文档里单独说明，这里重点介绍下和平台无关的**通用配置**。
+
+| 配置          | 描述                                                                                                                              |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| Project Name | 项目名称，导出到本地的根目录名就是项目名称 |
+| Main Scene | 项目主场景 |
+| Engine version | 项目使用的引擎版本号 |
+| Upload to CDN | 是否将资产上传至 CDN |
+| Texture Type | 纹理类型，支持 KTX2 和 Original：<br> **Original**：不对纹理做任何处理 <br> **KTX2**：开启纹理压缩 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*yHPrSrhyo0sAAAAAAAAAAAAADjCHAQ/fmt.webp" /> 选择 KTX2 可以选择不同的压缩格式：<br> **ETC1S：** 尺寸小，内存极小，但是质量较低，适合 albedo, specular 等贴图 <br> **UASTC：** 尺寸大，质量高，适合 normal 这类贴图 <br> <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*_Ga2SKIDvv0AAAAAAAAAAAAADjCHAQ/fmt.webp" /> 如果选择了 ETC1S 压缩格式，可以通过 Quality 来设置压缩质量(值越大，渲染质量越好)：<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*ZhviTYuo7A4AAAAAAAAAAAAADjCHAQ/fmt.webp" />|
+| Tree shaking | 是否对导出的资产进行裁剪： <br>  **None:** 不进行裁剪，导出所有资产 <br> **Current Scene:** 只导出当前场景用到的资产 <br> **All Scene:** 对所有场景 treeshaking，导出全量场景用到的资产 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*BJbwQrdlghwAAAAAAAAAAAAADjCHAQ/fmt.webp" />|
+| WebGL Mode | 选择使用 WebGL 的版本：<br> **Auto：** 优先使用 WebGL2.0, 如果运行环境不支持自动切到 WebGL1.0 <br> **WebGL1.0：** 使用 WebGL1.0 <br>  **WebGL2.0：**  使用 WebGL2.0 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*HszfTJChrdEAAAAAAAAAAAAADjCHAQ/fmt.webp" />|
+| Anti-Alias | 是否开启抗锯齿 |
+| Alpha | 画布是否支持透明背景，如果希望画布下方的内容可以透出可以开启 |
+| Preserve Drawing Buffer | 用于控制在调用 gl.clear() 方法后，绘图缓冲区是否保留其内容 |
+| DPR Mode | [设备的像素比](/docs/core/canvas)，通过调用 engine.canvas.resizeByClientSize 来控制画布的尺寸 <br> **Auto：** 自动适配，即参数为 window.devicePixelRatio <br> **Fixed：** 开发者自行设置参数 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*EQOxSI8I8awAAAAAAAAAAAAADjCHAQ/fmt.webp" /> 选择 Fixed 后，开发者可以自行输入需要设置的参数 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*-7YfTLegt_AAAAAAAAAAAAAADjCHAQ/fmt.webp" />| 
+
+## 支持的导出平台
+目前 Galacean 支持导出的平台如下：
+
+[导出至 H5 平台](/docs/platform/h5/)
+
+[导出至微信小游戏平台](/docs/platform/wechatMiniGame/)
+