Building an Isometric City Game - HTML5 Game Development - page 152

2. Then, we deine a generic layer deiniion. A layer will contain other game elements
so it extends the EaselJS Container . This deiniion is used only within this code
block; that's why we define it as a local variable:
var Layer = (function(){
function Layer() {
cjs.Container.call(this); // super
}
Layer.prototype = Object.create(cjs.Container.prototype);
return Layer;
})();
3. Then, we create a new deiniion for CityLayer , which extends Layer . The city
layer doesn't contain any real logic yet. We are going to work on it in later tasks:
// City Layer
game.CityLayer = (function(){
function CityLayer() {
Layer.call(this);
}
CityLayer.prototype = Object.create(Layer.prototype);
return CityLayer;
})();
4. Next, we have the background layer deiniion. It also extends Layer . We put two
cloud animaions in it that move from right to let in order to make it less boring:
game.BGLayer = (function(){
function BGLayer(){
Layer.call(this); // super
// background image
var bitmap = new cjs.Bitmap('images/bg.png');
this.addChild(bitmap);
// Cloud 1 Bitmap
var cloud1 = new cjs.Bitmap('images/cloud1.png');
cloud1.y = 30;
cloud1.alpha = 0.4;
this.addChild(cloud1);
// Cloud 1 Tween Animation
cjs.Tween.get(cloud1, {loop:true})
.to({x:game.setting.gameWidth + 300}, 0)
.wait(15500)
.to({x:-300}, 50*1000);