编辑器入门中的轨道、项目和资源
编辑器启动器的状态包含不同的数据类型:
🌐 The state of the Editor Starter contains different data types:
- 资源:资源指的是媒体文件,例如图片、视频、音频、GIF 和字幕。
- 项目:项目是在时间轴中表示并在画布中渲染的数据类型。它可以封装一个素材,也可以是纯色,或文本项目。
- 轨道:一个轨道可以包含多个项目。轨道是彼此堆叠的,位于顶部的轨道显示时会将其项目呈现在最前面。
这些实体之间的关系如下:
🌐 The relationship between these entities is as following:
- 一个条目最多可以对应一个资源。
- 多个项目可能指向同一个资源。
- 一个曲目可能包含多个项目(允许不同类型)。
- 一个项目只能属于一条轨道。
- 轨道中的项目不得重叠。
物品
🌐 Items
一个项目的类型由联合 EditorStarterItem 定义。
默认情况下,有以下项目:
🌐 The type of an item is defined by the union EditorStarterItem.
By default, there are the following items:
要添加一个新的物品类型,复制其中一个物品的逻辑,进行修改,并将其添加到 EditorStarterItem 联合中。
当你在控制台中运行类型检查器时,应该会出现很多错误:npx tsc -w
🌐 To add a new item type, copy the logic of one of the items, change it, and add it to the EditorStarterItem union.
A lot of errors should appear when you run the typechecker in your console: npx tsc -w
这些错误是故意的,它们应该引导你找到代码中需要添加某些实现的位置,以支持新的项目类型。
🌐 These errors are intentional and are supposed to guide you towards where in the code you need to add implementations for certain things in order to support the new item type.
资源
🌐 Assets
不同的资源类型由联合 EditorStarterAsset 定义。
默认情况下,有以下项目:
🌐 The different asset types are defined by the union EditorStarterAsset.
By default, there are the following items:
要添加一个新的项目类型,复制其中一个项目的逻辑,修改它,然后将其添加到 EditorStarterAsset 联合类型中。
当你在控制台运行类型检查器时,应该会出现一些错误:npx tsc -w
🌐 To add a new item type, copy the logic of one of the items, change it, and add it to the EditorStarterAsset union.
Some errors should appear when you run the type checker in your console: npx tsc -w
解决这些错误以完成新资源类型的实现。
🌐 Resolve these errors to complete the implementation of your new asset type.
检查器
🌐 Inspectors
每种项目类型都有一个“检查器”组件,这是一个可以挂载在右侧边栏的 React 组件。 检查器还可以显示与该项目关联的资源的信息。
🌐 Each item type has an "Inspector" component which is a React component which can be mounted in the right sidebar.
The inspector may also show information about the asset that is associated with the item.
如果没有选择任何项目,将显示全局设置的特殊检查器。
请参阅 <Inspector /> 组件 的源代码。
🌐 If no item is selected, a special inspector for the global settings is shown.
See the source code for the <Inspector /> component.