Изучите PixiJS — визуальные эффекты

плитка спрайт

Тайловый спрайт — это особый вид спрайта, который повторяет текстуру в определенном диапазоне. Вы можете использовать их для создания фоновых эффектов бесконечной прокрутки. Для создания тайлового спрайта нужно использовать метод с тремя параметрамиTilingSpriteкласс (PIXI.extras.TilingSprite)

Применение:

let tilingSprite = new PIXI.extras.TilingSprite(texture, width, height);

параметр:

имя	По умолчанию	описывать
texture		Мозаика текстуры спрайта
width	100	Ширина тайлового спрайта
height	100	Высота тайлового спрайта

Кроме этого, тайловые спрайты имеют все те же свойства, что и обычные спрайты, и работают так же, как обычные спрайты. У них также есть методы fromImage и fromFrame, как и у обычных спрайтов. Вот как можно создать тайловый спрайт размером 200 x 200 пикселей, используя изображение размером 100 x 100 пикселей с именем Brick.jpg. и сместите 30 пикселей от верхнего левого угла холста.

Вот код ключа:

let tilingSprite = new PIXI.extras.TilingSprite(
 PIXI.loader.resources[imgURL].texture, 200, 200
);
tilingSprite.x = 30;
tilingSprite.y = 30;

На изображении ниже показано изображение кирпича.jpg и эффект кода выше.

Вы можете использовать свойства tilePosition.x и tilePosition.y для перемещения текстуры, используемой спрайтом плитки. Вот как можно переместить текстуру, используемую спрайтом плитки, на 30 пикселей.

tilingSprite.tilePosition.x = 30;
tilingSprite.tilePosition.y = 30;

Здесь вы перемещаете не спрайт тайла, а текстуру, используемую спрайтом тайла. На рисунке ниже показано сравнение двух случаев.

Вы также можете изменить масштаб текстуры, используемой мозаичным спрайтом, используя свойства tileScale.x и tileScale.y. Вот ключевой код, как увеличить размер текстуры, используемой мозаичным спрайтом, в 1,5 раза:

tilingSprite.tileScale.x = 1.5;
tilingSprite.tileScale.y = 1.5;

Сравнение исходного изображения и эффекта, достигнутого приведенным выше кодом:

И tileScale, и tilePosition имеют метод set, который устанавливает свойства x и y с помощью одной строки кода.

параметр:

имя	По умолчанию	описывать
x	0	новое значение атрибута x
y	0	новое значение атрибута y

Применение:

tilingSprite.tilePosition.set(30, 30);
tilingSprite.tileScale.set(1.5, 1.5);

Тайловые спрайты — это удобный способ создания повторяющихся шаблонов изображений. Поскольку вы можете перемещать положение текстуры, вы можете использовать мозаичный спрайт для создания бесшовного прокручивающегося фона. Это очень полезно для многих типов игр. Давайте посмотрим, как это сделать.

Во-первых, начните с бесшовного окрашивания изображения. Бесшовное изображение - это тот, в котором узоры совпадают во всех отношениях. Если копии изображения расположены рядом, они будут выглядеть как одно большое непрерывное изображение, которое является Brick.jpg, используемый в примере выше.

Затем используйте это изображение для создания тайлового спрайта. Затем обновите свойство tilePosition.x спрайта в игровом цикле.

Ключевой код:

function play() {
 tilingSprite.tilePosition.x -= 1;
}

Изображение эффекта:

Посмотреть пример

Вы также можете использовать эту функцию для создания псевдо-3D-эффекта, называемого прокруткой параллакса. Все дело в том, чтобы сложить несколько таких спрайтов тайлов в одном месте и заставить изображения, которые кажутся дальше, двигаться медленнее, чем изображения, которые ближе. Как этот пример ниже!

Два эльфа делали плиточные изображения:

Реализованные рендеры:

Посмотреть пример

окраска

У спрайтов есть свойство оттенка, и присвоение этому свойству шестнадцатеричного значения цвета изменяет оттенок спрайта.

Давай попробуем!

Ключевой код:

sprite.tint = 0xFFFF660;

Сравнение исходного изображения и эффекта, достигнутого приведенным выше кодом:

Посмотреть пример

Значение по умолчанию свойства оттенка каждого спрайта — белый (0xFFFFFF), что означает отсутствие оттенка. Используйте затенение, если хотите изменить оттенок спрайта без полного изменения его текстуры.

