Editor interface overview

This chapter will introduce the editor interface and get familiar with each of the panels, menus and functional buttons that make up the editor. The Cocos Creator editor is composed of multiple panels which can be moved and combined freely to meet the needs of different projects and developers. Here we will take the default editor layout as an example to quickly browse the name and function of each panel:

Asset manager

Asset manager shows all the assets in the project asset file (assets). It will show the folder in a dendritic structure and auto-sync the content changes in the project resource folder from the operating system. You can drag files in or use the menu to import resources.

For further information please read the asset manager section.

Scene editor

Scene editor is used to show and edit the visible working area in the scene. WYSIWYG scene building work is all done depending on the display in the scene editor.

For further information please read the scene editor section.

Node Tree

Node Tree displays all the nodes and their hierarchy in the form of a list tree. For all the content you can see in the scene editor, the corresponding node entry can be found in the Node Tree. The content in these two panels when editing the scene will synchronize the display and we normally use these two panels at the same time to build the scene.

For further information please read the Node Tree section.

Properties

Properties is the working area where we view and edit the currently selected node and component attribute. This panel will display and edit the attribute data defined by the script in the most suitable way.

For further information please read the Properties section.

Node Library

Node Library Warehouse of preset node, you can add preset node to the scene by dragging and dropping them, and you can add users' own prefab to the node library for easy reuse.

For further information please read the Node Library section.

Toolbar the scene editing tool, operating button for previewing games, shows the access address for remote testing, number of connected devices and the rightmost access project folder and open program installation path.

Continue on to read about Toolbar.

Settings

Settings panels provides personalized global settings for various editors, including native development environments, game previews, script editing tools, and so on.

For further information please read the Settings section.

Project Settings

Project Settings provides various project specific personalization settings, including grouping settings, module settings, preview runs, and so on.

Using Editor