Creating a lively menu screen

The main menu needs to look something like this, but our dragon needs to be flying. Therefore, the castle wall and the backdrop should also move.

.

Judging from the screenshot, you already know that we will be covering a major chunk of the game just creating this screen. Well, what can you do, our little dragon always wants to fly! So let's take some time and analyze the various things we need to do in order to accomplish the lively fairy tale menu screen.

Here are the things we need to implement:

1. Create a dragon that can fly. Don't worry the frame animation takes care of that, we just need to move him!
2. Create an environment with a background, some stars, and two continuously scrolling layers with a parallax effect.
3. Create the basic UI.

Our first task dictates that we must create a dragon that can fly. This means our character must have an animation wherein it flaps its wings and some motion so that it moves upwards and downwards.

We will create the frame animation by hand. Don't worry, we won't be "drawing" the frames by hand. I meant creating the animation by specifying each frame. The code is as follows:

addDragonAnimation:function(){
  // push the frames that will make up the dragon's flying animation
  var spriteFrames = [];
  spriteFrames.push(cc.SpriteFrameCache.getInstance().getSpriteFrame("dhch_1"));
  spriteFrames.push(cc.SpriteFrameCache.getInstance().getSpriteFrame("dhch_2"));
  spriteFrames.push(cc.SpriteFrameCache.getInstance().getSpriteFrame("dhch_3"));
  spriteFrames.push(cc.SpriteFrameCache.getInstance().getSpriteFrame("dhch_2"));
  spriteFrames.push(cc.SpriteFrameCache.getInstance().getSpriteFrame("dhch_1"));
 
  // create the animation with the array of sprite frames and delay per frame
  var dragonAnimation = cc.Animation.create(spriteFrames, 0.1);
  // add the created animation to the cache with a name so it can be reused
  cc.AnimationCache.getInstance().addAnimation(dragonAnimation, "dragonFlying");
},

We start by pushing sprite frames into an array. Then, create a cc.Animation object, passing into the create function the array of frames and the amount of time each frame should stay on the screen. This is the frame rate of the animation. We then add the animation into the cc.AnimationCache because we will use it again in the game world. This technique of creating a cc.Animation has been demonstrated for understanding only. Of course, this is not how you will generally go about creating animations. There are neat little animation plists for that. We will cover this topic soon. For now, let's proceed by creating the sprite, setting its position, and adding it to a batch node in the addDragon function as follows:

addDragon:function(){
  // create sprite and add to the sprite batch node
  var dragonSprite = cc.Sprite.createWithSpriteFrameName("dhch_1");
  dragonSprite.setPosition(cc.p(this.screenSize.width * 0.2, this.screenSize.height * 0.5));
  this.spriteBatchNode.addChild(dragonSprite, E_ZORDER.E_LAYER_PLAYER);

  // fetch flying animation from cache & repeat it on the dragon's  sprite
  var animation = cc.AnimationCache.getInstance().getAnimation("dragonFlying");
  dragonSprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));

  // create a hover movement and repeat it on the dragon's sprite
  var flySequence = cc.Sequence.create(cc.EaseSineOut.create(cc.MoveBy.create(animation.getDuration()/2, cc.p(0, 10))), cc.EaseSineOut.create(cc.MoveBy.create(animation.getDuration()/2, cc.p(0, -10))));
  dragonSprite.runAction(cc.RepeatForever.create(flySequence));
},

Now that we've added the sprite to spriteBatchNode, we'll run the animation we just created by fetching it from the cache. Finally, the flying motion is implemented using a sequence of cc.Actions, just like you've seen in the previous chapter. Run these actions on a sprite repeatedly and our dragon begins to fly. Notice how the duration for cc.MoveBy is based on the duration of the animation. This is done so that the flapping of the dragon's wings synchronizes with its up-and-down flying motion. Okay, so we have a flying dragon now, but it looks like it's flying through a black hole! So let's create the environment.