Как вы создаете такие эффекты, как огонь, дым, магия и взрывы? Вы делаете много спрайтов, десятки, сотни, даже тысячи спрайтов. Затем примените к этим спрайтам некоторую физику, чтобы они вели себя как элемент, который вы пытаетесь смоделировать. Вы также должны дать им некоторые правила о том, как они должны появляться и исчезать, и какие шаблоны должны образовываться. Эти крошечные спрайты называются частицами. Вы можете использовать их для создания различных спецэффектов для своей игры.
Использование библиотеки пыли
Pixi не имеет встроенной функции для создания эффектов частиц, но вы можете использоватьDustЛегкая библиотека для их создания.
Уведомление:Dust— это быстрый и простой способ создать большинство эффектов частиц, которые нужны вашей игре, но если вам нужна более полнофункциональная и более сложная библиотека, ознакомьтесь сProton
использоватьDustБиблиотеки и использованиеSpriteUtilitiesБиблиотеки одинаковые.
Во-первых, используйте тег script напрямую, чтобы импортировать файл js.
<script src="https://www.kkkk1000.com/js/dust.js"></script>
затем создайте его экземпляр
d = new Dust(PIXI);
Переменная d теперь означаетDustпример.
Далее в вызове игрового циклаDustМетод обновления, этот метод используется для обновления частицы. мы сделали в предыдущей статьеПримерЕсть две функции gameLoop и play, где можно это сделать. Рекомендуется делать это в игровом цикле, сразу после вызова функции состояния, но перед фазой рендеринга, например:
function gameLoop(){
requestAnimationFrame(gameLoop);
state();
d.update();
renderer.render(stage);
}
делать частицы
Чтобы сделать частицы, вам нужно использоватьDustбиблиотекаcreateметод
параметр:
| имя | Типы | По умолчанию | описывать |
|---|---|---|---|
| x | number | 0 | x-координата, где появляется частица |
| y | number | 0 | координата y, где появляется частица |
| spriteFunction | function | Функция, которая возвращает спрайт для использования для каждой частицы, если предоставлен спрайт с несколькими кадрами, Dust будет случайным образом отображать разные кадры. | |
| container | object | Контейнер PIXI | емкость для добавления частиц |
| numberOfParticles | number | 20 | количество частиц для создания |
| gravity | number | 0 | сила тяжести |
| randomSpacing | boolean | true | случайный интервал |
| minAngle | number | 0 | Минимальный угол |
| maxAngle | number | 6.28 | максимальный угол |
| minSize | number | 4 | наименьший размер |
| maxSize | number | 16 | самый большой размер |
| minSpeed | number | 0.3 | минимальная скорость |
| maxSpeed | number | 3 | Максимальная скорость |
| minScaleSpeed | number | 0.01 | Минимальная пропорциональная скорость |
| maxScaleSpeed | number | 0.05 | Максимальная пропорциональная скорость |
| minAlphaSpeed | number | 0.02 | Минимальная альфа-скорость |
| maxAlphaSpeed | number | 0.02 | максимальная альфа-скорость |
| minRotationSpeed | number | 0.01 | Минимальная скорость вращения |
| maxRotationSpeed | number | 0.03 | максимальная скорость вращения |
возвращаемое значение:
Возвращает массив, содержащий ссылки на все мастера, используемые в качестве частиц.Если вам нужно обнаружение столкновений, вы должны получить к ним доступ, что может быть полезно.
Теперь давайте попробуем этот метод.
Образец кода:
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script src="https://www.kkkk1000.com/js/dust.js"></script>
<script>
//创建一个 Pixi应用 需要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//创建一个 Pixi应用
let app = new PIXI.Application(option);
//获取舞台
let stage = app.stage;
//获取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 创建的 canvas 添加到页面上
playground.appendChild(renderer.view);
let su = new SpriteUtilities(PIXI);
let d = new Dust(PIXI);
//需要加载的图片的地址
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-ParticleEffects/star.png";
//加载图像，加载完成后执行setup函数
PIXI.loader.add(imgURL).load(setup);
function setup() {
stars = d.create(
128, //x 起始坐标
128, //y 起始坐标
() => su.sprite(imgURL), //返回要用于每个粒子的精灵
stage, //粒子的容器
50, //粒子数
0,//重力
false,//随机间隔
0, 6.28,//最小/最大角度
30, 90,//最小/最大尺寸
1, 3//最小/最大速度
);
//开始游戏循环
gameLoop();
}
function gameLoop() {
requestAnimationFrame(gameLoop);
d.update();
renderer.render(stage);
}
</script>
</body>
</html>
Использование контейнеров частиц
В коде предыдущего примера все созданные нами частицы были добавлены в корневой контейнер (четвертый параметр). Однако вы можете добавить частицы в любой контейнер или любой другой спрайт, который вам нравится.
У Пикси естьParticleContainerметод, любой вParticleContainerЭльфы в.Containerрендерит в 2-5 раз быстрее.
Узнайте здесьParticleContainer
Если вы хотите использовать частицуParticleContainer, как раз вcreateВ четвертый параметр метода добавьтеParticleContainerИмя объекта. Вот модификация кода предыдущего примера для добавления частиц в контейнер с именем starContainer.ParticleContainerМетоды.
//创建ParticleContainer并将其添加到stage
let starContainer = new PIXI.particle.ParticleContainer(
1500,
{ alpha: true, scale: true, rotation: true, uvs: true }
);
stage.addChild(starContainer);
function setup() {
//创建星形粒子并将它们添加到starContainer
stars = d.create(
128, //x 起始坐标
128, //y 起始坐标
() => su.sprite(imgURL),
starContainer, //粒子的容器
50, //粒子数
0,//重力
false,//随机间隔
0, 6.28,//最小/最大角度
30, 90,//最小/最大尺寸
1, 3//最小/最大速度
);
//开始游戏循环
gameLoop();
}
ParticleContainersОптимизирован для обработки тысяч спрайтов, поэтому, если вы не анимируете множество частиц, вы, вероятно, не заметитеContainerПовышение производительности объекта.
Используйте эмиттеры частиц
createМетод производит взрыв частиц, но обычно вы должны производить непрерывный поток частиц. Вы можете сделать это с помощью эмиттеров частиц. Излучатели частиц порождают частицы через равные промежутки времени, чтобы создать эффект потока, вы можете использоватьDustизemitterспособ создания излучателя частиц. У эмиттеров есть методы воспроизведения и остановки, которые позволяют включать и выключать поток частиц и определять интервал, с которым создаются частицы.
Код ниже используетDustизemitterОбщий формат метода. Он принимает два параметра.
Первый параметр — интервал создания частиц (в миллисекундах).
Второй параметр такой же, как тот, который мы использовали в предыдущем примере.createМетод тот же.
let particleStream = d.emitter(
100,
() => d.create();
);
Любое значение интервала 100 миллисекунд или меньше создаст впечатление, что частицы текут непрерывным потоком. Вот некоторый код для создания эффекта звездного фонтана.
let particleStream = d.emitter(
100,
() => d.create(
128, 128,
() => su.sprite(imgURL),
stage,
30,
0.1,
false,
3.14, 6.28,
30, 60,
1, 5
)
);
Шестой параметр, 0,1, — гравитация. Установите гравитацию на более высокое число, и частицы будут падать быстрее. Угол составляет от 3,14 до 6,28. Это заставляет частицу появляться в пределах угла размером с половину луны над ее источником. На приведенной ниже диаграмме показано, как определяется этот угол.
Звезда создается в центре начала координат, а затем поднимается вверх по верхней половине круга. Однако из-за гравитации звезды в конечном итоге упадут на дно холста, что и создаст эффект звездного фонтана.
вы можете использоватьemitterМетоды play и stop в любой момент включают или выключают поток частиц в вашем коде, например:
particleStream.play();
particleStream.stop();
Изображение эффекта:
Полный код:
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script src="https://www.kkkk1000.com/js/dust.js"></script>
<script>
//创建一个 Pixi应用 需要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
//创建一个 Pixi应用
let app = new PIXI.Application(option);
//获取舞台
let stage = app.stage;
//获取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
//把 Pixi 创建的 canvas 添加到页面上
playground.appendChild(renderer.view);
let su = new SpriteUtilities(PIXI);
let d = new Dust(PIXI);
let particleStream;
//需要加载的图片的地址
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-ParticleEffects/star.png";
//加载图像，加载完成后执行setup函数
PIXI.loader.add(imgURL).load(setup);
function setup() {
let particleStream = d.emitter(
100,
() => d.create(
128, 128,
() => su.sprite(imgURL),
stage,
30,
0.1,
false,
3.14, 6.28,
30, 60,
1, 5
)
);
particleStream.play();
//开始游戏循环
gameLoop();
}
function gameLoop() {
requestAnimationFrame(gameLoop);
d.update();
renderer.render(stage);
}
</script>
</body>
</html>