Book Image

Learning Cocos2d-JS Game Development

By : Emanuele Feronato
Book Image

Learning Cocos2d-JS Game Development

By: Emanuele Feronato

Overview of this book

Table of Contents (18 chapters)
Learning Cocos2d-JS Game Development
Credits
Foreword
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Creating Your Own Blockbuster Game – A Complete Match 3 Game
Index

Adding a gradient background


A quick and easy way to improve the background is to add a gradient. Most of the skies and sceneries you see in the background of your favorite games are just gradients.

You are going to add a gradient layer conveniently called gradient to the game simply by adding these two lines to gamescript.js:

var gameScene = cc.Scene.extend({
  // same as before
});

var game = cc.Layer.extend({
  init:function () {
    this._super();
    var gradient = cc.LayerGradient.create(cc.color(0,0,0,255), cc.color(0x46,0x82,0xB4,255));
    this.addChild(gradient);
    for(i=0;i<16;i++){
      var tile = cc.Sprite.create("assets/cover.png");
      this.addChild(tile,0);
      tile.setPosition(49+i%4*74,400-Math.floor(i/4)*74);
    }
  }
});

Gradient layer creation is made by the cc.LayerGradient.create method, which requires both the start and end gradient color in an RGBA (Red, Green, Blue, Alpha) format.

There are two things you need to notice about the lines that were added:

  1. The...