Setting up Cocos2d-HTML5 Development Environment
In this documentation, I will show you how to setup a cocos2d-html5 development environment on MacOS 10.9 -- Yeah! The Maverics.
To follow this tutorials, you should be familiar with the software package installation process of MacOS.
Don't worry, the process is deadly simple.
Most of the time, the process is something like this:
Download the DMG.
Double click to open it.
Drag and drop the xxx.app to your /Application directory.
In this documentation, I will omit the every details of each software package's installation process.
Download the required software packages
Download Cocos2d-html5 v2.2 from the official website of Cocos2d-x. Here is the Link .After you downloaded the Cocos2d-html v2.2. You should unzip it to a proper location. In our case, I unzip it at ~/workspace/Cocos2d-html5.The ~ symbol represents your home directory path, which in our case is /Users/guanghui.
You can also get the cutting edge version of Cocos2d-html5 through github. Here is the cocos2d-html5 github repository .The active development work are done in develop branch.
- Download and install Chrome 30 and the JetBrains-IDE-support extension.
Don't try to get the latest beta version of Chrome. Some WebGL APIs has changed and you will suffer the API change problems.
Since the current stable release of Chrome is 31.0.1650.57. But it doesn't work well with Cocos2d-html5-v2.2. If you do want to use this version due to some mandatory reasons, you should refer to this post for more information.In the near future, the Cocos2d-html5 team will release a new version and at that time you don't need to hack the source code any more to work with Chrome 31.
All right, let's see how to configure WebStorm 7.1 to develop and debug our Cocos2d-html5 applications.
Configure WebStorm to work with Cocos2d-html5
At first, you should launch WebStorm 7. If it is your first time to launch WebStorm, it will ask you to choose your personal preference like choosing key mappings.
Here is my screenshot of launching WebStorm:
Note: The section Recent Project should be empty if it is your first time to run WebStorm.
Now, Let's try Cocos2d-html5 within WebStorm.
Create a project from Cocos2d-html5
As we can see from the above picture, you should choose Create New Project from Existing Files
Then it will prompt you with the following options:
Choose Source files are in a local directory, no Web server is yet configured and click Next to continue.
At this step, you should expand the directory tree to specify where you put your Cocos2d-html5 source code. After you have specified the correct directory, note that the Finish button is still gray.
Now we should set the directory as Project Root. Click the Project Root button and the Finish button will be activate.
Congratulations! You have successfully configured the Cocos2d-html5 project for WebStorm.
Play with Cocos2d-html5
Since you have added the entire Cocos2d-html5 directory to WebStorm 7. WebStorm will parse all the Cocos2d-html5 source code. If you open HelloHTML5World/src/myApp.js, you can obtain the ability of accurate syntax completion.
Here is the instructions:
(Optional) Add a third party library for parsing
Click Settings to launch your project settings dialog:
After clicking the Settings menu, it will popup the followings dialog:
Now it's time for us to debugging Cocos2d-html5 code.
Connect WebStorm to Chrome with JB chrome extensions
Right click the index.html under ~/Github/Cocos2d-html5 and choose Debug 'index.html':
2. Now it will open your Chrome automatically. If you put your mouse above the JB plugin, it will show you that it has been connected with WebStrom 7.02:
Note: This is step is very straightforward, once you have installed the plugin--"JetBrains IDE support". When you click the debug menu in WebStorm, it will connect to chrome automatically. How convenience it is! You can also click the JB icon in the right side of Chrome's side bar and it will bring you to the WebStorm IDE immediately.
Back to WebStorm and double click HelloHTML5World/src/myApp.js to view the source code.
Set the break point. Right click the left sidebar of myApp.js source code viewport.
Start debugging. Open your chrome browser and click HelloHTML5World link to open the sample project. Then back to your WebStorm by clicking JB icon. And the program will stop at the break point we have just set. And the editor will switch to Debug View:
Now you can do debugging things like step out, step into, step over, continue executing etc.
In this tutorial, I have shown you the basic steps to configure Cocos2d-html5 to work with WebStorm 7, including configuring syntax aware auto complete and debugging. The process is quite simple and straightforward. If you have any questions or suggestion of this tutorials, please let us know. we will appreciate your contribution.
Where to go from here
In the next tutorial, I will show you how to setup a new Cocos2d-html5 project. And we will walk through the built-in tests and sample games of Cocos2d-html5.