TypeScript pixi.js.Container類代碼示例

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);
	};
});

  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;
  }

		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)
		})

	makeTextContainer (labelComponents: (string | Item)[], maxWidth: number): Container {
		const style: TextStyle = new TextStyle({
			fontFamily: AssetsConfig.FONT_DEFAULT,
			fill: DB16.BLACK,
			fontSize: 20,
			wordWrap: true,
			wordWrapWidth: maxWidth,
		})
		const container = new Container()
		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)
		})
		return container
	}

import * as PIXI from 'pixi.js';
import { Party, PartyUnits } from './models/party';
import { BattleScene } from './components/scenes/battle-scene';
import { Unit } from './models/unit';
import { UnitService } from './services/unit-service';
import { UnitBattleCard } from './components/unit-battle-card';
import { FpsCounter } from './components/fps-counter';
import { TweenManager } from './tween/tween-manager';

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);

 public detached(): void {
   if (this.container && this._sprite) {
     this.container.removeChild(this._sprite);
     this._sprite.destroy();
     this._sprite = null;
   }
 }

 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);
   }
 }

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

	/**
	 * Updates all particles spawned by this emitter and emits new ones.
	 * @param delta Time elapsed since the previous frame, in __seconds__.
	 */
	public update(delta: number)
	{
		if (this._autoUpdate)
		{
			delta = delta / settings.TARGET_FPMS / 1000;
		}

		//if we don't have a parent to add particles to, then don't do anything.
		//this also works as a isDestroyed check
		if (!this._parent) return;
		//update existing particles
		let i, particle, next;
		for (particle = this._activeParticlesFirst; particle; particle = next)
		{
			next = particle.next;
			particle.update(delta);
		}
		let prevX, prevY;
		//if the previous position is valid, store these for later interpolation
		if(this._prevPosIsValid)
		{
			prevX = this._prevEmitterPos.x;
			prevY = this._prevEmitterPos.y;
		}
		//store current position of the emitter as local variables
		let curX = this.ownerPos.x + this.spawnPos.x;
		let curY = this.ownerPos.y + this.spawnPos.y;
		//spawn new particles
		if (this._emit)
		{
			//decrease spawn timer
			this._spawnTimer -=  delta < 0 ? 0 : delta;
			//while _spawnTimer < 0, we have particles to spawn
			while(this._spawnTimer <= 0)
			{
				//determine if the emitter should stop spawning
				if(this._emitterLife > 0)
				{
					this._emitterLife -= this._frequency;
					if(this._emitterLife <= 0)
					{
						this._spawnTimer = 0;
						this._emitterLife = 0;
						this.emit = false;
						break;
					}
				}
				//determine if we have hit the particle limit
				if(this.particleCount >= this.maxParticles)
				{
					this._spawnTimer += this._frequency;
					continue;
				}
				//determine the particle lifetime
				let lifetime;
				if (this.minLifetime == this.maxLifetime)
					lifetime = this.minLifetime;
				else
					lifetime = Math.random() * (this.maxLifetime - this.minLifetime) + this.minLifetime;
				//only make the particle if it wouldn't immediately destroy itself
				if(-this._spawnTimer < lifetime)
				{
					//If the position has changed and this isn't the first spawn,
					//interpolate the spawn position
					let emitPosX, emitPosY;
					if (this._prevPosIsValid && this._posChanged)
					{
						//1 - _spawnTimer / delta, but _spawnTimer is negative
						let lerp = 1 + this._spawnTimer / delta;
						emitPosX = (curX - prevX) * lerp + prevX;
						emitPosY = (curY - prevY) * lerp + prevY;
					}
					else//otherwise just set to the spawn position
					{
						emitPosX = curX;
						emitPosY = curY;
					}
					//create enough particles to fill the wave (non-burst types have a wave of 1)
					i = 0;
					for(let len = Math.min(this.particlesPerWave, this.maxParticles - this.particleCount); i < len; ++i)
					{
						//see if we actually spawn one
						if (this.spawnChance < 1 && Math.random() >= this.spawnChance)
							continue;
						//create particle
						let p;
						if(this._poolFirst)
						{
							p = this._poolFirst;
							this._poolFirst = this._poolFirst.next;
							p.next = null;
						}
						else
						{
							p = new this.particleConstructor(this);
						}
//.........這裏部分代碼省略.........