Cross Platform Game Development Tutorials : September 2015

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.