COCOS2D-HTML5 first day of getting started

Although in the role of H5 as a new employer, but has not been a good study of canvas. The first two days to do a download app page to the background, statistics Android,ios and other OS models click and Download, and then the third day to start for a RUB award page to do dynamic effect, the way a variety of requirements constantly change, testing also feedback various compatibility. Now into the job also only 10 days, has probably dabbled in a few canvas related books, this period of interest in the game and re-ignited, once, once, elective game development, because the threshold is too high, give up, and then become the page Aberdeen.

Because of the canvas and game related books more, this period of free time in the study H5 game, Lufylegend,easeljs, these two engine research relatively multi-point, are class A3, before the record is not written down, afraid later want to turn over records can not find, a little regret. Today contacted COCOS2D-HTML5, one feel can not repeat, and secondly this engine and C + + still have diqin relationship, let to make up once regret as far as possible to learn, so write this article.

First step: Download engine

http://www.cocos2d-x.org/download Enter this website COCO2D-HTML5 already and COCO2D-JS integration, direct click Download Coco2d-js v3.1 version, of course, you can choose some files, has always felt as a novice standard is the entire package.

Decompression Coco2d-js v3.1 engine into the frameworks folder, open the Cocos2d-html5 file, there is no Hellohtml5world directory, there is only one template, then based on this model to learn it!

Step Two: Provide server support

Using Google Chrome to open index.html, found a dark, F12 after the console appeared three errors

Obviously two cross-domain issues, this problem to solve, to a server support, as the front-end engineer, node and express should be the first choice, install these two things are not discussed, so directly open the command line, enter the E:\gitwork\game;

Express HELLOCOCOHTML5

Successfully entered the HELLOCOCOHTML5 directory with project creation

Open Package.json

Replace the dependent "Jade": "*" with "Ejs": "*"

And then into App.js.

put var Ejs = require (' Ejs '); add in

App.set (' View engine ', ' Jade '); Replace with App.engine ('. html ', ejs.__express); App.set (' View engine ', ' html ');

Explain this: Use the Ejs template here, and then let the Ejs template file use the file with the extension HTML.

In the DOS window's Package.json directory, type NPM install to download Express and Ejs package files (type the entire line to put the note//"Jade": "*" removed, NPM has strict syntax requirements for JSON)

Server Setup Complete

Step Three: Deploy COCOS2D-HTML5 to the server

Copy the Frameworks folder of the first step to the public folder under the server root directory

Then copy the index.html from the folder inside the template directory to the view directory under the server.

Then modify the JS path introduced by the inde.html directory

Now the index and server directory structure looks like this

After the change, refresh the inde.html page, then there are 404

According to the prompt click on the browser error, positioning to the Ccboot.js introduced Project.js path, in the file Ccboot.js introduced Project.js directory to change to frameworks/cocos2d-html5/template/ Project.json Then

Into the project.js Enginedir and jslist path also changed, and finally the template directory under the Main.js the introduction of the resource file path also added frameworks/cocos2d-html5/template/

So far so good look like this

Suddenly found to change the reference path good egg pain, want not to toss with webstorm or deploy a tomcat, but because of the last time this IED suddenly shut down, my more than 1000 lines of code physics garbled, elder brother estimate now has not abandoned webstorm, although compared weight, But bringing your own server is a good choice.

Fourth step: Hello World

Open Browser Refresh index.html page

Hello World finally came out of the broken sleep!

COCOS2D-HTML5 first day of getting started