Run Google Chrom Browser
Creating origin html5 Wights can rich the cocos’s GUI.
(ie: cocos’s Editbox GUI can not do line wrapping. but if you add html’s textArea, it can easy to fix these problems)
and use one sdk for crossplatform.
(i.e:“facebook”,“visa card pay”)
You can download the demo for this tutorial at
[[https://github.com/yuye-liu/phonegap-cocos-html5]]
To create a “phonegap” cocosHtml5 project you need below environment:
>1. cocos2d-html5:
[[https://github.com/cocos2d/cocos2d-html5]]
>2. nodejs version:v0.10.24:
[[http://nodejs.org/download/]]
>3. Phonegap:
h1.You should install nodejs and use command line to install it.
sudo npm install -g phonegap
Google Chrom Browser
Step1:
Creating a project
$ phonegap create youAppName
h1.Step2:
Adding cocos2d-html5 project below you project this path:
/Users/UserName/phonegap-cocos-html5/www
Step3:
Modifying 7 files under “phonegap-cocos-html5Test/www/” in oder to connect phonegap project and “cocos2d-html5”
>1. index.html
>2. cocos2d-html5/cocos2d/jsloader.js
>3. cocos2d-html5/HelloHTML5World/cocos2d.js
>4. cocos2d-html5/HelloHTML5World/index.html
>5. cocos2d-html5/HelloHTML5World/main.js
>6. cocos2d-html5/HelloHTML5World/resource.js
>7. cocos2d-html5/HelloHTML5World/src/myApp.js
index.html
Changing code
Hello World
PhoneGap
Connecting to Device
Device is Ready
app.initialize();
To:
Cocos2d-html5 Hello World test
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
cocos2d/jsloader.js
Modifying
que.push('main.js');
To
que.push('cocos2d-html5/HelloHTML5World/main.js');
HelloHTML5World/cocos2d.js
Changing 38-43 lines code
engineDir:'../cocos2d/',
//SingleEngineFile:'',
appFiles:[
'src/resource.js',
'src/myApp.js'//add your own files in order here
]
To
engineDir:'cocos2d-html5/cocos2d/',
//SingleEngineFile:'',
appFiles:[
'cocos2d-html5/HelloHTML5World/src/resource.js',
'cocos2d-html5/HelloHTML5World/src/myApp.js'//add your own files in order here
]
HelloHTML5World/index.html
Deleting this file.
HelloHTML5World/main.js
Commented out below code in order to stoping screen to change scale
cc.EGLView.getInstance()._resizeWithBrowserSize(true);
* HelloHTML5World/resource.js*
Changing
var s_HelloWorld = "res/HelloWorld.png";
var s_CloseNormal = "res/CloseNormal.png";
var s_CloseSelected = "res/CloseSelected.png";
var rootPath = "cocos2d-html5/HelloHTML5World/";
var s_HelloWorld = rootPath+"res/HelloWorld.png";
var s_CloseNormal = rootPath+"res/CloseNormal.png";
var s_CloseSelected = rootPath+"res/CloseSelected.png";
HelloHTML5World/src/myApp.js
Changing line 48-49
h1.Part1
"res/CloseNormal.png",
"res/CloseSelected.png",
To
s_CloseNormal,
s_CloseSelected,
h1.Part2
Changing line 74
this.sprite = cc.Sprite.create("res/HelloWorld.png");
To:
this.sprite = cc.Sprite.create(s_HelloWorld);