本文主要介绍Cocos Creator 编辑器界面中几个常规的面板功能,让新手了解编辑器界面中常规的面板功能,更好的使用Cocos Creator 编辑器。
一、编辑器界面常规面板划分
Cocos Creater编辑器默认样式如上,主要包含:1、工具栏,2、层级管理器,3、场景编辑器,4、属性检查器,5、资源管理器,6、动画编辑器,7、控制台等。
二、编辑器主要面板功能介绍
1、工具栏
菜单栏 位于编辑器顶部,包含了所有高级命令和设置选项。
文件 (File): 项目的新建、打开、保存、构建发布设置都在这里。
编辑 (Edit): 撤销、重做、拷贝、粘贴等通用操作,以及编辑器偏好设置(Preferences),如设置编辑器语言、主题颜色等。
节点 (Node): 创建各种基础节点(空节点、UI节点、渲染节点等)的快捷入口。
组件 (Component): 为当前选中节点添加各种内置组件的菜单,如渲染、UI、物理、脚本等。
项目 (Project): 项目相关的操作,如刷新资源数据库、运行预览等。
面板 (Panel): 控制编辑器内各个功能面板的显示与隐藏,你可以在这里自定义你的工作布局。
扩展 (Extensions): 扩展管理器的入口,用于安装、管理和开发编辑器扩展,极大地增强了编辑器的可定制性。
帮助 (Help): 访问官方文档、教程、社区论坛和关于信息,遇到问题时首先想到的应该是这里。
预览栏 目前允许多种预览方式,包含 编辑器内、浏览器 和 模拟器
构建发布按钮可对项目进行构建发布
2、层级管理器
层级管理器 通常位于编辑器左侧,以树状结构展示当前场景中的所有节点。
节点关系: 清晰地展示了节点之间的父子层级关系。子节点会继承父节点的变换(位置、旋转、缩放),这对于组织复杂场景结构至关重要。
创建节点: 可以右键点击空白处或父节点来创建新的节点。
搜索过滤: 顶部搜索框可以快速按名称查找节点。
节点管理: 可以在这里方便地选择、重命名、启用/禁用、删除节点,以及通过拖拽调整节点层级关系。
3、场景编辑器
场景编辑器 编辑器的核心区域,用于可视化地设计和搭建游戏场景。
可视化编辑: 所见即所得,你可以在这里直接拖拽节点调整位置,使用工具栏工具进行变换。
场景导航: 使用鼠标中键平移视图,滚轮缩放视图,
F
键可以聚焦当前选中的节点,Ctrl/Cmd + F
可以让节点充满整个视图。Gizmo 操控: 选中节点后,会显示用于变换的 Gizmo(操控手柄),方便进行精确调整。
多场景编辑: 支持同时打开多个场景进行编辑。
4、属性检查器
属性检查器 通常位于编辑器最右侧,是查看和修改节点或资源所有属性的核心面板。
属性配置: 当选中层级管理器中的一个节点时,这里会显示该节点上所有挂载的组件(如 Transform、Sprite、Button、自定义脚本等)及其属性。你可以在此修改这些属性值,所有更改会实时反映在场景中。
资源预览: 当选中资源管理器中的一个资源(如图片)时,这里会显示该资源的导入配置和预览信息。
脚本交互: 你编写的自定义脚本组件也会在这里显示为可配置的组件,公开的变量可以直接在属性检查器中赋值和调整,无需修改代码,非常强大。
5、资源管理器
资源管理器 通常位于编辑器右下角,以文件夹树的形式管理项目中的所有资源。
项目资产库: 存储所有游戏资源,如脚本、图片(精灵)、声音、字体、预制体(Prefab)、动画剪辑等。
文件同步: 它与项目目录下的
assets
文件夹是完全实时同步的。你既可以在操作系统中直接管理文件,也可以在资源管理器内进行创建、拖拽、删除等操作。导入资源: 直接将外部资源文件拖入资源管理器即可导入项目。
预制体 (Prefab): 资源管理器的核心概念之一,将配置好的节点树保存为可重复使用的预制资产,是保证项目可维护性的关键。
6、动画编辑器
动画编辑器 (Animation): 用于创建和编辑节点的帧动画,支持可视化添加属性轨道和关键帧。
7、控制台
控制台 通常以面板形式停靠在底部,是开发者调试的“最佳搭档”。
日志输出: 显示代码中使用
cc.log()
,cc.warn()
,cc.error()
等方法打印的日志信息。错误警告: 显示项目运行时的 JavaScript 错误、警告以及资源加载失败等信息。
调试功能: 支持清除日志、过滤日志类型、打印调用栈等,是定位和修复 Bug 的必备工具。
console.log()
:输出日志,灰色文字,通常用来显示正在进行的操作。
console.warn()
:输出警告,黄色文字,用于提示开发者最好进行处理的异常情况,但不处理也不会影响运行。
console.error()
:输出错误,红色文字,表示出现了严重错误,必须解决才能进行下一步操作或者运行游戏。
注:由于Cocos Creater编辑器有很多功能,在这里我们只是大致讲解主要功能,每一个面板具体功能,我们在后面的开发使用中一一的讲解。