Perfect build COCOS2D-JS development environment (all)

Develop the game using the Cocos2d-js engine. The basic program code is the JavaScript language, so any JavaScript language tool that can be developed is suitable for COCOS2D-JS game development. This book we recommend the Webstorm and Cocos Code IDE tools.


Build Webstorm development environment
We have used webstorm development tools in the past. It is a very good JavaScript development tool. The Webstorm tool can develop and debug JavaScript program code based on the Cocos2d-js engine, but it can only be performed on a Web browser when testing and debugging.
Webstorm installation process We have introduced, but to develop a COCOS2D-JS engine-based JavaScript program, we also need to install the Google Chrome browser and jetbrains IDE support plugin, Google Chrome installation We no longer introduce, we highlight the JetBrains IDE support plugin,
JetBrains IDE support is a plugin installed on Google Chrome for use with Webstorm tool debugging.

The JetBrains IDE Support plugin installation process is entered in the URL of Google Chrome browser https://chrome.google.com/webstore/detail/ JETBRAINS-IDE-SUPPORT/HMHGEDDBOHGJKNPMJAGKDOMCHMHGEDDB content, Installation page For example, you can click on the "added to Chrome" button to install the plugin on this page.

Installing the JetBrains IDE support plugin

After successful installation, the "JB" icon appears after the address bar of the browser. How to use it in detail is described in the following sections.


Building the Cocos Code IDE development environment
The Cocos Code IDE is a game tool developed by the COCOS2D-X team to develop COCOS2D-JS and cocos2d-x LUA bindings, based on the eclipse[Eclipse is an open source, Java-based, extensible development platform.

As far as it is concerned. It is just a framework and a set of services. Used to build a development environment from plug-in components.

Fortunately, Eclipse comes with a standard set of plugins. Contains Java development tools (Java Development Kit. JDK). --From the Baidu Encyclopedia http://baike.baidu.com/subview/23576/9374802.htm] Platform development tools, Eclipse Java-based to execute the Cocos Code IDE tool, We need to install the JDK or JRE,JDK is the Java Development Kit. The JRE is the Java execution environment.
1. JDK Download and installation
Let's introduce the JDK download and installation, as seen in the JDK 7 download interface. It is http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html, which has a very many version number. Note Select the appropriate operating system. and 32-bit or 64-bit installed files.

Download JDK

Download complete After the default installation is complete. When the JDK is installed, you need to set the system environment variables, mainly setting the Java_home environment variables.

Open the Set Environment Variables dialog box, 3-6 see. We are able to use the user variable (top half). Only affects the current user) or system variables (the lower half). affect all users) join the environment variable, in general we set the environment variable in the user variable.

Set Environment Variables dialog box

Our User variables section clicks on the "new" button, then pops up the dialog box, 3-7 See, variable name: java_home, Variable value: C:\Program files\java\jdk1.7.0_21, note the path of the variable value.

Set Java_home

To prevent the environmental impact of installing multiple JDK version numbers, we can also append C:\Program files\java\jdk1.7.0_21\bin paths to the environment variable path. As you can see. Locate the path in the user variable. Double-click to open the Path Change dialog box, for example, with what you see, append C:\Program files\java\jdk1.7.0_21\bin, and note that the path is separated by semicolons.

Environment variable Path Settings dialog box

Path Change dialog box

2. Cocos Code IDE Download and install
The Cocos Code IDE is http://www.cocos2d-x.org/download, as seen in the browser page. Select the appropriate file to download. Now includes the Mac OS x version number and the Windows version number, noting that Windows is divided into 32-bit and 64-bit, as well as the installation (Setup) version number and the compression (Zip) version number.

Download Cocos Code IDE

We downloaded the Cocos-code-ide-win64-1.0.0-rc1.zip decompression version number, unzip to find Cocos code IDE.exe file Execution can start Cocos Code IDE tool, You need to select the workspace folder during the startup process. For example, as you can see, the workspace folder is the Management folder for project. Select OK and then click OKButton, if the folder does not exist then create.

Select Workspace

The Cocos Code IDE details how to use the following sections for further information.


Download and use COCOS2D-JS official case
First to the COCOS2D-JS official site to download the COCOS2D-JS development package, to the book Date Cocos2d-js 3.0 finally published. Cocos2d-js 3.0 Downloads The extracted folder structure, for example, as seen in.

COCOS2D-JS Development Package Content

Suppose we want to perform an official case to get into the build folder. The contents of the build folder. For example, as seen in the. This includes files such as project compilation and execution cases for each platform, where the Cocos2d_jsb_samples.xcodeproj file is the Xcodeproject file for the Cocos2d-js case, cocos2d_jsb_ The Samples.vc2012.sln file is a visual Studio 2012 resolution file under the Cocos2d-js case Win32 platform, and android-build.py is used when compiling and executing cases under the Android platform.

Cocos2d-js Developing package Build folder Contents

We assume that we are learning and developing under window. The general implementation of the Cocos2d_jsb_samples.vc2012.sln solution will be able to.

Suppose we start the Cocos2d_jsb_samples.vc2012.sln solution into, for example, the visual Studio 2012 interface that you see. The Js-testsproject in the COCOS2D-JS is the official case project, we need to check js-testsproject in the right-click menu, select "Set Startup Project" and execute the Debug button in the toolbar above. Execute js-testsproject.

Cocos2d-js case

The first execution needs to be compiled Cocos2d-js time will be a few, after the execution of a Windows Form (as seen), click on a menu item to perform the corresponding demonstration sample (for example, as seen).

Execution case

If you want to view js-tests source code cannot be viewed through Visual Studio 2012, you need to go to the <cocos2d-js Engine folder >\samples\js-tests\src folder, Use the text Editing tool or the Webstorm tool.
In fact, the <cocos2d-js Engine folder >\build folder project file, simply compiling the Cocos2d-x library and making the case based on JSB, we are not able to change the JavaScript code in the case with these project. To be able to view, change, and execute JavaScript code in a case. We are able to configure case project in the Webstorm tool to manage the case.

The detailed procedure is to start Webstorm, in the menu file→new Project from Existing files ..., so that you choose to create Webstormproject from existing files, pop up the dialog box that you see, we select the last option, This option means that our files are local. Webserver has not been configured yet.
Prompts for web files such as JavaScript and HTML. Execution needs to be deployed under a webserver.

Choose a configuration scenario

After the interface is selected well. Click Nextbutton to go to the Set Project root Folder dialog box and see below, select <cocos2d-js Engine folder >. Then press project Rootbutton, set the error, click Finishbutton Complete Setup process, set the successful interface as seen in the following figure.

Set project root folder settings to succeed

We select samples→js-tests→index.html in the Navigation panel and select Debug ' index.html ' in the right-click menu. Then Webstorm will launch Google Chrome, and what we see, we send in the browser now launches Js-tests official case. (More please login, one shop http://www.yhwangpu.com/)

Launch the Google Chrome browser

Using the API documentation
No API documentation is available from the COCOS2D-JS official Download Development Kit, and we use COCOS2D-JS's online API documentation to select COCOS2D-JS through Http://www.cocos2d-x.org/wiki/Reference Online API documentation into the API documentation that you see. We can enter the query criteria in the text box on the left to find what we are interested in, for example, as seen.

COCOS2D-JS Online API Documentation

Search for content in the online API documentation

Perfect build COCOS2D-JS development environment (all)