Pixi.js - Başlangıç

Bu makale serisinde Pixi.js ile ilgili anlatımlar yer alacaktır.

Bu makale serisinde Pixi.js ile ilgili anlatımlar yer alacaktır.

Ortamın Hazırlanması

Öncelikle Pixi.js’yi indirmemiz gerekiyor. Bunun için github’ı kullanacağız. git kurulumunuzu yaptığınızı varsayarak devam ediyorum.

git clone https://github.com/GoodBoyDigital/pixi.js.git

Bize aslında gereken bin klasörü içerisindeki pixi.js dosyası fakat kaynak kodlarını da indirmemiz avantajımıza olacaktır.

Hemen bir index.html dosyası oluşturalım ve bu pixi.js kütüphanemizi dosyaya ekleyelim.

Daha sonra karışma olmaması için uygulama isminde bir klasör oluşturuyoruz ve içerisine bu index.html dosyamızı oluşturalım.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Pixi.js</title>

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>

<!-- Pixi.js -->
<script src="../bin/pixi.js"></script>
</body>
</html>

Stage

Stage, görünümün ana kısmıdır. Her nesne stage‘e bağlanmakta ve görüntülenmektedir. Yani nesnelerimizi, sahnemizi ve bütün ortamı stage kullanarak yerleştireceğiz.

// PIXI.Stage(backgroundColor);
var stage = new PIXI.Stage(0xFFFFFF); // Beyaz arkaplan

Renderer

Renderer, Stage’i ve stage içerisindeki tüm nesneleri ekrana çizer. WebGL ve Canvas seçiminize göre bu çizim işlemi yapılır.

/*
 * Canvas Renderer
 * PIXI.CanvasRenderer(uzunluk=800], [yukseklik=600], [ozellikler]);
 */
var canvasRenderer = new PIXI.CanvasRenderer(800, 600);

/*
 * WebGL Renderer
 * PIXI.WebGLRenderer([uzunluk=0], [yukseklik=0], [ozellikler]);
 *
 */
 var webGLRenderer = new PIXI.WebGLRenderer(800, 600);

/*
 * Auto Detect Renderer
 * Otomatik olarak uygun olan render seçimini yapar.
 * PIXI.autoDetectRenderer([uzunluk=0], [yukseklik=0], [ozellikler]);
 */
 var autoDetectRenderer = new PIXI.autoDetectRenderer(800, 600);

Auto Detect Renderer kullanmak daha iyi olacaktır. Eğer tarayıcı WebGL çalıştırıyorsa WebGL, çalıştırmıyorsa Canvas kullanacaktır.

Frame

Çizimin her karede yapılması gerekiyor, öbür türlü ilk frameden sonra bir çizim gerçekleşmeyecektir. Bunun için bir döngü oluşturacağız ve sürekli çizim yapılmasını sağlayacağız.

document.body.appendChild(renderer.view);
requestAnimFrame(cizimYap);
function cizimYap() {
	requestAnimFrame(cizimYap);
	renderer.render(stage);
}

Farkettiyseniz bizim renderer isminde bir değişkenimiz yok. Bu değişkeni seçtiğiniz renderer‘a göre ayarlamanız gerekiyor.

Şimdi sonuç olarak oluşturduğumuz script:

var stage = new PIXI.Stage(0xFFFFFF);
var renderer = new PIXI.autoDetectRenderer(400, 300);

document.body.appendChild(renderer.view);
requestAnimFrame(cizimYap);
function cizimYap() {
	requestAnimFrame(cizimYap);
	renderer.render(stage);
}

Çalışıp çalışmadığını kontrol etmek isterseniz isterseniz arkaplanı kırmızı yapabilirsiniz.

0xFF0303 renk kodunu kullanabilirsiniz.

Texture

Texture ile resim dosyalarını hafızada tutacağız. Bu sayede sprite‘da resim kullanmamız gerektiğinde bu texture nesnesini kullanacağız. Bu sayede resimler tekrar ve tekrar yüklenmeyecek, sadece 1 defa çekilecektir.

// PIXI.Texture.fromImage(dosyaYolu, orjin, olcek);
var texture = PIXI.Texture.fromImage("resim.png");

Sprite

Sprite’lar sahnemizdeki nesnelerimiz olacaktır.

// PIXI.Sprite(PIXI.Texture texture);
var sprite = new PIXI.Sprite(texture);

Anchor

Nesnelerimizin orjin noktası olacaktır. Texture resmi de orjin noktasına göre çizilecektir. Bu sayede objenin tam olarak orta noktasının neresi olacağını belirliyoruz.

/* 0-0     => Sol Üst
 * 0.5-0.5 => Ortala
 * 1-1     => Sağ Alt
 */
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;

Position

Sprite nesnesinin sahnede bulunacağı koordinatlardır.

sprite.position.x = 200;
sprite.position.y = 150;

Rotation

Sprite nesnesini orjin etrafında döndürmenizi sağlar.

sprite.rotation += 0.1;

Döndürme kodunu çizim döngüsü dışında yaparsanız sadece 1 seferlik +0.1 artış yapacaktır. Sürekli dönmesi için döngü içerisinde bu kodu kullanmanız gerekiyor.

Sahneye Ekleme

Sprite nesnemizi artık sahneye ekleyelim.

stage.addChild(sprite);

Tüm Kaynak

Ders içerisindeki bilgilerle yapılan tüm script kodu


var stage = new PIXI.Stage(0xFFFFFF);
var renderer = new PIXI.autoDetectRenderer(400, 300);

var texture = PIXI.Texture.fromImage("resim.png");
var sprite  = new PIXI.Sprite(texture);

sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;

sprite.position.x = 200;
sprite.position.y = 150;

stage.addChild(sprite);

document.body.appendChild(renderer.view);
requestAnimFrame(cizimYap);
function cizimYap() {
	requestAnimFrame(cizimYap);

	sprite.rotation += 0.1;

	renderer.render(stage);
}

Eray AYDIN

Eray AYDIN
Senior PHP Developer and Linux System Administrator, Free Software Fan, Archy (On Way Trust User), Junior Game Developer