Cross Platform Game Development Tutorials

Tuesday, September 29, 2015

Snake Game Using Cocos2d-x HTML5 - PART 2

To keep the tutorial short as possible , we will not learn the Cocos2d-x engine components .
i planing to write about the engine infrastructure and also its API's in the Future.
Cocos2d-x is huge engine so don't expect to know all , but you will learn enough to get started.

1. Change the cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\public_html\index.html file
So the game canvas will be in proportional size and not stretched all over .
index.html:

NetBeansProjects\SnakeJS\public_html\index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SnakeJS</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="width=480, initial-scale=1">
    <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 style="text-align: center; padding:0; margin: 0; background: #FFFFFF;">
<script src="res/loading.js"></script>
<div style="display:inline-block;width:auto; margin: 0 auto; background: #000; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="800" height="450"></canvas>
</div>
 
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

2. Open the file \NetBeansProjects\SnakeJS\public_html\src\app.js
this file will be the game logic starting point .
the file start our main game Scene and Layer , the Layer will hold our game Sprites
they all have Parent child hierarchy relationship to read more about it here:
http://www.cocos2d-x.org/wiki/Scene_Graph

lts clean the file from the starter code the console generated for us :

NetBeansProjects\SnakeJS\public_html\src\app.js

var SnakeJSGameLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
       
       this._super();
       var size = cc.winSize;

       
        return true;
    }
});

var SnakeJSScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

3. Do not rush to test your code yet,first we need to change the file: NetBeansProjects\SnakeJS\public_html\main.js

Notice we changed the SnakeJSScene line 13 and SnakeJSGameLayer line 1 variables
We need now to change it also in the main.js file :

NetBeansProjects\SnakeJS\public_html\main.js

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, disabled by default to improve performance
    cc.view.enableRetina(false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new SnakeJSScene());
    }, this);
};
cc.game.run();

The change is in line 15 , the main.js is our game initializator/ bootstrapper/ dispatcher class,
It responsible to how the screen /view size will be and which pre game configuration to set and more
None game logic related stuff .
Now go ahead and press the green play button in NetBeans and see what you got.
Should look like this :

Yep , empty Scene.

4. the game resources are configured in special file called : SnakeJS\public_html\src\resource.js
it contains the image names and paths:

