Developers Manual > Cocos Code IDE > How to build a simple game with Cocos Code IDE

How to Build A Simple Game by Cocos Code IDE

Overview


Cocos Code IDE is the IDE prepares for developing/debugging/publishing Lua and JavaScript games base on Cocos2d-x or Cocos2d-JS. It can work together with Cocos2d-x v3.x, Cocos2d-js v3.x and higher versions. Through the Cocos Code IDE, it is convenient for Lua/JS developers to create game projects, write codes, debug, and publish games efficiently.

The official website of Cocos Code IDE :http://www.cocos2d-x.org/products/codeide

The wiki of Cocos Code IDE:http://www.cocos2d-x.org/wiki/Cocos_Code_IDE

Set up Cocos Code IDE


To set up Cocos Code IDE, read the documents below:

Environment


  • Mac OSX 10.9.4
  • Cocos Code IDE 1.0.0.RC0
  • Cocos2d-x 3.2

"No One Left Behind" Game Development


1.Create a new project

Open Cocos Code IDE, and switch to the Lua workspace

image

Clicj File/New to create a new Cocos Lua project, and name it NoOneLeftBehind

image

Click Next button to set orientation and screen size.

image

The new project is a sample game. Now you can click Debug button on toolbar, then the game will run the sample game like the picture shows. (
The screen shot of the game sample is out of shape because we change the screen size previously.)

image

2.Game Logic

Now we can write our own code in the project. The code itself is not the point of this article, so here is only a brief introduction of "No One Left Behind". You can download the entire game project source code on my Github.

A. main.lua is the entrance of the project. We could see the scene has been transferred in the main() which is in line with the Cocos2d-x C++. We can easily start from the first scene: MenuScene

1
2
3
4
5
6
7
8
9
    --create scene 
    local scene = require("MenuScene")
    local menuScene = scene.createScene()

    if cc.Director:getInstance():getRunningScene() then
        cc.Director:getInstance():replaceScene(menuScene)
    else
        cc.Director:getInstance():runWithScene(menuScene)
    end

B. MenuScene.lua is the main menu of the game. There are four kinds of levels to choose in the menu scene. Here is the way to create a menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
    --create menu
    local function menuCallbackOpenNormal()
        cc.Director:getInstance():replaceScene(require("GameScene").createScene(2))
    end

    local normal = cc.MenuItemImage:create("normal.png", "normal.png")
    normal:setPosition(0, 150)
    normal:registerScriptTapHandler(menuCallbackOpenNormal)

    ...

    local menu = cc.Menu:create(normal, nightmare, hell, inferno)
    self:addChild(menu)

C. GameScene.lua is the main scene of the game. The init() function would send a parameter heroCount to set the number of heroes in the scene.

1
2
3
4
5
6
7
8
9
10
11
12
    --add hero
    function GameLayer:addControllers()
        local visibleSize = cc.Director:getInstance():getVisibleSize()

        local startY = 30
        local gap = (visibleSize.height - startY) / self._heroCount

        for i=1, self._heroCount do
            local controller = require("HeroController").createController(self, startY + gap * (i - 1))
            table.insert(self._controllers, i, controller)
        end
    end

D. HeroController is the most important game controller. And GameScene would call the function of HeroController::onUpdate() per frame. It decides if it is need or not to create an obstacle.

1
2
3
4
5
6
7
8
9
10
11
    -- create block
    function HeroController:onUpdate()
        self.frameIndex = self.frameIndex +1
        if self.frameIndex >= self.nextKeyFrameIndex   then
            local block = require("Block").new()
            block:init()
            self._layer:addChild(block)
            block:setPositionY(self._positionY + block:getContentSize().height / 2)
            self:resetTimer()
        end
    end

E. Physics engine. These codes show the collision detections among the hero, ground and obstacles' collision detection by Cocos2d-x own integrated physics engine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    -- collision detection
    self.touchListener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN)
    cc.Director:getInstance():getEventDispatcher():addEventListenerWithSceneGraphPriority(self.touchListener, self)

    local function onContactBegin(contact)
        self:unscheduleUpdate()

        cc.Director:getInstance():getEventDispatcher():removeEventListener(self.touchListener)
        cc.Director:getInstance():getEventDispatcher():removeEventListener(self.contactListener)

        cc.Director:getInstance():replaceScene(require("GameOver").create(self._heroCount, score))
    end

    self.contactListener = cc.EventListenerPhysicsContact:create();
    self.contactListener:registerScriptHandler(onContactBegin, cc.Handler.EVENT_PHYSICS_CONTACT_BEGIN);
    local eventDispatcher = self:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(self.contactListener, self);

F. Block class, block means obstacle here, the obstacles move a constant distance per frame, and be removed while out of screen.

1
2
3
4
5
6
7
8
9
10
11
12
   --move the block
    function update(dt)
        self:setPositionX(self:getPositionX() - 3.5)

        if (self:getPositionX() < 0) then
            self:unscheduleUpdate()

            self:removeFromParentAndCleanup()
        end
    end

    self:scheduleUpdateWithPriorityLua(update, 0)

3. Different Platforms Packing

Click Package button on toolbar.

image

If you never add native code to the project before, you will be prompted to add native code.

image

A. Android Packing

Choose package to APK, select a keystore of debug or private, and SDK version, confirm to Generate.

image

B. iOS Packing

Choose package to IPA, select a certificate and target, confirm to Generate.

image

Game Show


image

Game.gif (323.9 kB) zijian_rao, 2014-07-23 15:56

demo.png (214 kB) zijian_rao, 2014-07-23 15:56

Configure_Orientation_Size.png (38.8 kB) zijian_rao, 2014-07-23 15:56

Choose_Lua_WorkSpace.png (19 kB) zijian_rao, 2014-07-23 15:56

Run_the_demo.png (17 kB) zijian_rao, 2014-07-23 15:56

Publish_iOS_Package.jpg (32.1 kB) zijian_rao, 2014-07-23 15:56

Publish_Android_Package.png (62.2 kB) zijian_rao, 2014-07-23 15:56

Package.png (51.3 kB) zijian_rao, 2014-07-23 15:56

Add_Native_Code.png (21.4 kB) zijian_rao, 2014-07-23 15:56

New_Lua_Project.png (41.6 kB) zijian_rao, 2014-07-23 15:56

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.