"One of COCOS2D-HTML5 development" new HTML5 Project and brief exposition and cocos2d/x engine relationship

Really is a period of time did not write Bo, this period of time, what happened really quite many, in addition oneself also idle to do some of their favorite things, mainly do is based on Mac System Cocoa framework of various editor bar. (By the start of this year, I also had my second book, "Zero-based iOS game programming-cocos2d-x and cocos2d Engine game development")

Hundred Cattle Information Technology Bainiu.ltd organized and published in the blog Park

Nonsense, and recently studied the next COCOS2D-HTML5 related engines, in fact, said html5,3, 4 years ago Himi contacted, at that time the HTML5 Canvas impressed me very deeply, but no matter at the moment or now for the majority of HTML5 companies are still in the waiting state, I am no exception, there is no doubt that during the waiting period also has the engine based on HTML5, example of the current COCOS2D-HTML5, and later based on Untiy3d HTML5, this sooner or later things. Overall, HTML5 is a trend, just a matter of time.

So this is a brief account of COCOS2D-HTML5 's new creation of a project process and the relationship with cocos2d/x.

First step: Download the COCOS2D-HTML5 engine first: Http://cocos2d-x.googlecode.com/files/Cocos2d-html5-v2.1.5.zip

The current Himi download is the latest 2.1.5 version.

The second step: Unzip the engine package, then the directory is as follows:

Step three: Simply take the Hellohtml5world project as an example, we can run this sample project by opening the index.html in the Hellohtml5world folder directly using the browser.

The effect of running into the browser is as follows:

Run effect as above, actually this is a mistake, do not worry first. (Reason only for resource preparation failure, follow-up instructions)

Let's take a look at the whole project structure first: (Himi used textmate Open)

Brief description:

1. Res Resource Storage Directory

2. src JS Script storage directory (our own project source directory)

3. Build.xml: Files used to compile the cocos2d engine into JS script form

4. Cocos2d.js: Configuration file for parameter setting of the COCOS2D engine

5. index.html: Configuration file for the current view

6. Main.js: Main program entrance

So many readers wonder how to do it?

In fact, it is very simple, we can understand that the COCOS2D-HTML5 engine is just the COCOS2D engine framework directly mapped into the HTML5 API implementation process, we write in the JS language cocos2d engine code form, Complete the Cocos2d engine form code in charge of the entire HTML5 project. We can write directly according to the code form of writing cocos2d/x, but the language requires JS format.

So how to create a new HTML5 project:

The first step: Copy the Hellohtml5world folder in the COCOS2D-HTML5 engine directory directly, then the file name can be customized.

The second step: Copy the Cocos2d-html5-v2.1.5.min.js file under the Lib folder under the engine directory to the project folder of your first step.

Cocos2d-html5-v2.1.5.min.js file function: Will cocos2d engine in the form of HTML5 API Map JS Library for our project to use, if you do not copy this project into your project, you can not run.

Everyone wondered why the Hellohtml5world under the engine was not needed under the project? In fact, this example project uses the relative engine directory path under each engine class mapping JS to use. Such as:

And why does this cocos2d-html5-v2.1.5.min.js file have a min? This is actually the former cocos2d-html5-v2.1.5.jsb.js, simple to understand is to do a compression of the JS code, the Code of Table spaces and so on are removed, saving the file size of a form.

The third step: directly using the browser to run the index.html under the project.

Of course, the effect of running at this time, such as the Hellohtml5world project, is the same, because the resource load receives browser restrictions, which prevents the project from starting properly.

This problem is actually a browser to prevent fishing, a kind of protection against Ajax, and the COCOS2D-HTML5 engine request pictures in the way of using AJAX.

So we can solve this problem in two ways:

1. Install the Web server locally, Apache, etc., and publish the project on the Web server.

2. Use Firefox directly for debugging, there is no limit to the Firefox browser.

The following are the results of the operation of the Firefox browser:

OK, everything is normal, the rest will be handed over to everyone.

"One of COCOS2D-HTML5 development" new HTML5 Project and brief exposition and cocos2d/x engine relationship