маска

Pixi позволяет использоватьGraphics(графический) объект для маскировки любого спрайта или контейнера с вложенными дочерними спрайтами. Маска — это форма, которая скрывает любую часть спрайта за пределами области формы. Чтобы использовать маски, сначала создайте спрайты иGraphicsобъект. Затем поместите эльфаmaskнабор свойств для созданияGraphicsобъект.

Пример:

Сначала создайте спрайт с изображением Пикачу. Затем создайте синий квадрат и расположите его над спрайтом (цвет фигуры не имеет значения). Наконец, свойство маски спрайта устанавливается на созданный квадратный объект. Это будет отображать изображение спрайта только в квадратной области. Спрайт невидим на любой части за пределами квадрата.

Сравнение исходного изображения и изображения после использования маски:

Ключевой код:

//创建精灵
let Pikachu = new PIXI.Sprite(PIXI.loader.resources[imgURL].texture);

//创建一个正方形对象
let rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 200, 200);
rectangle.endFill();
rectangle.x = 100;
rectangle.y = 100;

//给精灵设置蒙版
Pikachu.mask = rectangle;

Посмотреть пример

Вы также можете анимировать маску, чтобы сделать некоторые интересные эффекты. И если вы выполняете рендеринг с помощью WebGL, вы также можете использовать спрайты в качестве масок. В следующем примере показано использование трех изображений для создания спрайтов, затем использование одного спрайта в качестве маски и анимация маски.

Изображение эффекта:

Посмотреть пример

режим смешивания

Свойство blendMode определяет, как спрайт смешивается с лежащим в его основе изображением.

Их можно применить к спрайтам следующим образом:

sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

Вот 17, которые можно использоватьПолный список режимов наложения:

без смешивания

НОРМАЛЬНЫЙ (нормальный)

Сравнение контрастности (режим насыщения)

SOFT_LIGHT (мягкий свет)
HARD_LIGHT (жесткий свет)
НАКЛАДКА (наложение)

Контрастное сравнение (разностный режим)

РАЗНИЦА
ИСКЛЮЧЕНИЕ (исключить)

Эффект уклонения (светлый режим)

ОСВЕЖЕНИЕ
COLOR_DODGE (осветление цвета)
ЭКРАН (цвет экрана)
ДОБАВИТЬ (Линейный уклон, Добавить)

Эффект выгорания (темный режим)

ТЕМНО (темно)
COLOR_BURN (выгорание цвета)
УМНОЖИТЬ (Умножить)

Цветовые эффекты (цветовой режим)

ОТТЕНОК (оттенок)
НАСЫЩЕННОСТЬ
Цвет
Светимость (яркость)

Этирежим смешиванияТе же самые режимы наложения, которые используются в редакторах изображений, таких как Photoshop. Если вы хотите опробовать каждый режим наложения, вы можете открыть некоторые изображения в Photoshop, применить эти режимы наложения к этим изображениям и увидеть эффект.

Уведомление:
Визуализатор WebGL поддерживает только режимы наложения NORMAL, ADD, MULTIPLY и SCREEN. Любой другой режим будет похож на NORMAL.

Посмотреть пример

фильтр

Pixi имеет множество фильтров для применения к спрайтам специальных эффектов. Все фильтры находятся в объекте PIXI.filters. Фильтры — одна из лучших функций Pixi, поскольку они позволяют легко создавать специальные эффекты, которые в противном случае возможны только при сложном низкоуровневом программировании WebGL.

Вот пример того, как создать BlurFilter (другие фильтры имеют тот же формат):

//创建一个模糊滤镜
let blurFilter = new PIXI.filters.BlurFilter();

//设置模糊滤镜的属性
blurFilter.blur = 20;

//将模糊滤镜添加到精灵的滤镜数组中
sprite.filters = [blurFilter];

Все объекты отображения Pixi (объекты Sprite и Container) имеют набор фильтров. Чтобы добавить фильтр к спрайту, создайте фильтр, а затем добавьте его в массив фильтров спрайта. Вы можете добавить столько фильтров, сколько хотите.

sprite.filters = [blurFilter, sepiaFilter, displacementFilter];

Используйте его так же, как любой другой обычный массив. Чтобы очистить фильтр для всех спрайтов, просто очистите массив.

