Laya实现Banner
随着微信小游戏的突起，一些游戏引擎也越来越火了，目前支持小游戏的游戏引擎就那么几个：Cocos、Egret、Laya
Laya是最近起来的，我觉得他会火！我加入官方的开发群时已到3群了，3群已快满 ，在群中，常有人问怎么实现广告Banner轮播效果，这里特意写下制作过程。
具体思路：
1、创建一个Panel,用来作Banner的窗口，为什么选Panel而不使用Sprite?如果是全屏的话，Sprite也可用，但如果Banner只是一部分，Sprite就会把该隐藏的图片一起显示出来了，而Panel不会
2、创建两个Image，width和height属性都与Panel一样，一个在左，一个在右，即x1=0,y1=0 ;x2=width,y2=0
3、设置图片path数组
4、开始轮播，采用Laya.timer.loop定时器实现，每隔一定时间，改变两个Image的x值，当一个image的x值变化超过了width的时候，即停止，然后把移动到外面的Image改变x值，相当于把当前的第二个Image改成第一个Image,而第一个Image又变成动画前的第二个Image,如此循环，达到Banner轮播效果
接下来，上代码：
module banner {
export class BannerPage extends ui.BannerUI {
public imgs: Array;
//延迟
public delay = 2000;
//停留时间
private stopTime = 1500;
//第一个img的图片索引
private index1 = 0;
//第二个img的图片索引
private index2 = 1;
//速度
private speed = 1;
constructor() {
super();
this.speed = this.width / (this.delay - this.stopTime);
}
public setStopTime(time: number) {
this.stopTime = time;
this.speed = this.width / (this.delay - this.stopTime);
}
/**
* 设置数据，设置完成后开妈轮播
* @param imgs
*/
public setData(imgs: Array): void {
this.imgs = imgs;
if (this.imgs.length <= 1) {
//只有一张
this.img1.skin = (this.imgs[0]);
} else {
//有多张
//开始轮播
this.startPlay();
}
}
public startPlay() {
//少于两张的就不轮播
if (this.imgs.length < 2) return;
this.img1.skin = (this.imgs[0]);
this.img2.skin = (this.imgs[1]);
Laya.timer.loop(this.delay, this, this.loopImg);
}
/**
* 图片循环动画
*
*/
private loopImg() {
var thiz = this;
Laya.timer.loop(10, this, this.onLoop);
}
private onLoop() {
//判断哪个在前面
var imgLeft = this.img1.x < this.img2.x ? this.img1 : this.img2;
if (imgLeft.x <= -this.width) {
//到头了,清除循环
Laya.timer.clear(this, this.onLoop);
//把left的img移动到右边
//同时改变图片
//如果第一张图片在前面，则index1+=2
if (this.img1.x < this.img2.x) {
this.index1 += 2;
this.img1.skin = (this.imgs[this.index1 % this.imgs.length]);
} else {
this.index2 += 2;
this.img2.skin = (this.imgs[this.index2 % this.imgs.length]);
}
//把第一张图片放到右边去
imgLeft.x = this.width;
return;
}
this.img1.x -= this.speed * 10;
this.img2.x -= this.speed * 10;
}
}
}
使用：
import WebGL = Laya.WebGL;
// 程序入口
class GameMain {
constructor() {
Laya.init(600, 800, WebGL);
var imgs = [
'http://www.ytmfdw.com/image/img1.jpg',
'http://www.ytmfdw.com/image/img2.jpg',
'http://www.ytmfdw.com/image/img3.jpg',
'http://www.ytmfdw.com/image/img4.jpg'
];
var bannerPage = new banner.BannerPage();
Laya.stage.addChild(bannerPage);
bannerPage.setData(imgs);
}
}
new GameMain();
界面
ui.BannerUI:
{
"x":0,
"type":"View",
"selectedBox":1,
"selecteID":1,
"props":{"width":500,"sceneColor":"#000000","height":1000},
"nodeParent":-1,
"label":"View",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":1,
"child":[
{
"x":15,
"type":"Panel",
"props":{"y":0,"x":0,"width":500,"var":"bannerLayout","height":300},
"nodeParent":1,
"label":"Panel(bannerLayout)",
"isOpen":true,
"isDirectory":true,
"isAniNode":true,
"hasChild":true,
"compId":2,
"child":[
{
"x":30,
"type":"Image",
"props":{"y":0,"x":0,"width":500,"var":"img1","height":300},
"nodeParent":2,
"label":"Image(img1)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":4,
"child":[
]
},
{
"x":30,
"type":"Image",
"props":{"y":0,"x":500,"width":500,"var":"img2","height":300},
"nodeParent":2,
"label":"Image(img2)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":5,
"child":[
]
},
{
"x":30,
"type":"Sprite",
"props":{"y":270,"x":0,"width":500,"var":"dotLayout","height":30},
"nodeParent":2,
"label":"Sprite(dotLayout)",
"isDirectory":false,
"isAniNode":true,
"hasChild":false,
"compId":3,
"child":[
]
}]
}],
"animations":[
{
"nodes":[
],
"name":"ani1",
"id":1,
"frameRate":24,
"action":0
}]
}
zip下载地址
