Laya学习笔记-Sprite-1.7.10

一个标题一段代码

加载图片

//初始化引擎
Laya.init(1080, 600);
Laya.stage.bgColor = "#fff"

// 方法1：使用loadImage
var spl:Sprite = new Sprite();
Laya.stage.addChild(spl);
spl.loadImage("../../laya/assets/comp/monkey2.png");

//设置锚点
spl.pivot(20,20);
//设置图片的起始位置
spl.pos(20,20);

图片容器

    // 每只猩猩距离中心点150像素
    var layoutRadius:int= 150;
    //角度
    var radianUnit:Number =  Math.PI / 2;


    //容器添加到舞台
    allSprites = new Sprite();
    Laya.stage.addChild(allSprites);



    //添加图片到容器
    for (var i:int = 0 ; i < 5 ; i++ ){
        var sprit:Sprite = new Sprite();
        sprit.loadImage("../../laya/assets/comp/monkey2.png");

        //设置轴心点。相当于分别设置pivotX和pivotY属性
        sprit.pivot(55, 72);



        // 以 圆周排列猩猩
              sprit.pos(Math.cos(radianUnit * i) * layoutRadius,Math.sin(radianUnit * i) * layoutRadius);
        allSprites.addChild(sprit);
    }

    allSprites.pos(Laya.stage.width/2,Laya.stage.height/2);

对图片的变换

        var ape:Sprite;

        private function createApe():void{
            ape = new Sprite();
            ape.loadImage("../../laya/assets/comp/monkey2.png");
            Laya.stage.addChild(ape);

            //设置锚点
            ape.pivot(55,72);
            //设置起始点
            ape.x = Laya.stage.width/2;
            //设置起始点
            ape.y = Laya.stage.height/2;

            //定时器
            Laya.timer.frameLoop(1,this,animate);


        }
        var scaleDelta:Number = 0;

        private function animate(e:Event=null):void{
            //旋转
            ape.rotation +=2;

            //缩放的速率
            scaleDelta += 0.02;
            //math.sin范围是-1到1
            var scaleValue:Number = Math.sin(scaleDelta);
            //缩放的范围是-1到1
            ape.scale(scaleValue,scaleValue);
        }

绘制不规则图形

    这些代码看着改改就可以用
    var canvas:Sprite = new Sprite();
    Laya.stage.addChild(canvas);

    var path:Array = [];
    path.push(0, -130);
    path.push(33, -33 );
    path.push(137, -30);
    path.push(55, 32);
    path.push(85, 130);
    path.push(0, 73);
    path.push(-85, 130);
    path.push(-55, 32);
    path.push(-137, -30);
    path.push(-33, -33 );

    canvas.graphics.drawPoly(Laya.stage.width / 2, Laya.stage.height / 2, path, "#FF7F50");

放大镜练习mask遮罩

    import laya.display.Sprite;
    import laya.events.Event;
    import laya.ui.Label;
    import laya.utils.Browser;
    import laya.webgl.WebGL;
    import laya.utils.Handler;
    public class Main {

        public function Main() {
            //初始化引擎
            Laya.init(1080, 600,WebGL);

            Laya.stage.bgColor = "#fff"

            //图片加载完成后执行方法
            Laya.loader.load("../../laya/assets/img/bg2.png", Handler.create(this,setup));
        }

        var bg2,maskSp:Sprite;
        private function setup(_e:*=null):void
        {   
            //背景
            var bg:Sprite = new Sprite();
            bg.loadImage("../../laya/assets/img/bg2.png");
            Laya.stage.addChild(bg);

            //第二张是放大的
            bg2 = new Sprite();
            bg2.loadImage("../../laya/assets/img/bg2.png");
            Laya.stage.addChild(bg2);
            bg2.scale(3, 3);

            //创建mask
            maskSp = new Sprite();
            //maskSp.loadImage("../../laya/assets/img/mask.png");
            maskSp.graphics.drawPoly(0,0,[0, 100, 50, 0, 100, 100], "#ffff00");
            maskSp.pivot(50, 60);

            bg2.mask = maskSp;
            Laya.stage.on("mousemove",this,omMouseMove);

        }

        private function omMouseMove(_e:*=null):void{
            //设置图片的位置
            bg2.x = -Laya.stage.mouseX * 2;
            bg2.y = -Laya.stage.mouseY * 2;
            //遮罩的位置
            maskSp.x = Laya.stage.mouseX;
            maskSp.y = Laya.stage.mouseY;
        }
    }

