Laya开发小游戏

1：Text的用法

效果如下：

展示效果

2：loadImage的用法，可以用来加载图片

Laya.init(600,400)
Laya.stage.bgColor="green"
var a=new Laya.Sprite()//等同于this.a=new Laya.Sprite(),也可以是a=new Laya.Sprite()
a.loadImage("res/images/1.png",0,0,500,300)
Laya.stage.addChild(a)

效果如下：

再来一个例子(点击图片进行切换)

//初始化舞台
Laya.init(350, 350);
//需要切换的图片资源路径
this.monkey1 = "res/images/1.png";
this.monkey2 = "res/images/123.png";
//切换状态
this.flag = false;
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
this.img = new Laya.Sprite();
//显示绘制的图片
switchImg();
//侦听switchImg中图片区域的点击事件，触发后执行switchImg切换图片
this.img.on(Laya.Event.CLICK,this,switchImg);
//添加到舞台
Laya.stage.addChild(img);
function switchImg(){
    //清空图片
    this.img.graphics.clear();
    //获得要切换的图片资源路径
    var imgUrl = (this.flag = !this.flag)? this.monkey1:this.monkey2;
    //加载显示图片，坐标位于100,50
    this.img.loadImage(imgUrl, 0, 0,300,300);
}

效果如下：

3：drawTexture加载图片的方式，如下

//初始化舞台
Laya.init(750, 450);
//需要切换的图片资源路径
this.monkey2 = "res/images/1.png";
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load(this.monkey2,Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
    var img = new Laya.Sprite();
    //获取图片资源，绘制到画布
    img.graphics.drawTexture(Laya.loader.getRes(this.monkey2),0,0,700,400);
    //添加到舞台
    Laya.stage.addChild(img);
}

效果如下：

另一个例子(点击切换图片)

//初始化舞台
Laya.init(1334, 750);
//需要切换的图片资源路径
this.monkey1 = "res/images/1.png";
this.monkey2 = "res/images/123.png";
//切换状态
this.flag = false;
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//加载多张图片，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
Laya.loader.load([this.monkey1,this.monkey2],Laya.Handler.create(this,graphicsImg));
function graphicsImg(){
    //创建一个实例
    this.img = new Laya.Sprite();
    //添加到舞台
    Laya.stage.addChild(this.img);
    //显示初始化绘制的图片
    switchImg();
    //侦听switchImg中图片区域的点击事件，触发后执行switchImg切换纹理绘制
    this.img.on(Laya.Event.CLICK,this,switchImg);            
    //设置图片坐标s
    this.img.pos(100,50);
}
function switchImg(){
    //清空绘制
    this.img.graphics.clear();
    //获得要切换的图片资源路径
    var imgUrl = (this.flag = !this.flag)? this.monkey2:this.monkey1;
    //获取图片资源
    var texture = Laya.loader.getRes(imgUrl);
    //绘制纹理
    this.img.graphics.drawTexture(texture);                        
    //设置纹理宽高
    this.img.size(texture.width, texture.height);   
}

效果如下：

4：给图片设置遮罩

(function () {
    var Sprite = Laya.Sprite;
    var Texture = Laya.Texture;
    var Handler = Laya.Handler;
    var Res;
    var img;
    (function () {
        Laya.init(1136, 640);
        //设置舞台背景色
        Laya.stage.bgColor = "#ffffff"
        //资源路径
        Res = "res/images/1.png";
        //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
        Laya.loader.load(Res, Handler.create(this, graphicsImg));
    })();
    function graphicsImg() {
        img = new Sprite();
        //获取图片资源，绘制到画布
        img.graphics.drawTexture(Laya.loader.getRes(Res), 150, 50);
        //添加到舞台
        Laya.stage.addChild(img);
        //创建遮罩对象
        var cMask = new Sprite();
        //画一个圆形的遮罩区域
        cMask.graphics.drawCircle(80, 80, 50, "#ff0000");
        //圆形所在的位置坐标
        cMask.pos(120, 50);
        //实现img显示对象的遮罩效果
        img.mask = cMask;
    }
})();

