diff --git a/docs/animation-clip.zh-CN.md b/docs/animation-clip.zh-CN.md index 788d5b06e..49469f1fb 100644 --- a/docs/animation-clip.zh-CN.md +++ b/docs/animation-clip.zh-CN.md @@ -27,7 +27,7 @@ label: Animation ### Transform 组件示例 -1. 在 **[资产面板](${docs}interface-assets)** 中 右键/点击+ 创建 `动画片段` 资产 +1. 在 **[资产面板](${docs}assets-interface)** 中 右键/点击+ 创建 `动画片段` 资产 ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*j4FMRKx91nEAAAAAAAAAAAAADsJ_AQ/original) diff --git a/docs/animation-sprite-sheet.zh-CN.md b/docs/animation-sprite-sheet.zh-CN.md index 122b78468..08001bd88 100644 --- a/docs/animation-sprite-sheet.zh-CN.md +++ b/docs/animation-sprite-sheet.zh-CN.md @@ -15,7 +15,7 @@ Galacean 支持引用类型的动画曲线，你可以添加类型为资产的 ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*ababSZAMpJMAAAAAAAAAAAAADsJ_AQ/original) -3. 在 **[资产面板](${docs}interface-assets)** 中创建 [动画片段](${docs}animation-clip) +3. 在 **[资产面板](${docs}assets-interface)** 中创建 [动画片段](${docs}animation-clip) ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CZQjSqZAHGsAAAAAAAAAAAAADsJ_AQ/original) diff --git a/docs/interface-publish.zh-CN.md b/docs/assets-build.zh-CN.md similarity index 98% rename from docs/interface-publish.zh-CN.md rename to docs/assets-build.zh-CN.md index 8cbe1ddb9..597166fa9 100644 --- a/docs/interface-publish.zh-CN.md +++ b/docs/assets-build.zh-CN.md @@ -1,9 +1,8 @@ --- -order: 6 +order: 2 title: 项目导出 -type: 基础知识 -group: 界面 -label: Basics/Interface +type: 资产工作流 +label: Resource --- ## HTML5 项目 @@ -25,7 +24,7 @@ Galacean Editor 项目导出功能可以将当前编辑器项目作为一个前 | 纹理类型 | 勾选 [KTX2](https://www.khronos.org/ktx/) 开启[纹理压缩](${docs}graphics-texture-compression)优化选项 | | 纹理压缩格式 | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，不同压缩格式会影响纹理的尺寸和渲染质量 | | 纹理压缩质量 | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，可以一定限度上调整纹理的尺寸和渲染质量 | -| 主场景 | 选择 **[资产面板](${docs}interface-assets)** 中的某个场景作为项目加载后的主场景 | +| 主场景 | 选择 **[资产面板](${docs}assets-interface)** 中的某个场景作为项目加载后的主场景 | #### 渲染导出配置 diff --git a/docs/assets-gc.zh-CN.md b/docs/assets-gc.zh-CN.md index 8346987bd..1804a554a 100644 --- a/docs/assets-gc.zh-CN.md +++ b/docs/assets-gc.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: 资产的释放 type: 资产工作流 label: Resource diff --git a/docs/interface-assets.zh-CN.md b/docs/assets-interface.md similarity index 73% rename from docs/interface-assets.zh-CN.md rename to docs/assets-interface.md index 9fb0bac44..d81333cb0 100644 --- a/docs/interface-assets.zh-CN.md +++ b/docs/assets-interface.md @@ -1,12 +1,11 @@ --- -order: 3 +order: 1 title: 资产面板 -type: 基础知识 -group: 界面 -label: Basics/Interface +type: 资产工作流 +label: Resource --- -image-20240122134812991 +image-20240319102237183 资产面板是编辑器中一个重要的面板，它可以帮助你管理场景中使用到的所有资产。在资产面板中，你可以查看和管理场景中使用到的所有资产，例如材质、贴图、模型等等。通过资产面板，你可以添加或删除资产，以及对资产进行分类管理，从而更好的组织资产。 @@ -35,31 +34,27 @@ label: Basics/Interface 为了在场景中添加资产，你可以点击资产面板上的添加按钮，或者资产面板的右键菜单中的添加选项来添加新资产。添加资产后，你可以在 **[检查器面板](${docs}interface-inspector)** 中对资产的属性进行编辑。资产面板中的资产类型非常丰富，例如材质、贴图、模型、字体等等。具体可以参照上方的表格。 -
- image-20240122135556344 -
通过右键菜单创建/上传资产
-
+image-20240319103341208 + 你还可以将文件拖动到资产面板中来添加资产，组合文件可以直接选中多个文件拖进资产面板即可。 -
-drag2 -
通过拖拽上传图片
-
+drag6 + ### 组织资产 -资产面板中的资产可以通过分类来管理，以便更好的组织资产。你可以在资产面板中创建文件夹并将资产移动到对应的文件夹中，以实现分类管理。资产面板中的文件夹可以嵌套，你可以创建多层级的文件夹来更好的组织资产。 +资产面板中的资产可以通过分类来管理，以便更好的组织资产。你可以在资产面板中创建文件夹并将资产移动到对应的文件夹中（也可以移动到左侧目录的文件夹中），以实现分类管理。资产面板中的文件夹可以嵌套，你可以创建多层级的文件夹来更好的组织资产。 -drag1 +drag7 资产面板提供了对资产浏览友好的工具栏，帮助你快速地查找某个或某类资产。你也可以根据你的使用习惯，对资产的浏览模式、排序方式和缩略图大小进行修改。 -drag4 +drag8 组织完资产后，每个资产都有一个**相对路径**，我们可以右击某个资产拷贝路径。 -image-20240131162519263 +image-20240319132804611 这对项目开发来说很重要，因为项目中经常遇到需要异步加载资产的情况，即初始化不需要加载某个资产（甚至是场景），可以通过脚本来控制某个资产的加载。具体的语法可以看[资产](${docs}assets-load)和[场景](${docs}core-scene)的加载使用，以加载场景为例： @@ -75,23 +70,17 @@ this.engine.resourceManager.load({ url: "...", type: AssetType.Scene }); 在选中一个资产后, 右侧的 **[检查器面板](${docs}interface-inspector)** 会显示出此资产可配置的属性。不同的资产所对应的可配置项是不同的, 比如 glTF 资产会显示模型预览窗, 材质资产会显示出详细的材质配置选项 。 -
- image-20240122134306052 -
glTF检查器
-
+image-20240319120017637 + ### 使用资产 部分资产（如 glTF 资产）支持拖拽到场景中或节点树中。 -drag3 +drag9 + -检查器提供了统一的资产选择器，你也可以把资产拖拽到检查器的资产选择框中，以便快速操作。 -
- image-20240122134039213 -
资产选择器
-
### 快捷键 diff --git a/docs/assets-load.zh-CN.md b/docs/assets-load.zh-CN.md index 5b5b3f419..2c7edc6dc 100644 --- a/docs/assets-load.zh-CN.md +++ b/docs/assets-load.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: 资产的加载 type: 资产工作流 label: Resource @@ -84,7 +84,7 @@ this.engine.resourceManager.load({ this.engine.resourceManager.load("Assets/texture.png"); ``` -> 在编辑器中可以通过 **[资产面板](${docs}interface-assets)** -> **右键资产** -> **Copy relative path** 快速复制资产的相对路径 +> 在编辑器中可以通过 **[资产面板](${docs}assets-interface)** -> **右键资产** -> **Copy relative path** 快速复制资产的相对路径 ### baseUrl diff --git a/docs/assets-overall.zh-CN.md b/docs/assets-overall.zh-CN.md index 5b75cf3a6..f9f919862 100644 --- a/docs/assets-overall.zh-CN.md +++ b/docs/assets-overall.zh-CN.md @@ -19,7 +19,7 @@ flowchart LR 本章节将主要讲述： - [资产类型](${docs}assets-type)：介绍**内置资产类型**和如何**自定义资产加载器** -- 编辑状态下[资产的增删改查](${docs}interface-assets) -- 构建项目后[资产如何导出并部署](${interface-publish}) +- 编辑状态下[资产的增删改查](${docs}assets-interface) +- 构建项目后[资产如何导出并部署](${assets-build}) - 运行时如何[加载资产](${docs}assets-load) - 运行时如何[垃圾回收](${docs}assets-gc) diff --git a/docs/core-canvas.zh-CN.md b/docs/core-canvas.zh-CN.md index a27830257..505335ce1 100644 --- a/docs/core-canvas.zh-CN.md +++ b/docs/core-canvas.zh-CN.md @@ -41,7 +41,7 @@ flowchart TD C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height] ``` -若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](${docs}interface-publish)渲染导出配置处控制**设备像素比**即可。 +若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](${docs}assets-build)渲染导出配置处控制**设备像素比**即可。 image.png diff --git a/docs/core-engine.zh-CN.md b/docs/core-engine.zh-CN.md index 290661ffd..aeeb7a27f 100644 --- a/docs/core-engine.zh-CN.md +++ b/docs/core-engine.zh-CN.md @@ -29,7 +29,7 @@ const engine = await WebGLEngine.create({ canvas: "canvas" }); ### 渲染上下文 -开发者可以在 [导出界面](${docs}interface-publish) 设置上下文的渲染配置。 +开发者可以在 [导出界面](${docs}assets-build) 设置上下文的渲染配置。 diff --git a/docs/core-scene.zh-CN.md b/docs/core-scene.zh-CN.md index b41126e12..2a5a54593 100644 --- a/docs/core-scene.zh-CN.md +++ b/docs/core-scene.zh-CN.md @@ -13,7 +13,7 @@ Scene 作为场景单元，可以方便的进行实体树管理，尤其是大 ### 创建和切换 -在 **[资产面板](${docs}interface-assets)** 右键（或资产面板右上角 + 号）创建场景，双击场景可以切换过去： +在 **[资产面板](${docs}assets-interface)** 右键（或资产面板右上角 + 号）创建场景，双击场景可以切换过去： ![Untitled](https://mdn.alipayobjects.com/rms/afts/img/A*3KX4QKXgZZAAAAAAAAAAAAAAARQnAQ/original/Untitled.gif) diff --git a/docs/getting-started-core-concept.zh-CN.md b/docs/getting-started-core-concept.zh-CN.md index 10fdb3948..ade33ffaf 100644 --- a/docs/getting-started-core-concept.zh-CN.md +++ b/docs/getting-started-core-concept.zh-CN.md @@ -64,7 +64,7 @@ label: Basics/GettingStarted 接下来，我们为这个节点再绑定一个 `Script` 组件（[什么是 Script 组件?](https://galacean.antgroup.com/#/docs/latest/cn/script)）。 1. 我们继续使用上述方式在 **[检查器面板](${docs}interface-inspector)** 中添加 `Script` 组件 -2. 接下来，我们在 **[资产面板](${docs}interface-assets)** 中 `右键` → `Create` → `Script` 创建一个 `Script` 资产 +2. 接下来，我们在 **[资产面板](${docs}assets-interface)** 中 `右键` → `Create` → `Script` 创建一个 `Script` 资产 3. 最后，在 **[检查器面板](${docs}interface-inspector)** 中将刚创建的脚本文件绑定到脚本组件上 > ⚠️ 注意，如果你没有把脚本资产绑定到实体的脚本组件上，则脚本不会运行 diff --git a/docs/getting-started-overview.zh-CN.md b/docs/getting-started-overview.zh-CN.md index 843cc6c6c..eae93f818 100644 --- a/docs/getting-started-overview.zh-CN.md +++ b/docs/getting-started-overview.zh-CN.md @@ -88,7 +88,7 @@ import { OrbitControl } from " @galacean/engine-toolkit-controls"; 可以在支持 WebGL 的环境下运行，到目前为止，所有主流的移动端浏览器与桌面浏览器都支持这一标准。可以在 [CanIUse](https://caniuse.com/?search=webgl) 上检测运行环境的兼容性。 -此外，**Galacean Runtime** 还支持在[支付宝/淘宝小程序](${docs}interface-publish)中运行，同时也有开发者在社区贡献了[微信小程序/游戏的适配方案](https://github.com/deepkolos/platformize)。对于一些需要额外考虑兼容性的功能模块，当前的适配方案如下： +此外，**Galacean Runtime** 还支持在[支付宝/淘宝小程序](${docs}assets-build)中运行，同时也有开发者在社区贡献了[微信小程序/游戏的适配方案](https://github.com/deepkolos/platformize)。对于一些需要额外考虑兼容性的功能模块，当前的适配方案如下： | 模块 | 兼容考虑 | 具体文档 | | :------------------------------ | :------------------------------------------------------- | :-------------------------------------------------------------------------------------- | diff --git a/docs/graphics-2d-spine.zh-CN.md b/docs/graphics-2d-spine.zh-CN.md index 240d5db3c..6b03788d6 100644 --- a/docs/graphics-2d-spine.zh-CN.md +++ b/docs/graphics-2d-spine.zh-CN.md @@ -34,7 +34,7 @@ flowchart LR ### 资源上传 -资源导出后，开发者需要同时把三个文件上传到 Galacean Editor。通过 **[资产面板](${docs}interface-assets)** 的上传按钮选择 “spine” 资产，选择本地的这三个文件，上传成功后能够在资产面板看到上传的 spine 资产： +资源导出后，开发者需要同时把三个文件上传到 Galacean Editor。通过 **[资产面板](${docs}assets-interface)** 的上传按钮选择 “spine” 资产，选择本地的这三个文件，上传成功后能够在资产面板看到上传的 spine 资产： 也可以直接把三个文件拖动到资产区域完成上传： diff --git a/docs/graphics-2d-sprite.zh-CN.md b/docs/graphics-2d-sprite.zh-CN.md index 69958d2df..3881b3e10 100644 --- a/docs/graphics-2d-sprite.zh-CN.md +++ b/docs/graphics-2d-sprite.zh-CN.md @@ -33,13 +33,13 @@ pivot 代表精灵中心在 region 中的位置，如下： #### 上传精灵 -在 **[资产面板](${docs}interface-assets)** 空白处依次 **右键** → **Upload** → **Sprite** → **选中对应图片** 即可上传精灵资产，上传成功后当前资产列表会同步添加一份名为 `图片名.png` 的纹理资产和一份 `图片名-spr.png` 的精灵资产 +在 **[资产面板](${docs}assets-interface)** 空白处依次 **右键** → **Upload** → **Sprite** → **选中对应图片** 即可上传精灵资产，上传成功后当前资产列表会同步添加一份名为 `图片名.png` 的纹理资产和一份 `图片名-spr.png` 的精灵资产 avatar #### 创建空白精灵 -在 **[资产面板](${docs}interface-assets)** 空白处依次 **右键** → **Create** → **Sprite** 即可创建一份空白的精灵资产。 +在 **[资产面板](${docs}assets-interface)** 空白处依次 **右键** → **Create** → **Sprite** 即可创建一份空白的精灵资产。 avatar diff --git a/docs/graphics-2d-spriteAtlas.zh-CN.md b/docs/graphics-2d-spriteAtlas.zh-CN.md index 10bc58e8a..7bfdf005b 100644 --- a/docs/graphics-2d-spriteAtlas.zh-CN.md +++ b/docs/graphics-2d-spriteAtlas.zh-CN.md @@ -20,7 +20,7 @@ label: Graphics/2D ### 创建精灵图集 -在 **[资产面板](${docs}interface-assets)** 内右键，选择`功能列表`中的`创建`，并选中`精灵图集`，此时，一个空白的精灵图集资产就创建成功了。 +在 **[资产面板](${docs}assets-interface)** 内右键，选择`功能列表`中的`创建`，并选中`精灵图集`，此时，一个空白的精灵图集资产就创建成功了。 buildBox diff --git a/docs/graphics-background-sky.zh-CN.md b/docs/graphics-background-sky.zh-CN.md index 6ee1068b8..8d50fde6f 100644 --- a/docs/graphics-background-sky.zh-CN.md +++ b/docs/graphics-background-sky.zh-CN.md @@ -18,13 +18,13 @@ label: Graphics/Background > 可以在 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图 -天空盒纹理就是一张[立方纹理](${docs}graphics-texture-cube)，首先在准备好 HDR 后，依照路径 **[资产面板](${docs}interface-assets)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。 +天空盒纹理就是一张[立方纹理](${docs}graphics-texture-cube)，首先在准备好 HDR 后，依照路径 **[资产面板](${docs}assets-interface)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。 ![image.png](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*5PG6Rpo-aTwAAAAAAAAAAAAADhuCAQ/original) ### 2. 创建天空盒材质 -创建完立方纹理资产后，依照路径 **[资产面板](${docs}interface-assets)** -> **右键创建** -> **选择 Material** -> **选中生成的资产** -> **[检查器面板](${docs}interface-inspector)** -> **点击 Base 栏的 Shader 属性** -> **选择 Sky Box** -> **点击 Base 栏的 HDR** -> **选择第一步创建的立方纹理** 创建天空盒材质。 +创建完立方纹理资产后，依照路径 **[资产面板](${docs}assets-interface)** -> **右键创建** -> **选择 Material** -> **选中生成的资产** -> **[检查器面板](${docs}interface-inspector)** -> **点击 Base 栏的 Shader 属性** -> **选择 Sky Box** -> **点击 Base 栏的 HDR** -> **选择第一步创建的立方纹理** 创建天空盒材质。 ![image.png](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YkX9R5yfGE0AAAAAAAAAAAAADhuCAQ/original) diff --git a/docs/graphics-mesh-primitiveMesh.zh-CN.md b/docs/graphics-mesh-primitiveMesh.zh-CN.md index d016b5fc7..7781793fd 100644 --- a/docs/graphics-mesh-primitiveMesh.zh-CN.md +++ b/docs/graphics-mesh-primitiveMesh.zh-CN.md @@ -18,7 +18,7 @@ label: Graphics/Mesh image-20231009112014068 -内置几何体无法满足需求？您可以在 **[资产面板](${docs}interface-assets)** 中 **右键** → **Create** → **PrimitiveMesh** 创建一个 `Mesh` 资产，并通过调整 `Mesh` 的各项参数来满足需求。 +内置几何体无法满足需求？您可以在 **[资产面板](${docs}assets-interface)** 中 **右键** → **Create** → **PrimitiveMesh** 创建一个 `Mesh` 资产，并通过调整 `Mesh` 的各项参数来满足需求。 image-20231009111916680 diff --git a/docs/graphics-model-assets.zh-CN.md b/docs/graphics-model-assets.zh-CN.md index cb2e38ce6..4b53cd5cd 100644 --- a/docs/graphics-model-assets.zh-CN.md +++ b/docs/graphics-model-assets.zh-CN.md @@ -6,7 +6,7 @@ group: 模型 label: Graphics/Model --- -模型导入完毕后， **[资产面板](${docs}interface-assets)** 中会新增导入的模型资产，点击资产缩略图，可以看到这个模型的基本信息。 +模型导入完毕后， **[资产面板](${docs}assets-interface)** 中会新增导入的模型资产，点击资产缩略图，可以看到这个模型的基本信息。 image-20231009112328575 diff --git a/docs/graphics-model-importGlTF.zh-CN.md b/docs/graphics-model-importGlTF.zh-CN.md index 7c05f995f..8a84736ff 100644 --- a/docs/graphics-model-importGlTF.zh-CN.md +++ b/docs/graphics-model-importGlTF.zh-CN.md @@ -35,4 +35,4 @@ style="zoom:100%;" /> image-20231009112129853 -导入完毕后， **[资产面板](${docs}interface-assets)** 中就会新增导入的模型资产，让我们[看看模型资产包含了什么内容](${docs}graphics-model-assets)吧。 +导入完毕后， **[资产面板](${docs}assets-interface)** 中就会新增导入的模型资产，让我们[看看模型资产包含了什么内容](${docs}graphics-model-assets)吧。 diff --git a/docs/graphics-model-use.zh-CN.md b/docs/graphics-model-use.zh-CN.md index db0e3894e..e720d2152 100644 --- a/docs/graphics-model-use.zh-CN.md +++ b/docs/graphics-model-use.zh-CN.md @@ -41,7 +41,7 @@ engine.resourceManager }); ``` -在编辑器中，可以直接获取模型资产的 URL （ **[资产面板](${docs}interface-assets)** -> **右键模型资产缩略图** -> **Copy file info / Copy relative path**）： +在编辑器中，可以直接获取模型资产的 URL （ **[资产面板](${docs}assets-interface)** -> **右键模型资产缩略图** -> **Copy file info / Copy relative path**）： import diff --git a/docs/graphics-texture-2d.zh-CN.md b/docs/graphics-texture-2d.zh-CN.md index 8f3563656..ca0e6e5ab 100644 --- a/docs/graphics-texture-2d.zh-CN.md +++ b/docs/graphics-texture-2d.zh-CN.md @@ -10,7 +10,7 @@ label: Graphics/Texture ## 创建 -在编辑器中可以方便地导入一张 2D 纹理，按照路径 **[资产面板](${docs}interface-assets)** -> **右键上传** -> **选择 Texture2D** -> **选择对应贴图** -> **2D 纹理资产创建完毕** 操作即可。 +在编辑器中可以方便地导入一张 2D 纹理，按照路径 **[资产面板](${docs}assets-interface)** -> **右键上传** -> **选择 Texture2D** -> **选择对应贴图** -> **2D 纹理资产创建完毕** 操作即可。 image.png @@ -111,4 +111,4 @@ material.baseTexture = texture; image.png -[项目发布](${docs}interface-publish)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。 +[项目发布](${docs}assets-build)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。 diff --git a/docs/graphics-texture-compression.zh-CN.md b/docs/graphics-texture-compression.zh-CN.md index 2a8289f06..9d525ad51 100644 --- a/docs/graphics-texture-compression.zh-CN.md +++ b/docs/graphics-texture-compression.zh-CN.md @@ -31,7 +31,7 @@ KTX2 的生成可以使用： - toktx - basisu -- 编辑器打包，可以参考『[项目发布](${docs}interface-publish)』文档。 +- 编辑器打包，可以参考『[项目发布](${docs}assets-build)』文档。 ## 兼容性 diff --git a/docs/graphics-texture-cube.zh-CN.md b/docs/graphics-texture-cube.zh-CN.md index 666bf77c1..1ff17c92c 100644 --- a/docs/graphics-texture-cube.zh-CN.md +++ b/docs/graphics-texture-cube.zh-CN.md @@ -22,7 +22,7 @@ label: Graphics/Texture > 可以在 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图 -在准备好 HDR 后，依照路径 **[资产面板](${docs}interface-assets)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。 +在准备好 HDR 后，依照路径 **[资产面板](${docs}assets-interface)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。 ![image.png](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*5PG6Rpo-aTwAAAAAAAAAAAAADhuCAQ/original) diff --git a/docs/interface-inspector.zh-CN.md b/docs/interface-inspector.zh-CN.md index d2b299b06..9939a37b6 100644 --- a/docs/interface-inspector.zh-CN.md +++ b/docs/interface-inspector.zh-CN.md @@ -10,19 +10,20 @@ label: Basics/Interface
- image-20240122144004260 + image-20240122144004260
场景检查器
- image-20240122144102202 + image-20240122144102202
实体检查器
- image-20240122144141450 + image-20240122144141450
资产检查器
+ ## 属性类型 检查器面板中的属性可以分成两大类： @@ -36,21 +37,21 @@ label: Basics/Interface 你可以通过拖拽输入框右侧的滑块来快速调整数字的大小。在拖拽时，按住 `⌘`（window 上为 `ctrl`）可以更精确地调整数字的大小（精度为原 step 的 1/10）。 -image-20230926105543072 +image-20240318175444343 一些可以调节的属性是以滑动条的形式出现的。你可以拖动滑块来快速调整数字的大小，如灯光的 `Intensity`。同样的，在拖动滑块时，按住 `⌘`（window 上为 `ctrl`）可以更精确的调整数字的大小。 -image-20230926105935206 +image-20240318175518354 -还有一些数字调节的属性是以输入框和按钮的形式出现的，如阴影的 `shadowDistance`。这些属性往往拥有更精确的步进大小（如 0.1, 1, 10）。点击按钮可以直接以步进长度来增加或减小数值。 +还有一些数字调节的属性是以输入框和按钮的形式出现的，如阴影的 `Near Plane`。这些属性往往拥有更精确的步进大小（如 0.1, 1, 10）。点击按钮可以直接以步进长度来增加或减小数值。 -image-20230926110053695 +image-20240318175638055 ### 颜色面板 一些属性需要调整颜色，如光照、场景的背景色，亦或者材质的自发光颜色等。想要调整颜色，你需要点击左侧的颜色按钮来唤起颜色选择器。在颜色选择器中，你可以使用 HUE 来选择颜色，调整颜色的透明度；也可以在输入框来调整颜色具体的 RGBA 数值。点击 image-20230926110451443按钮可以在 HSLA，RGBA 和 HEXA 三种模式下进行切换。 -image-20240122143848061 +image-20240318175748734 ### 资产选择浮窗 @@ -60,11 +61,12 @@ label: Basics/Interface
- image-20240122143554973 + image-20240122143554973
Mesh Asset Picker
- image-20240122134039213 + image-20240122134039213
Texture Asset Picker
+ diff --git a/docs/interface-intro.zh-CN.md b/docs/interface-intro.zh-CN.md index 8ec570eed..94572242e 100644 --- a/docs/interface-intro.zh-CN.md +++ b/docs/interface-intro.zh-CN.md @@ -6,9 +6,9 @@ group: 界面 label: Basics/Interface --- -## 编辑器首页 +## 首页 -![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*zRqTSIcsY74AAAAAAAAAAAAADqiTAQ/original) +![image-20240318173506046](https://gw.alipayobjects.com/zos/OasisHub/334d8ca3-639f-4cd9-8aaa-93c1da7acdc3/image-20240318173506046.png) | 序号 | 区域 | 说明 | | ---- | ------------ | ------------------------------------------------------ | @@ -18,13 +18,13 @@ label: Basics/Interface ## 场景编辑页 -SCR-20230223-klw.png +![image-20240318173406939](https://gw.alipayobjects.com/zos/OasisHub/f5b3b853-c5d6-4048-a4de-e18dc69339de/image-20240318173406939.png) | 序号 | 区域 | 说明 | | ---- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | 侧边栏 | 包含了编辑器的主菜单，面板切换按钮以及个性化设置 | | 2 | [层级面板](${docs}interface-hierarchy) | 位于编辑器左侧，在这里会显示整个场景中的所有节点 | -| 3 | [资产面板](${docs}interface-assets) | 位于编辑器底部，其中会显示当前项目所包含的所有资产，如 HDR 贴图、各种纹理文件、脚本、字体文件等 | +| 3 | [资产面板](${docs}assets-interface) | 位于编辑器底部，其中会显示当前项目所包含的所有资产，如 HDR 贴图、各种纹理文件、脚本、字体文件等 | | 4 | [检查器面板](${docs}interface-inspector) | 位于编辑器右侧，会根据你的当前选择二显示不同编辑选项 | | 5 | [主编辑区](${docs}interface-viewport) | 位于编辑器中间，是编辑器的主要操作区域，可以通过鼠标和键盘来编辑场景 | | 6 | 工具栏 | 位于编辑器顶部，这里提供了一些快速的操作如切换 Gizmo 的模式、切换场景视角，相机配置等 | @@ -33,17 +33,3 @@ label: Basics/Interface | 9 | [动画控制器编辑器](${docs}animation-animator) | 双击 AnimatorController 资产或点击**面板切换按钮** -> ，在这里你可以对指定的 AnimationClip 资产进行编辑 | 对于各个面板详细的介绍可以点击上方链接查看。 - -## 代码编辑页 - -![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*3crSToI-RdAAAAAAAAAAAAAADqiTAQ/**original**) - -| 序号 | 区域 | 说明 | -| ---- | ---------- | -------------------------------------------------------------------------------------------------- | -| 1 | 文件列表 | 在这里可以查看项目中的所有脚本文件 | -| 2 | 代码编辑区 | 在这里可以编辑脚本文件，支持代码高亮，代码提示，代码格式化等功能 | -| 3 | 预览区 | 在这里可以预览当前脚本的运行效果。保存代码后会实时刷新此区域的渲染状态 | -| 4 | 事件调试区 | 代码编辑器会自动检索所有绑定到引擎中的事件并显示在这里，你可以在这里触发事件，也可以配置事件的参数 | -| 5 | 控制台 | 你可以在这里查看代码运行时的日志信息 | - -想要了解更多关于代码编辑器的信息，请查看[代码编辑器](${docs}script-edit)。 diff --git a/docs/interface-menu.zh-CN.md b/docs/interface-menu.zh-CN.md index 104e00d52..3f4fec3c0 100644 --- a/docs/interface-menu.zh-CN.md +++ b/docs/interface-menu.zh-CN.md @@ -8,30 +8,28 @@ label: Basics/Interface 项目管理包括新建项目、克隆项目、项目设置等操作。 -image-20230925162556276 +image-20240319100341232 -### 新建项目和克隆项目 +### 新建/克隆项目 -选择`New Project`项，可以进一步选择新建不同类型的项目。点击`Fork`，会跳转到新克隆的项目页面，旧的项目仍会保留。 - -image-20230925162814875 +选择 **New Project** 项，可以进一步选择新建不同类型的项目。点击 **Fork**，会跳转到新克隆的项目页面，旧的项目仍会保留。 ### 项目设置 -点击`Project Settings`项，会出现项目设置弹窗，包含项目重命名、引擎版本管理、快照管理等操作。 +点击 **Project Settings** 项，会出现项目设置弹窗，包含项目重命名、引擎版本管理、快照管理等操作。 -image-20230925172423563 +image-20240319100534596 #### 基础设置 -`Basic` 中包含项目的基础信息设置： +**Basic** 中包含项目的基础信息设置： -- `Engine Version`：引擎版本升级，以便快速修复某个 bug 或享受新的功能（注意：引擎版本升级操作是不可逆的。为避免损坏项目，升级引擎过程中会自动克隆一个项目）。 -- `Physics Backend`：物理引擎后端，可以选择 `Physics Lite` 或 `PhysX` 两种后端。前者是一个轻量级的物理引擎，后者是基于 [PhysX](https://developer.nvidia.com/physx-sdk) 的高级物理引擎。 -- `Model Import Options`：模型导入选项，包含计算切线、移除灯光的选项。 +- **Engine Version**：引擎版本升级，以便快速修复某个 bug 或享受新的功能（注意：引擎版本升级操作是不可逆的。为避免损坏项目，升级引擎过程中会自动克隆一个项目）。 +- **Physics Backend**：物理引擎后端，可以选择 *Physics Lite* 或 *PhysX* 两种后端。前者是一个轻量级的物理引擎，后者是基于 [PhysX](https://developer.nvidia.com/physx-sdk) 的高级物理引擎。 +- **Model Import Options**：模型导入选项，包含计算切线、移除灯光的选项。 #### 快照管理 -`Snapshorts` 快照管理功能允许用户保存某个项目的快照到历史记录中，万一项目出现数据丢失等问题，可以通过 `Revet` 快速恢复到之前保存的某个快照。用户可以在菜单中选择 `Add Snapshot` 。点击快照名可以编辑快照名称，以方便下次快速找到。 +**Snapshorts** 快照管理功能允许用户保存某个项目的快照到历史记录中，万一项目出现数据丢失等问题，可以通过 **Revet** 快速恢复到之前保存的某个快照。用户可以在菜单中选择 **Add Snapshot** 。点击快照名可以编辑快照名称，以方便下次快速找到。 -image-20230925164014187 \ No newline at end of file +image-20240319101033970 \ No newline at end of file diff --git a/docs/script-edit.zh-CN.md b/docs/script-edit.zh-CN.md index 00f6fa078..3cfd951a9 100644 --- a/docs/script-edit.zh-CN.md +++ b/docs/script-edit.zh-CN.md @@ -5,10 +5,23 @@ type: 脚本 label: Script --- -![Code Editor Snapshot](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*oXB7Q7j8ngMAAAAAAAAAAAAADqiTAQ/original) - Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码提示，第三方包引入，引擎事件调试，脚本参数调试，项目实时预览等多种能力，可帮助你快速编辑和调试代码。 +![image-20240318173952160](https://gw.alipayobjects.com/zos/OasisHub/2707ed27-a85a-4915-9db0-1cbed9e5c3dc/image-20240318173952160.png) + +| 序号 | 区域 | 说明 | +| ---- | ------------ | ------------------------------------------------------------ | +| 1 | 文件列表 | 查看项目中的所有脚本文件 | +| 2 | 代码编辑区 | 编辑脚本文件，支持代码高亮，代码提示，代码格式化等功能 | +| 3 | 预览区 | 预览当前脚本的运行效果。保存代码后会实时刷新此区域的渲染状态 | +| 4 | 包依赖管理区 | 添加需要依赖的 [NPM](https://www.npmjs.org/) 三方包，比如 [tween.js](https://www.npmjs.com/package/@tweenjs/tween.js) | +| 5 | 事件调试区 | 代码编辑器会自动检索所有绑定到引擎中的事件并显示在这里，你可以在这里触发事件，也可以配置事件的参数 | +| 5 | 控制台 | 查看代码运行时的日志信息 | + +想要了解更多关于代码编辑器的信息，请查看[代码编辑器](${docs}script-edit)。 + + + ## 代码编辑 在场景编辑器中创建脚本资产后，双击该脚本即可打开代码编辑器。Galacean 中的脚本需使用 [Typescript](https://www.typescriptlang.org/) 语言编写，同时新脚本默认基于内置模板创建。另外，Galacean 的代码编辑器基于 Monaco，快捷键与 VSCode 类似。修改脚本后，按 `Ctrl/⌘ + S` 保存，右侧实时预览区展现最新场景效果。 @@ -17,7 +30,7 @@ Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码 ## 文件预览 -![Code Editor Snapshot](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*o51FQa9Uh0MAAAAAAAAAAAAADqiTAQ/original) +Code Editor Snapshot 1. **文件搜索** 可快速搜索项目中的文件 2. **代码筛选** 文件树是否仅显示代码文件 ( `.ts` `.gs` `.glsl` ) @@ -29,7 +42,7 @@ Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码 代码编辑器内置了与项目相对应的引擎，可自动提供引擎 API 的智能提示，从而帮助你快速实现基于引擎的逻辑。但大多数情况下你都需要引入 Galacean 生态包或其他第三方包来增强功能。 -![Code Editor Snapshot](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*Nc2MQqOeWxgAAAAAAAAAAAAADqiTAQ/original) +Code Editor Snapshot 1. **搜索框** 在搜索框输入包名，按下 回车键，即可快速拉取包的版本列表 2. **版本选择** 默认情况下使用 `latest` 版本 @@ -43,7 +56,7 @@ Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码 Galacean 的代码编辑器提供实时预览功能。保存代码后，预览区会自动更新，从而让你快速查看代码的执行结果。 -![Code Editor Snapshot](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*dCHqRIMdHbkAAAAAAAAAAAAADqiTAQ/original) +Code Editor Snapshot 1. **拖动按钮** 按住来拖动模拟器。将模拟器拖到屏幕右边缘，即可将其固定在右侧面板上。 2. **统计信息切换** 点击来切换场景统计信息的显示状态 @@ -55,7 +68,7 @@ Galacean 的代码编辑器提供实时预览功能。保存代码后，预览 在代码编辑器中，我们提供了一个事件调试面板，从而帮助你快速调试场景中的事件。 -![Code Editor Snapshot](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*xtmMT676qvcAAAAAAAAAAAAADqiTAQ/original) +Code Editor Snapshot 1. **事件列表** Galacean Editor 会自动收集场景中的所有事件名并显示在这里 2. **事件参数配置** 你可以点击此按钮来配置触发事件时所携带的参数，参数的配置使用 `JSON` 格式编写