mirror of
https://github.com/galacean/engine.git
synced 2026-05-08 07:55:23 +08:00
80 lines
5.0 KiB
Plaintext
80 lines
5.0 KiB
Plaintext
---
|
||
order: 3
|
||
title: 编辑脚本
|
||
type: 脚本
|
||
label: Script
|
||
---
|
||
|
||
Galacean Editor 提供了一个功能强大的代码编辑器，提供了代码提示，第三方包引入，引擎事件调试，脚本参数调试，项目实时预览等多种能力，可帮助你快速编辑和调试代码。
|
||
|
||
<Image src="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` 保存，右侧实时预览区展现最新场景效果。
|
||
|
||
> 提示：Galacean 代码编辑器目前支持 `.ts` `.gs` 和 `.glsl` 的文件编辑
|
||
|
||
## 文件预览
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*o51FQa9Uh0MAAAAAAAAAAAAADqiTAQ/original" />
|
||
|
||
1. **文件搜索** 可快速搜索项目中的文件
|
||
2. **代码筛选** 文件树是否仅显示代码文件 ( `.ts` `.gs` `.glsl` )
|
||
3. **内置文件** 用来显示哪些文件是不可编辑的内部文件
|
||
4. **展开/隐藏** 可切换文件夹的展开或隐藏
|
||
5. **代码文件** 可编辑的代码文件会显示对应的文件类型的缩略图标
|
||
|
||
## 引入第三方包
|
||
|
||
代码编辑器内置了与项目相对应的引擎，可自动提供引擎 API 的智能提示，从而帮助你快速实现基于引擎的逻辑。但大多数情况下你都需要引入 Galacean 生态包或其他第三方包来增强功能。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*Nc2MQqOeWxgAAAAAAAAAAAAADqiTAQ/original" />
|
||
|
||
1. **搜索框** 在搜索框输入包名，按下 回车键，即可快速拉取包的版本列表
|
||
2. **版本选择** 默认情况下使用 `latest` 版本
|
||
3. **导入按钮** 选择好包名和版本，点击导入按钮即可将三方包的类型信息加载到工作区
|
||
4. **包列表** 此处会列出当前项目依赖的所有第三方包
|
||
5. **版本切换** 此处可切换已导入的包的版本，切换后会将新的类型信息加载到工作区
|
||
|
||
<Callout type="info">
|
||
试一下：在搜索框输入 `@galacean/engine-toolkit`，点击「引入」按钮，然后在代码中使用 `import { OrbitControl } from '@galacean/engine-toolkit` 来引入 `OrbitControl` 组件。
|
||
</Callout>
|
||
|
||
|
||
## 实时预览区
|
||
|
||
Galacean 的代码编辑器提供实时预览功能。保存代码后，预览区会自动更新，从而让你快速查看代码的执行结果。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*dCHqRIMdHbkAAAAAAAAAAAAADqiTAQ/original" />
|
||
|
||
1. **拖动按钮** 按住来拖动模拟器。将模拟器拖到屏幕右边缘，即可将其固定在右侧面板上。
|
||
2. **统计信息切换** 点击来切换场景统计信息的显示状态
|
||
3. **新窗口打开** 在新窗口中来打开项目预览页面
|
||
4. **脚本参数编辑** 如果当前场景中激活的脚本，拥有可配置的参数，即可打开此面板来实时调整脚本参数。想要了解脚本参数的详细信息，请查看 [脚本系统](/docs/script/attributes)
|
||
5. **关闭按钮** 点击来关闭模拟器。关闭后，屏幕右上方提供一个显示按钮，点击即可重新打开模拟器
|
||
|
||
## 事件调试
|
||
|
||
在代码编辑器中，我们提供了一个事件调试面板，从而帮助你快速调试场景中的事件。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*xtmMT676qvcAAAAAAAAAAAAADqiTAQ/original" />
|
||
|
||
1. **事件列表** Galacean Editor 会自动收集场景中的所有事件名并显示在这里
|
||
2. **事件参数配置** 你可以点击此按钮来配置触发事件时所携带的参数，参数的配置使用 `JSON` 格式编写
|
||
3. **事件触发按钮** 点击此按钮会触发场景中的对应事件
|
||
|
||
> 注意，脚本组件一定要绑定到某个实体上，才会展示事件列表。
|
||
|