Tuesday, September 27, 2016

Create Zig Zag Game using cocos2d-x JavaScript

In This tutorial i will show you how easy it to build ZigZag game in JavaScript . why JavaScript?

  1. In case  you need to convert you game from C++ to JavaScript this is a proven test case that it can be done relatively easy .
  2. The c++ and JavaScript API's are almost the same . and most of the time  the JavaScript code is shorter and much easier both to write and understand . 
  3. Very Reusable it can be played on the Web , Mobile , Desktop 
  4. JavaScript is one of the must popular programming script in the world  it means you can find programmers very easy . its not the case with c++ where the learning curve much higher .
  5. No compilation times , you can debug and write your game script in the browser.
  6. Save Time . as the code is shorter JavaScript is dynamic , no memory handling , no pointers.
  7. Hot update ! via AssentManager  read about it here

    Conclusion : its much cheaper with JavaScript . 

You can take the code from the previous Tutorial where i developed C++ ZigZag game and compare the code .




To get the free source code of the game please subscribe to my mailing list .
You will get:
  1. full documented game source code in c++.
  2. full documented game source code in JavaScript.
  3. Inkscape graphic file that contains images used in the game.
  4. first to get more free stuff in the future and site updates.






  1. First you need to create Cocos2d-x JavaScript project :
    You can create one as it explaned here :
    Snake Game Using Cocos2d-x HTML5 - PART 1
    Once you finished creating the new project . copy the new source files and the resource files and overwrite the project default files .
  2. To test the game you need to run the game from local web server . just browse where you project is created from the web server url .
     
 The code :
The game creates endless procedural generated level , using Isometric blocks .
Using FIFO  list . and simple random function to place the blocks .
As in the picture :




The source code for the game is in 1 source file where all the game logic is  called app.js  ,that's it .

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        this.init( cc.color(255,255,255, 255) ); 
        this.winSize = cc.winSize;
        this.origin = cc.director.getVisibleOrigin(); 
        this.visibleSize = cc.director.getVisibleSize(); 
        //set game over screen visible == false
        this.setGameOverScreen();
        //set touch listeners
        var listener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            
            swallowTouches: true,
            onTouchBegan: function (touch, event) {  
               var target = event.getCurrentTarget();               
               target.onTouchesBegan(touch, event);
               return true;
                
            },
            onTouchMoved: function (touch, event) {
               
            },
            onTouchEnded: function (touch, event) { 
                
            }
        });
        cc.eventManager.addListener(listener, this);
         //setup score lable 
        this.setScoreLabel();
        //setup Level
        this.setLevel();
        //start game loop 
        this.schedule(this.gameLoop); 
        return true;
    },

