Note from Ryeeeeee:
This tutorial series is for beginners and will walk you through the process of making a simple game with cocos2d-html5. Don’t worry if you’ve never used cocos2d-html5 before. And you don’t need any prior experience, as I’ll walk through the process step by step.
So let’s get started!
Setting Up Development Environment
Download and Install Cocos2d-html5
You can download Cocos2d-html5 from:http://www.cocos2d-x.org/download
Download Cocos2d-html5 and unzip it, you will get the following files:
Download and Install WebStorm
You can download WebStorm from:http://www.jetbrains.com/webstorm/
Download and Install Google Chrome
You can download Google Chrome from:https://www.google.com/intl/en/chrome/browser/
Google Chrome supports upcoming HTML5 standard and related specifications well.
Next, you should install JetBrains IDE Support for Google Chrome. Open https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji in Google Chrome, and install the plugin.
By tradition, We create a “Hello World” project with Cocos2d-html5.
Open WebStorm, select “Create New Project from Existing Files”:
In the new window, select “Source files are in a local directory, no Web server is yet configured”:
In the new window, select the directory that you unzip Cocos2d-html5 in. And Check “Project Root”. Then click “Finish”:
Now, we can see a directory named “HelloHTML5World” in left side. This is the “Hello World” program that Cocos2d-html5 provides.
Next, we open “index.html” and move mouse to the top left corner. Select Google Chrome and the “Hello World” program will be open in Google Chrome.
And if succeed, you will see this:
html5-struct.jpeg (59.5 KB)
jbplugin.jpeg (666.2 KB)
helloworld.jpeg (208.0 KB)
createnewproject.jpeg (205.7 KB)
choosescenario.jpeg (318.5 KB)
choosedirectory.jpeg (281.1 KB)
helloHTML5world.jpeg (102.7 KB)
openinchrome.jpeg (310.2 KB)