Библиотека 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 рендера.

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