Основы библиотеки PIXI.js
2K #javascript,#pixi.js,#webgl

Библиотека PIXI.js предназначена для вывода 2D графики с помощью javascript. Она может работать с двумя типами рендеров: Canvas и WebGL.

В этой библиотеке вся сцена представлена деревом элементов, которые присоединены к объекту типа Stage. Это root для всех элементов сцены. Отрисовка начинается с него и проходит по всем детям этого объекта в прямом порядке.

Базовый «кирпичик» сцены — объект типа DisplayObject. Он содержит: 2D позицию, поворот, масштаб, прозрачность, цвет.

Набор элементов типа DisplayObject можно объединить с помощью DisplayObjectContainer. Это наследник от класса DisplayObject с поддержкой добавления и удаления детей.

Примитивное создание сцены PIXI.js выглядит так:

function createScene() {
    var stage = new PIXI.Stage();
    var container = new PIXI.DisplayObjectContainer();
    var object = new PIXI.DisplayObject();
 
    container.addChild(object);
    stage.addChild(container);
 
    return stage;
}

Класс DisplayObject, по сути, бесполезно использовать напрямую, он не содержит никакой визуальной информации. Самый часто используемый класс на базе DisplayObject — это класс Sprite. Он представляет собой наследника от DisplayObject и добавляет к нему текстуру и выбор режима отрисовки этой текстуры.

Для задания текстуры используется класс BaseTexture. Это другой базовый «кирпичик» библиотеки PIXI.js. Он является простой оберткой над изображением. Содержит в себе размер этого изображения, ссылку на источник и загруженные данные типа Image.

Таким образом создание простой сцены теперь выглядит так:

function createScene() {
    var stage = new PIXI.Stage();
    var texture = new PIXI.BaseTexture("image.png");
    var sprite = new PIXI.Sprite(texture);
    stage.addChild(sprite);
 
    return stage;
}

Следующим по списку, но не по значению, идет класс Texture. Он содержит в себе ссылку на BaseTexture и прямоугольник, который задает видимую область BaseTexture.

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

function createTextures() {
    // загружаем изображение размером 1024x1024
    var atlas = new PIXI.BaseTexture("atlas.png");
    // левая верхняя часть размером 512x512
    var textureLT = new PIXI.Texture(atlas, new Rectangle(0, 0, 512, 512);
    // правая верхняя часть размером 512x512
    var textureRT = new PIXI.Texture(atlas, new Rectangle(512, 0, 512, 512);
    // левая нижняя часть размером 512x512
    var textureLB = new PIXI.Texture(atlas, new Rectangle(0, 512, 512, 512);
    // правая нижняя часть размером 512x512
    var textureRB = new PIXI.Texture(atlas, new Rectangle(512, 512, 512, 512);
}

В текстурный атлас при желании можно сохранить всю сцену, которая будет рисоваться за один проход WebGL рендера. Живой пример (без исходников) можно посмотреть справа, виджет YoWindow использует именно такой подход для быстрой отрисовки ландшафта.

На этой радостной ноте закончу описание PIXI.js. Спасибо за внимание. Как всегда ваши комментарии и угрозы вопросы вы можете оставлять прямо здесь.

Блог Евгения Жирнова