Laya学习笔记-Sprite-1.7.10

一个标题一段代码

加载图片

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

// 方法1：使用loadImagevar 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);        }    }