sprite.filters = [];

В дополнение к этим свойствам все фильтры включают дополнительные свойства заполнения и формы. padding увеличивает пространство вокруг области фильтра. юниформа — это объект, который можно использовать для отправки дополнительных значений рендереру WebGL. При повседневном использовании вам никогда не придется беспокоиться об установке свойства uniforms.

PixiJSсуществует4.0.0версию, перенести неосновные фильтры в новые пакеты —pixi-filters,СейчасPixiJSВстроенные фильтры следующие.

AlphaFilterФильтр для изменения прозрачности объекта.
В некоторых других документах вы можете увидеть фильтр VoidFilter, потому что вPixiJSиз4.6.0версии был добавлен AlphaFilter, а VoidFilter устарел.
BlurFilterBlurFilter применяет к объектам размытие по Гауссу. Силу размытия можно установить отдельно для оси x и оси y.
BlurXFilterBlurXFilter применяет к объектам горизонтальное размытие по Гауссу.
BlurYFilterBlurYFilter применяет к объектам вертикальное размытие по Гауссу.
ColorMatrixFilterКласс ColorMatrixFilter позволяет вамОтображаемый объект (displayObject)Примените матричное преобразование 5x4 к цвету RGBA и значению альфа-канала каждого пикселя, чтобы получить набор результатов с новым цветом RGBA и значением альфа-канала. Это очень мощно! Используйте его для получения черно-белого изображения, настройки яркости, настройки контраста, обесцвечивания, оттенков серого, настройки тонов и многих других эффектов.
DisplacementFilterКласс DisplacementFilter использует значения пикселей из указанной текстуры (называемой картой смещения) для выполнения смещения объекта. Вы можете использовать этот фильтр для достижения эффекта искажения. существуетэта статьяЧто такое DisplacementFilter (фильтр смещения) было сказано в статье, а так же в статье есть хорошая статьяПример.
FXAAFilterСглаживающий фильтр быстрого приближения.
NoiseFilterФильтр шумовых эффектов.

Примечание. Фильтры Pixi работают только с рендерингом WebGL, поскольку API рисования Canvas слишком медленный, чтобы обновлять их в режиме реального времени.

вот одинПример, который содержит большинство фильтров Pixi.

Посмотреть пример

видео текстура

Вы можете использовать видео в качестве текстуры для спрайтов так же легко, как и изображения. Использование класса текстурыfromVideoспособ создания видеотекстур.

videoTexture = PIXI.Texture.fromVideo(videoUrl);
videoSprite = new PIXI.Sprite(videoTexture);
stage.addChild(videoSprite);

Кроме того, вы также можете использоватьfromVideoUrlметод создания видеотекстуры из URL-адреса.

Видеотекстуры — это обычный HTML5.<video>элемент, вы можете получить к нему доступ через свойство baseTexture.source текстуры, например:

let videoSource = videoTexture.baseTexture.source;

Затем вы можете использовать любой HTML5<video>Свойства и методы элемента управляют видео, например play и pause .

videoSource.play();
videoSource.pause();

Просмотр HTML<video>элементальполная спецификация, вы можете узнать все доступные свойства и методы.

Посмотреть пример

Адаптация к нескольким разрешениям

Если вы не знакомы с некоторыми терминами, такими как физические пиксели, независимые от устройства пиксели, соотношение пикселей устройства и т. д., вы можете сначала прочитать это.статья.

Pixi автоматически регулирует плотность пикселей в соответствии с разрешением устройства, на котором работает контент. Все, что вам нужно сделать, это предоставить разные изображения для высокого и низкого разрешения, и Pixi поможет вам выбрать правильное изображение на основе текущего соотношения пикселей устройства.

Примечание. При создании изображения с высоким разрешением можно добавить «@2x» к имени файла изображения, чтобы указать, что изображение представляет собой экран, поддерживающий высокое разрешение, например экран Retina. Также это установит спрайтbaseTexture.resolutionсвойство (sprite.texture.baseTexture.resolution).

Первый шаг — узнать текущее соотношение пикселей устройства. Вы можете сделать это с помощью метода window.devicePixelRatio. Присвойте это значение переменной.

let displayResolution = window.devicePixelRatio;

