FPS是指影格速率，是用於測量顯示張數的量度。測量單位為「每秒顯示張數」（Frame per Second，FPS）或「赫茲」，一般來說FPS用於描述影片、電子繪圖或遊戲每秒播放多少影格。一般說來，顯示器的張數為60Hz，因此，若超過60的fps容易會有畫面撕裂的狀況產生。而60FPS的遊戲體驗會相較30FPS的遊戲體驗來得更順暢。
//anchor指要把fps顯示的方框放在那邊，如果沒有傳值進去，則會放至document.body
//options是指相關的設定（請參見：https://github.com/darsain/fpsmeter/wiki/Options）
var meter = new FPSMeter([ anchor ] [, options ]);
若一個遊戲有多個不同的fps設定，則可以在該ticker去設定要顯示的fps是那一個ticker的
// Function that renders one frame
function render() {
// ... rendering happens here ...
meter.tick();
}
若要知道每一次render圖像時要花的時間，則使用下列方法：
// Function that renders one frame
function render() {
meter.tickStart();
// ... rendering happens here ...
meter.tick();
}
A particle system library for the PixiJS library. Also, we created an interactive particle editor to design and preview custom particle emitters which utilitze PixiParticles.
在官網的下方有範例可供參考，基本使用上會去用Emitter來設定config到特效裡，方法為：
new PIXI.particles.Emitter(particleParent, particleImages, config)
簡單的使用範例如下：
// Create a new emitter
var emitter = new PIXI.particles.Emitter(
// The PIXI.Container to put the emitter in
// if using blend modes, it's important to put this
// on top of a bitmap, and not use the root stage Container
container,
// The collection of particle images to use
[PIXI.Texture.fromImage('image.jpg')],
// Emitter configuration, edit this to change the look
// of the emitter
{
alpha: {
list: [
{
value: 0.8,
time: 0
},
{
value: 0.1,
time: 1
}
],
isStepped: false
},
scale: {
list: [
{
value: 1,
time: 0
},
{
value: 0.3,
time: 1
}
],
isStepped: false
},
color: {
list: [
{
value: "fb1010",
time: 0
},
{
value: "f5b830",
time: 1
}
],
isStepped: false
},
speed: {
list: [
{
value: 200,
time: 0
},
{
value: 100,
time: 1
}
],
isStepped: false
},
startRotation: {
min: 0,
max: 360
},
rotationSpeed: {
min: 0,
max: 0
},
lifetime: {
min: 0.5,
max: 0.5
},
frequency: 0.008,
spawnChance: 1,
particlesPerWave: 1,
emitterLifetime: 0.31,
maxParticles: 1000,
pos: {
x: 0,
y: 0
},
addAtBack: false,
spawnType: "circle",
spawnCircle: {
x: 0,
y: 0,
r: 10
}
}
);
// Calculate the current time
var elapsed = Date.now();
// Update function every frame
var update = function(){
// Update the next frame
requestAnimationFrame(update);
var now = Date.now();
// The emitter requires the elapsed
// number of seconds since the last update
emitter.update((now - elapsed) * 0.001);
elapsed = now;
// Should re-render the PIXI Stage
// renderer.render(stage);
};
// Start emitting
emitter.emit = true;
// Start the update
update();
Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.
var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);
var graphics = new PIXI.Graphics();
// set a line style
graphics.lineStyle(4, 0xffd900, 1);
// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(250, 250);
graphics.endFill();
app.stage.addChild(graphics);
成果如下：
而這是畫矩型的一個簡單範例：
var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);
var graphics = new PIXI.Graphics();
// draw a rounded rectangle
graphics.lineStyle(2, 0xFF00FF, 1);
graphics.beginFill(0xFF00BB, 0);
graphics.drawRoundedRect(150, 450, 300, 100, 1);
graphics.endFill();
app.stage.addChild(graphics);