This function is invoked first only once when game starts
Line 10 : call the "Game Over"  screen but as invisible at first 
Lines 12 - 28 : Set listener to the touch events , once touch detected the onTouchesBegan function will be called
Line 31 : Call the score label which will hold the player score
Line 40 : Call the initial level of blocks 
Line 42 : Call the game loop which be called 60 times per second ( or at list will try ) 
.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
setLevel:function () {
        //init variables
        //keep track on which block the circle is currently on 
        this.currentZorder = 0;
        //How many block will be visible on every given time on the screen 
        this.blocksNum = MAX_BLOCKS_ON_SCREEN;
        //how deep the blocks z order supposed to be , if its long play consider to rise the number
        this.zCount = MAX_Z_ORDER;
        //the bitwise boolean holder
        this.currentState = 0;
        //keep the score
        this.iScore = 0;
        //set into score label , this is needed when game restart
        this.labelScore.setString("0");
        //stop game loop indicator
        this.stopGameLoop = false;
        //set the start bit to on 
        this.currentState |= OperetionFlags.GAME_START;
        //the circle must be alwas above all other Spirits
        this.circle = new cc.Sprite(res.Circle_png); 
        this.circle.setTag(TAGS.CIRCLE);
        this.addChild(this.circle, this.zCount + 1);
        //scatter the blocks and Gems 
        var tempSprite = null;
        for (var i = 0; i < this.blocksNum; i++)
        {
            var spriteBlock = new cc.Sprite(res.Block_png);
            this.blocksList.push(spriteBlock);
            var back = this.blocksList.length-1;
            this.blocksList[back].setAnchorPoint(cc.p(0.0, 0.0));
            var userData  = new UserData(false, false);
            this.blocksList[back].setUserData(userData);
            this.blocksList[back].setTag(TAGS.BLOCK);
            this.zCount = this.zCount - 1;
            this.addChild(this.blocksList[back], this.zCount);
            var blockSizeWidth = this.blocksList[back].getContentSize().width;
            var blockSizHeight = this.blocksList[back].getContentSize().height;

            if (i == 0)
            {   //Start Game Reposition the blocks 
                this.blocksList[back].setPosition(cc.p(this.visibleSize.width / 2 + this.origin.x - (blockSizeWidth / 2),
                    this.visibleSize.height / 2 + this.origin.y - (blockSizHeight / 2)));
                this.circleblockY = this.blocksList[back].getPositionY() + blockSizHeight - (this.circle.getContentSize().height / 2);
                this.circleblockX = this.blocksList[back].getPositionX() + blockSizeWidth / 2;
                this.circle.setPosition(cc.p(this.circleblockX, this.circleblockY));
            }
            else
            {
                //As the first touch is to the right 
                //it is better to give the player some easy learning ajusting to the game 
                var bv2 = cc.p(0,0);
                if (i < 2)
                {
                    bv2 = this.setBlockPostion(tempSprite, 0);                  
                }
                else if (i == 2)
                {
                    bv2 = this.setBlockPostion(tempSprite, 0);
                }
                else if (i == 3)
                {
                    bv2 = this.setBlockPostion(tempSprite, 1);
                }
                else if (i == 4)
                {
                    bv2 = this.setBlockPostion(tempSprite, 1);
                }
                else if (i > 4)
                {
                    bv2 = this.setBlockPostion(tempSprite, this.generateRandDirection(2));
                }
                //set the new position of the block
                this.blocksList[back].setPosition(cc.p(bv2.x + this.origin.x, bv2.y + this.origin.y));
                //some random play ... 
                this.placeRandomGem(this.blocksList[back],i);                
            }
            tempSprite = this.blocksList[back];
        }
    },

