PixiJS 粒子喷出器

用于 皮克西杰斯语Name 图书馆。 而且,我们创造了一个 交互式粒子编辑器 用于设计和预览自定义的粒子发射器,该粒子发射器可使 PixiJS 粒子发射器实用化。 请注意,编辑器是为一个更古老的版本的库而建的 - 要使用它的输出,您必须使用 upgradeConfig() 函数.

从 v5 中突破 v6 的更改

• pixi.js 更新到 v8
• 现在所有从 “ pixi.js ” 导入, 它都是向后兼容的, 但最好用于 pixi.js < v8
• emitter 的更新方法现在有类型参数: 编号 QQ 计票器
• 删除了 LinkedListContainer(目前,正在开发中)
• 粒子性能实例现在不起作用, 因为无法使用 LinkedListContainer
• 更新到较新版本的依赖性(例如现在的打字版本为^ 5.0.4)
• 实例更新到 pixi.js 页:1

从 v4 中突破 v5 的更改

• 项目改名为 pixi-particles 改为 @pixi/particle-emitter
• 打开 Emitter,配置格式发生了急剧变化。 使用 upgradeConfig() 以自动转换旧的配置对象.
• PathParticle 财务报告和审定财务报表 AnimatedParticle 不再存在 改用新行为.
• PixiJS v4. 请使用 v6 - 而 v5 可能会起作用, Typescription 定义不会起作用, 并且会导致你头痛 .
• 图书馆现在输出ES6代码 - 如果你需要它在ES5代码中,你需要确保你的构建过程转接它.

样本使用

请参看各种预制出粒子配置的示例.

// Create a new emitter
// note: if importing library like "import * as particles from '@pixi/particle-emitter'"
// or "const particles = require('@pixi/particle-emitter')", the PIXI namespace will
// not be modified, and may not exist - use "new particles.Emitter()", or whatever
// your imported namespace is
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,
    // Emitter configuration, edit this to change the look
    // of the emitter
    {
        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,
        behaviors: [
            {
                type: 'alpha',
                config: {
                    alpha: {
                        list: [
                            {
                                value: 0.8,
                                time: 0
                            },
                            {
                                value: 0.1,
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'scale',
                config: {
                    scale: {
                        list: [
                            {
                                value: 1,
                                time: 0
                            },
                            {
                                value: 0.3,
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'color',
                config: {
                    color: {
                        list: [
                            {
                                value: "fb1010",
                                time: 0
                            },
                            {
                                value: "f5b830",
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'moveSpeed',
                config: {
                    speed: {
                        list: [
                            {
                                value: 200,
                                time: 0
                            },
                            {
                                value: 100,
                                time: 1
                            }
                        ],
                        isStepped: false
                    },
                }
            },
            {
                type: 'rotationStatic',
                config: {
                    min: 0,
                    max: 360
                }
            },
            {
                type: 'spawnShape',
                config: {
                    type: 'torus',
                    data: {
                        x: 0,
                        y: 0,
                        radius: 10
                    }
                }
            },
            {
                type: 'textureSingle',
                config: {
                    texture: PIXI.Texture.from('image.jpg')
                }
            }
        ],
    }
);

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

// Start emitting
emitter.emit = true;

// Start the update
update();

文档

http://pixijs.github.io/粒子-emitter/docs/ 互联网档案馆的存檔,存档日期2013-12-21

安装

PixiJS 粒子放送器可以安装在国家预防机制或其他软件包管理器中.

npm install @pixi/particle-emitter

实例

• 爆炸 1
• 爆炸2
• 爆炸 3
• 爆炸环
• 巨魔死亡事件
• 雨声
• 火焰
• 多边形链上的火焰
• 高级多边形链上的火焰
• 火焰 - 有步骤的颜色
• 有烟的火焰
• 火焰 - 喷出
• 天然气
• 烟泡
• 泡泡喷出
• 泡泡流线
• 泡泡流 - 跟踪路径
• 垂直泡泡
• 卡通烟
• 卡通烟台.
• 卡通烟花
• 雪
• 闪光点
• 喷泉
• 动画 Coins
• 动画泡泡
• 宇宙飞船销毁 -- -- 有秩序的艺术
• 颗粒容器性能

贡献者说明

这个项目使用 yarn 而不是说 npm 利用试验工作空间的特点,使在可能情况下有分享依赖关系的独立试验更加容易.

许可证

版权(c)2015年 云宝宝

根据麻省理工学院的许可获释.