ActionScript
TypeScript
JavaScript

容器与节点控制

发布时间:2017-01-13

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

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


一、显示对象的容器Sprite

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

module laya {
    import Sprite = Laya.Sprite;
    import Stage = Laya.Stage;
    import Event = Laya.Event;
    import Browser = Laya.Browser;
    import WebGL = Laya.WebGL;

    export class Sprite_Container {
        // 该容器用于装载4张猩猩图片
        private apesCtn: Sprite;

        constructor() {
            // 不支持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";

            this.createApes();
        }

        private createApes(): void {
            // 每只猩猩距离中心点150像素
            var layoutRadius: number = 150;
            var radianUnit: number = Math.PI / 2;

            this.apesCtn = new Sprite();
            Laya.stage.addChild(this.apesCtn);

            // 添加4张猩猩图片
            for (var i: number = 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);

                this.apesCtn.addChild(ape);
            }

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

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

        private animate(e: Event): void {
            this.apesCtn.rotation += 1;
        }
    }
}
new laya.Sprite_Container();

blob.png

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



二、节点控制


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

module laya {
    import Sprite = Laya.Sprite;
    import Stage = Laya.Stage;
    import Event = Laya.Event;
    import Browser = Laya.Browser;
    import WebGL = Laya.WebGL;

    export class Sprite_NodeControl {
        private ape1: Sprite;
        private ape2: Sprite;

        constructor() {
            // 不支持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";

            this.createApes();
        }

        private createApes(): void {
            //显示两只猩猩
            this.ape1 = new Sprite();
            this.ape2 = new Sprite();
            this.ape1.loadImage("../../res/apes/monkey2.png");
            this.ape2.loadImage("../../res/apes/monkey2.png");

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

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

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

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

        private animate(e: Event): void {
            this.ape1.rotation += 2;
            this.ape2.rotation -= 4;
        }
    }
}
new laya.Sprite_NodeControl();


blob.png

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