This function is generate the level on screen
Line 6 : number of blocks on screen
Line 8 : when building isometric view , there is need to pay attention on your Z order of
Sprites , in our game the first block will start with very high Z order and each block  placed after
Will have lower Z order , this is what makes Isometric view its uniqueness.
Line 10: this is the "Multi Boolean" variable it is holding game states in form of on/off bits
Line 18 :turn the "START_GAME" bit on .
Line 22 :set the circle Z order to be the highest so it will be over the blocks 
Line 25: creating  procedural generated level .
Lines 39 - 76 : because we don't what the player to fail fast , we generate easy start .
first button click will move the Circle to he right , so 3 blocks is generated to the right

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
invokeGame:function (delta) {
    
        var bBelow = false;

        if ((this.currentState & OperetionFlags.GAME_TOUCH_START) && (this.currentState & OperetionFlags.GAME_START))
        {
            if ((this.currentState & OperetionFlags.TOUCHED) && (this.currentState &  OperetionFlags.MOVE_RIGHT))
            {
                var x = this.circle.getPositionX() + (CIRCLE_SPEED * delta);
                this.circle.setPositionX(x);
            }
            else if ((this.currentState & OperetionFlags.TOUCHED) && (this.currentState &  OperetionFlags.MOVE_LEFT))
            {
                var x = this.circle.getPositionX() - (CIRCLE_SPEED * delta);
                this.circle.setPositionX(x);
            }
            //iterate the blocks 
            //1.check if circle fell
            //2.check if gem is on block 
            //3.move the blocks down and below the screen 
            //4.add new block on back 
            var randomSeed = 0;             
            for (var  i = 0;  i< this.blocksList.length;  i++)
            {
                var it = this.blocksList[i];
                var circleY = Math.round(this.circle.getPositionY());
                var circleX = Math.round(this.circle.getPositionX());    
                var blockHeight = it.getPositionY() + it.getContentSize().height;               
                //calculate dimond shape points 
                var A = cc.p(0,0);
                A.x = it.getPositionX() + (it.getContentSize().width / 2);
                A.y = blockHeight - it.getContentSize().width / 2;

                var B = cc.p(0,0);
                B.x = it.getPositionX();
                B.y = blockHeight - (it.getContentSize().width / 2) / 2;

                var C = cc.p(0,0);
                C.x = it.getPositionX() + (it.getContentSize().width / 2);
                C.y = blockHeight + (it.getContentSize().width / 2);

                var D = cc.p(0,0);
                D.x = it.getPositionX() + (it.getContentSize().width);
                D.y = blockHeight - (it.getContentSize().width / 2) / 2;

                //our collision detection is based on checking on our block dimond shape is 
                //intersction with the circle , for this we devide the dimond shape to 2 Triangles
                //and checking each triangle if the circle inside .
                var insideLeft = this.PointInTriangle(this.circle.getPosition(),
                    A,
                    B,
                    C);

                var insideRight = this.PointInTriangle(this.circle.getPosition(),
                    A,
                    C,
                    D);
     
                if (insideRight || insideLeft)
                {
                   this.handleCollision((it));
                }    
                else
                {
                    //when circle is out side the block stop the game
                    if (it.getUserData().start == true)
                    {
                        if (this.currentZorder == it.getLocalZOrder())
                        {
                            it.getUserData().start = false;
                            this.stopGameLoop = true;
                            //if stoped then invoke the circle drop down animation 
                            this.setFallingAnim();
                        }
                    }
                }

                if (bBelow)
                {
                    this.blocksList.shift();
                    var backSprite = this.blocksList[this.blocksList.length-1];
                }
                var y = it.getPositionY() - (SPEED * delta);
                //move block down
                it.setPositionY(y);

                //check if the sprite is below the screen then next iteration remove it 
                if (it.getPositionY() < 0 - (it.getContentSize().height))
                {
                    //mark to remove it in the next iteration 
                    bBelow = true;
                    //reuse it as new sprite to be on top of the FIFO list
                    var frontSprite = this.blocksList[0];
                    //log("frontSprite x:%f y:%f", frontSprite->getPositionX(), frontSprite->getPositionY());
                    var backSprite = this.blocksList[this.blocksList.length-1];
                    //log("backSprite x:%f y:%f", backSprite->getPositionX(), backSprite->getPositionY());
                    var bv2 = this.setBlockPostion(backSprite, this.generateRandDirection(2));
                    frontSprite.setPosition(cc.p(bv2.x + this.origin.x, bv2.y + this.origin.y));
                    //new Z order alway lower then the last one 
                    this.zCount = this.zCount - 1;
                    frontSprite.setLocalZOrder(this.zCount);
                    //some random play ... 
                    this.placeRandomGem(frontSprite, randomSeed);
                    
                    this.blocksList.push(frontSprite);
                    //++stopThis;
                }
                else
                {
                    bBelow = false;
                }
                randomSeed++;
            }
        }
        else if ((this.currentState & OperetionFlags.GAME_TOUCH_START) && ((this.currentState & OperetionFlags.GAME_START) == 0))
        {
            var y = circle.getPositionY() - ((CIRCLE_SPEED * 10) * delta);
            this.circle.setPositionY(y);
        }
    },

This function is invoked on each game loop
Line 3 : boolean that indicates when the block is below screen
Line 5 : all game logic will start only when player start the game and touched the screen
Line 23 :loop all blocks on screen
Lines 25 - 73 : to check collision detection between the "circle" and the current block we will 
need to find simple way to check when the circle is on the diamond shape on top of the block
to do this we will divide the diamond shape to 2 triangles and check if  the circle is inside .
As in this picture:


