Pixi.js – 2D renderer pro rychlé HTML5 aplikace
Dnes představíme knihovnu Pixi.js, nabízející vysokoúrovňové API k vykreslování 2D grafiky na Canvas pomocí WebGL s fallbackem na klasický 2D Canvas, tak můžeme efektivně vytvářet hry a jiný interaktivní animovaný obsah akcelerovaný pomocí GPU.
Článek rozhodně není uceleným popisem celé knihovny, ale spíš pouze základní nástin, jak je možné s knihovnou pracovat a co nabízí.
Co Pixi.js umožňuje
O Canvasu toho bylo napsáno poměrně hodně. Se znalostí API pro vykreslování zvládnete vytvořit grafy, vizuální efekty nebo i jednoduché hry.
Pro efektivnější práci je ale vhodné využívat jeden z rendererů (či rovnou herních frameworků) dostupných na trhu. Jednou z výhod Pixi.js je to, že se nesnaží pokrýt všechny činnosti spojené s vývojem HTML5 her a aplikací, ale zaměřuje se pouze na svůj úkol, který se snaží dělat dobře, je to čistě renderer. Jmenovitě zvládá následující:
- Hiearchický model vykreslování spritů
- Události myši pro jednotlivé sprity
- Automatický fallback na 2D canvas
- Filtry
- Podpora textu (jak bitmapové, tak vektorové fonty)
- Vykreslování animací Spine
Základní skeleton
Pro začátek je nutné stažení poslední stable verze Pixi.js z oficiálního webu a jeho připojení do HTML stránky.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>PIXI.js demo</title>
<script src="libs/pixi.js"></script>
</head>
<body>
<div id="stage"></div>
</body>
</html>Nyní si připravíme dva základní objekty pro vykreslování grafiky, jsou jimi stage a renderer. Stage představuje jakési základní plátno, na které se budou umísťovat všechny ostatní grafické objekty. Renderer naproti tomu zaštiťuje samotné vykreslování grafiky. Pomocí metody PIXI.autoDetectRenderer nám Pixi.js vrátí buď PIXI.CanvasRenderer nebo PIXI.WebGLRenderer, to podle podpory dané technologie.
// vytvoříme stage, parametrem je barva pozadí
var stage = new PIXI.Stage(0xDEFCFC);
var renderer = PIXI.autoDetectRenderer(400, 300);
// připojíme do stránky samotný objekt, na kterém se bude vykreslovat
document.getElementById("stage").appendChild(renderer.view);
// dále definujeme smyčku, která bude vykreslovat za pomoci rendereru stage
requestAnimFrame(animate);
function animate() {
requestAnimFrame(animate);
renderer.render(stage); // vykreslíme stage
}Práce s grafickými objekty
Základním grafickou třídou je PIXI.Sprite, která reprezentuje rastrový obrázek, nejčastěji ve formátu PNG. Metodě PIXI.Sprite.FromImage zadáme jako parametr název souboru (relativní vůči HTML souboru) a metoda vrátí objekt typu PIXI.Sprite. Pokud byl již obrázek dříve načtený, vrátí nacachovanou verzi, pokud ne, pokusí se ho načíst AJAXovým požadavkem.
var sprite = PIXI.Sprite.fromImage("obrazek.png");
Objekt typu PIXI.Sprite má řadu vlastností, pomocí nichž jej můžeme modifikovat, máme zde souřadnice x a y, rotation, scale atd. Pro uplný výčet je možné nahlédnout do dokumentace. Nastavíme si tedy několik parametrů:
sprite.x = 50;
sprite.y = 100;
sprite.rotation = -Math.PI/8;Nyní stačí pouze přidat sprite na stage pomocí metody addChild.
stage.addChild(sprite);
jsFiddle: http://jsfiddle.net/987uderL/
Seskupování a animace
Důležitou vlastností rendereru je možnost hiearchicky organizovat sprity, v Pixi.js k tomu slouží třída PIXI.DisplayObjectContainer, díky které můžeme pomocí metody addChild přidávat potomky.
Každý grafický objekt má vlastnost pivot, která určuje počátek jeho souřadného systému, objektu container nastavíme pivot na střed, rotace bude tím pádem probíhat kolem jeho středu.
Ve funkci animate byl přidán řádek, který každý snímek rotuje objekt container o určitou hodnotu, tím je dosaženo animace. Změna hodnoty by byla možná také přes setInterval nebo nejlépe pomocí knihovny umožnující „tweening“, jednou z nich je např. GSAP.
var container = new PIXI.DisplayObjectContainer();
stage.addChild(container);
container.addChild(sprite1);
container.addChild(sprite2);
container.addChild(sprite3);
container.pivot = {
x: container.width / 2,
y: container.height / 2
}
container.x = 300;
container.y = 300;
...
function animate() {
container.rotation += 0.03;
requestAnimFrame(animate);
// vykreslíme stage
renderer.render(stage);
}
jsFiddle: http://jsfiddle.net/987uderL/2/
Další možnosti
Využívání vykreslování na Canvas sebou přináší jisté grafické možnosti. Pixi.js nám s nimi zjednodušuje práci, jsou to např. WebGL filtry nebo Blend modes. Pixi.js v sobě také obsahuje podporu pro Spine umožnující pokročilé animace pomocí kostí.
Více příkladů najdete na oficiální stránkách.
František Sabovčik
Programátor na volné noze věnující se převážně webovým technologiím, jak na straně serveru, tak na straně klienta. Zajímá se o JavaScript a další nástroje k vývoji moderních aplikací.
