资产工作流

资产面板

image-20240319102237183

资产面板是编辑器中一个重要的面板,它可以帮助你管理场景中使用到的所有资产。在资产面板中,你可以查看和管理场景中使用到的所有资产,例如材质、贴图、模型等等。通过资产面板,你可以添加或删除资产,以及对资产进行分类管理,从而更好的组织资产。

目前,编辑器支持上传或创建的资产有(+ 表示组合文件):

支持的资产说明交换格式创建方式
文件夹类似操作系统的文件夹,可以把文件拖拽到文件夹中创建
场景用于实体树管理创建
模型3D 模型文件.gltf+.bin+.jpg, .glb+.jpg, .fbx+.jpg上传
网格不可添加,只能使用内部网格和模型中的网格-
材质用于调整渲染效果创建
纹理上传图片文件创建 2D 纹理.png,.jpg, .webp上传
立方体纹理(TextureCube)用于场景天空,环境光.hdr上传
精灵可以直接上传图片文件创建精灵(省去先创建精灵后绑定纹理的步骤).png,.jpg, .webp创建/上传
精灵图集(SpriteAtlas)把多个精灵打包成图集,用于优化 2D 资产创建
字体用于制作 2D 文字.ttf, .otf, .woff上传
脚本用于编写业务逻辑.ts创建
动画控制器(Animation Controller)用于组织动画片段和控制动画状态创建
动画片段(Animation Clip)预先制作好的、连续的动画数据,包含一段时间内关键帧的变化信息.ts创建
动画状态机脚本(Animation State Machine Script)用来控制和管理动画状态机行为的程序脚本创建
Lottie支持 lottie 文件上传.json(+.jpg),图片支持 base64 内置和独立图片上传
Spine支持 spine 文件文件上传.json + .atlas + .jpg上传

添加资产

为了在场景中添加资产,你可以点击资产面板上的添加按钮,或者资产面板的右键菜单中的添加选项来添加新资产。添加资产后,你可以在 检查器面板 中对资产的属性进行编辑。资产面板中的资产类型非常丰富,例如材质、贴图、模型、字体等等。具体可以参照上方的表格。

image-20240319103341208

你还可以将文件拖动到资产面板中来添加资产,组合文件可以直接选中多个文件拖进资产面板即可。

drag6

组织资产

资产面板中的资产可以通过分类来管理,以便更好的组织资产。你可以在资产面板中创建文件夹并将资产移动到对应的文件夹中(也可以移动到左侧目录的文件夹中),以实现分类管理。资产面板中的文件夹可以嵌套,你可以创建多层级的文件夹来更好的组织资产。

drag7

资产面板提供了对资产浏览友好的工具栏,帮助你快速地查找某个或某类资产。你也可以根据你的使用习惯,对资产的浏览模式、排序方式和缩略图大小进行修改。

drag8

组织完资产后,每个资产都有一个相对路径,我们可以右击某个资产拷贝路径。

image-20240319132804611

这对项目开发来说很重要,因为项目中经常遇到需要异步加载资产的情况,即初始化不需要加载某个资产(甚至是场景),可以通过脚本来控制某个资产的加载。具体的语法可以看资产场景的加载使用,以加载场景为例:

this.engine.resourceManager.load({ url: "...", type: AssetType.Scene });

删除资产

你可以在选中一个资产后点击资产面板上的删除按钮,或者通过右键菜单中的删除选项来删除资产。删除资产时,你需要注意所删除的资产是否会影响场景中其他节点的关联性。

复制和粘贴资产

你可以在资产面板右键资产复制,然后粘贴在你进入的文件夹中:

![2024-07-19 14.18.11](https://mdn.alipayobjects.com/rms/afts/img/A*0Wf5T6tEvnYAAAAAAAAAAAAAARQnAQ/original/2024-07-19 14.18.11.gif)

也可以使用 + C+ V 操作。

预览资产

在选中一个资产后, 右侧的 检查器面板 会显示出此资产可配置的属性。不同的资产所对应的可配置项是不同的, 比如 glTF 资产会显示模型预览窗, 材质资产会显示出详细的材质配置选项 。

image-20240319120017637

使用资产

部分资产(如 glTF 资产)支持拖拽到场景中或节点树中。

drag9

快捷键

快捷键功能
/ Delete删除资源
+ D复制资源
+ F搜索资源
+ C复制资源
+ V粘贴资源
最后更新于 七月 11, 2024

这篇文档对您有帮助吗?