Lines 66 -73: when the circle moves to position where there is no block. stop the game
And trigger the falling circle animation
Lines 78- 82: when block sprite is below the screen set it in temp holder
Lines 85 : move the block sprite down along the Y
Lines 88 - 111: check if block below the screen then:
  • pop the front (FIRST) block 
  • reuse it by give it new random position
  • place it in the back of the FIFO list 

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 //set the circle falling animation 
    setFallingAnim:function()
    {
       
        var down = -50;
        var iMoveSide = -30;   
        if ((this.currentState & OperetionFlags.MOVE_RIGHT))
        {
             iMoveSide =  iMoveSide * -1;
        }
        var moveSideDir = this.circle.getPositionX() +  iMoveSide;
        //move circle to the side 
 var circleY =  this.circle.getPositionY();
        var moveSideAction = cc.moveTo(0.2, cc.p(moveSideDir,circleY));
        //move the circle down .
 var circleX =  this.circle.getPositionX();
        var moveDownAction = cc.moveTo(1, cc.p(circleX, -50));
        //call function when circle down animation is done 
        var gameOverAction = cc.callFunc(this.gameOverCallback, this);
        //order all actions
        var seq1 =  cc.sequence(moveSideAction,
                            moveDownAction ,
                            gameOverAction );
        //execute all animations on circle
        this.circle.runAction(seq1);
    },
 //invoke when felling animation sequence is done 
 gameOverCallback:function()
 {
  //invoke the game over screen 
  this.setGameOverScreenVisible(true);
  //turn off game start bit 
  this.currentState &= ~OperetionFlags.GAME_START;
 },

Those functions are to trigger the Circle falling animation and the "Game Over" screen popup
Line 14 : create action that will move the circle 30px to the side
Line 17 : create action that will move the down along the Y untill it reach to Y=-50 below visible screen
Lines 17 :create action that will invoke the function callback to popup the "Game over and retry" screen
Line 24: Execute all actions.
Line 31: call the "Game Over" screen by making it visible
Line 33: set GAME_START bit to off , so the game knows we ended the game 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
  onTouchesBegan:function (touch, event)
    {
            //check if game is started 
            if (this.currentState & OperetionFlags.GAME_START)
            {
                //check if touch is invoketed 
                if ((this.currentState & OperetionFlags.GAME_TOUCH_START) == 0)
                {
                    //set touch bit to on 
                    this.currentState |= OperetionFlags.GAME_TOUCH_START;
                }
                //check if right circle movment bit is off
                if ((this.currentState & OperetionFlags.MOVE_RIGHT) == 0)
                {
                    //turn off left bit 
                    this.currentState &= ~OperetionFlags.MOVE_LEFT;
                    //turn on touched and move right bit on 
                    this.currentState |= OperetionFlags.TOUCHED | OperetionFlags.MOVE_RIGHT;
                }
                else if ((this.currentState & OperetionFlags.MOVE_RIGHT)) //check if the right bit if on 
                {
                    //turn off right bit 
                    this.currentState &= ~OperetionFlags.MOVE_RIGHT;
                    //turn on touched and move left bit on 
                    this.currentState |= OperetionFlags.TOUCHED | OperetionFlags.MOVE_LEFT;
                }
            }
            else if((this.currentState & OperetionFlags.GAME_START) == 0)
            {
                //game is ended 
                //Retry touch is trigered reshuffle all blocks and start over 
                var  allNodes = this.getChildren();               
                for (var  it = 0;  it< this.blocksList.length;  it++)
                {
                    var node = this.blocksList[it];
                    if (node.getTag() == TAGS.BLOCK)
                    {
                        this.removeChild(node);
                    }
                    else if (node.getTag() == TAGS.CIRCLE)
                    {
                        this.removeChild(node);
                    }
                }   
                //clean blocks container
                this.blocksList.length = 0;
                //set gameover screen to un visible
                this.setGameOverScreenVisible(false);
                //Start Level all over again 
                this.setLevel();

            }
        
    },

This function is invoked when player touch the screen 
As the game is 1 button tap game allot of logic is happens here especially boolean logic
for this to avoid boolean HELL im using bitwise option you can read about it here

Line 4 : check if game started
Lines 7 - 11: check if first touch is invoked
Lines 13- 19 :check if touch is invoked , first move of the circle will be to the right
Lines 20 - 26 : check if the circle moves to the right , then change the MOVE_RIGHT to off
and MOVE_LEFT to on
Lines 28 - 52 :if the GAME_START bit is off , that means the game is ended , and we need to prepare to generate  new level
  • Remove All Block
  • Remove Circle (the player ) 
  • Clear the block container 
  • Set "Game over" screen visibility to false (hide)
  • procedural regenerated the level for new play session 


