Workspace Overview

The workspace of Cocos Studio is composed of Menu, Toolbar, Objects panels, Resources panels, Canvas, Properties panels, Animation panels, Output panels and Status bars.

image

The Studio menu bar is composed of seven menus, File, Edit, View, Project, Languages and Help. The menu on Mac is same with that on Windows, but items are displayed in different order. Let's take brief introduction to the items from each drop-down menu. Example:

image

1 File

image

New Project: to create a cocos project. Keyboard shortcut is Ctrl+Shift+N (Win)/ Command+Shift+N (Mac).

New File: to create a file. The existing file types include Scene, Layer, Node, SpriteSheet and 3D Scene. Keyboard shortcut is Ctrl+N (Win)/ Command+N (Mac).

Open Project: to open cocos projects. Keyboard shortcut is Ctrl+O (Win)/ Command+O (Mac).

Recent Projects: to provide a quick access to recently opened projects, the maximum number of which is ten. The last-opened project is at the top.

Close XXXX.csd/csi: to close current project XXXX.csd/csi.

Close Project: to close current cocos project.

Save XXXX.csd/csi: to save current project XXXX.csd/csi. Keyboard shortcut is Ctrl+S (Win)/ Command+S (Mac).

Save All: to save all files in a project. Keyboard shortcut is Ctrl+Shift+S (Win)/ Command+Shift+S (Mac).

Save As: to save a cocos project to a new location or with a new name.

Import -> Import Resources: to import resources from disk to Resources panel.

Import -> Import Project from v1.6: to transfer v1.6 projects to currently supported project files.

Quit: to quit Cocos Studio. Keyboard shortcut is Alt+ F4 (Win)/ Command+Q (Mac).

2 Edit

image

Undo: to undo the last action. Keyboard shortcut is Ctrl+Z (Win)/ Command+Z (Mac).

Redo: to redo an action that you undid. Keyboard shortcut is Ctrl+Y (Win)/ Command+Y (Mac).

Preferences: keyboard shortcut is Ctrl+, (Win)/ Command+, (Mac).

image

image

image

3 Project

image

Run Project

Publish and Package:

Publish and Package (using the previous settings): to publish or package projects with previous settings.

Project Setting

image

Publish

Package

For more information about Package, please see Package and Runtime Environment Settings.

4 View

Anchor Point: to show or hide the anchor point in rendering section. Keyboard shortcut is Ctrl+Shift+A (Win)/ Command+Shift+A (Mac).

Ruler: to show or hide ruler. Keyboard shortcut is Ctrl+Shift+R (Win)/ Command+Shift+R (Mac).

Guides: to show or hide guides. Keyboard shortcut is Ctrl+;(Win)/ Command+; (Mac).

Lock Guides: when checked, guides cannot be selected or moved. Keyboard shortcut is Ctrl+Shift+; (Win)/ Command+Alt+; (Mac).

Clear Guides: to delete all the guides in the rendering section.

New Guides: to add guides to rendering section.

5 Window

image

Objects, Resources, Animation, Output, Properties: check/ uncheck to open/ close these panels.

Start Launcher: to start Launcher in Cocos Studio.

Reset Window Layout: to reset the window layout to default settings.

6 Language

image

Cocos Studio support English, Simplified Chinese and Traditional Chinese. You need to restart Cocos Studio for your new language setting to take effect.

7 Help

image

View Help: official tutorials.

Check for Updates: to check if the latest version is installed on your computer.

About Cocos Studio: version and copyright information; links to official website, Weibo and forum.

Toolbar

image

The toolbar contains eight basic components: New File, Resolution, Preview, Publish and Package, Platform Switch, Alignment, Move Canvas and Enable left-click.

image

image New File: to create a Scene, Layer, Node, SpriteSheet or 3D Scene.

image Screen Resolution & Orientation: to set the screen resolution and to switch the display between landscape and portrait.

image Preview: to preview a project in simulator. Currently you can preview 2D/ 3D Scene and Animation projects.

image Publish and Package: to publish resources or projects for iOS (.ipa), Android (.apk) and HTML games.

image Platform Switch: to run projects on Windows or Android.

image Alignment: to align selected widgets on canvas with popular alignment formatting. They are Center, Left-align, Vertical center, Right-align, Vertical Justify, Horizontal Center, Vertical Bottom, Horizontal alignment and Vertical alignment.

image Move Canvas: to move Canvas in the rendering section. You can access the tool by clicking the hand shape icon, or using keyboard shortcut Q.

image Enable left: click currently only supports four file types, which are Scene, Layer, Node and SpriteSheet files. You can access the tool by clicking the icon, or using keyboard shortcut W.

image Next we will introduce tools currently only available in 3D Scene.

image Default state is "Move". Clicking X-axis, Y-axis or Z-axis to decide that along which axis the object moves.

image Click this button to change the mouse settings to “Rotate". Clicking X-axis, Y-axis or Z-axis to decide that along which axis the object rotates.

image Click this button to change the mouse settings to "Scale". Clicking X-axis, Y-axis or Z-axis to decide that along which axis the object scales.

