From 37824626ad3a827145b28b7a17bebdbf0e159dc3 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Thu, 9 Jan 2025 16:03:58 +0800 Subject: [PATCH 1/7] feat(mini-doc): add init file --- docs/zh/_meta.json | 6 ++++++ docs/zh/platform/platform.md | 7 +++++++ docs/zh/platform/wechatMiniGame.md | 7 +++++++ 3 files changed, 20 insertions(+) create mode 100644 docs/zh/platform/platform.md create mode 100644 docs/zh/platform/wechatMiniGame.md diff --git a/docs/zh/_meta.json b/docs/zh/_meta.json index d5b6fdd280..0d959575b7 100644 --- a/docs/zh/_meta.json +++ b/docs/zh/_meta.json @@ -59,6 +59,12 @@ "collapse": true } }, + "platform": { + "title": "多平台发布", + "theme": { + "collapse": true + } + }, "device": { "title": "设备", "theme": { diff --git a/docs/zh/platform/platform.md b/docs/zh/platform/platform.md new file mode 100644 index 0000000000..5f3dacea7f --- /dev/null +++ b/docs/zh/platform/platform.md @@ -0,0 +1,7 @@ +--- +order: 0 +title: 多平台发布总览 +type: platform +label: platform +--- + diff --git a/docs/zh/platform/wechatMiniGame.md b/docs/zh/platform/wechatMiniGame.md new file mode 100644 index 0000000000..d009cf5702 --- /dev/null +++ b/docs/zh/platform/wechatMiniGame.md @@ -0,0 +1,7 @@ +--- +order: 1 +title: 发布到微信小游戏 +type: platform +label: platform +--- + From a91808580abce5183e3590bac47c2d9567199512 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Mon, 13 Jan 2025 19:40:31 +0800 Subject: [PATCH 2/7] feat(mini-doc): add mini doc --- docs/zh/platform/h5.md | 64 +++++++++++++++++++++++++ docs/zh/platform/platform.md | 51 ++++++++++++++++++-- docs/zh/platform/wechatMiniGame.md | 75 ++++++++++++++++++++++++++++-- 3 files changed, 183 insertions(+), 7 deletions(-) create mode 100644 docs/zh/platform/h5.md diff --git a/docs/zh/platform/h5.md b/docs/zh/platform/h5.md new file mode 100644 index 0000000000..553390683b --- /dev/null +++ b/docs/zh/platform/h5.md @@ -0,0 +1,64 @@ +--- +order: 1 +title: 导出到 H5 +type: 多平台导出 +label: Platform +--- + +## 平台配置说明 + +导出到 H5 平台，除了通用导出配置外，并没有额外的平台相关导出配置，故无需配置 + +## 导出 + +选择好 H5 平台后，点击导出面板最下方的下载按钮，即可导出所需工程： + + + +导出到本地后，目录结构如下： + +```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 +``` +执行完上述命令后，如果成功，将出现如下内容： + + + +3、在浏览器中，输入上述 Local 或者 Network 的 URL 即可预览实际运行效果，如下： + + + +## 构建 + +本地完成开发调试后，执行 build 命令进行构建，如下： +```bash +npm run build +``` +如果命令执行成功，会在根目录下生成一个 **dist** 文件夹，里面存放了构建产物。可以将产物上传 CDN，当作动态加载的内容，如果项目是当作一个 React 组件，也可以发布至 NPM。 + +> 导出到 H5 平台的 React/Vue/Vanilla JS 各类项目，根据各自框架说明自行部署即可 diff --git a/docs/zh/platform/platform.md b/docs/zh/platform/platform.md index 5f3dacea7f..237ad0cc99 100644 --- a/docs/zh/platform/platform.md +++ b/docs/zh/platform/platform.md @@ -1,7 +1,52 @@ --- order: 0 -title: 多平台发布总览 -type: platform -label: platform +title: 多平台导出总览 +type: 多平台导出 +label: Platform --- +为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，Galacean 1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。 + +## 前置准备 +项目在编辑器中开发完成后，就可以导出各个平台的工程并进行发布了。在导出之前，我们先来了解一下导出面板和导出设置。 + +### 导出面板 +当我们完成项目开发，需要导出到某个平台（以导出至微信小游戏平台为例）的时候，可以按如下步骤操作： + +1、点击编辑器左侧的导出按钮： + + + +2、在唤出的导出面板的左侧，选择导出平台： + + + +3、导出面板的右侧为项目相关的一些导出配置，主要分为 2 块：**通用配置**（红色框内）和**平台相关配置**（黄色框内）： + + + +### 导出配置说明 + +平台相关的导出配置将在平台导出的文档里单独说明，这里重点介绍下和平台无关的**通用配置**。 + +| 配置 | 描述 | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Project Name | 项目名称，导出到本地的根目录名就是项目名称 | +| Main Scene | 项目主场景 | +| Engine version | 项目使用的引擎版本号 | +| Upload to CDN | 是否将资产上传至 CDN | +| Texture Type | 纹理类型，支持 KTX2 和 Original：
**Original**：不对纹理做任何处理
**KTX2**：开启纹理压缩 选择 KTX2 可以选择不同的压缩格式：
**ETC1S：** 尺寸小，内存极小，但是质量较低，适合 albedo, specular 等贴图
**UASTC：** 尺寸大，质量高，适合 normal 这类贴图
如果选择了 ETC1S 压缩格式，可以通过 Quality 来设置压缩质量(值越大，渲染质量越好)：| +| Tree shaking | 是否对导出的资产进行裁剪：
**None:** 不进行裁剪，导出所有资产
**Current Scene:** 只导出当前场景用到的资产
**All Scene:** 对所有场景 treeshaking，导出全量场景用到的资产 | +| WebGL Mode | 选择使用 WebGL 的版本：
**Auto：** 优先使用 WebGL2.0, 如果运行环境不支持自动切到 WebGL1.0
**WebGL1.0：** 使用 WebGL1.0
**WebGL2.0：** 使用 WebGL2.0 | +| Anti-Alias | 是否开启抗锯齿 | +| Alpha | 画布是否支持透明背景，如果希望画布下方的内容可以透出可以开启 | +| Preserve Drawing Buffer | 用于控制在调用 gl.clear() 方法后，绘图缓冲区是否保留其内容 | +| DPR Mode | [设备的像素比](/docs/core/canvas)，通过调用 engine.canvas.resizeByClientSize 来控制画布的尺寸
**Auto：** 自动适配，即参数为 window.devicePixelRatio
**Fixed：** 开发者自行设置参数 选择 Fixed 后，开发者可以自行输入需要设置的参数 | + +## 支持的导出平台 +目前 Galacean 支持导出的平台如下： + +[导出至 H5 平台](/docs/platform/h5/) + +[导出至微信小游戏平台](/docs/platform/wechatMiniGame/) + diff --git a/docs/zh/platform/wechatMiniGame.md b/docs/zh/platform/wechatMiniGame.md index d009cf5702..3bdd5a228c 100644 --- a/docs/zh/platform/wechatMiniGame.md +++ b/docs/zh/platform/wechatMiniGame.md @@ -1,7 +1,74 @@ --- -order: 1 -title: 发布到微信小游戏 -type: platform -label: platform +order: 2 +title: 导出到微信小游戏 +type: 多平台导出 +label: Platform --- +## 平台配置说明 + +在导出到微信小游戏平台的时候，有以下这些配置项： + + + +| 配置 | 描述 | 对应到微信小游戏的配置文件 | 对应到微信小游戏中的字段 +| ------------- | ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| AppId | 微信小游戏的 AppId，必填，截图中的 wxdf8199565c509fb9 为测试账号 | project.config.json | appid | +| Orientation | 设置游戏屏幕方向： Landscape（横屏）、Portrait（竖屏）| game.json | deviceOrientation | +| Request | wx.request 的超时时间，单位：毫秒 | game.json | networkTimeout.request | +| Connect Socket | wx.connectSocket 的超时时间，单位：毫秒 | game.json | networkTimeout.connectSocket | +| Upload File | wx.uploadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.uploadFile | +| Download File | wx.downloadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.downloadFile | + +更多配置详见：[project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)、[game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html) + +## 导出 + +选择好微信小游戏平台后，点击导出面板最下方的下载按钮，即可导出所需工程： + + + +## 调试 + +1、工程导出到本地后，先进入到根目录执行以下命令进行依赖包的安装： + +```bash +npm i +``` + +2、打开**微信开发者工具** ，选择小游戏，并导入刚才的工程，如下： + + + +3、在微信开发者工具中，点击**工具->构建 npm**，如下： + + + +4、完成上述 3 后，即可在微信开发者工具中预览最终的结果，如下： + + + +5、在微信开发者工具中的调试，详见：[微信小游戏调试](https://developers.weixin.qq.com/minigame/dev/guide/runtime/debug/) + +## 发布 + +本地完成调试后，即可进行发布，具体发布流程详见：[微信小游戏发布](https://developers.weixin.qq.com/minigame/introduction/guide/) + +## 导出工程目录说明 + +导出到本地的工程目录如下： + + + +**工程目录说明** +|目录或文件|说明| +|-------------|-------------| +|adapters|项目用到的引擎相关的包，按需导出| +|public|资产目录，编辑器所有资产导出到这个目录下，资产的 path 为 /public/xxx| +|scripts|开发者在编辑器中添加的脚本组件，导出到本地后，开发者可以在里面的脚本组件中进行二次开发| +|game.json|对应微信小游戏工程所需要的 [game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html)| +|game.ts|入口文件，初始化的逻辑都放在这里| +|package.json|主要存放项目依赖包| +|polyfill.js|平台 DOM 适配代码和全局变量适配代码，开发者无需关心| +|project.config.json|对应微信小游戏工程所需要的 [project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)| +|project.ts|Galacean 的工程文件，在初始化的时候会解析| From 648e64551c7fa9b6081ac95f5adadccc920c8952 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Mon, 13 Jan 2025 20:03:35 +0800 Subject: [PATCH 3/7] feat(mini-doc): replace assets/build to platform/platform --- docs/zh/art/digital-human.md | 2 +- docs/zh/assets/build.md | 92 ------------------------- docs/zh/assets/overall.md | 2 +- docs/zh/core/canvas.md | 2 +- docs/zh/core/engine.md | 2 +- docs/zh/graphics/2D/spine/editor.md | 2 +- docs/zh/graphics/2D/spine/runtime.md | 2 +- docs/zh/graphics/texture/2d.md | 2 +- docs/zh/graphics/texture/compression.md | 2 +- 9 files changed, 8 insertions(+), 100 deletions(-) delete mode 100644 docs/zh/assets/build.md diff --git a/docs/zh/art/digital-human.md b/docs/zh/art/digital-human.md index 3c20b0b834..ab79ab13f7 100644 --- a/docs/zh/art/digital-human.md +++ b/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. 高级动画定制 diff --git a/docs/zh/assets/build.md b/docs/zh/assets/build.md deleted file mode 100644 index 6346de0b41..0000000000 --- a/docs/zh/assets/build.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -order: 2 -title: 项目导出 -type: 资产工作流 -label: Resource ---- - -## HTML5 项目 - -Galacean Editor 项目导出功能可以将当前编辑器项目作为一个前端项目下载到本地。你可以在编辑器中配置项目导出的参数，如资产导出配置、渲染导出配置、物理导出配置等。基于这些配置，编辑器会生成出项目所需的代码、资产，生成对应的 `package.json`，并最终打包成一个 zip 包供你下载。 - -### 导出配置 - -#### 资产导出配置 - -image-20231007201437362 - -资产导出配置可以用来控制导出的资源类型和质量等参数。在资产导出配置中，你可以选择导出的资源类型，例如模型、纹理、HDR 等等，以及选择每种类型的导出质量和格式等参数。在导出模型时，你可以选择是否导出模型的网格信息、骨骼信息、动画信息等。 - -| 配置 | 描述 | -| ------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| glTF Quantize | glTF 压缩算法，详见[这里](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_mesh_quantization/README.md) | -| glTF Meshopt | glTF 压缩算法，详见[这里](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md) | -| 纹理类型 | 勾选 [KTX2](https://www.khronos.org/ktx/) 开启[纹理压缩](/docs/graphics/texture/compression/)优化选项 | -| 纹理压缩格式 | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，不同压缩格式会影响纹理的尺寸和渲染质量 | -| 纹理压缩质量 | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，可以一定限度上调整纹理的尺寸和渲染质量 | -| 主场景 | 选择 **[资产面板](/docs/assets/interface)** 中的某个场景作为项目加载后的主场景 | - -#### 渲染导出配置 - - - -渲染导出配置可以用来控制项目的渲染效果和性能等参数。 - -| 配置 | 描述 | -| ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -| WebGL Mode | WebGL 的版本，`Auto` 值表示根据设备能力自动选择 WebGL 版本 | -| WebGL [Context](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) 的配置 | Anti-Alias、Alpha、Preserve Drawing Buffer 等 | -| Device Pixel Ratio | [设备的像素比](/docs/core/canvas)，用来控制画布的尺寸 | - -### 项目启动 - -在点击导出面板中的下载按钮后，你将得到一个项目的压缩包。解压缩后进入文件夹，目录结构（以 React 项目为例）如下： - -```shell -├── example # 📁 示例目录 -│ ├── main.tsx # 示例组件 -├── public # 📁 公共资源目录 -│ ├── scene.json # 场景文件 -│ └── ... # 其他 -├── src # 📁 源代码目录 -│ └── ... # 其他 -├── index.tsx # ⚙️ 组件代码入口 -├── index.html # ⚙️ 示例项目入口文件 -├── project.json # ⚙️ 编辑器导出工程配置 -|── tsconfig.json # ⚙️ TypeScript 配置文件 -├── vite.config.ts # ⚙️ vite 配置文件 -├── package.json # ⚙️ 项目配置文件 -└── ... # 其他 -``` - -### 项目调试 - -接下来就可以在本地进行项目的调试与预览了，依次在文件夹目录里的 Terminal 中运行以下命令，看看本地效果是否与编辑器中的效果一致吧： - -```bash -npm install -npm run dev -``` - -image-20231008163057689 - -### 项目构建与部署 - -一切准备完毕后就将项目构建并部署上去吧，在文件夹目录里的 Terminal 中运行以下命令： - -```bash -npm run build -``` - -image-20231008163057689 - -可以发现，当 `build` 完毕后，文件目录（左上角）多出了一个 `dist` 文件夹，里面即包含了运行所需的所有代码与资源，接下来只需要将这个文件内的所有内容上传 CDN 即可。 - -image-20231008163057689 - -随后访问对应地址： - -image-20231008163057689 - -> 导出项目为 vite 工程，更多部署方案参考 [vite 官网](https://vitejs.dev/guide/) - diff --git a/docs/zh/assets/overall.md b/docs/zh/assets/overall.md index 3fc27d3efc..aa04aeb69a 100644 --- a/docs/zh/assets/overall.md +++ b/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) diff --git a/docs/zh/core/canvas.md b/docs/zh/core/canvas.md index f56ae72499..032f2ed627 100644 --- a/docs/zh/core/canvas.md +++ b/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)渲染导出配置处控制**设备像素比**即可。 image.png diff --git a/docs/zh/core/engine.md b/docs/zh/core/engine.md index 88ed942c51..266d288079 100644 --- a/docs/zh/core/engine.md +++ b/docs/zh/core/engine.md @@ -49,7 +49,7 @@ classDiagram } ``` -编辑器导出的项目通常自动设置了编辑器配置的相关选项，比如开发者可以在 [导出界面](/docs/assets/build) 设置上下文的渲染配置： +编辑器导出的项目通常自动设置了编辑器配置的相关选项，比如开发者可以在 [导出界面](/docs/platform/platform) 设置上下文的渲染配置： diff --git a/docs/zh/graphics/2D/spine/editor.md b/docs/zh/graphics/2D/spine/editor.md index f1b7b61131..e94b0a81d7 100644 --- a/docs/zh/graphics/2D/spine/editor.md +++ b/docs/zh/graphics/2D/spine/editor.md @@ -125,7 +125,7 @@ SpineAnimationRenderer 组件的配置如下： - Priority：渲染优先级 ## 4. 项目导出 -最终，完成场景编辑器后，可以参考[项目导出](/docs/assets/build/)流程，导出编辑器项目。 +最终，完成场景编辑器后，可以参考[项目导出](/docs/platform/platform/)流程，导出编辑器项目。



下一章节：[在代码中使用 Galacean Spine 运行时](/docs/graphics/2D/spine/runtime) diff --git a/docs/zh/graphics/2D/spine/runtime.md b/docs/zh/graphics/2D/spine/runtime.md index 7be9984029..028bb56c63 100644 --- a/docs/zh/graphics/2D/spine/runtime.md +++ b/docs/zh/graphics/2D/spine/runtime.md @@ -24,7 +24,7 @@ Galacean spine 加载器既能加载编辑器上传的资产，也能过加载 ## 加载资产并添加至场景 ### 加载 Galacean 编辑器中的上传的资产 -[导出编辑器项目后](/docs/assets/build/)，`已添加至场景中的 Spine 动画，会在加载场景文件时，自动完成加载`： +[导出编辑器项目后](/docs/platform/platform/)，`已添加至场景中的 Spine 动画，会在加载场景文件时，自动完成加载`： ```typescript // 加载场景文件时，已添加至场景中的 Spine 动画会自行完成加载 diff --git a/docs/zh/graphics/texture/2d.md b/docs/zh/graphics/texture/2d.md index 8857bc2443..3f7468c3cb 100644 --- a/docs/zh/graphics/texture/2d.md +++ b/docs/zh/graphics/texture/2d.md @@ -111,4 +111,4 @@ material.baseTexture = texture; image.png -[项目发布](/docs/assets/build)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。 +[项目发布](/docs/platform/platform)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。 diff --git a/docs/zh/graphics/texture/compression.md b/docs/zh/graphics/texture/compression.md index 89e03cbad1..5c1c42296e 100644 --- a/docs/zh/graphics/texture/compression.md +++ b/docs/zh/graphics/texture/compression.md @@ -36,7 +36,7 @@ KTX2 的生成可以使用： ### 编辑器 -编辑器在项目打包时，可以配置选项生成 KTX2，可以参考『[项目发布](/docs/assets/build/)』文档。项目导出是全局的配置，也可以独立给不同的纹理资源配置不同的压缩格式。在编辑器的纹理面板下勾选 overwrite 可以覆盖全局配置： +编辑器在项目打包时，可以配置选项生成 KTX2，可以参考『[项目发布](/docs/platform/platform/)』文档。项目导出是全局的配置，也可以独立给不同的纹理资源配置不同的压缩格式。在编辑器的纹理面板下勾选 overwrite 可以覆盖全局配置： image-20240705112419249 From a6399516d258a7a68440c71568e5b527c1973005 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Tue, 14 Jan 2025 18:10:03 +0800 Subject: [PATCH 4/7] feat(mini-doc): add en mini game doc --- docs/en/_meta.json | 6 +++ docs/en/platform/h5.md | 64 ++++++++++++++++++++++++++ docs/en/platform/platform.md | 52 +++++++++++++++++++++ docs/en/platform/wechatMiniGame.md | 74 ++++++++++++++++++++++++++++++ 4 files changed, 196 insertions(+) create mode 100644 docs/en/platform/h5.md create mode 100644 docs/en/platform/platform.md create mode 100644 docs/en/platform/wechatMiniGame.md diff --git a/docs/en/_meta.json b/docs/en/_meta.json index 5843b8920f..c4284d4e74 100644 --- a/docs/en/_meta.json +++ b/docs/en/_meta.json @@ -59,6 +59,12 @@ "collapse": true } }, + "platform": { + "title": "Platform", + "theme": { + "collapse": true + } + }, "device": { "title": "Device", "theme": { diff --git a/docs/en/platform/h5.md b/docs/en/platform/h5.md new file mode 100644 index 0000000000..35da2e2a72 --- /dev/null +++ b/docs/en/platform/h5.md @@ -0,0 +1,64 @@ +--- +order: 1 +title: Export To H5 +type: Platform +label: Platform +--- + +## 平台配置说明 + +导出到 H5 平台，除了通用导出配置外，并没有额外的平台相关导出配置，故无需配置 + +## 导出 + +选择好 H5 平台后，点击导出面板最下方的下载按钮，即可导出所需工程： + + + +导出到本地后，目录结构如下： + +```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 +``` +执行完上述命令后，如果成功，将出现如下内容： + + + +3、在浏览器中，输入上述 Local 或者 Network 的 URL 即可预览实际运行效果，如下： + + + +## 构建 + +本地完成开发调试后，执行 build 命令进行构建，如下： +```bash +npm run build +``` +如果命令执行成功，会在根目录下生成一个 **dist** 文件夹，里面存放了构建产物。可以将产物上传 CDN，当作动态加载的内容，如果项目是当作一个 React 组件，也可以发布至 NPM。 + +> 导出到 H5 平台的 React/Vue/Vanilla JS 各类项目，根据各自框架说明自行部署即可 diff --git a/docs/en/platform/platform.md b/docs/en/platform/platform.md new file mode 100644 index 0000000000..3755435d25 --- /dev/null +++ b/docs/en/platform/platform.md @@ -0,0 +1,52 @@ +--- +order: 0 +title: Platform Export Overview +type: Platform +label: Platform +--- + +为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，Galacean 1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。 + +## 前置准备 +项目在编辑器中开发完成后，就可以导出各个平台的工程并进行发布了。在导出之前，我们先来了解一下导出面板和导出设置。 + +### 导出面板 +当我们完成项目开发，需要导出到某个平台（以导出至微信小游戏平台为例）的时候，可以按如下步骤操作： + +1、点击编辑器左侧的导出按钮： + + + +2、在唤出的导出面板的左侧，选择导出平台： + + + +3、导出面板的右侧为项目相关的一些导出配置，主要分为 2 块：**通用配置**（红色框内）和**平台相关配置**（黄色框内）： + + + +### 导出配置说明 + +平台相关的导出配置将在平台导出的文档里单独说明，这里重点介绍下和平台无关的**通用配置**。 + +| 配置 | 描述 | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Project Name | 项目名称，导出到本地的根目录名就是项目名称 | +| Main Scene | 项目主场景 | +| Engine version | 项目使用的引擎版本号 | +| Upload to CDN | 是否将资产上传至 CDN | +| Texture Type | 纹理类型，支持 KTX2 和 Original：
**Original**：不对纹理做任何处理
**KTX2**：开启纹理压缩 选择 KTX2 可以选择不同的压缩格式：
**ETC1S：** 尺寸小，内存极小，但是质量较低，适合 albedo, specular 等贴图
**UASTC：** 尺寸大，质量高，适合 normal 这类贴图
如果选择了 ETC1S 压缩格式，可以通过 Quality 来设置压缩质量(值越大，渲染质量越好)：| +| Tree shaking | 是否对导出的资产进行裁剪：
**None:** 不进行裁剪，导出所有资产
**Current Scene:** 只导出当前场景用到的资产
**All Scene:** 对所有场景 treeshaking，导出全量场景用到的资产 | +| WebGL Mode | 选择使用 WebGL 的版本：
**Auto：** 优先使用 WebGL2.0, 如果运行环境不支持自动切到 WebGL1.0
**WebGL1.0：** 使用 WebGL1.0
**WebGL2.0：** 使用 WebGL2.0 | +| Anti-Alias | 是否开启抗锯齿 | +| Alpha | 画布是否支持透明背景，如果希望画布下方的内容可以透出可以开启 | +| Preserve Drawing Buffer | 用于控制在调用 gl.clear() 方法后，绘图缓冲区是否保留其内容 | +| DPR Mode | [设备的像素比](/en/docs/core/canvas)，通过调用 engine.canvas.resizeByClientSize 来控制画布的尺寸
**Auto：** 自动适配，即参数为 window.devicePixelRatio
**Fixed：** 开发者自行设置参数 选择 Fixed 后，开发者可以自行输入需要设置的参数 | + +## 支持的导出平台 +目前 Galacean 支持导出的平台如下： + +[导出至 H5 平台](/en/docs/platform/h5/) + +[导出至微信小游戏平台](/en/docs/platform/wechatMiniGame/) + diff --git a/docs/en/platform/wechatMiniGame.md b/docs/en/platform/wechatMiniGame.md new file mode 100644 index 0000000000..5a347f2c4a --- /dev/null +++ b/docs/en/platform/wechatMiniGame.md @@ -0,0 +1,74 @@ +--- +order: 2 +title: Export To WechatMiniGame +type: Platform +label: Platform +--- + +## 平台配置说明 + +在导出到微信小游戏平台的时候，有以下这些配置项： + + + +| 配置 | 描述 | 对应到微信小游戏的配置文件 | 对应到微信小游戏中的字段 +| ------------- | ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| AppId | 微信小游戏的 AppId，必填，截图中的 wxdf8199565c509fb9 为测试账号 | project.config.json | appid | +| Orientation | 设置游戏屏幕方向： Landscape（横屏）、Portrait（竖屏）| game.json | deviceOrientation | +| Request | wx.request 的超时时间，单位：毫秒 | game.json | networkTimeout.request | +| Connect Socket | wx.connectSocket 的超时时间，单位：毫秒 | game.json | networkTimeout.connectSocket | +| Upload File | wx.uploadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.uploadFile | +| Download File | wx.downloadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.downloadFile | + +更多配置详见：[project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)、[game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html) + +## 导出 + +选择好微信小游戏平台后，点击导出面板最下方的下载按钮，即可导出所需工程： + + + +## 调试 + +1、工程导出到本地后，先进入到根目录执行以下命令进行依赖包的安装： + +```bash +npm i +``` + +2、打开**微信开发者工具** ，选择小游戏，并导入刚才的工程，如下： + + + +3、在微信开发者工具中，点击**工具->构建 npm**，如下： + + + +4、完成上述 3 后，即可在微信开发者工具中预览最终的结果，如下： + + + +5、在微信开发者工具中的调试，详见：[微信小游戏调试](https://developers.weixin.qq.com/minigame/dev/guide/runtime/debug/) + +## 发布 + +本地完成调试后，即可进行发布，具体发布流程详见：[微信小游戏发布](https://developers.weixin.qq.com/minigame/introduction/guide/) + +## 导出工程目录说明 + +导出到本地的工程目录如下： + + + +**工程目录说明** +|目录或文件|说明| +|-------------|-------------| +|adapters|项目用到的引擎相关的包，按需导出| +|public|资产目录，编辑器所有资产导出到这个目录下，资产的 path 为 /public/xxx| +|scripts|开发者在编辑器中添加的脚本组件，导出到本地后，开发者可以在里面的脚本组件中进行二次开发| +|game.json|对应微信小游戏工程所需要的 [game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html)| +|game.ts|入口文件，初始化的逻辑都放在这里| +|package.json|主要存放项目依赖包| +|polyfill.js|平台 DOM 适配代码和全局变量适配代码，开发者无需关心| +|project.config.json|对应微信小游戏工程所需要的 [project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)| +|project.ts|Galacean 的工程文件，在初始化的时候会解析| From 801d1dfbbd0fddf31b53e03be72256581cece586 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Wed, 15 Jan 2025 10:52:28 +0800 Subject: [PATCH 5/7] feat(mini-doc): translate doc --- docs/en/platform/h5.md | 54 ++++++++++++------------ docs/en/platform/platform.md | 58 +++++++++++++------------- docs/en/platform/wechatMiniGame.md | 66 +++++++++++++++--------------- 3 files changed, 89 insertions(+), 89 deletions(-) diff --git a/docs/en/platform/h5.md b/docs/en/platform/h5.md index 35da2e2a72..1c3f1e73f9 100644 --- a/docs/en/platform/h5.md +++ b/docs/en/platform/h5.md @@ -5,60 +5,60 @@ type: Platform label: Platform --- -## 平台配置说明 +## Platform Configuration Instructions -导出到 H5 平台，除了通用导出配置外，并没有额外的平台相关导出配置，故无需配置 +When exporting to the H5 platform, there is no additional platform-related export configuration except for the general export configuration, so no configuration is required -## 导出 +## Export -选择好 H5 平台后，点击导出面板最下方的下载按钮，即可导出所需工程： +After selecting the H5 platform, click the download button at the bottom of the export panel to export the required project: -导出到本地后，目录结构如下： +After exporting to the local computer, the directory structure is as follows: ```shell -├── public # 📁 公共资源目录 -│ ├── scene.json # 场景文件 -│ └── ... # 其他 -├── src # 📁 源代码目录 -│ └── ... # 其他 -├── index.html # ⚙️ 示例项目入口文件 -├── main.js # ⚙️ 组件代码入口 -├── package.json # ⚙️ 项目配置文件 -├── project.json # ⚙️ 编辑器导出工程配置 -├── tsconfig.json # ⚙️ TypeScript 配置文件 -├── vite.config.ts # ⚙️ vite 配置文件 -└── ... # 其他 +├── public # 📁 Public resource directory +│ ├── scene.json # Scene File +│ └── ... # Other +├── src # 📁 Source code directory +│ └── ... # Other +├── index.html # ⚙️ Example project entry file +├── main.js # ⚙️ Component code entry +├── package.json # ⚙️ Project Configuration File +├── project.json # ⚙️ Editor export project configuration +├── tsconfig.json # ⚙️ TypeScript configuration files +├── vite.config.ts # ⚙️ vite configuration files +└── ... # Other ``` -**备注：** 因为 React/Vue/Vanilla JS 均属于 H5 平台，且大同小异，文档统一以 React 进行说明 +**Remark:** Because React/Vue/Vanilla JS all belong to the H5 platform and are similar, the document is explained in React. -## 调试 +## Debug -1、进入导出工程的根目录，执行安装命令如下： +1、Enter the root directory of the exported project and execute the installation command as follows: ```bash npm i 或者 pnpm i ``` -2、执行 dev 命令将项目本地跑起来，如下： +2、Execute the dev command to run the project locally, as follows: ```bash npm run dev ``` -执行完上述命令后，如果成功，将出现如下内容： +After executing the above command, if successful, the following will appear: -3、在浏览器中，输入上述 Local 或者 Network 的 URL 即可预览实际运行效果，如下： +3、In the browser, enter the above Local or Network URL to preview the actual running effect, as follows: -## 构建 +## Build -本地完成开发调试后，执行 build 命令进行构建，如下： +After completing development and debugging locally, execute the build command to build, as follows: ```bash npm run build ``` -如果命令执行成功，会在根目录下生成一个 **dist** 文件夹，里面存放了构建产物。可以将产物上传 CDN，当作动态加载的内容，如果项目是当作一个 React 组件，也可以发布至 NPM。 +If the command is executed successfully, a **dist** folder will be generated in the root directory, which contains the build products. The products can be uploaded to CDN as dynamically loaded content, or published to NPM if the project is treated as a React component. -> 导出到 H5 平台的 React/Vue/Vanilla JS 各类项目，根据各自框架说明自行部署即可 +> Export to various React/Vue/Vanilla JS projects on the H5 platform and deploy them according to the instructions of their respective frameworks diff --git a/docs/en/platform/platform.md b/docs/en/platform/platform.md index 3755435d25..b0cead1f83 100644 --- a/docs/en/platform/platform.md +++ b/docs/en/platform/platform.md @@ -5,48 +5,48 @@ type: Platform label: Platform --- -为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，Galacean 1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。 +In order to meet the demands of developers for launching on various platforms and truly achieve development in one place and running everywhere, Galacean 1.4 version began to support multi-platform export. Projects created by developers through the editor can be quickly exported to the projects required by different platforms. -## 前置准备 -项目在编辑器中开发完成后，就可以导出各个平台的工程并进行发布了。在导出之前，我们先来了解一下导出面板和导出设置。 +## Prepare in Advance +After the project is developed in the editor, you can export the project for each platform and publish it. Before exporting, let's first understand the export panel and export settings. -### 导出面板 -当我们完成项目开发，需要导出到某个平台（以导出至微信小游戏平台为例）的时候，可以按如下步骤操作： +### Export Panel +When we complete the project development and need to export it to a certain platform (taking exporting to the WechatMiniGame platform as an example), we can follow the steps below: -1、点击编辑器左侧的导出按钮： +1、Click the Export button on the left side of the editor: -2、在唤出的导出面板的左侧，选择导出平台： +2、On the left side of the export panel that appears, select the export platform: -3、导出面板的右侧为项目相关的一些导出配置，主要分为 2 块：**通用配置**（红色框内）和**平台相关配置**（黄色框内）： +3、On the right side of the export panel are some project-related export configurations, which are mainly divided into two parts: **General configuration** (in the red box) and **Platform-related configuration** (in the yellow box): -### 导出配置说明 +### Export Configuration Instructions -平台相关的导出配置将在平台导出的文档里单独说明，这里重点介绍下和平台无关的**通用配置**。 +The platform-related export configuration will be described separately in the platform export document. Here we focus on the **general configuration** that is independent of the platform. -| 配置 | 描述 | +| Configuration | Describe | | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| Project Name | 项目名称，导出到本地的根目录名就是项目名称 | -| Main Scene | 项目主场景 | -| Engine version | 项目使用的引擎版本号 | -| Upload to CDN | 是否将资产上传至 CDN | -| Texture Type | 纹理类型，支持 KTX2 和 Original：
**Original**：不对纹理做任何处理
**KTX2**：开启纹理压缩 选择 KTX2 可以选择不同的压缩格式：
**ETC1S：** 尺寸小，内存极小，但是质量较低，适合 albedo, specular 等贴图
**UASTC：** 尺寸大，质量高，适合 normal 这类贴图
如果选择了 ETC1S 压缩格式，可以通过 Quality 来设置压缩质量(值越大，渲染质量越好)：| -| Tree shaking | 是否对导出的资产进行裁剪：
**None:** 不进行裁剪，导出所有资产
**Current Scene:** 只导出当前场景用到的资产
**All Scene:** 对所有场景 treeshaking，导出全量场景用到的资产 | -| WebGL Mode | 选择使用 WebGL 的版本：
**Auto：** 优先使用 WebGL2.0, 如果运行环境不支持自动切到 WebGL1.0
**WebGL1.0：** 使用 WebGL1.0
**WebGL2.0：** 使用 WebGL2.0 | -| Anti-Alias | 是否开启抗锯齿 | -| Alpha | 画布是否支持透明背景，如果希望画布下方的内容可以透出可以开启 | -| Preserve Drawing Buffer | 用于控制在调用 gl.clear() 方法后，绘图缓冲区是否保留其内容 | -| DPR Mode | [设备的像素比](/en/docs/core/canvas)，通过调用 engine.canvas.resizeByClientSize 来控制画布的尺寸
**Auto：** 自动适配，即参数为 window.devicePixelRatio
**Fixed：** 开发者自行设置参数 选择 Fixed 后，开发者可以自行输入需要设置的参数 | - -## 支持的导出平台 -目前 Galacean 支持导出的平台如下： - -[导出至 H5 平台](/en/docs/platform/h5/) - -[导出至微信小游戏平台](/en/docs/platform/wechatMiniGame/) +| Project Name | Project name. The root directory name exported to the local computer is the project name. | +| Main Scene | Project main scene | +| Engine version | The engine version number used by the project | +| Upload to CDN | Whether to upload assets to CDN | +| Texture Type | Texture type, supports KTX2 and Original:
**Original**：No processing is done on the texture
**KTX2**：Enable texture compression Selecting KTX2 allows you to choose different compression formats:
**ETC1S：** Small size, very small memory, but low quality, suitable for albedo, specular and other textures
**UASTC：** Large size, high quality, suitable for normal textures
If the ETC1S compression format is selected, you can set the compression quality through Quality (the larger the value, the better the rendering quality):| +| Tree shaking | Whether to crop the exported assets:
**None:** Export all assets without cropping
**Current Scene:** Export only the assets used in the current scene
**All Scene:** Treeshaking all scenes, exporting all the assets used by the scenes | +| WebGL Mode | Select the version to use with WebGL:
**Auto：** WebGL2.0 is preferred. If the operating environment does not support it, it will automatically switch to WebGL1.0
**WebGL1.0：** Using WebGL1.0
**WebGL2.0：** Using WebGL2.0 | +| Anti-Alias | Whether to enable anti-aliasing | +| Alpha | Whether the canvas supports transparent background. If you want the content below the canvas to be visible, you can turn it on. | +| Preserve Drawing Buffer | Controls whether the drawing buffer retains its contents after calling the gl.clear() method. | +| DPR Mode | [The pixel ratio of the device](/en/docs/core/canvas)，Control the size of the canvas by calling engine.canvas.resizeByClientSize:
**Auto：** Automatic adaptation, that is, the parameter is window.devicePixelRatio
**Fixed：** Developers set their own parameters After selecting Fixed, developers can enter the parameters they need to set. | + +## Supported export platforms +Currently, Galacean supports exporting to the following platforms: + +[Export to H5 platform](/en/docs/platform/h5/) + +[Export to WeChat Mini Game Platform](/en/docs/platform/wechatMiniGame/) diff --git a/docs/en/platform/wechatMiniGame.md b/docs/en/platform/wechatMiniGame.md index 5a347f2c4a..146cedadfc 100644 --- a/docs/en/platform/wechatMiniGame.md +++ b/docs/en/platform/wechatMiniGame.md @@ -5,70 +5,70 @@ type: Platform label: Platform --- -## 平台配置说明 +## Platform Configuration Instructions -在导出到微信小游戏平台的时候，有以下这些配置项： +When exporting to the WeChat Mini Game platform, there are the following configuration items: -| 配置 | 描述 | 对应到微信小游戏的配置文件 | 对应到微信小游戏中的字段 +| Configuration | Describe | Corresponding to the configuration file of WeChat Mini Games | Corresponding to the fields in WeChat Mini Games | ------------- | ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| AppId | 微信小游戏的 AppId，必填，截图中的 wxdf8199565c509fb9 为测试账号 | project.config.json | appid | -| Orientation | 设置游戏屏幕方向： Landscape（横屏）、Portrait（竖屏）| game.json | deviceOrientation | -| Request | wx.request 的超时时间，单位：毫秒 | game.json | networkTimeout.request | -| Connect Socket | wx.connectSocket 的超时时间，单位：毫秒 | game.json | networkTimeout.connectSocket | -| Upload File | wx.uploadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.uploadFile | -| Download File | wx.downloadFile 的超时时间，单位：毫秒 | game.json | networkTimeout.downloadFile | +| AppId | AppId of WeChat Mini Game, required. The wxdf8199565c509fb9 in the screenshot is a test account. | project.config.json | appid | +| Orientation | Set the game screen orientation: Landscape, Portrait| game.json | deviceOrientation | +| Request | wx.request timeout, unit: milliseconds | game.json | networkTimeout.request | +| Connect Socket | wx.connectSocket timeout, unit: milliseconds | game.json | networkTimeout.connectSocket | +| Upload File | wx.uploadFile timeout, unit: milliseconds | game.json | networkTimeout.uploadFile | +| Download File | wx.downloadFile timeout, unit: milliseconds | game.json | networkTimeout.downloadFile | -更多配置详见：[project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)、[game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html) +For more configuration details, see: [project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)、[game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html) -## 导出 +## Export -选择好微信小游戏平台后，点击导出面板最下方的下载按钮，即可导出所需工程： +After selecting the WeChat Mini Game platform, click the download button at the bottom of the export panel to export the required project: -## 调试 +## Debug -1、工程导出到本地后，先进入到根目录执行以下命令进行依赖包的安装： +1、After exporting the project to the local computer, first go to the root directory and execute the following command to install the dependent packages: ```bash npm i ``` -2、打开**微信开发者工具** ，选择小游戏，并导入刚才的工程，如下： +2、Open **WeChat Developer Tools**, select Mini Game, and import the project just now, as follows: -3、在微信开发者工具中，点击**工具->构建 npm**，如下： +3、In WeChat Developer Tools, click **Tools->Build** npm, as follows: -4、完成上述 3 后，即可在微信开发者工具中预览最终的结果，如下： +4、After completing the above 3, you can preview the final result in the WeChat developer tool as follows: -5、在微信开发者工具中的调试，详见：[微信小游戏调试](https://developers.weixin.qq.com/minigame/dev/guide/runtime/debug/) +5、For debugging in WeChat developer tools, see: [WeChat Mini Game Debugging](https://developers.weixin.qq.com/minigame/dev/guide/runtime/debug/) -## 发布 +## Publish -本地完成调试后，即可进行发布，具体发布流程详见：[微信小游戏发布](https://developers.weixin.qq.com/minigame/introduction/guide/) +After local debugging is completed, you can publish it. For details on the publishing process, see: [WeChat Mini Games Publish](https://developers.weixin.qq.com/minigame/introduction/guide/) -## 导出工程目录说明 +## Export Project Directory Description -导出到本地的工程目录如下： +The project directory exported to the local is as follows: -**工程目录说明** -|目录或文件|说明| +**Project Catalog Description** +|Directory or file|Describe| |-------------|-------------| -|adapters|项目用到的引擎相关的包，按需导出| -|public|资产目录，编辑器所有资产导出到这个目录下，资产的 path 为 /public/xxx| -|scripts|开发者在编辑器中添加的脚本组件，导出到本地后，开发者可以在里面的脚本组件中进行二次开发| -|game.json|对应微信小游戏工程所需要的 [game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html)| -|game.ts|入口文件，初始化的逻辑都放在这里| -|package.json|主要存放项目依赖包| -|polyfill.js|平台 DOM 适配代码和全局变量适配代码，开发者无需关心| -|project.config.json|对应微信小游戏工程所需要的 [project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)| -|project.ts|Galacean 的工程文件，在初始化的时候会解析| +|adapters|Engine-related packages used in the project, exported on demand| +|public|Asset directory. All assets of the editor are exported to this directory. The path of the asset is /public/xxx| +|scripts|After the script components added by the developer in the editor are exported to the local computer, the developer can perform secondary development in the script components inside.| +|game.json|Corresponding to the requirements of WeChat mini-game projects [game.json](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html)| +|game.ts|Entry file, the initialization logic is placed here| +|package.json|Mainly store project dependency packages| +|polyfill.js|Developers do not need to worry about platform DOM adaptation code and global variable adaptation code| +|project.config.json|Corresponding to the requirements of WeChat mini-game projects [project.config.json](https://developers.weixin.qq.com/minigame/dev/devtools/projectconfig.html)| +|project.ts|Galacean project files are parsed during initialization| From a0cfa57032d039922e5df6ebdecfaffdfa181c1d Mon Sep 17 00:00:00 2001 From: singlecoder Date: Wed, 15 Jan 2025 10:55:26 +0800 Subject: [PATCH 6/7] feat(mini-doc): replace assets/build to platform/platform --- docs/en/assets/build.md | 91 ------------------------- docs/en/assets/overall.md | 2 +- docs/en/core/canvas.md | 2 +- docs/en/core/engine.md | 2 +- docs/en/graphics/2D/spine/editor.md | 2 +- docs/en/graphics/2D/spine/runtime.md | 2 +- docs/en/graphics/texture/2d.md | 2 +- docs/en/graphics/texture/compression.md | 2 +- 8 files changed, 7 insertions(+), 98 deletions(-) delete mode 100644 docs/en/assets/build.md diff --git a/docs/en/assets/build.md b/docs/en/assets/build.md deleted file mode 100644 index 664f0a2573..0000000000 --- a/docs/en/assets/build.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -order: 2 -title: Project Export -type: Asset Workflow -label: Resource ---- - -## HTML5 Project - -The Galacean Editor project export feature allows you to download the current editor project as a frontend project to your local machine. You can configure the project export parameters in the editor, such as asset export configuration, rendering export configuration, physics export configuration, etc. Based on these configurations, the editor will generate the necessary code and assets for the project, create the corresponding `package.json`, and finally package it into a zip file for you to download. - -### Export Configuration - -#### Asset Export Configuration - -image-20231007201437362 - -The asset export configuration can be used to control the types and quality of resources to be exported. In the asset export configuration, you can select the types of resources to be exported, such as models, textures, HDR, etc., and choose the export quality and format parameters for each type. When exporting models, you can choose whether to export the model's mesh information, skeleton information, animation information, etc. - -| Configuration | Description | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| glTF Quantize | glTF compression algorithm, see [here](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_mesh_quantization/README.md) | -| glTF Meshopt | glTF compression algorithm, see [here](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md) | -| Texture Type | Check [KTX2](https://www.khronos.org/ktx/) to enable [texture compression](/en/docs/graphics/texture/compression/) optimization options | -| Texture Format | Visible after checking [KTX2](https://www.khronos.org/ktx/), different compression formats will affect the texture size and rendering quality | -| Texture Quality | Visible after checking [KTX2](https://www.khronos.org/ktx/), can adjust the texture size and rendering quality to a certain extent | -| Main Scene | Select a scene from the **[Asset Panel](/en/docs/assets/interface)** as the main scene after the project loads | - -#### Rendering Export Configuration - - - -The rendering export configuration can be used to control the rendering effects and performance parameters of the project. - -| Configuration | Description | -| ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -| WebGL Mode | The version of WebGL, `Auto` means automatically selecting the WebGL version based on device capabilities | -| WebGL [Context](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) Configuration | Anti-Alias, Alpha, Preserve Drawing Buffer, etc. | -| Device Pixel Ratio | [Device pixel ratio](/en/docs/core/canvas), used to control the canvas size | - -### Project Startup - -After clicking the download button in the export panel, you will get a compressed package of the project. After decompressing and entering the folder, the directory structure (taking a React project as an example) is as follows: - -```shell -├── example # 📁 示例目录 -│ ├── main.tsx # 示例组件 -├── public # 📁 公共资源目录 -│ ├── scene.json # 场景文件 -│ └── ... # 其他 -├── src # 📁 源代码目录 -│ └── ... # 其他 -├── index.tsx # ⚙️ 组件代码入口 -├── index.html # ⚙️ 示例项目入口文件 -├── project.json # ⚙️ 编辑器导出工程配置 -|── tsconfig.json # ⚙️ TypeScript 配置文件 -├── vite.config.ts # ⚙️ vite 配置文件 -├── package.json # ⚙️ 项目配置文件 -└── ... # 其他 -``` - -### Project Debugging - -Next, you can debug and preview the project locally. Run the following commands in the Terminal in the folder directory to see if the local effect is consistent with the effect in the editor: - -```bash -npm install -npm run dev -``` - -image-20231008163057689 - -### Project Build and Deployment - -Once everything is ready, build and deploy the project. Run the following commands in the Terminal in the folder directory: - -```bash -npm run build -``` - -image-20231008163057689 - -You will find that after the `build` is completed, a `dist` folder appears in the file directory (top left), which contains all the code and resources needed for running. Next, you just need to upload all the contents of this folder to the CDN. - -image-20231008163057689 - -Then visit the corresponding address: - -image-20231008163057689 - -> The exported project is a vite project. For more deployment solutions, refer to [vite official website](https://vitejs.dev/guide/) diff --git a/docs/en/assets/overall.md b/docs/en/assets/overall.md index 490062e7eb..f9faca60b9 100644 --- a/docs/en/assets/overall.md +++ b/docs/en/assets/overall.md @@ -20,6 +20,6 @@ This chapter will mainly cover: - How to [customize asset loaders](/en/docs/assets/custom) - [CRUD operations on assets](/en/docs/assets/interface) in edit mode -- How to [export and deploy assets](/en/docs/assets/build) after building the project +- How to [export and deploy assets](/en/docs/platform/platform) after building the project - How to [load assets](/en/docs/assets/load) at runtime - How to [perform garbage collection](/en/docs/assets/gc) at runtime diff --git a/docs/en/core/canvas.md b/docs/en/core/canvas.md index ebfab03818..55e5e3369d 100644 --- a/docs/en/core/canvas.md +++ b/docs/en/core/canvas.md @@ -41,7 +41,7 @@ flowchart TD C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height] ``` -If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/assets/build) rendering export configuration. +If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/platform/platform) rendering export configuration. image.png diff --git a/docs/en/core/engine.md b/docs/en/core/engine.md index 3e723c5b5d..b34fa140d3 100644 --- a/docs/en/core/engine.md +++ b/docs/en/core/engine.md @@ -49,7 +49,7 @@ classDiagram } ``` -Projects exported by the editor usually automatically set the relevant options configured by the editor. For example, developers can set the rendering configuration of the context in the [export interface](/en/docs/assets/build): +Projects exported by the editor usually automatically set the relevant options configured by the editor. For example, developers can set the rendering configuration of the context in the [export interface](/en/docs/platform/platform): diff --git a/docs/en/graphics/2D/spine/editor.md b/docs/en/graphics/2D/spine/editor.md index 74632ae8c0..afc83ec9ef 100644 --- a/docs/en/graphics/2D/spine/editor.md +++ b/docs/en/graphics/2D/spine/editor.md @@ -127,7 +127,7 @@ Through the `SpineAnimationRenderer` component, you can configure the assets and ## 4. Exporting the Project -Finally, after completing the scene editor, you can refer to the [project export](/en/docs/assets/build/) process to export the editor project. +Finally, after completing the scene editor, you can refer to the [project export](/en/docs/platform/platform/) process to export the editor project. Next section: [Using Galacean Spine Runtime in Your Code](/en/docs/graphics/2D/spine/runtime) diff --git a/docs/en/graphics/2D/spine/runtime.md b/docs/en/graphics/2D/spine/runtime.md index 95f7727d86..5ca4f485b6 100644 --- a/docs/en/graphics/2D/spine/runtime.md +++ b/docs/en/graphics/2D/spine/runtime.md @@ -23,7 +23,7 @@ The Galacean Spine loader supports both assets uploaded via the editor and custo ## Load Assets and Add Them to the Scene ### Load Assets Uploaded via the Galacean Editor -[After exporting the editor project](/docs/assets/build/), `Spine animations already added to the scene will automatically load when the scene file is loaded`: +[After exporting the editor project](/docs/platform/platform/), `Spine animations already added to the scene will automatically load when the scene file is loaded`: ```typescript // Spine animations already added to the scene will automatically load when loading the scene file diff --git a/docs/en/graphics/texture/2d.md b/docs/en/graphics/texture/2d.md index b12de30a9d..19b6733c89 100644 --- a/docs/en/graphics/texture/2d.md +++ b/docs/en/graphics/texture/2d.md @@ -111,4 +111,4 @@ To solve the problem of black edges appearing at the abrupt changes in Alpha val image.png -The [Project Release](/en/docs/assets/build) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export. +The [Project Release](/en/docs/platform/platform) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export. diff --git a/docs/en/graphics/texture/compression.md b/docs/en/graphics/texture/compression.md index f1573f44f2..c75635608e 100644 --- a/docs/en/graphics/texture/compression.md +++ b/docs/en/graphics/texture/compression.md @@ -34,7 +34,7 @@ KTX2 can be generated using: ### Editor -When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/assets/build/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration: +When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/platform/platform/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration: image-20240705112419249 From c4e27166f98965aef17b31d601343b6dc359fd10 Mon Sep 17 00:00:00 2001 From: singlecoder Date: Thu, 23 Jan 2025 18:20:37 +0800 Subject: [PATCH 7/7] feat(mini-doc): opt doc --- docs/en/platform/platform.md | 2 +- docs/zh/platform/platform.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/platform/platform.md b/docs/en/platform/platform.md index b0cead1f83..f242642e5a 100644 --- a/docs/en/platform/platform.md +++ b/docs/en/platform/platform.md @@ -5,7 +5,7 @@ type: Platform label: Platform --- -In order to meet the demands of developers for launching on various platforms and truly achieve development in one place and running everywhere, Galacean 1.4 version began to support multi-platform export. Projects created by developers through the editor can be quickly exported to the projects required by different platforms. +In order to meet the demands of developers for launching on various platforms and truly achieve development in one place and running everywhere, 1.4 version began to support multi-platform export. Projects created by developers through the editor can be quickly exported to the projects required by different platforms. ## Prepare in Advance After the project is developed in the editor, you can export the project for each platform and publish it. Before exporting, let's first understand the export panel and export settings. diff --git a/docs/zh/platform/platform.md b/docs/zh/platform/platform.md index 237ad0cc99..542d7fa6e2 100644 --- a/docs/zh/platform/platform.md +++ b/docs/zh/platform/platform.md @@ -5,7 +5,7 @@ type: 多平台导出 label: Platform --- -为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，Galacean 1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。 +为了满足广大开发者对各个平台上线的诉求，真正做到一处开发，处处运行，1.4 版本开始支持多平台导出。开发者通过编辑器制作的项目，可以快速的导出到不同的平台所需的工程。 ## 前置准备 项目在编辑器中开发完成后，就可以导出各个平台的工程并进行发布了。在导出之前，我们先来了解一下导出面板和导出设置。