缓存为静态图像

        var textBox :Sprite = new Sprite();
        //缓存为静态图像，这里设置的容器的属性
        textBox.cacheAsBitmap = true;
        通过将多个显示对象缓存成静态图像可以大幅提升渲染效率

节点控制

    public class Main {

        public function Main() {
            //初始化引擎
            Laya.init(1080, 600,WebGL);

            Laya.stage.bgColor = "#fff"


            Laya.loader.load("../../laya/assets/img/monkey2.png", Handler.create(this,createApes));



        }

        var ape1,ape2:Sprite;
        private function createApes():void
        {
            //显示两只猩猩
            ape1 = new Sprite();
            ape2 = new Sprite();
            ape1.loadImage("../../laya/assets/img/monkey2.png");
            ape2.loadImage("../../laya/assets/img/monkey2.png");

            ape1.pivot(55, 72);
            ape2.pivot(55, 72);

            ape1.pos(Laya.stage.width / 2, Laya.stage.height / 2);
            ape2.pos(200, 0);

            //一只猩猩在舞台上，另一只被添加成第一只猩猩的子级
            Laya.stage.addChild(ape1);

            //主要说明的第二个添加的图片坐标系会改变
            ape1.addChild(ape2);

            Laya.timer.frameLoop(1, this, animate);
        }


        //这里必须初始化，遇到的坑
        var sca:Number = 0;
        private function animate(e:Event=null):void 
        {
            ape1.rotation += 2;
            ape2.rotation -= 4;

            //缩放的速率
            sca += 0.02;
            //math.sin范围是-1到1
            var scaleValue:Number = Math.sin(sca);
            //缩放的范围是-1到1
            ape2.scale(scaleValue,scaleValue);
            ape1.scale(scaleValue,scaleValue);
        }



    }

轴心点

sp1 = new Sprite();
//通过以下方法设置
sp1.pivot(55, 72);

切换纹理。这里使用graphics.drawTexture，也可以使用loadImage

        public class LayaSample {

        //图片1资源的地址
        private var texture1:String = "../../laya/assets/monkey2.png";
        //图片2资源的地址
        private var texture2:String = "../../laya/assets/monkey3.png";

        //标记用于切换
        private var flag:Boolean = false;

        //图片容器
        private var ape:Sprite;

        public function LayaSample() {
            //初始化引擎
            Laya.init(1136, 640);
            Laya.stage.alignV = Stage.ALIGN_MIDDLE;
            Laya.stage.alignH = Stage.ALIGN_CENTER;

            Laya.stage.scaleMode = "showall";
            Laya.stage.bgColor = "#232628";

            //我的理解应该是资源预加载，等加载成功调用后面的函数             Laya.loader.load([texture1,texture2],Handler.create(this,onAssetsLoaded));


        }

        private function dd():void{
            ape.rotation += 2;
        }


        private function onAssetsLoaded(e:*=null):void{
            ape = new Sprite();
            Laya.stage.addChild(ape);
            //设置中心点
            ape.pivot(55,72);
            //设置原点
            ape.pos(Laya.stage.width /2 ,Laya.stage.height/2);

            //首先初始化纹理
            switchTexture();
            //给纹理添加事件
            ape.on("click",this,switchTexture);
            //添加循环
            Laya.timer.frameLoop(1,this,dd);
        }


        private function switchTexture(e:*=null):void{
            //这里面是先判断在赋值
            var textureUrl:String = (flag = !flag) ? texture1 :texture2;

            //清除纹理
            ape.graphics.clear();

            //纹理加载
            var texture:Texture = Laya.loader.getRes(textureUrl);
            //设置纹理
            ape.graphics.drawTexture(texture,0,0);

            //设置纹理大小
            ape.size(texture.width,texture.height);
        }

    }