How to use phonegap adding origin Html Wights and WebSdk for cocos2d-x (Tutorial 1 ) ……(Tutorial by YUYE)

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);