Доброго времени суток!
В данном посте речь пойдет об одном интереснейшем тикете, который делал, ещё будучи в Greensight`е. Самой важной полезностью для меня была находка pixi.js. Об этом движке еще буду писать много, ибо весьма активно сейчас с ним работаю.
Постановка задачи
Создать новогоднюю открытку для групп компаний «ДжамильКо». Открытка состоит из совокупности снежинок. В разный промежуток времени / при нажатии кнопкой мыши снежинка подписывается поздравительным текстом на одном из языков. Возможность перетаскивания объектов. Одно из требований - html5 и отсутствие flash. Вкусно, не правда ли?
И так. Для реализации был выбран pixi.js.
Может использоваться, как самостоятельный Фреймворк, так и как часть нашумевшего в последнее время игрового Фреймворка Phaser. Там он используется для рендеринга графики.
Авторы позиционирует его как аналог three.js, но на мой взгляд это менее замороченный движок для менее глобальных целей. Донельзя кроссплатформенный, использует всю мощь WebGL для рендеринга.
Если в браузере нет поддержки WebGl, то не стоит печалиться, отсутствие оного определяется автоматически, и рендеринг осуществляет средствами старого доброго canvas`а. Если Вам необходимо реализовать графический интерфейс, 2D - игрулю, то это определенно вкусняшка.
Ну и много вкусных слов: поддержка текстур и спрайтов, интерактивность, реализованы граф сцены, обработчики мышки и тачскрина, прекрасная работа с мобильными устройствами, отличная производительность, отлично документированное API, прозрачный код, отличные примеры, активное сообщество.
Pixi.js не является архитектурным Фреймворком, физическим движком (ничего от физики там нет), полноценным игровым движком. Единственное, что у него есть от полноценного игрового движка, это loader, который может быть использован для предзагрузки изображений.Это просто библиотека для хорошего рендеринга графики.
Исходный код и посмотреть пример можно по ссылкам внизу страницы. Дублировать код сюда смысла нет, вы отлично в нем разберетесь, как только сложится общее понимание того, что это за зверь. А сие попробую изложить ниже:
В этой библиотеке вся сцена представлена деревом элементов, которые присоединены к объекту типа Stage. Это является первоначалов для всех элементов. С него начинается отрисовка, проходящая по все детям в прямом порядке. Базовый «кирпичик» сцены — объект типа 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 — это класс 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);
}
На этой ноте ля диез закончу описание PIXI.js. Не забудьте покормить кошку!