效果如下：

5：给图片设置滤镜

5.1：颜色滤镜

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//红色滤镜
creteRedFilter();
//灰色滤镜
createGrayFilter();
/**创建位图**/
function createImg(w,h){
    var Img = new Laya.Sprite(); 
    //添加到舞台
    Laya.stage.addChild(Img);   
    //加载显示图片
    Img.loadImage("res/images/1.png",w,h,180,180);  
    return Img;
}
/**创建红色滤镜位图**/
function creteRedFilter(){
    //颜色滤镜矩阵,红色
    var colorMatrix = 
        [
            1, 0, 0, 0, 0, //R
            0, 0, 0, 0, 0, //G
            0, 0, 0, 0, 0, //B
            0, 0, 0, 1, 0, //A
        ];
    //创建红色颜色滤镜
    var redFilter = new Laya.ColorFilter(colorMatrix);
    //在坐标280,50位置创建一个位图
    var img = createImg(280,50); 
    //添加红色颜色滤镜效果
    img.filters = [redFilter];
}
/**创建灰色滤镜位图**/
function createGrayFilter(){
    //颜色滤镜矩阵,灰色
    var colorMatrix = 
        [
            0.3086, 0.6094, 0.0820, 0, 0,  //R
            0.3086, 0.6094, 0.0820, 0, 0, //G
            0.3086, 0.6094, 0.0820, 0, 0,  //B
            0, 0, 0, 1, 0, //A
        ];
    //创建灰色颜色滤镜
    var GrayFilter = new Laya.ColorFilter(colorMatrix);
    //在坐标460,50位置创建一个位图
    var img = createImg(460,50);     
    //添加灰色颜色滤镜效果
    img.filters = [GrayFilter];
}

效果如下：

5.2：发光滤镜

//初始化舞台
Laya.init(1334,750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//发光滤镜
createGlowFilter();
//阴影滤镜
createShadeFilter();
/**创建位图**/
function createImg(w,h){
    var Img = new Laya.Sprite();
    //添加到舞台
    Laya.stage.addChild(Img);
    //加载显示图片，坐标位于100,50
    Img.loadImage("res/images/1.png",w,h,150,150);
    return Img;
}
/**创建发光滤镜位图**/
function createGlowFilter(){
    //创建发光滤镜位图
    var glowFilter = new Laya.GlowFilter("#ff0000",15,0,0);
    //在坐标280,50创建位图
    var img = createImg(280,50);
    //添加发光滤镜
    img.filters = [glowFilter];
}
/**创建阴影滤镜位图**/
function createShadeFilter(){
    //创建阴影滤镜
    var glowFilter = new Laya.GlowFilter("#000000",8,8,8);
    //在坐标460,50创建位图
    var img = createImg(460,50);
    //添加阴影滤镜
    img.filters = [glowFilter];
}

效果如下：

5.3： 模糊滤镜

//初始化舞台
Laya.init(1334,750,Laya.WebGL);
//设置舞台背景色
Laya.stage.bgColor = "#ffffff";
//原始位图
createImg(100,50);
//模糊滤镜
createBlurFilter();
/**创建位图**/
function createImg(w,h){
    var Img = new Laya.Sprite();
    //添加到舞台
    Laya.stage.addChild(Img);
    //加载显示图片，坐标位于100,50
    Img.loadImage("res/images/1.png",w,h,150,150);
    return Img;
}
/**创建糊滤滤镜位图**/
function createBlurFilter(){
    //创建模糊滤镜实例
    var blurFilter = new Laya.BlurFilter();
    //设置模糊强度
    blurFilter.strength = 5;
    //在坐标280,50创建位图
    var img = createImg(280,50);
    //添加滤镜效果
    img.filters = [blurFilter];
}

效果如下：