Высокоскоростная библиотека Pixi.js

Есть несколько библиотек, на которые стоит обратить внимание, если вы хотите создать что-то интерактивное с помощью HTML5 Canvas. В этом уроке мы рассмотрим основы Pixi.js.

Что вы узнаете?

• Преимущества Pixi.js
• Как рисовать базовые фигуры с помощью Pixi.js
• Как добавить формы на холст
• Как использовать moveTo(), lineTo(), pivot.set(), drawCircle(), drawRect() и другие

Мэт Гроувс создал Pixi.js, потому что он видел нехватку технологий, необходимых для создания контента, который был бы легко доступен на нескольких платформах, в первую очередь на мобильных платформах.

Мы создали движок, который абстрагирует все низкоуровневые запутанные части, чтобы позволить любому (в том числе и нам самим!) Быстро создавать расширенный контент в Интернете без необходимости получения степени в области компьютерных наук.

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

Самое большое преимущество Pixi - это скорость.

Pixi.js - это специализированный движок для рендеринга. Он использует WebGL для повышения производительности, что делает 2D-рендеринг очень быстрым. Если WebGL не поддерживается, движок возвращается к стандартному HTML Canvas.

К другим преимуществам можно отнести:

• Мультиплатформенность: Pixi - отличный способ создать мультиплатформенный (мобильный и настольный) опыт.
• Мощность и простота: Pixi предоставляет вам возможности сложной графической технологии (WebGL) в простой библиотеке, что означает, что существующие фильтры, такие как размытие и пикселирование, могут быть созданы наряду с настраиваемыми смещениями и эффектами полутонов.
• Хорошая замена Adobe Flash: разработчикам, привыкшим к концепции flash-кодирования, Pixi покажется знакомым.
• Легко использовать и учиться: простой в использовании API
• Полное распознавание мультисенсорного ввода
• И другие полезные вещи: поддержка таблицы спрайтов, загрузчик ресурсов и поддержка текста

1) Настройка Pixi.js

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

main.js будет включать остальную часть нашего кода.

2) Создание рендерера и сцены

Теперь, когда мы включили Pixi.js, нам нужно создать рендер, сцену и добавить ее в наш HTML.

Теперь мы видим в размере 400x400 canvas element в черном цвете, добавленный к странице.

Граница берется из нашего CSS.

PIXI.autoDetectRenderer сообщит браузеру, что сначала нужно использовать WebGL, а в качестве запасного - использовать Canvas. Если вы хотите принудительно выполнить рендеринг Canvas, создайте рендер следующим образом:

Как создать прозрачный холст (Transparent canvas)?

Мы сохраним холст прозрачным до конца этого урока.

3) Как рисовать основные фигуры с помощью Pixi.js

Теперь давайте нарисуем на холсте несколько основных фигур. Мы добавим каждую фигуру между шагом 3 и функцией рендеринга.

Создание линии, круга, прямоугольника и треугольника

Первое, что мы нарисуем, - это линия.

Линия

Я мог бы дать подробное объяснение здесь, но я думаю, что вы узнаете больше, изменив отдельные значения в CodePen самостоятельно.

Вот визуальная индикация происходящего:

lineStyle определяет ширину, цвет и альфа (непрозрачность) нашей линии.

position.x и position.y определяют положение на холсте.

line.pivot и line.rotation еще интереснее.

pivot - это точка поворота PIXI.Graphics(), вокруг которой он вращается.

Подумайте об этом как о transform-origin из CSS.

Вращение line.rotation необходимо указывать в радианах.

Просто погуглите «45 градусов в радианы», чтобы получить правильное значение.

После того, как мы определили свойства и положение линии, мы добавляем ее на сцену:

Таким же образом мы добавим все следующие формы.

Круг

Здесь мы создаем зеленый круг в центре холста. Если бы мы хотели, чтобы круг был заполнен цветом, мы могли бы определить это с помощью beginFill() следующим образом:

Это заполнит круг синим цветом и установит непрозрачность заливки на 50%.

Метод drawCircle принимает 3 параметра - x, y и radius.

Прямоугольник

beginFill определяет цвет, который будет использоваться для любых других следующих фигур, пока мы не вызовем endFill().

Метод drawRect принимает 4 параметра - x, y, height и weight.

Треугольник

Последняя форма, которую мы создадим, - это треугольник.

Треугольники создаются путем рисования линии от определенной точки moveTo(x, y) и последующего перемещения «кисти» с помощью метода lineTo(x, y) в другую точку.

Мы закрываем фигуру, устанавливая для начальной и последней точки одинаковое значение 20, 300.

4) Сглаживание (Anti-aliasing)

Если вы посмотрите на конец круга, вы увидите неровные края. Чтобы сгладить это, мы можем применить сглаживание к рендереру.

Попробуйте добавить antialias: true в конструктор средства визуализации.

Это сгладит края по кругу.

5) Заключительная демонстрация

Вот последняя демонстрация всех форм, отрисованных на canvas.

Я надеюсь, что вы нашли это введение в Pixi.js полезным. До скорой встречи и удачного кодирования!

Ссылка на канал: https://t.me/sitodel