Build Cocos2d-JS Development Environment

Build Cocos2d-JS Development Environment
Using Cocos2d-JS engines to develop games, the main program code is JavaScript language, therefore, any JavaScript language tools can be developed for Cocos2d-JS game development. We recommend WebStorm and Cocos Code IDE tools in this book.


Build a WebStorm Development Environment
We used WebStorm development tools in the past, it is a very good JavaScript development tools, WebStorm tools can be developed and debugging Based on the Cocos2d-JS engine JavaScript program code, however, testing and debugging can only run on a Web browser.
We have already introduced the WebStorm installation process, but to develop JavaScript programs based on Cocos2d-JS engine, we also need to install Google Chrome browser and JetBrains IDE Support plug-in, Google Chrome browser installation we will not introduce, we will focus on the JetBrains IDE Support plug-in,
JetBrains IDE Support is a plug-in installed on Google Chrome. It is used for debugging with the WebStorm tool. The JetBrains IDE Support plug-in installation process is to enter idea.

Install the JetBrains IDE Support plug-in

After the installation is successful, the "JB" icon will appear behind the address bar of the browser. The following section describes how to use it.


Build a Cocos Code IDE development environment
Cocos Code IDE is developed by the Cocos2d-x team for developing Cocos2d-JS and Cocos2d-x Lua binding game tools, it is based on Eclipse [Eclipse is an open source Code, Java-based scalable development platform. In itself, it is only a framework and a set of services, used to build a development environment through plug-in components. Fortunately, Eclipse comes with a standard plug-in set, including Java Development Kit (JDK ). -- It is derived from Baidu Baike's javascode IDE tool. We need to install JDK or JRE. JDK is a Java Development Kit and JRE is a Java Runtime Environment.
1. Download and install JDK
We will introduce how to download and install JDK, as shown in the following figure: JDK 7 download interface, which is JDK 7.

Download JDK

After the default installation is complete, you need to set the system environment variables after JDK installation is complete, mainly to set the JAVA_HOME environment variables. Open the environment variable Setting dialog box, as shown in 3-6. You can add environment variables in user variables (the upper part only affects the current user) or system variables (the lower part affects all users, in general, we set the environment variable in the user variable.

In the environment variable Setting dialog box, click "new" in the user Variable Section, and a dialog box is displayed, as shown in 3-7. The variable name is JAVA_HOME. The variable value is C: Program FilesJavajdk1.7.0 _ 21, note the path of the variable value.

Set JAVA_HOME

To prevent the impact of multiple JDK versions on the environment, you can append the C: Program FilesJavajdk1.7.0 _ 21in PATH to the environment variable PATH, as shown in. Find PATH in the user variable. Double-click the PATH modification dialog box, as shown in. append C: Program FilesJavajdk1.7.0 _ 21in. Note that the PATH is separated by semicolons.

Environment Variable PATH Setting Dialog Box
PATH modification dialog box

2. Download and install Cocos Code IDE
Cocos Code IDE is http://www.cocos2d-x.org/download, on the page of the browser. Select an appropriate file download, which currently includes Mac OS X and Windows. Note that Windows is divided into 32-bit and 64-bit versions, as well as Setup and zip) version.

Download Cocos Code idewe downloaded the cocos-code-ide-win64-1.0.0-rc1.zip decompressed version. After decompression, find the Cocos Code IDE.exe file and run it to start the Cocos Code IDE tool. During the startup process, select the Workspace directory, as shown in, the Workspace directory is the project management directory. After selecting it, click OK. If the directory does not exist, it is created.



The following section describes how to use WorkspaceCocos Code IDE.


Download and use the Cocos2d-JS official case
First go to The Cocos2d-JS official website to download the Cocos2d-JS Development Kit, to the book into the book until Cocos2d-JS 3.0 final version has been released. Cocos2d-JS 3.0 downloads the unzipped directory structure, as shown in.

Cocos2d-JS development kit content

If you want to run the official case, you can go to the build directory and the content in the build directory, as shown in. This contains the project files for compiling and running the case on various platforms, the cocos2d_jsb_samples.xcodeproj file is the Xcode project file for the Cocos2d-JS case, the cocos2d_jsb_samples.vc2012.sln file is the Visual Studio 2012 solution file for the Cocos2d-JS case Win32 platform, and the android-build.py is used for compiling and running cases under the Android.

Cocos2d-JS Development Kit build directory content if we learn and develop in the Window, General run cocos2d_jsb_samples.vc2012.sln solution on it. If we start the cocos2d_jsb_samples.vc2012.sln solution to enter, as shown in the Visual Studio 2012 interface, where the js-tests Project is a case project officially provided by the Cocos2d-JS, we need to select the js-tests project, right-click the project, select "set startup project", and then run the debug button in the toolbar above to run the js-tests project.



The first run of the Cocos2d-JS case requires a longer Cocos2d-JS time to compile, and then you will see a Windows window (as shown in ), click a menu item to run the example, as shown in ).

If you want to view the js-tests source code Through Visual Studio 2012, you need Use the text editing tool or WebStorm tool under the samplesjs-testssrc directory.
In fact The uild Directory project files, just compile the Cocos2d-x library and make the case run in JSB-based mode, we cannot use these projects to modify the JavaScript code in the case. To view, modify, and run the JavaScript code in the case, we can configure the case project and manage the case in the WebStorm tool. The specific process is to start WebStorm, in the menu File → New Project from Existing Files ..., this option is used to create a WebStorm project from an existing file. In the pop-up dialog box, select the last option, which means that the file is local and the Web server has not been configured.
Prompts JavaScript, HTML, and other Web files to be deployed on a Web server.



Select Configuration Scheme

After selecting the project root directory, click Next to enter the set project root directory dialog box, as shown in, select And then press the Project Root button. After setting the settings correctly, click Finish to complete the setting process. The setting is successful, as shown in the following figure.


Set the project root directory
Set successfully

On the navigation panel, select samplesjavasjs-testsjavasindex.html, right-click the menu and select Debug 'index.html '. Then WebStorm starts Google Chrome. We found that js-tests was started in the browser.

Start Google Chrome

API reference
From the Cocos2d-JS official download Development Kit does not have API Documentation, we use Cocos2d-JS official Online API Documentation, you can choose cocos2d-js Online API Documentation through http://www.cocos2d-x.org/wiki/referenceto go to Online API Documentation ,. You can enter query conditions in the text box on the left to find the content you are interested in, as shown in.

Cocos2d-JS online API documentation