美文网首页
Laya开发小游戏

Laya开发小游戏

作者: 名字_都被占了 | 来源:发表于2018-08-12 11:20 被阅读0次

    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];
    }
    

    效果如下:

    相关文章

      网友评论

          本文标题:Laya开发小游戏

          本文链接:https://www.haomeiwen.com/subject/gvhsbftx.html