mirror of
https://github.com/galacean/engine.git
synced 2026-05-16 16:41:08 +08:00
refactor: doc md to mdx
This commit is contained in:
eyworldwide
@@ -10,11 +10,11 @@ We will understand the use of the engine through an example of a "rotating duck.
|
||||
|
||||
After logging in, the first thing you see is the editor's homepage, which displays all the projects you have created. Use the button in the upper right corner to create a project. After clicking, you can choose the type of project to create, either 2D or 3D. We choose 3D Project.
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style={{zoom:"50%"}} />
|
||||
|
||||
At this point, a new blank project will open, with a camera and a directional light built into the scene.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/92b9b53e-63df-4165-bb53-d130bde7a731/image-20240705161613717.png" alt="image-20240705161613717" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/92b9b53e-63df-4165-bb53-d130bde7a731/image-20240705161613717.png" alt="image-20240705161613717" style={{zoom:"50%"}} />
|
||||
|
||||
## Build the Scene
|
||||
|
||||
@@ -33,49 +33,49 @@ Before that, let's explain some basic concepts in the game engine:
|
||||
|
||||
First, click this [link](https://gw.alipayobjects.com/os/bmw-prod/6cb8f543-285c-491a-8cfd-57a1160dc9ab.glb) to download a 3D model of a duck. Drag the downloaded model to the asset panel, and after a while, you will see that the model has been uploaded to the editor:
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/a73635d5-9f6f-4dc0-aa32-af8d49b669a6/image-20240705162025015.png" alt="image-20240705162025015" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/a73635d5-9f6f-4dc0-aa32-af8d49b669a6/image-20240705162025015.png" alt="image-20240705162025015" style={{zoom:"50%"}} />
|
||||
|
||||
Next, drag the model from the asset panel to the scene view, and you can render this 3D model in the scene. At this point, a new entity has been added to the scene's node tree.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/cfbdb410-9091-4246-a9ba-1cf06cd4fb93/image-20240705162359455.png" alt="image-20240705162359455" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/cfbdb410-9091-4246-a9ba-1cf06cd4fb93/image-20240705162359455.png" alt="image-20240705162359455" style={{zoom:"50%"}} />
|
||||
|
||||
### Adjust the Duck's Transform
|
||||
|
||||
First, to better preview the final effect on mobile devices, we can select the **camera** entity. You can use the positioning button to clarify the current preview camera's position in the scene, simulate real device previews by selecting different sizes of mobile devices, and also choose to lock the preview window so that it does not disappear when selecting other entities.
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*V33tQ4FZlVsAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705162931132" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*V33tQ4FZlVsAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705162931132" style={{zoom:"50%"}} />
|
||||
|
||||
Next, we select the duck and use the **move**, **rotate**, **scale**, and other [transform](/en/docs/core/transform) operations from the top toolbar. Switching between different transform types will also switch different operation handles on the duck. These operation handles are similar to the interactions in most 3D software. If you are using such handles for the first time, don't worry, just move the mouse to the handle and play around a bit, and you will quickly get the hang of it. Through simple transform operations, we can adjust the duck's position, angle, and size to meet our expected effect. The camera preview in the upper left corner will display the effect of your adjustments in real-time.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/4f2955d5-41e8-4cc3-81ef-5f1fee6a8b59/image-20240705163544657.png" alt="image-20240705163544657" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/4f2955d5-41e8-4cc3-81ef-5f1fee6a8b59/image-20240705163544657.png" alt="image-20240705163544657" style={{zoom:"50%"}} />
|
||||
|
||||
### Adjusting the Light
|
||||
|
||||
At this point, the duck is a bit dark. Select the `DirectLight` light entity in the node tree, and in the inspector panel on the right, drag the slider to appropriately adjust the intensity of the light, making the scene brighter.
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lA07Ro1SfuwAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705164814972" style="zoom:80%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lA07Ro1SfuwAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705164814972" />
|
||||
|
||||
### Making the Duck Rotate
|
||||
|
||||
First, in the asset panel, *right-click → Create → New Empty Script* to create a Script asset.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/e47a9c4e-bfd8-481d-8233-a7daae00f500/image-20240705170003841.png" alt="image-20240705170003841" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/e47a9c4e-bfd8-481d-8233-a7daae00f500/image-20240705170003841.png" alt="image-20240705170003841" style={{zoom:"50%"}} />
|
||||
|
||||
After creation, you can see a new Script asset in the asset panel.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/690d8428-2295-4c07-bfb0-6bdace57cd03/image-20240705170256694.png" alt="image-20240705170256694" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/690d8428-2295-4c07-bfb0-6bdace57cd03/image-20240705170256694.png" alt="image-20240705170256694" style={{zoom:"50%"}} />
|
||||
|
||||
Next, select the duck entity, and in the inspector panel on the right, click **Add Component** to add a [ Script ](/en/docs/script/class) component.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/c8879990-82c2-4ebd-a8c4-028fcecea364/image-20240705165619069.png" alt="image-20240705165619069" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c8879990-82c2-4ebd-a8c4-028fcecea364/image-20240705165619069.png" alt="image-20240705165619069" style={{zoom:"50%"}} />
|
||||
|
||||
Click **Select asset** to choose the Script you just created. This binds the script to the entity, meaning the script's lifecycle functions will apply to this entity.
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*MfjMQ7KA0B0AAAAAAAAAAAAADhuCAQ/original" alt="image-20240705170349805" style="zoom:80%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*MfjMQ7KA0B0AAAAAAAAAAAAADhuCAQ/original" alt="image-20240705170349805" />
|
||||
|
||||
After creating the script, you can **double-click it** to jump to the code editor page.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/73374e9e-77f2-46dd-baed-da79b8601dfa/image-20240705170853613.png" alt="image-20240705170853613" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/73374e9e-77f2-46dd-baed-da79b8601dfa/image-20240705170853613.png" alt="image-20240705170853613" style={{zoom:"50%"}} />
|
||||
|
||||
In the code editor, add a line of code in the `onUpdate` function to make the duck rotate along the Y-axis. After writing the code, save it (`⌘+s`), and you can see the effect in real-time in the preview area on the right.
|
||||
|
||||
@@ -94,6 +94,6 @@ export default class extends Script {
|
||||
|
||||
We have completed the development work in the editor. Next, let's export this project to the local machine. Click the **Download** button on the left toolbar to bring up the export interface. Here, rename the project to "duck", then click the `Download` button. The editor will package the project into a `duck.zip` file for download.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/26a6e282-689a-4c69-903f-10c565a9746c/image-20240705171230958.png" alt="image-20240705171230958" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/26a6e282-689a-4c69-903f-10c565a9746c/image-20240705171230958.png" alt="image-20240705171230958" style={{zoom:"50%"}} />
|
||||
|
||||
After the project is packaged, open the box project with VsCode, run `npm install` & `npm run dev`, and you can see the project running normally.
|
||||
@@ -61,7 +61,7 @@ In [Project Settings](/en/docs/interface/menu/#项目设置), you can control th
|
||||
|
||||
Most Galacean packages will output version information in the `Console` at runtime.
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*6UM6TZ4IVYAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*6UM6TZ4IVYAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
|
||||
|
||||
This is usually used to determine if there are issues with package version dependencies:
|
||||
|
||||
@@ -10,7 +10,7 @@ label: Basics
|
||||
|
||||
Flappy Bird 是一个 2D 项目，编辑器首页自带的 2D 模版便是按照此文档一步一步实现的，我们先通过编辑器的 `New Project` 创建一个 `2D Project`。（若遇到问题，可参照**首页**->**模版**->**像素小鸟**）
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*tzD2TKk9f9gAAAAAAAAAAAAADleLAQ/original" alt="image-20231007170002181" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*tzD2TKk9f9gAAAAAAAAAAAAADleLAQ/original" alt="image-20231007170002181" />
|
||||
|
||||
## 准备资源
|
||||
|
||||
@@ -22,25 +22,25 @@ Flappy Bird 依赖的资源是一堆图片，点击[这里](https://github.com/g
|
||||
- 草地、管道
|
||||
- 游戏重新开始按钮
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/154a2280-92d5-465e-8501-4ecc3f01c9d1/image-20231007170002181.png" alt="image-20231007170002181" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/154a2280-92d5-465e-8501-4ecc3f01c9d1/image-20231007170002181.png" alt="image-20231007170002181" style={{zoom:"50%"}} />
|
||||
|
||||
### 上传资源
|
||||
|
||||
回到场景编辑器，点击资源面板上的上传按钮 <img src="https://gw.alipayobjects.com/zos/OasisHub/07b876d3-462b-4a06-a2da-ce68d2932034/image-20231007145111353.png" alt="image-20231007145111353" style="zoom:50%;" />，选择 `Sprite`，此时会唤起操作系统的文件查看器，选中所有 FlappyBird 目录下的图片。上传之后，如下图所示，编辑器为每张图片创建了一个 [Texture](/docs/graphics/texture/texture/) 资源和 一个 [Sprite](/docs/graphics/2D/sprite) 资源（为了和 Texture 资源作区分，Sprite 对象带灰色圆角矩形背景）。在接下来的操作中，我们只需要关心 Sprite 资源。
|
||||
回到场景编辑器，点击资源面板上的上传按钮 <img src="https://gw.alipayobjects.com/zos/OasisHub/07b876d3-462b-4a06-a2da-ce68d2932034/image-20231007145111353.png" alt="image-20231007145111353" style={{zoom:"50%"}} />，选择 `Sprite`，此时会唤起操作系统的文件查看器，选中所有 FlappyBird 目录下的图片。上传之后，如下图所示，编辑器为每张图片创建了一个 [Texture](/docs/graphics/texture/texture/) 资源和 一个 [Sprite](/docs/graphics/2D/sprite) 资源（为了和 Texture 资源作区分，Sprite 对象带灰色圆角矩形背景）。在接下来的操作中，我们只需要关心 Sprite 资源。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/7f13679f-de18-4621-81b1-5834b5d00bd7/image-20231007145451371.png" alt="image-20231007145451371" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/7f13679f-de18-4621-81b1-5834b5d00bd7/image-20231007145451371.png" alt="image-20231007145451371" style={{zoom:"50%"}} />
|
||||
|
||||
到这里，我们已经把资源上传完，但是有洁癖的你看到这散乱的资源可能已经按耐不住整理的冲动了。让我们创建一个文件夹，并重命名为 _Sprites_，把刚上传的资源批量选中后拖到 _Sprites_ 目录中。这样做的目的不仅是让资源面板更加整洁，还为我们下一步创建 [Atlas 图集](/docs/graphics/2D/spriteAtlas)资源做好了准备。
|
||||
|
||||
### 创建图集
|
||||
|
||||
为了达到更好的运行时性能，我们选择把这些 Sprite 资源打包到一个 Atlas 资源。我们点击 <img src="https://gw.alipayobjects.com/zos/OasisHub/16aa674c-1bee-49d7-a516-21c591a4ce36/image-20231007152415467.png" alt="image-20231007152415467" style="zoom:50%;" /> 按钮选择 `Sprite Atlas`，创建后选中它，通过 **[检查器面板](/docs/interface/inspector)** 上的 `Add to List` 按钮把所有 Sprite 资源都添加到列表中。
|
||||
为了达到更好的运行时性能，我们选择把这些 Sprite 资源打包到一个 Atlas 资源。我们点击 <img src="https://gw.alipayobjects.com/zos/OasisHub/16aa674c-1bee-49d7-a516-21c591a4ce36/image-20231007152415467.png" alt="image-20231007152415467" style={{zoom:"50%"}} /> 按钮选择 `Sprite Atlas`，创建后选中它，通过 **[检查器面板](/docs/interface/inspector)** 上的 `Add to List` 按钮把所有 Sprite 资源都添加到列表中。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1YsTTZdjmm4AAAAAAAAAAAAADhuCAQ/original" alt="image-20231007171348757" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1YsTTZdjmm4AAAAAAAAAAAAADhuCAQ/original" alt="image-20231007171348757" style={{zoom:"50%"}} />
|
||||
|
||||
点击 `Pack and Preview` 按钮可以看到 Atlas 创建成功：
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*Xc0ZR71aXdMAAAAAAAAAAAAADleLAQ/original" alt="image-20231007153448666" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*Xc0ZR71aXdMAAAAAAAAAAAAADleLAQ/original" alt="image-20231007153448666" style={{zoom:"50%"}} />
|
||||
|
||||
恭喜你，到这里你已经完成了资源上传和管理的操作。接下去我们进行游戏场景搭建的环节。
|
||||
|
||||
@@ -54,7 +54,7 @@ Flappy Bird 依赖的资源是一堆图片，点击[这里](https://github.com/g
|
||||
|
||||
> 如果你发现画面太大或太小，可以调整正交相机的 `Orthographic Size` 来实现缩放。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*XRceR5mdqLgAAAAAAAAAAAAADhuCAQ/original" alt="image-20231007162550749" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*XRceR5mdqLgAAAAAAAAAAAAADhuCAQ/original" alt="image-20231007162550749" style={{zoom:"50%"}} />
|
||||
|
||||
### 加上小鸟
|
||||
|
||||
@@ -64,19 +64,19 @@ Flappy Bird 依赖的资源是一堆图片，点击[这里](https://github.com/g
|
||||
|
||||
随着游戏的进行，管道会在画面中重复出现，并且是上下成对出现。这里有个小技巧，可以把上面的管道的 `Scale` 值设成 `-1`，这样就优雅地实现了翻转。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/c4e2cf84-3834-4178-86d0-3ad9faa7bd28/image-20231007163240028.png" alt="image-20231007163240028" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c4e2cf84-3834-4178-86d0-3ad9faa7bd28/image-20231007163240028.png" alt="image-20231007163240028" style={{zoom:"50%"}} />
|
||||
|
||||
在游戏过程中，产生管道的高度也是随机的，但是我们手上的资产高度却是固定的。不用急，只需要调整一下`精灵渲染模式`即可，这样可以让我们`无损`拉伸某些资产哦。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZDSZTaXK-RIAAAAAAAAAAAAADleLAQ/original"/>
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZDSZTaXK-RIAAAAAAAAAAAAADleLAQ/original"/>
|
||||
|
||||
这里有个小技巧，将引用 `sprite` 资产的 `pivot` 属性设置为 `buttom` 就可以避免每次调整高度的时候重新锚定位置了。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*MQqKTK0BAFAAAAAAAAAAAAAADleLAQ/original" alt="image-20231007163240028" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*MQqKTK0BAFAAAAAAAAAAAAAADleLAQ/original" alt="image-20231007163240028" style={{zoom:"50%"}} />
|
||||
|
||||
考虑到管道会重复出现，我们在节点树中把一对管道设置成一个 `PipeMother` 的组，并把它放到 `Pipe` 节点下。这样，后面通过在 Pipe 上绑定脚本组件就可以获取 `PipeMother` 以实现管道的复用。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/ef20415a-aa57-4236-b29e-e4df88f7e747/image-20231007163400680.png" alt="image-20231007163400680" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/ef20415a-aa57-4236-b29e-e4df88f7e747/image-20231007163400680.png" alt="image-20231007163400680" style={{zoom:"50%"}} />
|
||||
|
||||
### 加上草地
|
||||
|
||||
@@ -88,23 +88,23 @@ Flappy Bird 依赖的资源是一堆图片，点击[这里](https://github.com/g
|
||||
|
||||
2. 在 **[检查器面板](/docs/interface/inspector)** 中通过 `Add Component` 按钮添加 `Sprite Renderer` 组件，并且把 `SpriteRenderer DrawMode Info` 属性设置成 `Tiled`，并将宽度设置为 `8.14`
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*pDBbTp6a78oAAAAAAAAAAAAADleLAQ/original" alt="image-20231007173243980" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*pDBbTp6a78oAAAAAAAAAAAAADleLAQ/original" alt="image-20231007173243980" style={{zoom:"50%"}} />
|
||||
|
||||
3. 此时就得到了一个平铺完毕的地面，接下来我们可以通过创建动画片段来让它动起来！详见[动画片段编辑](/docs/animation/clip)。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*3d2GSINL_8IAAAAAAAAAAAAADleLAQ/original" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*3d2GSINL_8IAAAAAAAAAAAAADleLAQ/original" />
|
||||
|
||||
### 添加遮罩
|
||||
|
||||
添加完地面后发现，左右显示好像穿帮了！对于这种情况，只需要为精灵渲染器增加遮罩就好了，详见[精灵遮罩组件](/docs/graphics/2D/spriteMask)
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*d_ZBS6zxOjQAAAAAAAAAAAAADleLAQ/original" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*d_ZBS6zxOjQAAAAAAAAAAAAADleLAQ/original" />
|
||||
|
||||
### 加上 GUI
|
||||
|
||||
GUI 包括分数显示和重新开始按钮。我们分数（ `0.png`） 和重新开始按钮（ `restart.png`） 两个精灵拖到场景中，并放到新建的 `GUI` 节点下。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/2f443e5f-1523-4341-8f10-4c85c421fb50/image-20231007180819265.png" alt="image-20231007180819265" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/2f443e5f-1523-4341-8f10-4c85c421fb50/image-20231007180819265.png" alt="image-20231007180819265" style={{zoom:"50%"}} />
|
||||
|
||||
至此，界面搭建完毕！观察一下左侧的节点树的完整结构，好的树结构对复杂场景管理来说很重要。
|
||||
|
||||
@@ -121,7 +121,7 @@ GUI 包括分数显示和重新开始按钮。我们分数（ `0.png`） 和重
|
||||
|
||||
碰撞体描述了事物的位姿形态，因此在添加碰撞体时应该尽量贴合物体实际显示的大小。关于碰撞器的使用详见[碰撞器](/docs/physics/collider)，此处演示为小鸟添加碰撞体。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*_szwQL3V1AQAAAAAAAAAAAAADleLAQ/original" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*_szwQL3V1AQAAAAAAAAAAAAADleLAQ/original" />
|
||||
|
||||
#### 处理碰撞回调
|
||||
|
||||
@@ -255,7 +255,7 @@ timeline
|
||||
|
||||
经过拆解可以发现，如果我们简单地将动画分类为待机动画，飞行动画与坠落动画，考虑到待机的时候要播放精灵切换和上下缓动的动画，飞行的时候也需要播放精灵切换与抬头坠落的动画，他们重合的部分不仅会增加动画编辑时的工作量，还需要额外考虑这两个动画衔接时其中的精灵切换动画是否自然，因此我们更进一步，将各个动画状态原子化，拆分其中精灵切换与坐标改变的部分，并分别设置在不同的 `Layer` 中，不同的 `Layer` 相互独立，并可同时播放各自的动画，设置各自的叠加模式与权重，详情可参考[动画组件](/docs/animation/system/)。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*1cXjQIJAgZoAAAAAAAAAAAAADleLAQ/original" alt="image-20231007180819265" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*1cXjQIJAgZoAAAAAAAAAAAAADleLAQ/original" alt="image-20231007180819265" style={{zoom:"50%"}} />
|
||||
|
||||
让各个 `Layer` 分别控制各自的动画状态，可以逻辑更加清晰。
|
||||
|
||||
@@ -344,7 +344,7 @@ class Bird extends Script {
|
||||
|
||||
由于动画片段编辑只能编辑绝对的坐标或旋转变化，例如每次飞行的动画，他的旋转变化是绝对的，但坐标却是相对的，因此我们可以在 `StateMachineScript` 中实现，以 `Fly` 动画为例：
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*T_stQakEWT0AAAAAAAAAAAAADleLAQ/original"/>
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*T_stQakEWT0AAAAAAAAAAAAADleLAQ/original"/>
|
||||
|
||||
然后打开这个脚本，并在其中添加上自由落体的坐标变化：
|
||||
|
||||
@@ -10,11 +10,11 @@ label: Basics
|
||||
|
||||
在你登录之后，首先看到的是编辑器的首页，在这个页面中会显示所有你创建的项目。使用右上角的按钮来创建项目，点击后可以选择要创建的项目类型，2D 或 3D。我们选择 3D Project。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style={{zoom:"50%"}} />
|
||||
|
||||
此时会打开一个新的空白工程，场景中内置了一个相机和一个平行光。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/92b9b53e-63df-4165-bb53-d130bde7a731/image-20240705161613717.png" alt="image-20240705161613717" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/92b9b53e-63df-4165-bb53-d130bde7a731/image-20240705161613717.png" alt="image-20240705161613717" style={{zoom:"50%"}} />
|
||||
|
||||
## 搭建场景
|
||||
|
||||
@@ -33,49 +33,49 @@ label: Basics
|
||||
|
||||
首先，点击这个[链接](https://gw.alipayobjects.com/os/bmw-prod/6cb8f543-285c-491a-8cfd-57a1160dc9ab.glb)下载一个鸭子的 3D 模型。把下载到本地的模型拖到资产面板中，稍过片刻就会看到模型已经上传到了编辑器中：
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/a73635d5-9f6f-4dc0-aa32-af8d49b669a6/image-20240705162025015.png" alt="image-20240705162025015" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/a73635d5-9f6f-4dc0-aa32-af8d49b669a6/image-20240705162025015.png" alt="image-20240705162025015" style={{zoom:"50%"}} />
|
||||
|
||||
接着，把资产面板中的模型拖到场景视图中，就可以在场景中渲染这个 3D 模型了，此时场景的节点树中就增加了一个新的实体。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/cfbdb410-9091-4246-a9ba-1cf06cd4fb93/image-20240705162359455.png" alt="image-20240705162359455" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/cfbdb410-9091-4246-a9ba-1cf06cd4fb93/image-20240705162359455.png" alt="image-20240705162359455" style={{zoom:"50%"}} />
|
||||
|
||||
### 调整鸭子的变换
|
||||
|
||||
首先，为了更好地预览最后在移动设备上的效果，我们可以选中**相机**实体，可以通过定位按钮明确当前预览的相机在场景中的位置，通过选择不同尺寸的移动设备来模拟真机预览，也可以选择锁定预览窗口，这样在选择其他实体的时候预览窗口就不会消失。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*V33tQ4FZlVsAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705162931132" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*V33tQ4FZlVsAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705162931132" style={{zoom:"50%"}} />
|
||||
|
||||
接着，我们选中鸭子，通过选择上方工具栏中的**移动**、**旋转**、**缩放**等[变换](/docs/core/transform)操作。切换不同的变换类型，鸭子身上也会随之切换不同的操作手柄。这些操作手柄和大部分 3D 软件的交互是类似的，如果你是第一次使用这类手柄，请不用担心，把鼠标移到手柄上，随意摆弄一下，就能很快上手。通过简单的变换操作，我们就能把鸭子的位置、角度、大小都调整到符合我们预期的效果。左上角的相机预览器会实时地展示你调整的效果。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/4f2955d5-41e8-4cc3-81ef-5f1fee6a8b59/image-20240705163544657.png" alt="image-20240705163544657" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/4f2955d5-41e8-4cc3-81ef-5f1fee6a8b59/image-20240705163544657.png" alt="image-20240705163544657" style={{zoom:"50%"}} />
|
||||
|
||||
### 调整灯光
|
||||
|
||||
此时鸭子有点暗，我们选中节点树上的 `DirectLight` 灯光实体，在右侧的观察面板中拖动滑杆适当调整一下灯管的强度，让场景的照明更加亮一点。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lA07Ro1SfuwAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705164814972" style="zoom:80%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lA07Ro1SfuwAAAAAAAAAAAAADhuCAQ/original" alt="image-20240705164814972" />
|
||||
|
||||
### 让小鸭子转起来
|
||||
|
||||
首先，我们在资产面板 中 *右键 → Create → New Empty Script* 创建一个 Script 资产。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/e47a9c4e-bfd8-481d-8233-a7daae00f500/image-20240705170003841.png" alt="image-20240705170003841" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/e47a9c4e-bfd8-481d-8233-a7daae00f500/image-20240705170003841.png" alt="image-20240705170003841" style={{zoom:"50%"}} />
|
||||
|
||||
创建完成之后，可以看到资产面板中多了一个 Script 资产。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/690d8428-2295-4c07-bfb0-6bdace57cd03/image-20240705170256694.png" alt="image-20240705170256694" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/690d8428-2295-4c07-bfb0-6bdace57cd03/image-20240705170256694.png" alt="image-20240705170256694" style={{zoom:"50%"}} />
|
||||
|
||||
接着，我们选中鸭子实体，在右侧的检查器面板中点击 **Add Component** 添加一个 [ Script ](/docs/script/class) 组件。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/c8879990-82c2-4ebd-a8c4-028fcecea364/image-20240705165619069.png" alt="image-20240705165619069" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c8879990-82c2-4ebd-a8c4-028fcecea364/image-20240705165619069.png" alt="image-20240705165619069" style={{zoom:"50%"}} />
|
||||
|
||||
点击 **Select asset** 选择刚创建的 Script，这样脚本就绑定到该实体上了，也就是说脚本的生命周期函数会作用到该实体上。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*MfjMQ7KA0B0AAAAAAAAAAAAADhuCAQ/original" alt="image-20240705170349805" style="zoom:80%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*MfjMQ7KA0B0AAAAAAAAAAAAADhuCAQ/original" alt="image-20240705170349805" />
|
||||
|
||||
创建脚本后，我们可以 **双击它** 来跳转到代码编辑器页面。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/73374e9e-77f2-46dd-baed-da79b8601dfa/image-20240705170853613.png" alt="image-20240705170853613" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/73374e9e-77f2-46dd-baed-da79b8601dfa/image-20240705170853613.png" alt="image-20240705170853613" style={{zoom:"50%"}} />
|
||||
|
||||
进入代码编辑器后，我们在 `onUpdate` 函数中加一行代码，让鸭子沿着 Y 轴旋转。写好代码后，保存（`⌘+s`）, 右侧预览区就可以实时的看到整个场景的效果。
|
||||
|
||||
@@ -94,6 +94,6 @@ export default class extends Script {
|
||||
|
||||
我们已经完成了在编辑器中的开发工作，接下来我们来导出这个项目到本地。点击左侧工具栏的 **下载** 按钮，会唤起导出界面，我们这里把项目名改为 “duck”，然后点击 `Download` 按钮，编辑器就会把项目打包为一个 `duck.zip` 文件下载。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/26a6e282-689a-4c69-903f-10c565a9746c/image-20240705171230958.png" alt="image-20240705171230958" style="zoom:50%;" />
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/26a6e282-689a-4c69-903f-10c565a9746c/image-20240705171230958.png" alt="image-20240705171230958" style={{zoom:"50%"}} />
|
||||
|
||||
项目打包完成后，我们使用 VsCode 打开 box 项目，运行 `npm install` & `npm run dev` ，可以看到项目已经能够正常运行了。
|
||||
@@ -61,7 +61,7 @@ Galacean 版本号格式是 `MAJOR.MINOR.PATCH-TAG.X` 。其中 `MAJOR.MINOR`
|
||||
|
||||
Galacean 大部分包运行时会在 `Console` 输出版本信息，
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*6UM6TZ4IVYAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*6UM6TZ4IVYAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
|
||||
|
||||
通常也会以此为依据判断包版本依赖是否出现：
|
||||
|
||||
Reference in New Issue
Block a user