Objects Panel

image

In addition, click Edit on the Menu -> Preferences -> General -> select "Show deprecated widgets" -> click "OK". The widget "AtlasLabel" will show.

image

image

In both 2D & 3D projects, when you hover the mouse over a widget, an information bubble “i” will appear at top right corner. Clicking that icon you can see descriptive texts of each widget and an Internet link for more information.

image

Resources Panel

Resources panel displays all files related to a game project. Importing resources, creating projects, renaming files, deleting files, etc. can be done here.

image

Cocos Studio allows you to import an existing resource to Resource panel, you can also drag resources from Resource panel to other panels such as canvas in order to set properties.

Note File structure in the Resource panel is the same as that on the disk. When a file is deleted from the local file system, the linked widget will display its name in red indicating unavailable. As shown in the following figure outlined in red.

image

The general workflow to build games with cocos is as follows:

Add resources to the Resources panel -> create widgets by dragging and dropping them from Objects panel to Canvas -> specify properties of widgets -> edit Scene or Animation.

Canvas

Note Canvas will automatically adjust itself to the contents on it.

1 When editing Scene or Layer, Canvas is displayed as shown below:

image

Canvas is the most commonly used panel in Cocos Studio. You can visually adjust the position, rotation, scaling, and anchor point of a widget in Canvas. You can also select one or multiple widgets in Canvas, and edit the widget properties using either right-click menu or Property panel.

Press the spacebar, and you can move the Canvas by dragging the mouse. You can also move the Canvas by pressing the scroll wheel on your mouse.

image

The area with black background represents the screen resolution you set.

2 When editing Nodes, Canvas is displayed as shown below:

image

3 When editing SpriteSheet, Canvas is displayed as shown below:

image

4 When editing 3D Scene, Canvas is displayed as shown below:

image

Animation panel

Animation panel is divided into six sections: Scene Graph, Timeline, Easing Interface, Playback Control, Editing Tools and Animation list.

image

Timeline

image

In the timeline, you can insert frames and an animation curve will be created automatically between frames.

Easing Interface

image

Easing refers to acceleration or deceleration of frames. When this function is applied, animations will look more lifelike.

Playback Control

image

Animation playback control is to manipulate frames in the timeline.

   image: Move to the first frame.

   image: Move to previous frame.

   image: Play the animation.

   image: Move to next frame.

   image: Move to the last frame.

   image: Loop the animation or not.

   image: Playback speed of the animation.

Editing Tools

image

Animation editing tools provide most of the common functionality.

image Add Frame: Clicking on this icon will add a keyframe at a specific position on the timeline.

image AutoRecord Frame: What you do after clicking the icon will be recorded in the current frame, become the key frame. By modifying the widget properties of different frames, you can create rich and colorful animation effects. You can check the modified properties by clicking image.

image Animation ghosting, also known as onion skin, is a viewing mode that displays a series of snapshots of frames ahead of and behind the current frame.

image

image Animations can be created, deleted and renamed from within the Animation List.

image Add Animation: Create an animation by setting the Start and End frames.

image

Animation Name: animation0, from frame 0 to frame 16.

Scene Graph

image

The Scene Graph displays a list of currently used widgets, such as buttons, maps, sound, and particle, etc. They are mapped one-to-one with the concrete widgets within Canvas. To add a widget, you can directly drag it from Objects panel to the Scene Graph (also display in the canvas), which provides a way to visually adjust the structure of the widgets. Within the Scene Graph, you can add, delete, adjust the widget’s render order, and adjust parent-child hierarchies of the widgets.

Click image button to expand animation properties associated with some widget. For example,

image

The above picture means that Panel_InfoBox_3 only influence three properties: Skew, Scale and Position.

image:to hide a widget in the canvas by selecting this check box.

image:to lock a widget to prevent it being edited.

Note You can use the scene graph to hide a widget in the canvas, or lock a widget to prevent it being edited. The operation in the Scene Graph panel, locking or hiding, only affect the display on Canvas, the effect will not be output to a game project, if you need the effect to appear in the game, please modify the properties in property panel.

The parent-child hierarchies: Cocos Studio uses the concept of parent-child hierarchies, so that any object can become a child of another object, to establish the relationship move the object onto its parent object, will move with the parent.

Properties panel

In the Properties panel, you can make modifications of any widgets' properties.

image

In Properties panel, there are title section and several tabs, including Position and Size, General properties, 9-Slice, Feature and Advanced properties.

Title section: shows the type of the currently selected widget. You can find a widget in the game by searching its name or tag.

image

Position and Size

This section includes some settings about anchor point, position and size. Adaptive layout feature is newly added, for more information, please see UI Layout and Multi-resolution Support.

image

General Properties

General properties contain basic properties of a widget, such as Visible, Scale, Rotation, Skew, etc. General properties are the same for most widgets, but there are also exceptions for some widgets, please refer to "Online Help".

image

Advanced properties include control layout, sub control layout and frame events. When select one or multiple widgets in Canvas, you can adjust the corresponding attributes in the Properties panel.

image

9-Slice

Advanced Properties