Main Menu

The main menu bar at the top of Cocos Creator contains 9 menu options, Cocos Creator, File, Edit, Node, Project, Panel, Extension, Developer and Help, which integrate most of Cocos Creator’s functionalities.

menu

About Cocos Creator

This option contains mainly software information, settings, window controls and other functions:

cocos

OptionDescription
About Cocos CreatorShows Cocos Creator-related version number and copyright information.
LayoutSets the editor interface layout, only the default layout is supported for now.
PreferencesOpens Preferences panel to customize the editor.
ShortcutsOpens the Shortcuts panel to view the default shortcuts used by each panel or function module of the editor, support customization.
Close Window (Ctrl/Cmd + W)Closes current window.
ExitCloses the current editor and automatically opens Dashboard.

File

This option is mainly used to create, open, and save a project or scene, as well as import Cocos Creator 2.x projects.

file

OptionDescription
New ProjectOpens Dashboard’s Project tab of Dashboard to create a new project. If you are using Dashboard v1.0.19, you will open Dashboard’s New Project tab.
Open ProjectOpen Dashboard’s Project tab.
New Scene (Ctrl/Cmd + N)Closes the current scene and create a new scene, the newly created scene needs to be saved manually before it will be added to the project directory.
Save Scene (Ctrl/Cmd + S)Save the scene you are currently editing. If the scene is created using File -> New Scene, a dialog box will pop up when you save it for the first time, you need to choose the location to save the scene file and fill in the file name, then click Save to save it. Scene files have .scene as extension.
Save As (Ctrl/Cmd +Shift+ S)Generates a copy of the current scene file and save it in the project.
Import Cocos Creator 2.x ProjectV2.x asset import tool, supporting the perfect import of old project assets, as well as the assisted migration of code. Please refer to v3.0 Upgrade Guide for details.

Edit

This option mainly includes common editing functions such as undo, redo, copy and paste.

edit

OptionDescriptionDefault Shortcut
UndoUndoes the last change to the scene.Ctrl/Cmd + Z
RedoRedoes the undo action from the previous step.Ctrl/Cmd + Shift + Z
CutCuts the currently selected node or character to the clipboard.Ctrl/Cmd + X
CopyCopies the currently selected node or character to the clipboard.Ctrl/Cmd + C
PastePaste the contents of the clipboard into the appropriate location.Ctrl/Cmd + V
Select AllSelects all nodes in the same hierarchy if the focus is within the Hierarchy panel, or all assets in the same hierarchy if the focus is in the Assets panel.Ctrl/Cmd + A

Note: Copy, Cut and Paste of nodes should be done using shortcut keys.

Nodes

This option contains functions to adjust the view, disconnect prefabricated nodes and create nodes.

node

OptionDescription
Align With View (Ctrl/Cmd + Shift + F)Moves the currently selected node to the center of the view of the Scene panel.
Align View With NodeSets the view in the Scene panel to be centered on the currently selected node.
Disconnect Node With Prefab AssetFor converting the selected prefab node to a normal node, please refer to Prefab for details.
Disconnect Node With Prefab Asset RecursivelyRecursively convert prefab nodes containing nested nodes in the scene to normal nodes, see Prefab for details.
Empty NodeCreates an empty node in the scene. If the node is already selected in the scene before the command is executed, the newly created node will become a child of the selected node.
3D ObjectsCreator provides some relatively basic static model controls for use, currently including Cube, Cylinder, Sphere, Capsule, Cone, Torus, Flat and Quad. To create other types of models, refer to the MeshRenderer component documentation.
2D ObjectsCreate Creator’s pre-defined 2D nodes in the scene containing the base renderable components, which currently include Graphics, Label, Mask, ParticleSystem2D, Sprite, SpriteSplash (monochrome) and TiledMap (map), for details please refer to the Introduction to 2D Renderable Components documentation.
UI ComponentsCreate Creator’s pre-defined nodes containing basic UI components in the scene, which currently include Common UI controls such as Button, Widget, Layout, ScrollView, EditBox nodes, etc. For more UI components, please refer to the UI Basic Components documentation.
LightingCreate Creator preset nodes in the scene containing base light components, currently including Parallel Light, Spherical Light and Spot Light, please refer to the Lighting documentation.
EffectsCreate a Creator preset in the scene containing Particle System component in the scene. More effects components can be added in the Property Inspector panel by clicking Add Component -> Special Effects.
CameraCreates a node in the scene with the Camera component pre-defined by Creator. For details on how to use it, please refer to the Camera component documentation.
TerrainCreates a node containing the terrain component pre-defined by Creator in the scene. Please refer to the Terrain System documentation for more details on how to use it.

Project

This option is mainly used to perform preview run build projects, project configuration and custom builds, etc.

project

