Frontender Magazine

Введение в pixi.js

Pixi js — это чудесная библиотека, реализующая быстрый и простой механизм визуализации. Она может работать в сочетании с рядом других игровых библиотек на JavaScript и выполнять визуализацию на основе canvas и WebGL.

В этой главе мы рассмотрим очень простое введение в работу pixi.js. Мы выполним визуализацию изображения с детёнышем зомби, чтобы продемонстрировать основы работы с рендерером и функциональные возможности pixi.js по созданию сцены, спрайтов и текстуры.

Создание каталога для проекта

Создайте для проекта новый каталог и сделайте его текущей рабочей директорией.

mkdir pixi-intro
cd pixi-intro

Создание файла package.json

npm init

Введите данные, следуя подсказкам npm init и в результате получите файл package.json.

Установка pixi.js с помощью пакетного менеджера

npm install --save GoodBoyDigital/pixi.js

Версия, опубликованная на данный момент в репозитории npm, является устаревшей, поэтому установим пакет прямо с GitGub, используя команду, приведённую выше. Параметр --save позволяет сохранить pixi.js как зависимость файла package.json.

Подготовьте изображение, которое будете использовать

Если хотите, можете использовать эту картинку с детёнышем зомби:

https://raw.githubusercontent.com/sethvincent/hogjam4/gh-pages/images/menu-image/05.png

Или же выберите любую другую картинку на своё усмотрение.

Только убедитесь, что изображение имеет название zombie.png и помещено в корневую папку проекта.

Создание файла index.js

touch index.js

Редактирование файла index.js

Давайте создадим простой пример, в котором изображение будет выводиться на экран.

Запрос на подключение pixi.js к вашей программе

var PIXI = require('pixi.js');

Мы запрашиваем модуль pixi.js как PIXI, потому что именно так, заглавными, объект pixi.js прописан в документации.

Создаём рендерер для игры

var renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight);

Здесь мы используем рендерер pixi на основе canvas. Точно так же просто можно использовать WebGL. Для этого вместо PIXI.CanvasRenderer пропишите PIXI.WebGLRenderer. С помощью аргументов window.innerWidth и window.innerHeight мы указываем, что рендерер должен заполнить всю ширину и высоту экрана.

Присоединение рендерера к телу html-файла

document.body.appendChild(renderer.view);

Создаём сцену, на которой будет происходить отрисовка

var stage = new PIXI.Stage;

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

Создаём из изображения текстуру и спрайт

var zombieTexture = PIXI.Texture.fromImage('zombie.png'); 
var zombie = new PIXI.Sprite(zombieTexture);

Сначала создаём текстуру, используя метод PIXI.Texture.fromImage() и передаём изображению относительный url-адрес в качестве аргумента.

Затем создаём спрайт с помощью метода PIXI.Sprite() и передаём ему текстуру в качестве аргумента.

Назначаем расположение спрайта с зомби

zombie.position.x = window.innerWidth / 2 — 150;
zombie.position.y = window.innerHeight / 2 — 150;

У изображения с зомби размеры 300 на 300 пикселей, так что код, приведенный выше, отцентрирует спрайт по середине окна.

Добавляем на сцену спрайт с зомби

stage.addChild(zombie);

Этот код добавляет наш спрайт на сцену, так что он будет отрисован при выполнении метода renderer.render().

Создание функции отрисовки для запуска рендерера

function draw() { 
    renderer.render(stage); 
    requestAnimationFrame(draw); 
}

Эта функция отрисовки запускает метод renderer.render() с аргументом stage. Также она запускает requestAnimationFrame с самой функцией draw() в качестве аргумента, что гарантирует циклично повторяющийся вызов draw().

Запуск приложения

draw();

Мы выполняем функцию draw() в первый раз, чтобы запустить игру и, так как внутри мы вызываем функцию отрисовки, она будет рекурсивно выполняться для каждого фрейма requestAnimationFrame.

Полный код примера

Вот весь код файла index.js:

var PIXI = require('pixi.js');

var renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.view);

var stage = new PIXI.Stage;

var zombieTexture = PIXI.Texture.fromImage('zombie.png'); 
var zombie = new PIXI.Sprite(zombieTexture);

zombie.position.x = window.innerWidth / 2 — 150;
zombie.position.y = window.innerHeight / 2 — 150;

stage.addChild(zombie);

function draw() { renderer.render(stage); requestAnimationFrame(draw); }

draw(); 

Запуск сервера разработки

Эту программу можно запустить на вашей локальной машине, используя модуль beefy, чтобы объединить зависимости с помощью Browserify и подать файлы с помощью сервера разработки со встроенной возможностью автообновления.

Установите глобально beefy и browserify

Если вы еще этого не сделали, установите beefy и browserify:

npm install -g beefy browserify

Запустите сервер

Выполните эту команду, чтобы запустить сервер разработки:

beefy index.js --live

На выходе вы увидите следующее:

listening on http://localhost:9966/

Теперь вы можете открыть http://localhost:9966/ в своём браузере и увидеть, как работает игра.

Хотите научиться писать игры на JavaScript?

Это отрывок из нашей книги «Создание двумерных игр на JavaScript». Её можно купить отдельно или вместе с другими нашими книгами и скринкастами.

Хотите узнать больше о pixi.js?

Зайдите на сайт проекта: pixijs.com

Взгляните на репозиторий pixi.js на GitHub: github.com/GoodBoyDigital/pixi.js

Документацию по проекту можно почитать здесь: goodboydigital.com/pixijs/docs

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Seth Vincent
Автор:
Seth Vincent
Сaйт:
http://sethvincent.com/
Twitter:
@sethdvincent
GitHub:
sethvincent
Наталья Фадеева
Переводчик:
Наталья Фадеева
вКонтакте:
natatik_l
Twitter:
@very_busy_girl
GitHub:
NatalieF

Комментарии (2 комментария, если быть точным)

Автар пользователя
NugzarGaguliya

Кстати в npm есть репозиторий pixi.js

Автар пользователя
renius

200 2071ms 2.18MB /index.js ➞ /usr/local/lib/node_modules/browserify ./index.js -d 200 3ms 5.43KB /zombie.png

на клиенте приходит через 3 секунды я не могу такую игру выпустить в production