Those all the main functions that are used in the game , there are some more utility small functions
That glue it all together.

To get the FREE source code of this tutorial please subscribe to my mailing list. to get more free stuff and updates .

Posted by at 1 comment:
Labels: , , , , , ,

Thursday, September 22, 2016

Create Zig Zag Game using cocos2d-x c++

In this tutorial i will show you how to build 1 button ZigZag type of game which is very popular on the Appstor's and played by millions .
The game looks like this and i call it ZipZapZag:

Watch the video of the of the game :



To get the free source code of the game please subscribe to my mailing list .
You will get:
  1. full documented game C++ source code .
  2. full documented game JavaScript source code.
  3. Inkscape graphic file that contains images used in the game.
  4. first to get more free stuff in the future and site updates.




Lt's begin .
First create c++ project from cocos console  :


1
cocos new -p com.zipzapzag.test.ios -d /my/project/dir -l cpp ZipZapZag

Then you can just replace the files from this tutorial with the one from the new project you just created.

The code:
The game creates endless procedural generated level , using Isometric blocks .
Using FIFO  list . and simple random function to place the blocks .
As in the picture :
                                


The source code for the game is in 1 source file and 1 header file. that's it .


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
bool ZigZapZag::init()
{
    
    //////////////////////////////
    // 1. super init first
 if (!LayerColor::initWithColor(Color4B(255,255,255, 255)))
    {
        return false;
    }
  
 //set images into cache 
 Director::getInstance()->getTextureCache()->addImage(BLOCK_IMG);
 Director::getInstance()->getTextureCache()->addImage(CIRCLE_IMG);
 Director::getInstance()->getTextureCache()->addImage(GEM_IMG);
 
    visibleSize = Director::getInstance()->getVisibleSize();
    origin = Director::getInstance()->getVisibleOrigin();

 
 
 auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(ZigZapZag::menuCloseCallback, this));
    
    closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));


  
    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
 //setup score lable 
 setScoreLabel();
 //setup Level
 setLevel();
 //set touch listeners 
 setTouchListners();
 //set game over screen visible == false
 setGameOverScreen();
 //start game loop 
 this->schedule(CC_SCHEDULE_SELECTOR(ZigZapZag::gameLoop));  

    return true;
}

This function is invoked first only once when game starts
Lines 12 - 14 : load the images which we are using into cache
Line 36 : Call the function to set up the Score label
Line 38 : Call the function to set up the the level
Line 40 : Call the function to set up the cocos2d-x touch listeners ( we are going to use only 1 )
Line 42 : Call the function to set up the "Game Over And Retry" screen as none visible.
Line 44 : Start the Game Loop.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
void ZigZapZag::setLevel()
{
 //init variables
 //keep track on which block the circle is currently on 
 currentZorder = 0;
 //How many block will be visible on every given time on the screen 
 blocksNum = MAX_BLOCKS_ON_SCREEN;
 //how deep the blocks z order supposed to be , if its long play consider to rise the number
 zCount = MAX_Z_ORDER;
 //the bitwise boolean holder
 currentState = 0;
 //keep the score
 iScore = 0;
 //set into score label , this is needed when game restart
 labelScore->setString("0");
 //stop game loop indicator
 stopGameLoop = false;
 //set the start bit to on 
 currentState |= GAME_START;
 //the circle must be alwas above all other Spirits
 circle = Sprite::create(CIRCLE_IMG);
 circle->setTag(CIRCLE);
 this->addChild(circle, zCount + 1);

 //scatter the blocks and Gems 
 Sprite* tempSprite = nullptr;
 for (int i = 0; i < blocksNum; i++)
 {
  blocksList.push_back(Sprite::create(BLOCK_IMG));
  blocksList.back()->setAnchorPoint(Vec2(0.0, 0.0));
  blocksList.back()->setUserData(new UserData(false, false));
  blocksList.back()->setTag(BLOCK);
  zCount = zCount - 1;
  this->addChild(blocksList.back(), zCount);
  float blockSizeWidth = blocksList.back()->getContentSize().width;
  float blockSizHeight = blocksList.back()->getContentSize().height;

  if (i == 0)
  {   //Start Game Reposition the blocks 
   blocksList.back()->setPosition(Vec2(visibleSize.width / 2 + origin.x - (blockSizeWidth / 2),
    visibleSize.height / 2 + origin.y - (blockSizHeight / 2)));
   circleblockY = blocksList.back()->getPositionY() + blockSizHeight - (circle->getContentSize().height / 2);
   circleblockX = blocksList.back()->getPositionX() + blockSizeWidth / 2;
   circle->setPosition(Vec2(circleblockX, circleblockY));
  }
  else
  {
   //As the first touch is to the right 
   //it is better to give the player some easy learning ajusting to the game 
   Vec2 bv2;
   if (i < 2)
   {

    bv2 = setBlockPostion(tempSprite, 0);
    
   }
   else if (i == 2)
   {
    bv2 = setBlockPostion(tempSprite, 0);
   }
   else if (i == 3)
   {
    bv2 = setBlockPostion(tempSprite, 1);
   }
   else if (i == 4)
   {
    bv2 = setBlockPostion(tempSprite, 1);
   }
   else if (i > 4)
   {
    bv2 = setBlockPostion(tempSprite, generateRandDirection(2));
   }
   //set the new position of the block
   blocksList.back()->setPosition(Vec2(bv2.x + origin.x, bv2.y + origin.y));
   //some random play ... 
   placeRandomGem(blocksList.back(),i);
   
  }
  tempSprite = blocksList.back();
 }

}

