Cocos Creator v2.

0 User Manual
Welcome to the Cocos Creator User Manual! Cocos Creator is a free, cross-
platform, game development tool based on Cocos2d-x. This is a comprehensive and
detailed guide to help you get started with designing and developing games. The
current stable version is still v2.0, and if you are using v2.1, please refer to the Cocos
Creator v2.1 User Manual.

About Cocos Creator

 Q: Is Cocos Creator a game engine?
 A: It's a complete game development solution, which includes the JavaScript
implementation of Cocos2d-x (no need to learn a new engine), and various UI tools
that can help you develop games more quickly.

 Q: What kind of editor does Cocos Creator have?

 A: It's completely customized for the engine. It's an all-in-one editor that can serve
the whole workflow from design, development, preview, debug and all the way to
cross-platform publishing.

 Q: Can I use Cocos Creator even if I don't know how to programming?

 A: Of course! Cocos Creator provides two kinds of workflows: one design-oriented

and one develop-oriented, and a simple and smooth cooperative method (with an
appropriate division of labor).

 Q: Which platform can we choose to publish the games developed by Cocos Creator?
 A: Currently, Cocos Creator can publish games to the Web, Android, iOS, desktops (Mac and
windows) and Instant Games. The goal is to develop once and publish to all platforms.

Create or import resources

You can complete resource import by dragging resources such as pictures, sounds,
and so on to the Assets in the editor.

In addition, you can create scenes, prefabs, animations, scripts, particles, and other
resources directly in the editor.

Create or import resources

You can complete resource import by dragging resources such as pictures, sounds,
and so on to the Assets in the editor.
 In addition, you can create scenes, prefabs, animations, scripts, particles, and other
resources directly in the editor.

Create scene content

With some basic resources in the project, we can start to build the scene, the scene
is the game content most basic organization way, and it is also the basic form of
showing the game to the player.

We'll add a variety of nodes through the Scene, which is responsible for displaying
the game's artistic sound resources as well as the hosting of the subsequent
interaction functionality.

Adding component scripts to enable interactive

functionality
We can mount a variety of built-in components and custom scripting components for
the nodes in the scene to enable the game logic to run and interact. This includes the
most basic animation playback, the button response, the main loop script that drives
the entire game logic, and the control of the player role. Almost all of the game logic
functions are implemented by mounting scripts to the nodes in the scene.

One-click preview and publish

In the process of setting up the scene and developing the function, you can click the
preview at any time to see how the current scene works. Use mobile phone scan two-
dimensional code, you can immediately preview the game on the phone. When
development comes to an end, through the build panel you can publish the game to
include desktop, mobile phone, Web and many other platforms.

Highlight Features
The highlight features of Cocos Creator include:

 Data properties that can be adjusted in the editor at anytime can be easily declared in the
script. The adjustments to parameters can be independently finished by designers.
 A UI system that supports smart canvas adaptation and spares the alignment of coding
elements can perfectly adapt to device screens of any resolution.
 Animation system that is specially made for 2D games supports animation trajectory preview
and editing of complicated curves.
 Scriptable development supported by a dynamic language makes dynamic adjustment and
the remote adjustment of mobile devices amazingly easy.
 By using the Cocos2d-x engine, when enjoying the convenience of scriptable development,
you can also release games on various desktop platforms and mobile terminal platforms with
one-click, with their superb features on the original level preserved.
 Componentization of script and open plugin system provides developers with methods of
customizing workflows at different depths. The editor can be adjusted on a large scale to
adapt to the needs of different groups and projects.

Framework Structure
Cocos Creator contains all the functions needed for game development, including: a
game engine, resource management, scene editing, game previewing and game
releasing. All of this in a single, unifed tool that eases your games development.

It makes data driven design and componentization the core game development
methods, and seamlessly integrates the mature JavaScript API system of the Cocos
engine. It can adapt to the developers habits and still provide an unprecedented level
of content creation and provide a realtime previewing and testing environment for
artworkers and directors.

The editor provides not only a strong and complete toolchains, but also an open
plugin framework. Developers can use generic front end technologies like HTML +
JavaScript to conveniently extend the functionality of the editor and provide
customized personalized workflows.
 What the combination of engine and editor brings is the functional development
method of data driven and componentization, and the perfect cooperation (with an
appropriate division of labor) of designers and programmers:

 Designers build the visual presentation of game scenes in the editor

 Programmers develop functional components that can be mounted to any object in the scene
 Designers are responsible for mounting components to objects that need to perform a
particular action and improving each parameter by adjustment
 Programmers develop the data structure and resource management needed for the game
 Designers set up all the data and resources using the graphic interface
 (In this way, from the simple to the complex, all the workflows that you can imagine can be
realized)

The development idea that focusing on workflows can help developers, of different
duties, quickly find the breakthrough point to maximize their work and smoothly
cooperate with other group members.

Usage instructions
Cocos Creator supports cross-platform operation between Windows and Mac, with a
single one double click. Comparing to traditional Cocos2d-x workflows, it completely
spares the requirements of setting up a development environment. After running,
developers can immediately start game content creation or functional development.

On the basis of data driven workflows, the creation and editing of the scene has
become the core of game development. The design work and functional development
can be done synchronously and seamlessly. Regardless if your teammates are
artworkers, directors or programmers, they can all click the Preview button at anytime
in the production process to test the lastest form of the game in browsers, mobile
device simulators or mobile devices.

