TypeScript js.Container.addChild方法代碼示例

loader.load(function()
{
	debugger;
	bg = new pixi.Sprite(pixi.Texture.from("../../docs/examples/images/bg.png"));
	//bg is a 1px by 1px image
	bg.scale.x = canvas.width;
	bg.scale.y = canvas.height;
	bg.tint = 0x000000;
	stage.addChild(bg);
	//collect the textures, now that they are all loaded
	const art = [];
	for(let i = 0; i < imagePaths.length; ++i)
		art.push(pixi.Texture.from(imagePaths[i]));
	// Create the new emitter and attach it to the stage
	const emitterContainer = new pixi.Container();
	stage.addChild(emitterContainer);
	(window as any).emitter = emitter = new particles.Emitter(
		emitterContainer,
		art,
		config
	);

	// Center on the stage
	emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2);

	// Click on the canvas to trigger
	canvas.addEventListener('mouseup', function(e){
		if(!emitter) return;
		emitter.emit = true;
		emitter.resetPositionTracking();
		emitter.updateOwnerPos(e.offsetX || e.layerX, e.offsetY || e.layerY);
	});

	// Start the update
	update();

	//for testing and debugging
	(window as any).destroyEmitter = function()
	{
		emitter.destroy();
		emitter = null;
		(window as any).destroyEmitter = null;
		//cancelAnimationFrame(updateId);

		// V4 code - dunno what it would be in V5, or if it is needed
		//reset SpriteRenderer's batching to fully release particles for GC
		// if (renderer.plugins && renderer.plugins.sprite && renderer.plugins.sprite.sprites)
		// 	renderer.plugins.sprite.sprites.length = 0;

		renderer.render(stage);
	};
});

		labelComponents.forEach(component => {
			let child: Container
			if (typeof component === 'string') {
				child = new Text(component, style)
			} else {
				child = component.createSprite()
				child.scale.set(0.5)
			}
			child.x = container.width + PIXEL_SIZE
			container.addChild(child)
		})

  private prepareStage(): PIXI.Container {
    const stage = new PIXI.Container();
    const { width, height } = this.config;
    stage.width = this.config.width;
    stage.height = this.config.height;

    const distanceBetween = 40;
    const padding = 20;
    const color = 0x6FC3DF;
    const steps = [0.4, 0.2, 0.1];
    const grid = new PIXI.Graphics();
    for (let i = distanceBetween; i < width; i += distanceBetween) {
      this.drawLine(grid, [i, padding], [i, height - padding], color, steps);
    }
    for (let i = distanceBetween; i < height; i += distanceBetween) {
      this.drawLine(grid, [padding, i], [width - padding, i], color, steps);
    }
    stage.addChild(grid);
    return stage;
  }

 public attached(): void {
   if (this.container) {
     const $this = this as PixiSprite & { [key: string]: unknown };
     this._sprite = new Sprite(loader.resources[this.src as string].texture);
     for (const prop of directProps) {
       if ($this[prop] !== undefined) {
         this._sprite[prop] = $this[prop];
       }
     }
     for (const prop of pointProps) {
       if ($this[`${prop}X`] !== undefined) {
         (this._sprite[prop] as { x: unknown }).x = $this[`${prop}X`];
       }
       if ($this[`${prop}Y`] !== undefined) {
         (this._sprite[prop] as { y: unknown }).y = $this[`${prop}Y`];
       }
     }
     this.width = this._sprite.width;
     this.container.addChild(this._sprite);
   }
 }

import * as PIXI from 'pixi.js';

var renderer = PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb});
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.png');
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;
stage.addChild(bunny);
animate();

function animate() {
    requestAnimationFrame(animate);
    var bunny = stage.getChildAt(0);
    bunny.rotation += 0.01;
    renderer.render(stage);
}