OptionDescription
Project SettingsOpens Project Settings panel to set the relevant configuration options for a specific project.
LightmappingOpens the Lightmapping panel to configure the baking properties for generating light maps.
Play on Device (Ctrl/Cmd + P)Click on this option to preview the project in the selected browser/simulator window, for details please refer to the Project Preview & Debugging documentation.
Refresh Device (Ctrl/Cmd + Shift + P)Refreshes the opened browser preview window.
Create Preview TemplateThis option is used to customize the desired preview effect, please refer to the Web Preview Customization Workflow documentation for details.
Build (Ctrl/Cmd + Shift + B)Opens the Build panel to package the game to the target platform.
Create Build TemplateThis option is used to customize the Build panel of the project, please refer to the Custom Project Build Process documentation for details.
Generate Build ExtensionThis option is used to extend the build process, please refer to the Extending Build Process documentation for details.

Panel

This option is mainly used to open various panels in the editor.

panel

OptionDescriptionDefault Shortcut
ConsoleOpens Console. For viewing the output log messages.Ctrl/Cmd + 0
SceneOpens the Scene panel. For selecting and placing various game elements such as scene images, characters, effects, UI, etc.Ctrl/Cmd + 1
AssetsOpens Assets/Assets Preview panel. For accessing/managing/viewing project assets, please refer to the Assets documentation for details.The shortcut for the Assets panel is Ctrl/Cmd + 2
InspectorOpens the Inspector panel. For viewing and editing the working area of the currently selected node, node components and assets.Ctrl/Cmd + 3
HierarchyOpens the Hierarchy panel, which shows the hierarchical relationship between all nodes in the scene in the form of a tree-like list.Ctrl/Cmd + 4
PreviewOpens the Camera Preview panel, which shows the same screen as the one shown in the bottom right corner of the Scene panel when the corresponding Camera node is selected in the scene. When adjusting the scene, the screen in the Camera Preview panel will also be synchronized in real time.Ctrl/Cmd + 5
AnimationOpens the Animation panel or Joint Texture Layout panel. For editing and viewing frame animation or skeleton animation, etc.The shortcut for the Animation panel is Ctrl/Cmd + 6
Node LibraryOpen the Node Prefab Library panel. This panel is a very simple and straightforward visual control repository, where developers can drag and drop the controls listed here into the Scene or the Hierarchy panel to quickly create pre-configured controls.Ctrl/Cmd + 7
ServiceOpens the Service panel, which provides a number of quality official and third-party services that allow developers to access more extensions beyond the engine and make game development easier.Ctrl/Cmd + 8

Extension

This option mainly includes Extension Manager, Store and Create Extension, please refer to the Extending the Editor chapter.

extension

OptionDescription
Extension ManagerOpens the Extension Manager panel, which includes editor built-in extensions, extensions installed in project directory and global directory, please refer to the Extending the Editor chapter for details.
StoreThe Cocos Store is built into Cocos Creator and allows users to browse, download and automatically install official or third-party extensions and assets. You can also submit your own extensions, art materials, music and sound effects to the extension store for sharing or selling. For more information, please refer to the Submitting Resources to Store documentation.
Create ExtensionThis option is used to generate an extension package in the project/global directory to extend the editor with features.

Developer

This option contains mainly development-related menu functions such as scripts, engine and DevTools.

developer

OptionDescription
Compile Engine (Ctrl/Cmd + F7)Compile custom engine, please refer to the Engine Customization Workflow documentation.
Rebuild Native EngineCompile the custom native engine simulator, please refer to Customizing the Native Engine Simulator.
Message DevToolsOpens the Message DevTool for debugging IPC interactions at runtime inside the editor.
TesterThe editor’s built-in extended testing tool, not yet fully functional
Toggle Graphics ToolToggles the Graphics tool panel for debugging scene rendering.
Message ManagerOpens the Message Manager panel to display public messages and their descriptions for each feature defined by the editor.
Export.d.tsExports editor-related APIs.
Reload (Ctrl/Cmd + R)Reload the editor interface.
UI ComponentsOpens the UI Components panel, which lists how to use the pre-defined UI components provided within the editor, please refer to UI Components.
CacheThe clear code cache in this option is used to clear the cache generated when compiling scripts.
VS Code WorkflowThe working environment-related features of the VS Code editor, currently supporting Add Chrome Debug Setting and Add Compile Task. Please refer to the Coding Environment Setup documentation for details.
Toggle DevTools (Ctrl/Cmd + Shift + I)Opens DevTools window for editor interface extension development. It is also possible to customize the log output to Console, please refer to Custom output messages.
Open Assets DevToolsOpens the Assets DevTool panel for viewing log messages during modifications to the asset-db process.
Open Scene DevToolsOpens the Scene DevTool panel to view log messages during modifications to the scene.
Open Build DevToolsOpens the Build DevTool to view all log messages generated during the build process including the call stack.

Help

help

OptionDescription
User ManualOpen User Manual in default browser.
API ReferenceOpen API Reference Documentation in default browser.
ForumOpen Cocos Creator Forum in default browser.
Release NotesOpen the release notes for each version of Cocos Creator in default browser.
Engine RepositoryOpen TypeScript Engine Repository in default browser.