Programmers and designers can realize various kinds of cooperative methods.

Whether they are building the scene before adding functionality or creating functional
modules to let designers assemble and adjust them, Cocos Creator can always meet
the needs of the development group. Features defined in the script can present
themselves in the editor with the most suitable visual effects, which provides
convenience for content creators.

Content resources outside the scene can be imported in, such as: photos, sounds,
altases, skeleton animations, etc. Moreover, we are continuously improving the
editor's ability of creating resources, which includes the animation editor. Designers
can use this tool to make very exquisite and vivid animation resources, and preview
the animation in the scene at anytime.

In the end, the finished game can be released on various platforms by using the on-
click in the graph tool. From design and development, to testing and releasing, Cocos
Creator can handle everything for you.
Dashboard
After starting Cocos Creator and logging in with your Cocos developer account, the
Dashboard interface will open. You can create a new project, open an existing project
or obtain helpful information here.

Overview of the interface

 What is listed above is the dashboard interface of Cocos Creator, which includes the
following types of tabs:

 Recently Opened Projects: List projects that have been opened recently. When running
Cocos Creator for the first time, this list is blank and a 'Creat a new project' button wi ll
appear.
 Creat a New Project: By clicking this tab, you can access the guide interface for creating a
new project in Cocos Creator.
 Open Other Projects: If your project is not in the list of recently opened projects, you can
click this button to browse and choose the project you want to open.
 Help: Help information, which is a static page that includes various pieces of helpful
information and guides for beginners and documents.
 Quick Start: Shows a video tutorial that can help you start using Cocos Creat or to develop
games quickly.

Next, we will introduce these subpages one by one.

Recently Opened Projects

You can quickly access projects that have been opened recently by using Recently
Opened Projects. When running Cocos Creator for the first time, this list is blank and
a 'Creat a new project' button will appear on the interface. You can come back here
after having created some projects. And you will see the newly created project
appearing on this list.

When you hover your mouse over the article of a recently opened project, the
available operations on this article will appear:

 Click Open and open this project in Cocos Creator editor

 Click Close and remove this project from the list of recently opened projects. This operation
will not delete the actual project folder.

Also, when you click or hover over a project, you can see the path of this project in
the status bar underneath the Dashboard.

Create a New Project

You can create a new Cocos Creator project with the Creat a New Project tab.

In the Creat a New Project page, we first need to choose a project template. The
project template includes various kinds of basic game frameworks and sample
resources and scripts for learning, which can help you start creative work quicker.
Note: The early Cocos Creator edition doesn't include multiple optional project
templates. Along with the improvement of Cocos Creator's functions, we will gradually
add more templates to provide convenience for users.

Click a template, and you will see descriptions of this template at the bottom of the
page.
At the bottom of the page, you will see the project name and the path that it's going to
be saved to. You can manually input the project path and project name in the input
field of project path. The last section of the path is project name.

You can also click the Browse button to open the input field of the browsing path.
You can choose a place in your local file system to store the new project.
After everything is set up, you can click the Creat a New Project button to finish
creating the project. The Dashboard interface will be closed, and the newly created
project will be opened in the main window of Cocos Creator editor.
Open Other Projects
If you can't find your project on the Recently Opened Projects page, or if you just
downloaded a project that you have never opened before, you can browse and open
the project in the local file system by clicking the Open Other Projects button.

After clicking Open Other Projects, a selective input field of the local file system will
pop up. Choose your project folder in this input field and click "Open" and then you
can open the project.
Note: Cocos Creator uses a particularly structured folder as legitimate project
marking, but not it is not a construction document. You only need to click the project
folder when choosing the project.

Help
You can visit Cocos Creator User Manual and other helping documents by clicking
the Help page.

Hello World
Now that we understand how to use the Dashboard, let's see how to create and open
a Hello World project.

Create a New Project

In the Dashboard, open the Create a New Project tab and choose the Hello
World project template.
Then assign the path of the new project in the project path bar below. The last section
of the path is the project folder.

After finish inputting the path, click the Create a New Project button at the bottom
right corner, the project will be automatically created from the Hello World project
template and will be opened.
Open a Scene to Get Started
The core of Cocos Creator is data-driven workflows. When opening a project for the
first time, no scene will open by default. To view the content of the Hello World
template, we need to first open a scene asset file.

Double click the Hello World scene asset file indicated by the arrow, in Assets panel.
All the scene assets in Cocos Creator use as their icon.
Preview Scene
To see a preview of the game scene, please click the Preview button at the top of the
editor window.

Cocos Creator will use your default browser to run the current game scene. The
effect is as illustrated below:
Click the drop down menu in the top left corner of the preview window and from here
you can choose the preview effects for different device screens.

Customize the Welcome Message

Let's show you what's data-driven workflow with a simple example. Let's say we need
to change the welcome message of Hello Word, we don't need to edit the script code
any more, but can directly modify properties of the words that are saved in the scene.

Firstly click the Canvas node in the Node Tree, to which our Hello World component
script is attached.
Next, find the Hello World component properties at the bottom of the Properties, and
change the text in the Text property into 你好，世界!:
When running the preview again, we will see that the welcome message has been
updated:
Summary
The content of this section lets us know how to get started with scenes in Cocos
Creator. And by customizing the welcome message, it gives a brief introduction to the
way data-driven works. Next, we will guide you through building a complete leisure
game step by step. You will have a more comprehensive understanding on Cocos
Creator's workflows after that.