//.........這裏部分代碼省略.........
						}
						p.speedList.reset(this.startSpeed);
						p.acceleration.x = this.acceleration.x;
						p.acceleration.y = this.acceleration.y;
						p.maxSpeed = this.maxSpeed;
						if(this.minimumScaleMultiplier != 1)
						{
							p.scaleMultiplier = Math.random() * (1 - this.minimumScaleMultiplier) + this.minimumScaleMultiplier;
						}
						p.scaleList.reset(this.startScale);
						p.colorList.reset(this.startColor);
						//randomize the rotation speed
						if(this.minRotationSpeed == this.maxRotationSpeed)
							p.rotationSpeed = this.minRotationSpeed;
						else
							p.rotationSpeed = Math.random() * (this.maxRotationSpeed - this.minRotationSpeed) + this.minRotationSpeed;
						p.rotationAcceleration = this.rotationAcceleration;
						p.noRotation = this.noRotation;
						//set up the lifetime
						p.maxLife = lifetime;
						//set the blend mode
						p.blendMode = this.particleBlendMode;
						//set the custom ease, if any
						p.ease = this.customEase;
						//set the extra data, if any
						p.extraData = this.extraData;
						//call the proper function to handle rotation and position of particle
						this._spawnFunc(p, emitPosX, emitPosY, i);
						//initialize particle
						p.init();
						//update the particle by the time passed, so the particles are spread out properly
						p.update(-this._spawnTimer);//we want a positive delta, because a negative delta messes things up
						//add the particle to the display list
						if(!p.parent)
						{
							if (this.addAtBack)
								this._parent.addChildAt(p, 0);
							else
								this._parent.addChild(p);
						}
						else
						{
							//kind of hacky, but performance friendly
							//shuffle children to correct place
							let children = this._parent.children;
							//avoid using splice if possible
							if(children[0] == p)
								children.shift();
							else if(children[children.length-1] == p)
								children.pop();
							else
							{
								let index = children.indexOf(p);
								children.splice(index, 1);
							}
							if(this.addAtBack)
								children.unshift(p);
							else
								children.push(p);
						}
						//add particle to list of active particles
						if(this._activeParticlesLast)
						{
							this._activeParticlesLast.next = p;
							p.prev = this._activeParticlesLast;
							this._activeParticlesLast = p;
						}
						else
						{
							this._activeParticlesLast = this._activeParticlesFirst = p;
						}
						++this.particleCount;
					}
				}
				//increase timer and continue on to any other particles that need to be created
				this._spawnTimer += this._frequency;
			}
		}
		//if the position changed before this update, then keep track of that
		if(this._posChanged)
		{
			this._prevEmitterPos.x = curX;
			this._prevEmitterPos.y = curY;
			this._prevPosIsValid = true;
			this._posChanged = false;
		}

		//if we are all done and should destroy ourselves, take care of that
		if (!this._emit && !this._activeParticlesFirst)
		{
			if (this._completeCallback)
			{
				this._completeCallback();
			}
			if (this._destroyWhenComplete)
			{
				this.destroy();
			}
		}
	}

const game = document.getElementById('game') as HTMLDivElement;
const renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, {
	backgroundColor: 0x6495ED
});
game.appendChild(renderer.view);

const stage = new PIXI.Container();

const barb1 = Unit.getByCode('barbarian');
const paly1 = Unit.getByCode('paladin');
const amzn1 = Unit.getByCode('amazon');
const sorc1 = Unit.getByCode('sorceress');
const leftParty = new Party([ barb1, paly1, amzn1, sorc1 ]);

const barb2 = Unit.getByCode('barbarian');
const paly2 = Unit.getByCode('paladin');
const amzn2 = Unit.getByCode('amazon');
const sorc2 = Unit.getByCode('sorceress');
const rightParty = new Party([ barb2, paly2, amzn2, sorc2 ]);

const battleScene = new BattleScene(leftParty, rightParty);
stage.addChild(battleScene);

const fpsCounter = new FpsCounter();
stage.addChild(fpsCounter);

PIXI.ticker.shared.add((time) => {
	renderer.render(stage);
	TweenManager.Instance.update();
});