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
Labels: , ,

2 comments:

  1. UnknownMay 5, 2017 at 4:26 AM

    This comment has been removed by the author.

    ReplyDelete
  2. Meir YanovichMay 5, 2017 at 7:49 AM

    Hey you supposed to get email with link to the source code

    ReplyDelete

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)