Cocos2d-html5 template Analysis

Structure Overview
Js files
Src/myApp. js
Src/resource. js
Cocos2d. js
Cocos2d-jsb.js
Main. js
Other files
Build. xml
Index.html

--------------------------------------------------------------------------------

Implementation
Myapp. js
Var MyLayer = cc. Layer. extend (
{
IsMouseDown: false,
HelloImg: null,
HelloLabel: null,
Circle: null,
Sprite: null,

Init: function ()
{

//////////////////////////////
// 1. super init first
This. _ super ();

/////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// You may modify it.
// Ask director the window size
Var size = cc. Director. getInstance (). getWinSize ();

// Add a "close" icon to exit the progress. it's an autorelease object
Var closeItem = cc. MenuItemImage. create (
S_CloseNormal,
S_CloseSelected,
Function ()
{
Cc. log ("close ");
}, This );
CloseItem. setAnchorPoint (cc. p (0.5, 0.5 ));

Var menu = cc. Menu. create (closeItem );
Menu. setPosition (cc. p (0, 0 ));
This. addChild (menu, 1 );
CloseItem. setPosition (cc. p (size. width-20, 20 ));

/////////////////////////////
// 3. add your codes below...
// Add a label shows "Hello World"
// Create and initialize a label
This. helloLabel = cc. LabelTTF. create ("Hello World", "Impact", 38 );
// Position the label on the center of the screen
This. helloLabel. setPosition (cc. p (size. width/2, size. height-40 ));
// Add the label as a child to this layer
This. addChild (this. helloLabel, 5 );

// Add "Helloworld" splash screen"
This. sprite = cc. Sprite. create (s_HelloWorld );
This. sprite. setAnchorPoint (cc. p (0.5, 0.5 ));
This. sprite. setPosition (cc. p (size. width/2, size. height/2 ));
This. addChild (this. sprite, 0 );
}
}
);

Var MyScene = cc. Scene. extend (
{
OnEnter: function ()
{
This. _ super ();
Var layer = new MyLayer ();
This. addChild (layer );
Layer. init ();
}
}
);
 

Resource. js
Var s_HelloWorld = "HelloWorld.png ";
Var s_CloseNormal = "CloseNormal.png ";
Var s_CloseSelected = "CloseSelected.png ";

Var g_ressources = [
// Image
{
Src: s_HelloWorld
},
{
Src: s_CloseNormal
},
{
Src: s_CloseSelected
}

// Plist

// Fnt

// Tmx

// Bgm

// Effect
];
 

Cocos2d. js
(Function ()
{
Var d = document;
Var c =
{
COCOS2D_DEBUG: 2, // 0 to turn debug off, 1 for basic debug, and 2 for full debug
Box2d: false,
Chipmunk: false,
ShowFPS: true,
LoadExtension: false,
FrameRate: 60,
Tag: 'gamecanca', // the dom element to run cocos2d on
EngineDir: '../cocos2d /',
// SingleEngineFile :'',
AppFiles :[
'Src/resource. js ',
'Src/myApp. js' // add your own files in order here
]
};

If (! D. createElement ('canvas '). getContext)
{
Var s = d. createElement ('div ');
S. innerHTML = ''<P> Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier. Click the logo to download. </p>' +
'<A href = "http://www.google.com/chrome" target = "_ blank"> </a> ';
Var p = d. getElementById (c. tag). parentNode;
P. style. background = 'none ';
P. style. border = 'none ';
P. insertBefore (s );

D. body. style. background = '# ffff ';
Return;
}

Window. addEventListener ('domainloaded', function ()
{
// First load engine file if specified
Var s = d. createElement ('script ');
/******** Delete this section if you have packed all files into one *******/
If (c. SingleEngineFile &&! C. engineDir)
{
S. src = c. SingleEngineFile;
}
Else if (c. engineDir &&! C. SingleEngineFile)
{
S. src = c. engineDir + 'Platform/jsloader. js ';
}
Else
{
Alert ('you must specify either the single engine file OR the engine directory in "cocos2d. js "');
}
/******** Delete this section if you have packed all files into one *******/

// S. src = 'mytemplate. js'; // IMPORTANT: Un-comment this line if you have packed all files into one

D. body. appendChild (s );
Document. ccConfig = c;
S. id = 'cocos2d-html5 ';
// Else if single file specified, load singlefile
}
);
}
)();
 

Main. js
Var cocos2dApp = cc. Application. extend (
{
Config: document ['ccconfig'],
Ctor: function (scene)
{
This. _ super ();
This. startScene = scene;
Cc. COCOS2D_DEBUG = this. config ['cocos2d _ debug'];
Cc. initDebugSetting ();
Cc. setup (this. config ['tag']);
Cc. AppController. Modify AppController (). didfinishlaunchingwitexceptions ();
},
ApplicationDidFinishLaunching: function ()
{
// Initialize director
Var director = cc. Director. getInstance ();

Var screenSize = cc. EGLView. getInstance (). getFrameSize ();
Var resourceSize = http. size (800,450 );
Var designSize = cc. size (800,450 );

Var searchPaths = [];
Var resDirOrders = [];

SearchPaths. push ("res ");
Cc. FileUtils. getInstance (). setSearchPaths (searchPaths );

Var platform = cc. Application. getInstance (). getTargetPlatform ();
If (platform = cc. TARGET_PLATFORM.MOBILE_BROWSER)
{
If (screenSize. height> 450)
{
ResDirOrders. push ("HD ");
}
Else
{
ResourceSize = cc. size (400,225 );
DesignSize = cc. size (400,225 );
ResDirOrders. push ("Normal ");
}
}
Else if (platform = cc. TARGET_PLATFORM.PC_BROWSER)
{
ResDirOrders. push ("HD ");
}

Cc. FileUtils. getInstance (). setSearchResolutionsOrder (resDirOrders );

Director. setContentScaleFactor (resourceSize. width/designSize. width );

Cc. EGLView. getInstance (). setDesignResolutionSize (designSize. width, designSize. height, cc. RESOLUTION_POLICY.SHOW_ALL );

// Turn on display FPS
Director. setDisplayStats (this. config ['showfps']);

// Set FPS. the default value is 1.0/60 if you don't call this
Director. setAnimationInterval (1.0/this. config ['framerate']);

// Load resources
Cc. LoaderScene. preload (g_ressources, function ()
{
Director. replaceScene (new this. startScene ());
}, This );

Return true;
}
}
);

Var myApp = new cocos2dApp (MyScene );

 

 

Notes

After adding resources, you must manually add the corresponding code in resource. js.

When adding a js file, you need to add the corresponding code to the appfiles array in cocos2d. js.

A Layer is implemented in the myApp. js file, and the Layer is called in main. js and added to the startup Scene.

In main. js, set the startup scene, whether to display FPS, FrameRate, and ScreenSize.