[27- Pixi教學] PixiParticles

Particles System

遊戲經常透過粒子系統製作各種視覺效果，例如火焰、煙霧、下雨、沙塵、爆炸等效果，並不容易使用一般的動畫工具製作。通常粒子系統在三維空間中的位置與運動是由發射器控制的，發射器可以設定粒子生成速度（即單位時間粒子生成的數目）、粒子初始速度向量（例如什麼時候向什麼方向運動）、粒子壽命（經過多長時間粒子湮滅）、粒子顏色、在粒子生命周期中的變化以及其它參數等等。經由這些參數，來產生不同的特效效果。

下圖為一個火燄特效的範例圖：

PixiParticles

官網網址如下：PixiParticles
Pixi Particles是一款供Pixi JS去使用的Particles功能，其官網對其功能的介紹如下：

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)

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

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

Pixi Particles Editor

粒子特效的config通常需要一個編輯軟體讓美術來調整相關數值，PixiParticles的編輯器在官網有提供，其網址為：https://pixijs.io/pixi-particles-editor/#pixieDust

Claire's Blog

[27- Pixi教學] PixiParticles

Particles System

PixiParticles

Pixi Particles Editor

發佈留言