TypeScript pixi.js.Texture類代碼示例

	/**
	 * Checks over the art that was passed to the Emitter's init() function, to do any special
	 * modifications to prepare it ahead of time.
	 * @param art The array of art data, properly formatted for AnimatedParticle.
	 * @return The art, after any needed modifications.
	 */
	public static parseArt(art: AnimatedParticleArt[])
	{
		let data, output: any, textures, tex, outTextures;
		let outArr:ParsedAnimatedParticleArt[] = [];
		for(let i = 0; i < art.length; ++i)
		{
			data = art[i];
			outArr[i] = output = {} as ParsedAnimatedParticleArt;
			output.textures = outTextures = [];
			textures = data.textures;
			for(let j = 0; j < textures.length; ++j)
			{
				tex = textures[j];
				if(typeof tex == "string")
					outTextures.push(Texture.fromImage(tex));
				else if(tex instanceof Texture)
					outTextures.push(tex);
				//assume an object with extra data determining duplicate frame data
				else
				{
					let dupe = tex.count || 1;
					if(typeof tex.texture == "string")
						tex = Texture.fromImage(tex.texture);
					else// if(tex.texture instanceof Texture)
						tex = tex.texture;
					for(; dupe > 0; --dupe)
					{
						outTextures.push(tex);
					}
				}
			}

			//use these values to signify that the animation should match the particle life time.
			if(data.framerate == "matchLife")
			{
				//-1 means that it should be calculated
				output.framerate = -1;
				output.duration = 0;
				output.loop = false;
			}
			else
			{
				//determine if the animation should loop
				output.loop = !!data.loop;
				//get the framerate, default to 60
				output.framerate = data.framerate > 0 ? data.framerate : 60;
				//determine the duration
				output.duration = outTextures.length / output.framerate;
			}
		}

		return outArr;
	}

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

	/**
	 * Checks over the art that was passed to the Emitter's init() function, to do any special
	 * modifications to prepare it ahead of time.
	 * @param art The array of art data. For Particle, it should be an array of
	 *            Textures. Any strings in the array will be converted to
	 *            Textures via Texture.from().
	 * @return The art, after any needed modifications.
	 */
	public static parseArt(art:any[]): any[]
	{
		//convert any strings to Textures.
		let i;
		for(i = art.length; i >= 0; --i)
		{
			if(typeof art[i] == "string")
				art[i] = Texture.fromImage(art[i]);
		}
		//particles from different base textures will be slower in WebGL than if they
		//were from one spritesheet
		if(ParticleUtils.verbose)
		{
			for(i = art.length - 1; i > 0; --i)
			{
				if(art[i].baseTexture != art[i - 1].baseTexture)
				{
					if (window.console)
						console.warn("PixiParticles: using particle textures from different images may hinder performance in WebGL");
					break;
				}
			}
		}

		return art;
	}

export function textureFromUint8ArrayPNG(data: Uint8Array) {
  return PIXI.Texture.fromImage(`data:image/png;base64,${uInt8ToBase64(data)}`);
}

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