var res = {
    snakecell_png : "res/snakecell.png",
    snakefood_png : "res/snakefood.png",
    blank_png : "res/blank.png"
   
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

We are ready to start programming our "SnakeJS" game logic in the next tutorial :
Snake Game Using Cocos2d-x HTML5 - PART 3

Play the final SnakeJS game
http://meiry.github.io/SnakeJS-html5/publish/html5/
The SnakeJS source code:
https://github.com/meiry/SnakeJS-html5

Snake Game Using Cocos2d-x HTML5 - PART 1

The purpose of this tutorial series is to learn how to create true cross platform 2d game
That works with the same ( 80% - 90% ) source code on mobile web and desktop using Javascript .
And NOT using web browser wrappers components.
First is for the WEB then to win32 Desktop , iOS and android.
The framework is Cocos2d-x version 3.8.1.
The IDE is NetBeans for the web . you can learn why from my previous tutorial .

Lets start from the end and see the final result AKA the finished game , don't expect to see full blown game , remember we are going to learn only the principles ,
The SnakeJS:
http://meiry.github.io/SnakeJS-html5/publish/html5/

The SnakeJS source code:
https://github.com/meiry/SnakeJS-html5

As all programming stuff when first learned there is "Hello World++" project .
In GameDev there are several , for example build : flappy bird , Breakout or Snake.
For this tutorial i will choose Snake , as tribute to the old Nokia 9010.

1.Create new JavaScript project with Cocos2d-x console
The syntax for creating new js project looks like this :

 cocos new -p com.snakeJS.game -l js -d d:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\Projects SnakeJS

2 .Create new HTML 5 project in NetBeans IDE name it "SnakeJS"
If you like to recall how to setup the project , please refer to this tutorial .
The directory structure should look like this :
I created this "SnakeJS" under NetBeansProjects directory
And the path structure is :
D:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\public_html
it should look like this:

3.Now quickly copy the relevant files from the new project we create with cocos2d-x
console to the NetBeans new project under the
D:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\public_html\ folder.

In the Framework folder you should copy only the cocos2d-html5 folder and it sub folders

In NetBeans it should be look like this :

Press "Run Project" (the green Play button)
Your Chrome should start with a new Tab loading the Cocos2d-x HTML5 starter project

We are ready to start programming our "SnakeJS" web game in the next post :
Snake Game Using Cocos2d-x HTML5-PART 2

Play the final SnakeJS game:
http://meiry.github.io/SnakeJS-html5/publish/html5/
The SnakeJS source code:
https://github.com/meiry/SnakeJS-html5

Monday, August 31, 2015

Debug Cocos2d-x HTML5 Project using NetBeans IDE and Chrome browser in 10 easy steps.

For more flexible method to debug JavaScript in general and in our case Cocos2d-x JS/HTML5
In this tutorial I will use the Netbeans IDE which is open source java/c++ IDE which have also
Great JavaScript editor / debugger version which is very cool and the Chrome browser.
You can :
Function/variable jumping to definition
Auto complete code that recognize all Cocos2d-x-js library to speed up the editing process
Code refactor.
Unit tests.
And many many more ...

1.Download the Netbeans IDE the HTML5 & PHP version

once downloaded install it

2. Open Netbeans and create new HTML 5 empty project .
Go to File -> New project ,
you will see "New Project " popup windows in the Choose Project on the right select
in categories : HTML5 and in Projects: HTML5 Application

Press Next

3. In the next window give your application a name , as we going to create new folder
which contain cocos2d-x js-tests replica
I named my project "Cocos2d-test-html5" i will use this project name as reference in the tutorial .
and gave the path to new folder i named : "NetBeansProjects" i will use this directory name as reference in the tutorial .

Press Finish

4. Now you will see new project created , delete the index.html file,
select the index.html in the Projects Tab in the left project tree window and with mouse right click in the opened menu select and click "delete" , in the confirmation windows press Yes.

5. Now we will create the cocos2d-x cpp-tests directory tree in our new "NetBeansProjects" HTML5 project

Go in to the new created "NetBeansProjects" folder and open the "public_html" folder

so now you are in : G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\

6 . Go in to cocos2d-x folder in my example it is :

G:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\

And copy those directory's

```

g:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\web

g:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\tests\js-tests\

g:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\tests\cpp-tests\Resources\

```

Into our NetBeans HTML5 project "public_html" directory.

Which is this :

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\

So now your directory structure will look like this :

```

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\web

AUTHORS.txt

Base64Images.js

bower.json

CCBoot.js

CCDebugger.js

CHANGELOG.txt

cocos2d

extensions

external

jsb_apis.js

licenses

moduleConfig.json

README.mdown

template

tools

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\tests

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\tests\cpp-tests\Resources\

ActionTimeline

animations

audio

background.caf

background.mp3

background.ogg

background.wav

background-music-aac.mp3

background-music-aac.wav

ccb

ccs-res

CocosBuilderExample.ccbproj

CocosBuilderExample.ccbresourcelog

cocosvideo.mp4

components

configs

effect1.raw

effect1.wav

effect2.mp3

effect2.ogg

extensions

fileLookup.plist

fonts

fps_images.png

Hello.png

Images

Manifests

Materials

Misc

music.mid

NavMesh

Particle3D

Particles

pew-pew-lei.wav

Presentation

Shaders

Shaders3D

spine

Sprite3DTest

TerrainTest

Test.html

TileMaps

zwoptex

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\tests\js-tests

index.html

main.js

mobilePage.html

New Folder

project

project.json

resjs

src

TestCase.html

```

Go into NetBeans IDE it should refresh automatically and you should see your new project :

7. In NetBeans still in the project window right click on the root project node , and click properties

8 . In the popup window that opened ,

In the left windows "Categories" click Run (A)

In the right section click the "Browse" button (B)

To select the "js-tests" index.html chose the index.html and click the "Select File" button (C)

Press "Ok" to confirm .

9 . To complete the Debugging tool chain we need to install Chrome NetBeans extension called :

NetBeans Connector

10 . The Final step!

got to NetBeans click the Green Play button AKA "Run Project" button ( or F6 ) and it will open new tab in Chrome with the Familiar cocos2d-x project list window .

Now you can debug the project just set break point in main.js which is located here :

```

G:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\Cocos2d-test-html5\public_html\tests\js-tests\main.js

```Press the Play button and watch debugger stop at the break point .

Happy debugging !