Skip to content

How to create a phonegap cocos html5 (Tutorial 1 Google Chrom Browser)

Jump to bottom Edit New page
yuye.liu edited this page Jan 15, 2014 · 1 revision

Creating a "phonegap" cocosHtml5 project you need below environment:

  1. Download:

cocos2d-html5

  1. Download:

nodejs version:v0.10.24

  1. Phonegap:

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

To:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="target-densitydpi=device-dpi,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        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);
        }
    </style>
</head>
<body id="tbody" style="padding:0; margin: 0; background: #000;">
<canvas id="gameCanvas" width="800" height="450"></canvas>
<div id="testabc" style="position: absolute;top: 100px;left: 200px;">
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="cocos2d-html5/HelloHTML5World/cocos2d.js"></script>
</body>
</html>

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

Part1

"res/CloseNormal.png",
"res/CloseSelected.png",

To

s_CloseNormal,
s_CloseSelected,
```javascript

**Part2**

Changing  line 74

```javascript
this.sprite = cc.Sprite.create("res/HelloWorld.png");
```javascript

To:

```javascript
this.sprite = cc.Sprite.create(s_HelloWorld);
```javascript
Add a custom footer
Add a custom sidebar
Clone this wiki locally