Beruflich Dokumente
Kultur Dokumente
Release 3.0rc2
Ricardo Quesada
Contents
What is CocoStudio 1.1 UI Editor . . . . 1.2 Animation Editor 1.3 Scene Editor . . 1.4 Data Editor . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
3 4 4 6 6 7 7 7 11 11 13 15 15 15 16 16 23 23 29 37 39
Getting Started 2.1 Download CocoStudio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Taking a Look at the Built-in Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lets Build a Parkour Game 3.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Design the Required Game Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Step by Step Process to Make GameMenuUI 4.1 Decide Which Kind of Widgets Shoule be Included 4.2 Put Everything You Need by Adding Widgets . . . 4.3 Set Properties and Export . . . . . . . . . . . . . 4.4 How to Use the Exported Resources . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
A Step by Step Process to MAke CMRun 5.1 Creating Proejct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2 Scene Editor and Data Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Keep Going Indices and tables
6 7
ii
Contents: Contents What is CocoStudio UI Editor Animation Editor Scene Editor Data Editor
Contents
Contents
CHAPTER 1
What is CocoStudio
CocoStudio is a professional game development tool based on Cocos2d-x. It promises to be free of charge in an innite duration. With CocoStudio, developers can create game resources quickly and simplify most of the tedious development work with the four editors provided. They are UI Editor, Animation Editor, Scene Editor and Data Editor. These four editors cover the core process of game development by dealing with animation resources, UI interface, gaming scene and gaming data. Also, each of them has been specically designed for the best of the corresponding role in the development team and therefore allows everyone to perform his/her duties with least misuse and most efciency. In brief, CocoStudio will help you achieve high productivity and quality with low risk and cost.
Figure 1.1: CocoStudio Launcher Figure 1: CocoStudio The birth of CocoStudio was no accident. We have met so many problems when we get started with the FishJoy2 in 2012. As the Cocos2d-x didnt have any visualization tools when it came to UI appearence or animations of roles, it
used to take a great deal of time for programers to modify their programs to t the requirements from game deisigners. At that time, we were considering about developing a visual toolkit to help to solve these problems. Then we developed a toolkit called SP-II to support FishJoy2 at rst. Half a year later, we processed this SP-II and released the rst ofcial version of this toolkit on April 2013, and that was CocoStudio.
1.1 UI Editor
UI Editor is an editor that edits all the Graph Interfaces, used mostly by art designers. They import ready interface images into the editor and place, design, edit, joint and modify them in the light of the design scheme. Then, with edited UI resource exported, they can be used directly into the game codes. The UI Editor embraces all plug-ins of Cocos2d-x and it has extended some of them, satisfying various demands of UI plug-ins during the developing process. It is also supportive of individual image exporting, whole image exporting, UI template, UI animation and other practical uses.
The data designers import tables of values into this editor, break down the complicated ones, and then export them as common data les such as table of attribute or data. A wide range of different data arrangements can be choosed from data manager while exporting as the editor supports index.anima Contents Getting Started Download CocoStudio Taking a Look at the Built-in Examples * Taking a Look at the Tests * Taking a Look at the Sample Demos
CHAPTER 2
Getting Started
Contents Lets Build a Parkour Game Overview * The Introduction of IronCity Design the Required Game Components A Step by Step Process to Make GameMenuUI Decide Which Kind of Widgets Shoule be Included Put Everything You Need by Adding Widgets Set Properties and Export How to Use the Exported Resources A Step by Step Process to MAke CMRun Creating Proejct * Drawing Bones * Animation Mode * How To Use The Armature In The Program * How To Callback The Functions Scene Editor and Data Editor * Scene Editor * Data Editor
10
CHAPTER 3
3.1 Overview
3.1.1 The Introduction of IronCity
This is a little simple parkour game to show you how to use CocoStudio in a game. It is called IronCity, made with Cocos2d-html5 and CocoStudio v1.0.2.(CocoStudio released its latest 1.1.0 version during the writing process of this document.) The user interfaces and the animations of IronCity were created with CocoStudio. You can clone it from our github: https://github.com/yuye-liu/CocostudioIronCity IronCity consists of 2 scenes - the main menu scene, and the game scene. Its a simple shooting game. In the game scene, you can use gestures to control the CocoMan (The main role) to run, jump, stop or shoot. The goal is to run as far as possible, shoot as many monsters as you can - the higher score, the better you do.
11
12
Figure 7: Code Structure of IronCity The screenshot shows the structure of IronCity. We separated the sources into 3 parts. I will talk about each part in a nutshell with special emphasis on the ones that used CocoStudio. MainMenuScene.js: The beginning scene of IronCity, including a background pictures and a start button. Tap start button and it will change to the next scene: the game scene. GameScene.js: The main scene of IronCity. All the constants of resources have been dened here. The game scene has 3 layers: menu layer, play layer and gameover layer. It also controls all the collision detection for the CocoMan. Background.js: Create the background map of the game scene. Use tilemap to draw these maps and put them together into a complete background. GameOver.js: This is a UI layer. When CocoMan dies and the game scene will create the game over layer. The game over layer includes a UI that shows the score of player. The UI in game over layer is made by UI Editor, all of the 3 layers UI Editors projects can be found in the path CocoStudioIronCity/IronCityCocoStudioProject/IronCityUI .
Figure 8: IronCityUI Laser.js: Laser is CocoMans weapon. Once you tap the screen in the game scene, the CocoMan will shoot laser to the touch point. The laser extend cc.Sprite class. In Laser.js, it provides several functions, for example, add or release a laser. MenuUI.js: MenuUI is a UI layer, too. It contains 3 basic user interfaces created by UI Editor as a game menu: a blood bar, a distance score and a setting button. This is a very simple example so I will choose this MenuUI to show how to use UI Editor in next section. SettingUI.js: SettingUI is a UI layer for setting. If you touch the setting button on the game scene (setting is belong to MenuUI), it will pause the game and create the SettingUI. It can switch off or switch on the music effect, regulate the volume of music , return to the game and back to the main menu scene. Monster.js: There are two kinds of monsters in IronCity. The Monster class extends from cc.Node get the functions of generating, destroying, moving the monsters and playing the animations of monsters. The animations of monsters is created by Animation Ediotr. But they are just some picturess replacement work, they dont use any armatures here. So I dont talk too much about this animations here. Later we will see a complete armature animation in next section. Player.js: Player is a class extend from cc.Layer. Player includes an armature called imManArmature. This is CocoMans armature. The major functions of Player is to load and play 7 animations of CocoMans armature. Im going to talk about the running anmation to show you how to build an armature by Animation Editor.
for CocosMan. In next section, I will choose the GameMenuUI and CMRun to show how to use UI Editor and Animation Editor.
Figure 9: CocosManAction
14
CHAPTER 4
15
There are 14 widgets in the widgets toolbar. I will introduce some of them later. All of the widgets can be dragged into the main render. If you hold down space on keyboard, you can move your canvas on the main render by your mouse. Some of shortcut keys in CocoStudio is similar to that in PhotoShop. Then you pull the picture resource from the Resources Menu into the Properties. In this case, I dragged a bloodBar.png to the my bloodBars texture. The resources menu supports importing or dragging a .psd le, but the names of the resources should be English. Here I have added all widgets I need and set up the pictures from resources. The object structure shows the hierarchy of the layer, but that is not the actual order in the game. In Cocos2d-x and Cocos2d-html5, we use Zorder to represent the hierarchy of the sprites, while in UI Editor, it is called render layer, and can be found under Properties Menu of every widgets. Figure 12: Drag Resource into the Texture
16
17
18
19
Figure 15: Exported JSON format le Figure 16: MenuUI.js Lets see how to use the exported resources in IronCity. In IronCity, we arranged all the resources constant to another le.(GameScene.js) Here is the Layer Menu UI and its initial function. (MenuUI.js in IronCity Cocos2d-html5 version.) *this.addWidget( cc.UIHelper.getInstance().createWidgetFromJsonFile(Json_IronCityUI_1));* createWidgetFromJsonFile() is the way to read the json le into your game. In the MenuUI, we have a setting button , blood bar(progress bar), distance score(atlas label), and they all need interaction during the game. So we get these widgets by the getWidgetByName()function as in the pictures. Remember that the names of the widgets can be found in your object structure. Different widgets will have their own interfaces to be called in the program. For example, you use setPercent() to set the rate of a progress bar, and setStringValue() for the atlas label to change the value. All widgets can add a addTouchEventListener() to listen the touch event. In IronCity, we arranged all of the resources constant to another le. Try to learn more about from the CocoStudio test inside Cocos2d-html5.
20
21
22
CHAPTER 5
Fiture 17: Animation Editor The picture is the screenshot. The default mode is in the Posing Mode, and you can change it into Animation Mode with the button in the upper left corner. Next, lets nd out how to create a complete armature in Animation Editor.
23
A good design of an armature is important. In IronCity, we divided the cocoMan into 6 parts. We created the body parts by using 2-4 bones and assembled them when they were nished.
Figure 18: Create Bone in Animation Editor So, in this case, as the picture shows, we put all of the pictures into the main render. This is a right leg, consisting of 4 skeletons: thigh, shank, knee and foot. Then you can draw the collision region part in the HitBox. Here I am just showing you one option, but we actually did it with another way. Because the more bones and its collision regions you create, the lower performance it will be on the browser. Thats why we didnt use it. If you still need it, try to nd the sample called TestColliderDetector in CocoStudio Test. After combination, we now have a whole right leg on the main render. Its time to create bones now. 5 steps to create an armature: 1. Choose create bone mode. 2. Draw bones. 3. Disable create bone mode. 4. Bind pictures to bones. 5. Bind children bone to their parents.
24
Figure 20: Step 3-4 Figure 21: Step 5 After all the work, I have created all parts of the cocoMan and nally assembled them just like playing Jigsaw. Dont forget to bind parent bones when it comes to the joint. This pose is going to be the start of running animation. All of the other poses will be extended or copied from this basic armature. Next section we are going to create animations. Figure 22: Repeat The Step 1-5 to Build a Whole Armature
25
26
27
28
armature.getAnimation().play(Running) will begin to look for the animation named Running in this armatures ExportJson le. This name can be set in the animation list from Animation Editor. You can edit it in ExportJon le as well.
29
30
Figure 29: Names of the widgets in Scene Editor Armature Componet: CCArmautre in Cocos2d-html5. Dragging your armautre resources (usually a ExportJson format le built by Animation Editor) into the Aramture File would load the armature to your Scene. Then you can choose which animation to play in the Animations List.
Figure 30. Armature in the sample: Fight Scene UI: Similar to the Armature Component. You can add your UI resources into the UI widgets. The UI resources can be built by the UI Editor. Map Component: Drag your map resources into the Map Component. The map resources may be a tmx format le
31
which is exported by the TileMap. Particle Component: Particle resources can be built by Particle Designer. The Particle Component can help to add your particle resources to your scene.
Figure 31. Particle Component properties Audio: The audio in Scene Editor supports mp3 and wav format. Add your audio by dragging the Audio widget.
Figure 32: Audio properties Custom Property: Custom Property is related to Data Editor so Ill talk about it later. Figure 33: Scene Editor Test The picture shows the SceneEditorTest in Cocos2d-html5. This is a test sample for the FishJoy2 in the Scene Editor start page. Using createNodeWithSceneFile() to create a CCNode from the exported resources by Scene Editor. As all of the widgets in Scene Editor can set a Tag property, you can get the widgets through getChildByTag() from their parent node. So there is nothing difculty about using the exported Scene Editor resources. Try to learn more from the CocoStudio Test if you meet any kind of questions. Figure 34: Running the SceneEditorTest shows the image you edited in the Scene Editor
32
33
34
a custom component. Then you can use the custom component in your code. See how to use custom component in SceneController from Components Test. Contents Keep Going
35
36
CHAPTER 6
Keep Going
If you want to learn more baout CocoStudio, visit the following websites for more details: The Ofcial Website: *http://www.cocostudio.org* The Ofcial Forum: *http://www.cocos2d-x.org/forums/24*
37
38
CHAPTER 7
39