This function is generate the level on screen
Line 7 : number of blocks on screen
Line 9 : when building isometric view , there is need to pay attention on your Z order of
Sprites , in our game the first block will start with very high Z order and each block  placed after
Will have lower Z order , this is what makes Isometric view its uniqueness.
Line 11: this is the "Multi Boolean" variable it is holding game states in form of on/off bits
Line 19 :turn the "START_GAME" bit on .
Line 23 :set the circle Z order to be the highest so it will be over the blocks
Line 27: creating  procedural generated level .
Lines 38 - 76 : because we don't what the player to fail fast , we generate easy start .
first button click will move the Circle to he right , so 3 blocks is generated to the right









  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
void ZigZapZag::invokeGame(float delta)
{
 bool bBelow = false;

 if ((currentState & GAME_TOUCH_START) && (currentState & GAME_START))
 {
  if ((currentState & TOUCHED) && (currentState &  MOVE_RIGHT))
  {
   float x = circle->getPositionX() + (CIRCLE_SPEED * delta);
   circle->setPositionX(x);
  }
  else if ((currentState & TOUCHED) && (currentState &  MOVE_LEFT))
  {
   float x = circle->getPositionX() - (CIRCLE_SPEED * delta);
   circle->setPositionX(x);
  }
  //iterate the blocks 
  //1.check if circle fell
  //2.check if gem is on block 
  //3.move the blocks down and below the screen 
  //4.add new block on back 
  int randomSeed = 0;
  for (std::list<Sprite*>::iterator it = blocksList.begin(); it != blocksList.end(); ++it)
  {
   float circleY = std::round(circle->getPositionY());
   float circleX = std::round(circle->getPositionX());    
   float blockHeight = (*it)->getPositionY() + (*it)->getContentSize().height;

   /*
     c
   / @ \
    b@     @d
   \   /
     @
     a
   */

   //calculate dimond shape points 
   Vec2 A;
   A.x = (*it)->getPositionX() + ((*it)->getContentSize().width / 2);
   A.y = blockHeight - (*it)->getContentSize().width / 2;

   Vec2 B;
   B.x = (*it)->getPositionX();
   B.y = blockHeight - ((*it)->getContentSize().width / 2) / 2;

   Vec2 C;
   C.x = (*it)->getPositionX() + ((*it)->getContentSize().width / 2);
   C.y = blockHeight + (*it)->getContentSize().width / 2;

   Vec2 D;
   D.x = (*it)->getPositionX() + ((*it)->getContentSize().width);
   D.y = blockHeight - ((*it)->getContentSize().width / 2) / 2;

   //our collision detection is based on checking on our block dimond shape is 
   //intersction with the circle , for this we devide the dimond shape to 2 Triangles
   //and checking each triangle if the circle inside .
   bool insideLeft = PointInTriangle(circle->getPosition(),
    A,
    B,
    C);

   bool insideRight = PointInTriangle(circle->getPosition(),
    A,
    C,
    D);


   if (insideRight || insideLeft)
   {
    handleCollision((*it));
     
   }    
   else
   {
    //when collision detection is detected stop game loop 
    if (((UserData*)(*it)->getUserData())->start)
    {
     if (currentZorder == (*it)->getZOrder())
     {
      ((UserData*)(*it)->getUserData())->start = false;
      stopGameLoop = true;
      //if stoped then invoke the circle drop down animation 
      setFallingAnim();
     }
    }
   }

   if (bBelow)
   {
    blocksList.pop_front();
    Sprite* backSprite = blocksList.back();
   }
   float y = (*it)->getPositionY() - (SPEED * delta);
   (*it)->setPositionY(y);

   //check if the sprite is below the screen then next iteration remove it 
   if ((*it)->getPositionY() < 0 - ((*it)->getContentSize().height))
   {
    //mark to remove it in the next iteration 
    bBelow = true;
    //reuse it as new sprite to be on top of the FIFO list
    Sprite* frontSprite = blocksList.front();
    //log("frontSprite x:%f y:%f", frontSprite->getPositionX(), frontSprite->getPositionY());
    Sprite* backSprite = blocksList.back();
    //log("backSprite x:%f y:%f", backSprite->getPositionX(), backSprite->getPositionY());
    Vec2 bv2 = setBlockPostion(backSprite, generateRandDirection(2));
    frontSprite->setPosition(Vec2(bv2.x + origin.x, bv2.y + origin.y));
    //new Z order alway lower then the last one 
    zCount = zCount - 1;
    frontSprite->setZOrder(zCount);
    //some random play ... 
    placeRandomGem(frontSprite, randomSeed);
    
    blocksList.push_back(frontSprite);
    //++stopThis;
   }
   else
   {
    bBelow = false;
   }
   randomSeed++;
  }
 }
 else if ((currentState & GAME_TOUCH_START) && ((currentState & GAME_START) == 0))
 {
  float y = circle->getPositionY() - ((CIRCLE_SPEED * 10) * delta);
  circle->setPositionY(y);
 }
}


