Getting acquainted with the project structure
The main backbone files required for any Cocos2d-html5 game are the index.html, main.js, and cocos2d.js files. These are exactly the files you will see in your project's root directory. In addition to these three files, you can also see a file called build.xml and another file called cocos2d-jsb.js. Take a look at the following table for a brief description of what these files are responsible for:
|
File |
Description |
|---|---|
|
|
This is the main HTML page that will be displayed on any device's browser. This is where your game will run. This is also the file you must double-click on in order to launch the game in a browser. |
|
|
This file could be compared to the |
|
|
This file is the main configuration file and is the only source file that gets linked to your HTML page. This file is responsible for invoking the engine's main loader. Any sources that go into your game need to be listed in this file. |
|
|
This JavaScript source file is required to boot JavaScript bindings and is not required for Cocos2d-html5. You could delete this file if you don't intend on using JavaScript bindings. |
|
|
You can compress your entire game's source code into a single file using the Google Closure Compiler that is provided under the |
|
|
This file contains a JSON object that lists all the resources that you will need to run the game. You must ensure that each and every resource (image, plist, font, audio, and so on) is included in this file. Not doing so will most certainly crash your application. The engine will then load all the files listed in this file into the browser's memory. Therefore, you will still need to load the textures, sprite frames and animations into their respective caches. |
Now that we have a basic understanding of the structure of a typical Cocos2d-html5 project, it is time to create our very first scene in ColourSmash.
