ActionScript
TypeScript
JavaScript

容器与节点控制

发布时间:2017-01-13

        首先,我们先了解一下什么是容器。(提到容器必须要了解显示对象,未了解显示对象的可以先去了解显示对象相关的文档章节。)

        容器是一种可以包含显示子对象的对象,方便用来控制多个显示对象的位置,缩放,旋转等属性。LayaAir里,Sprite既是显示对象,也是容器,所以Sprite既可以显示一个图片,也可以作为容器添加别的Sprite。


一、显示对象的容器Sprite

        下面我们就通过一段代码,把其它的显示对象装载到Sprite内。

package
{
    import laya.display.Sprite;
    import laya.display.Stage;
    import laya.events.Event;
    import laya.utils.Browser;
    import laya.webgl.WebGL;
     
    public class Sprite_Container
    {
        // 该容器用于装载4张猩猩图片
        private var apesCtn:Sprite;
         
        public function Sprite_Container()
        {
            // 不支持WebGL时自动切换至Canvas
            Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

            Laya.stage.alignV = Stage.ALIGN_MIDDLE;
            Laya.stage.alignH = Stage.ALIGN_CENTER;

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

            createApes();
        }

        private function createApes():void
        {
            // 每只猩猩距离中心点150像素
            var layoutRadius:int = 150;
            var radianUnit:Number = Math.PI / 2;
             
            apesCtn = new Sprite();
            Laya.stage.addChild(apesCtn);
             
            // 添加4张猩猩图片
            for (var i:int = 0; i < 4; i++ )
            {
                var ape:Sprite = new Sprite();
                ape.loadImage("../../../../res/apes/monkey" + i + ".png");
                 
                ape.pivot(55, 72);
                 
                // 以圆周排列猩猩
                ape.pos(
                    Math.cos(radianUnit * i) * layoutRadius,
                    Math.sin(radianUnit * i) * layoutRadius);

                apesCtn.addChild(ape);
            }
             
            apesCtn.pos(Laya.stage.width / 2, Laya.stage.height / 2);
             
            Laya.timer.frameLoop(1, this, animate);
        }
         
        private function animate(e:Event=null):void
        {
            apesCtn.rotation += 1;
        }
    }
}

blob.png

扫描二维码查看代码运行效果



二、节点控制


了解完容器,我们通过控制容器改变自身以及子级外观,实现节点控制。

package 
{
	import laya.display.Sprite;
	import laya.display.Stage;
	import laya.events.Event;
	import laya.utils.Browser;
	import laya.webgl.WebGL;

	public class Sprite_NodeControl 
	{
		private var ape1:Sprite;
		private var ape2:Sprite;
		
		public function Sprite_NodeControl() 
		{
			// 不支持WebGL时自动切换至Canvas
			Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

			Laya.stage.alignV = Stage.ALIGN_MIDDLE;
			Laya.stage.alignH = Stage.ALIGN_CENTER;

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

			createApes();
		}

		private function createApes():void
		{
			//显示两只猩猩
			ape1 = new Sprite();
			ape2 = new Sprite();
			ape1.loadImage("../../../../res/apes/monkey2.png");
			ape2.loadImage("../../../../res/apes/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);
		}
		
		private function animate(e:Event=null):void 
		{
			ape1.rotation += 2;
			ape2.rotation -= 4;
		}
		
	}
	
}


blob.png

扫描二维码查看代码运行效果