This function is invoked on each game loop
Line 3 : boolean that indicates when the block is below screen
Line 5 : all game logic will start only when player start the game and touched the screen
Line 23:loop all blocks on screen
Lines 25 - 73 : to check collision detection between the "circle" and the current block we will 
need to find simple way to check when the circle is on the diamond shape on top of the block
to do this we will divide the diamond shape to 2 triangles and check if  the circle is inside .
As in this picture:

                                 


Lines 77 -87: when the circle moves to position where there is no block. stop the game
And trigger the falling circle animation
Lines 89- 93: when block sprite is below the screen set it in temp holder
Lines 94 - 95 : move the block sprite down along the Y
Lines 98 - 121: check if block below the screen then:
  • pop the front (FIRST) block 
  • reuse it by give it new random position
  • place it in the back of the FIFO list 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
bool ZigZapZag::handleCollision(Sprite* &block)
{
 currentZorder = block->getZOrder();
 ((UserData*)(block)->getUserData())->start = true;
 bool isGem = ((UserData*)(block)->getUserData())->hasGem;
 //if gem is here hide it increase points by 1
 if (isGem)
 {
  removeGemFromBlock(block);  
  return true;
 }
 return false;
}

This function is Handle what should happen when collision is true
Line 4 : set the boolean indicator that the block is curently inside the block
Lines 5 -7 : check if the "hasGem" boolean is true which indicates that the block holds the GEM
Line 9 : Call the function to remove the Gem from the current  block


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
void ZigZapZag::setFallingAnim()
{
 MoveTo* moveDownAction;
 MoveTo* moveSideAction;
 float down = -50.0;
 float iMoveSide = -30.0f;

 if ((currentState & MOVE_RIGHT))
 {
  iMoveSide = iMoveSide * -1;
 }
 float moveSideDir = circle->getPositionX() + iMoveSide;
 //move circle to the side 
 moveSideAction = MoveTo::create(0.2f, Vec2(moveSideDir, circle->getPositionY()));
 //move the circle down 
 moveDownAction = MoveTo::create(1.0f, Vec2(circle->getPositionX(), -50.0));
 //call function when circle down animation is done 
 CallFunc *gameOverAction = CallFunc::create(std::bind(&ZigZapZag::gameOverCallback, this));
 //order all actions
 auto seq1 = Sequence::create(moveSideAction,
         moveDownAction,
         gameOverAction, nullptr);
 //execute all animations on circle
 circle->runAction(seq1);
}

