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!
Cocos2d-html5
Cocos2d-html5 is an open-source web 2D game framework, released under MIT License. Its a HTML5 version of Cocos2d-x project. On top of the framework provided by Cocos2d-html5, games can be written in Javascript, using API that is completely compatible with that Cocos2d-x javascript binding. Cocos2d-html5 project can be easily run on browsers which supports HTML5. Cocos2d-html5 also supports running game code in “Cocos2d javascript binding” without or with little modification.
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/
WebStorm is a powerful and intelligent IDE that gives you the best coding assistance for Javascript, HTML and CSS.
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.
Hello World
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)