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