The topic of the game design idea is always making people exciting. In my opinion, an apprentice of the game designer or developers independently should take a small classic case to analyze than read one hundred article on the pure theory. So in this example, I am using the JavaScript language to write a basic classic game: the JetFighter. It is funny and simple, and the design and implementation is not hard to complete. And it is also easy play. Use your thumb touching the phone’s screen. Moving your jetfighter, avoiding the enemy bullets and try to shooting down the every enemy plane you see.
First thing first, I need a game engine — Cocos2d-html5, written in Javascript, based on HTML5 technology. Cocos2d-html5 is a game engine branched from Cocos2d-x. It aims at HTML5-ready browsers on desktop PCs, tablets and of course, mobile phones. Then we still need a edit tool to do the coding. (I chose my tool - webstorm.) And a browser displays the result. (I chose the Google Chrome, because the Cocos2d-html5 is based on HTML5 technology, and the Google Chrome is the best one which supports the HTML5.) I get the engine from here: (http://cocos2d-x.org/download) I just set up a development environment.
Developing Environment :
Game Engine : Cocos2d-html5 (http://cocos2d-x.org/download )
Browser : Chrome (http://www.google.com/intl/zh-CN/chrome/)
Editor: WebStorm (http://www.jetbrains.com/webstorm/)
Open the engine we have downloaded. You will see the following folders in the “template” folder:
The directory structures are described briefly:
1. res: The place where store your resources.
- src: The place where store your js script. Js
- build.xml: The file that compiles the engines into the js script.
4. cocos2d.js: The parameter settings of the engine configuration file
5. index.html:Run the program web pages
6. main.js：The main program entrance.
- Run the ‘Hello World’
Then open the ‘index.html’. (Right-click on it, choose “Open in browser”.) If everything is all right, you will see the picture like this. That means you are now success.
-
Basic Knowledge：
=======Before I go any further. There is some basic knowledge of the HTML5 I should know:（You can skip this part. If you already know those knowledge.）
First, the CCDirector, (“CC” is the prefix in this Engine’s function)In Cocos2d-html5 Engine, the CCDirector is the director, the leader, it control the everything, the Scene, the Layer and the Sprite.
Second, the CCCamera. For example, every time when the Node zoom out, zoom in or rotate and so on, the engine needs inherit from the CCCamera to render again.
Third, the CCScene, we can simple think it is the stage which prepares for the show.
Fourth, the CCLayer, it is similar to the CCScene, like the background on the stage. But the CCLayer is flexible. It can make a variety of combinations. So compares to the CCLayer, the CCScene is some kind of more static. And the CCLayer should load on the CCScene.
Fifth, the CCSprite, very easy to understand, that include the characters, the enemy, the NPC and some thing we can interact with. It can be add on both the CCSCene and the CCLayer.
Sixth. The CCAction. This one is the main function which controls the CCsprite, how they move or react.
- Start Coding：
=======
Now, I will start coding, and you already see the pictures above. In my newly created folder (simply copy and paste the folder ‘template’). Put the images above into the ‘res’ folder(where your images should be). And register every picture we need in the “resource.js”(I name it s_Jet when I register it).
Next, we register the graphics we are going to use. (Every time, if a new graphic is going to be use, you should remember to register it in here.)
var s_HelloWorld = "HelloWorld.jpg"; // BackGround
var s_CloseNormal = "CloseNormal.png"; // can delete
var s_CloseSelected = "CloseSelected.png"; // can delete
var s_Menu = "menu.png"; // button
var s_bg01 = "bg01.jpg"; // background
var s_bullets = "bullets.png"; // bullets
var s_Jet = "Jet.png"; // flight
var g_resources = [
//image
{src:s_HelloWorld},
{src: s_CloseNormal},
{src: s_CloseSelected},
{src: s_Menu},
{src: s_bg01},
{src: s_Jet},
{src: s_bullets}
- Start interface:
=======
First, we change the original interface into the start interface. Delete the original code which inside the init:function () {}
var MyLayer = cc.Layer.extend({
init:function () {
//delete all of them
}
});
Add these code in the init:function () {}：
```js
this._size = cc.Director.getInstance().getWinSize(); // get screen size
this.gameLayer = cc.Layer.create(); // create “gameLayer” layer
this.addChild(this.gameLayer); // add to layer
var bg = cc.Sprite.create(s_HelloWorld); // create a sprite “s_HelloWorld”
this.gameLayer.addChild(bg, 1);
bg.setAnchorPoint(cc.p(0.5, 0.5));
bg.setPosition(this._size.width / 2, this._size.height / 2); // 设置position
Here, we make a new layer and upload it with our ‘s_HelloWorld’ picture. Set the picture’s position and its anchor point.
6.png (29.2 KB)
7.png (47.5 KB)
1.png (158.8 KB)
2.png (143.9 KB)
3.png (314.0 KB)
4.png (19.2 KB)
5.png (33.4 KB)