Cocos2d-js third gun HelloWorld and Cocos creater Introduction (Valuable experience!) ）

I. Introduction to the editor

1) Explorer: displays all resources in the Project Resource folder (assets). The folder is displayed in a tree-like structure and automatically synchronizes changes to the contents of the Project resource folder in the operating system. You can drag files directly from outside the project, or use the menu to import resources.

PS: All the resources used in the project are in it, and our script scripts are in it.

2) Scene Editor: A working area used to display and edit visual content in a scene. The WYSIWYG scenario is built with the display in the scene editor to complete

PS: The game is a scene to another scene, a very important concept ~

3) Hierarchy Manager: The tree list shows all nodes in the scene and their hierarchies, and all the content seen in the scene editor can be found in the hierarchy Manager to find the corresponding node entry in the edit scene, the contents of the two panels will be displayed synchronously, we will also use both panels to build the scene.

PS: We can put the label under the ELF node, see we move the wizard label also moved, a bit like inheritance (there is a father is very important)

4) Toolbar: includes the scene editing tool and the action button when previewing the game, the far right shows the access address used for remote testing and debugging, and the number of devices in the connection.

PS: There is a QR code near 192.168.0.103:7456, you sweep with a browser, you will instantly know how powerful this is, provided that in a local network

two. Introduction to the Project catalogue

Click here to access the project folder directly

After entering the Cocos Creator project, your project folder will include the following structure:

ProjectName (project folder)

├──assets

├──library

├── Local

├──settings

├──temp

└──project.json

Resource folder (assets)

assets assets Span style= "Color:rgb (51,51,51)" > Explorer assets Each file in the import project will generate a .meta .tps file, or Photoshop .PSD assets outside to manage.

resource pool (library)

Library is to Assets after the resource is imported, the structure of the file and the format of the resource will be processed into the form needed for the final game release. If you use the version control system to manage your project, this folder is not required to enter version control.

when Library lost or damaged, just delete the entire Library folder and then the project is opened, the repository is regenerated.

Local Settings (locally)

Local The folder contains local settings for the item, including information such as the Editor Panel layout, window size, location, and so on. You don't need to worry about the content here, just set the editor layout according to your habits and these will automatically be saved in this folder. General Local also does not need to enter version control.

Project Settings (settings)

Settings settings related to the project, such as Build a Publication the package name, scene and platform selection in the menu. These settings need to be versioned with the project.

Project.json

Project.json files and Assets folders, as a sign of verifying the legitimacy of Cocos Creator projects. Only folders that contain these two contents can be opened as Cocos Creator projects. the Project.json itself is currently used only to specify the type of engine currently in use and the plug-in storage location, without requiring users to care about its content.

three. Let me show you how to modify Helloword

1. First we remove the original Helloword component

2. Add our JavaScript script

PS: This is a component of the benefits, we assets is actually a database, we want the script belongs to which component, just like I just drag and drop it. You can also modify the text directly in the property inspector

3. Let's take a look at the HelloWorld code

<pre name= "Code" class= "JavaScript" ><span style= "Font-family:kaiti_gb2312;color:rgb (51, 51, 51); font-size:24px; " >CC. Class ({extends:cc. Component,//properties: {label: {//default is empty Default:null,//type is label Label TYPE:CC.    Label},//value displayed in text: ' Hello, world! '    },//Initialize Onload:function () {this.label.string = This.text; },//each frame will call Update:function (DT) {},});

4. View the manual: Everyone wants to study seriously about Cocos Creater can go to see the built-in manualHelp----> manuals, or visit our website

The above is today's content ~~~~~~~~~~~~~~~ daily will be updated a little ~ ~ ~

Cocos2d-js third gun HelloWorld and Cocos creater Introduction (Valuable experience!) ）