//invoke when felling animation sequence is done 
void ZigZapZag::gameOverCallback()
{
 //invoke the game over screen 
 setGameOverScreenVisible(true);
 //turn off game start bit 
 currentState &= ~GAME_START;
}

Those functions are to trigger the Circle falling animation and the "Game Over" screen popup
Line 14 : create action that will move the circle 30px to the side
Line 16 : create action that will move the down along the Y untill it reach to Y=-50 below visible screen
Lines 18 :create action that will invoke the function callback to popup the "Game over and retry" screen
Line 24: Execute all actions.
Line 31: call the "Game Over" screen by making it visible
Line 33: set GAME_START bit to off , so the game knows we ended the game 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//The one and only touch is used to triger the left right movment of the circle
void ZigZapZag::onTouchesBegan(const std::vector<Touch*>& touches, Event  *event)
{
    for (auto &item : touches)
    { 
  auto touch = item;
  auto location = touch->getLocation();
  //check if game is started 
  if (currentState & GAME_START)
  {
   //check if touch is invoketed 
   if ((currentState & GAME_TOUCH_START) == 0)
   {
    //set touch bit to on 
    currentState |= GAME_TOUCH_START;
   }
   //check if right circle movment bit is off
   if ((currentState & MOVE_RIGHT) == 0)
   {
    //turn off left bit 
    currentState &= ~MOVE_LEFT;
    //turn on touched and move right bit on 
    currentState |= TOUCHED | MOVE_RIGHT;
   }
   else if ((currentState & MOVE_RIGHT)) //check if the right bit if on 
   {
    //turn off right bit 
    currentState &= ~MOVE_RIGHT;
    //turn on touched and move left bit on 
    currentState |= TOUCHED | MOVE_LEFT;
   }
  }
  else if((currentState & GAME_START) == 0)
  {
   //game is ended 
   //Retry touch is trigered reshuffle all blocks and start over 
   Vector<Node*> allNodes = this->getChildren();
   for (auto &node : allNodes)
   {
    if (node->getTag() == BLOCK)
    {
     this->removeChild(node);
    }
    else if (node->getTag() == CIRCLE)
    {
     this->removeChild(node);
    }
   }   
   //clean blocks container
   blocksList.clear();
   //set gameover screen to un visible
   setGameOverScreenVisible(false);
   //Start Level all over again 
   setLevel();

  }
    }
}

This function is invoked when player touch the screen 
As the game is 1 button tap game allot of logic is happens here especially boolean logic
for this to avoid boolean HELL im using bitwise option you can read about it here

Line 9 : check if game started
Lines 12 - 16 : check if first touch is invoked
Lines 18 - 24 :check if touch is invoked , first move of the circle will be to the right
Lines 25 - 31 :to check the circle moves to the right , then change the MOVE_RIGHT to off
and MOVE_LEFT to on 
Lines 33 - 54 :if the GAME_START bit is off , that means the game is ended , and we need to prepare to generate  new level 
  • Remove All Block
  • Remove Circle (the player ) 
  • Clear the block container 
  • Set "Game over" screen visibility to false (hide)
  • procedural regenerated the level for new play session 


Those all the main functions that are used in the game , there are some more utility small functions
That glue it all together
To get the FREE source code of this tutorial please subscribe to my mailing list. to get more free stuff and updates .



Posted by at 2 comments:
Labels: , ,
Subscribe to: Posts (Atom)