displayResolution — это число, описывающее соотношение пикселей устройства. Он автоматически предоставляется устройством, на котором запущено приложение. 1 — стандартное разрешение; 2 — разрешение высокой плотности; все чаще можно встретить некоторые дисплеи сверхвысокой плотности, сообщающие о 3.

Следующим шагом является присвоение этого значения свойству разрешения параметра рендеринга. Сделайте это при создании своего приложения Pixi, например:

//创建一个 Pixi应用 需要的一些参数
let option = {
   width: 640,
   height: 360,
   transparent: true,
   resolution: displayResolution
}
//创建一个 Pixi应用
let app = new PIXI.Application(option);

Затем выберите правильное изображение для загрузки в текстуру в зависимости от соотношения пикселей устройства. Следующим образом:

let texture;
if (displayResolution === 2) {
    //加载高分辨率图像
    texture = PIXI.Texture.fromImage("highResImage@2x.png");
} else {
    //加载普通分辨率图像
    texture = PIXI.Texture.fromImage("normalResImage.png");
}
let anySprite = new PIXI.Sprite(texture);

Если вам нужно узнать, каково соотношение пикселей загружаемой текстуры устройства, вы можете использовать свойство текстуры baseTexture.resolution (texture.baseTexture.resolution), чтобы узнать это.

Посмотреть пример

Веревка

Еще один интересный эффект — Веревка. Это позволяет спрайту колебаться, как волна, или скользить, как змея, как показано на изображении ниже.

Во-первых, начните с изображения того, что вы хотите деформировать. Скользящая змея на самом деле представляет собой простое прямолинейное изображение, как показано на изображении ниже.

Затем решите, сколько сегментов вы хотите переместить змею самостоятельно. Изображение змеи имеет ширину 600 пикселей, поэтому около 20 фрагментов будут работать хорошо. Разделите ширину изображения на количество сегментов, чтобы получить длину каждого сегмента веревки.

let numberOfSegments = 20;
let imageWidth = 600;
let ropeSegment = imageWidth / numberOfSegments;

Затем создайте файл, содержащий 20Pointмассив объектов. Положение X каждую точку (первый параметр) будет отделен с следующей точки на расстоянии ропезементов.

let points = [];
for (let i = 0; i < numberOfSegments; i++) {
 points.push(new PIXI.Point(i * ropeLength, 0));
}

Теперь используйте метод PIXI.mesh.Rope, чтобы создать новый объект Rope. Этот метод требует два параметра:

Одна из них — текстура, используемая объектом Rope.
один содержитPointмассив объектов

let snake = new PIXI.mesh.Rope(PIXI.Texture.fromImage('snake.png'), points);

Добавьте змею в контейнер, чтобы ее было легче найти. Затем добавьте контейнер на сцену и расположите его.

let snakeContainer = new PIXI.Container();
snakeContainer.addChild(snake);
stage.addChild(snakeContainer);
snakeContainer.position.set(10, 150);

теперь находится в игровом циклеPointАнимация набора объектов. Волновой эффект формируется за счет перемещения каждого из массивов через фильтр Forcy.

count += 0.1;
for (let i = 0; i < points.length; i++) {
    points[i].y = Math.sin((i * 0.5) + count) * 30;
    points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * numberOfSegments;
}

Посмотреть пример

Вот ещестатья, говоря об использовании веревки для достиженияплавающий коиЭффект тоже выглядит забавно.

Суммировать

В этой статье в основном рассказывается о тайлинге спрайтов, окраске, масках, режимах наложения, фильтрах, видеотекстурах, адаптации к нескольким разрешениям, веревке и связанных с этим вещах.

Если вы чувствуете, что текстовое объяснение неясно, в каждом подразделе есть один или несколько соответствующих примеров, вы можете щелкнуть, чтобы увидеть, и комментарии в примерах также более понятны.
И потому, чтоPixiJSAPI время от времени меняется, так что имейте в видуPixiJSверсия, версия, используемая в большинстве примеров в тексте,4.8.2, если вы обнаружите, что эффект отличается от примера, когда вы пытаетесь его использовать, вы можете сначала проверить версию.

Если текст не в том месте, пожалуйста, также отметил, что мелкие партнеры чрезвычайно благодарны.

Предыдущая статья Изучение PixiJS — эффекты частиц

Следующая запись Изучаем PixiJS — анимацию движения