1.引擎初始化,精灵、图片加载、把精灵添加到舞台
//初始化引擎,设置游戏的宽高
Laya.init(480,852,Laya.WebGL);
//将继承了精灵的游戏背景类添加到舞台
//创建循环滚动到背景
var bg:BackGround = new BackGround();
//把背景添加到舞台上并显示出来
Laya.stage.addChild(bg);
2.建立两个精灵拼凑在一起,放在一个box容器,让容器滚动,并让精灵上下交替,实现背景到滚动效果.
/**
* 循环滚动的游戏背景
*/
class BackGround extends Laya.Sprite {
//定义背景1
private bg1:Laya.Sprite;
//定义背景2
private bg2:Laya.Sprite;
constructor() {
super();
this.init();
}
init():void{
//创建背景1
this.bg1 = new Laya.Sprite();
//加载并显示背景图
this.bg1.loadImage("war/background.png");
//把背景图显示在容器内
this.addChild(this.bg1);
//创建背景2
this.bg2 = new Laya.Sprite();
//加载并显示背景图
this.bg2.loadImage("war/background.png");
//更改背景2的位置,放在背景1的上边
this.bg2.pos(0,-852);
//把背景图显示在容器内
this.addChild(this.bg2);
//创建一个帧循环,更新容器的位置
Laya.timer.frameLoop(1,this,this.onLoop);
}
onLoop():void{
//背景容器每帧向下移动一像素
this.y+=1;
//如果背景图到了不可见的位置,立马调整到上边循环显示
if(this.bg1.y+this.y>=852){
this.bg1.y-=852*2;
}
if(this.bg2.y+this.y>=852){
this.bg2.y-=852*2;
}
}
}