Container 容器

简介

1 .一个游戏对象加入容器之后，会从场景的显示列表中删除，而加入容器内部的显示列表，由容器负责他的渲染，位置也是相对于容器位置而确定的
2 .容器可以嵌套
3 .容器可以添加遮罩
4 .游戏对象的位置自动变成相对容器的位置
5 .Container 的变换点是0X0,并且不能更改。添加的Container的子项也是应该根据此定位。
6 .当容器倍渲染时，所有的子集也会倍渲染，按照他们在容器中存在的顺序。容器子项可以使用MoveUp,MoveDown，sendToBack等方法重新调整层级顺序
7 .修改container的x,rotation，也会影响所有的子级对象
8 .容器可以和其他容器进行嵌套
9 .可以为输入启用容器。因为它们没有纹理，所以您需要为它们提供一个形状以用作它们的命中区域。也可以独立于容器为输入启用容器子项。

1686387452845.png

10 .1号位置是0,0 ,2号位置是-100,100,3号位置是100,100
11 .container.setAlpha(),设置透明度,会影响到子元素

定义容器

1 .const tainer=this.add.container(400,300)

容器方法

1 .add()
2 .addAt([],0)

添加emitter

const container = this.add.container(400, 300);

const emitter = this.add.particles(0, 0, 'lemming', {
            lifespan: 2000,
            speed: { min: 200, max: 400 },
            angle: 270,
            gravityY: 300
   });

  container.add(emitter);

1 .container 添加tween动画，emitter也会运动，跟着旋转

添加tileSprite

添加animation对象

this.anims.create({
            key: 'run',
            frames: 'mummy',
            frameRate: 20,
            repeat: -1
        });

 const sprite1 = this.add.sprite(100, 200, 'mummy').play('run')
const container = this.add.container(300, 0, [ sprite1 ])
this.tweens.add({
            targets: container,
            scaleX: 3,
            scaleY: 3,
            duration: 6000,
            yoyo: true,
            repeat: -1
        });

container 添加点击区域

const bg = this.add.image(0, 0, 'buttonBG');
        const text = this.add.image(0, 0, 'buttonText');

        const container = this.add.container(400, 300, [ bg, text ]);

        container.setSize(bg.width, bg.height);

        container.setInteractive();

        container.on('pointerover', () =>
        {

            bg.setTint(0x44ff44);

        });

        container.on('pointerout', () =>
        {

            bg.clearTint();

        });