Phaser 3 ile Oyun Yapımı
Phaser kütüphanesinin bir hafta kadar önce 3. versiyonu çıktı. Hakkında Türkçe kaynak gördüğüm kadarıyla pek olmadığı için ucundan kıyısından Phaser 3 oyun yapımı ile ilgili yazılar yazmayı düşündüğümü önceki yazımda söylemiştim. Bu yazıda basitçe “Hello World!” diye bilinen türde bir başlangıç yapmayı düşünüyorum.
İlk olarak phaser’ın js dosyasını indirmemiz gerekiyor. Son yayınlanan Phaser 3.1.0 – Onishi versiyonu. Bu sayfayı açıp -geliştirme aşamasında kullanacağımız için- phaser.js’yi indiriyoruz.
Oyunu geliştirirken hatalar vs. hakkında daha detaylı bilgi almak için phaser.js versiyonu kullanılır, yayınlanacağı zaman dosya boyutu az olması için sıkıştırılmış hali olan phaser.min.js ile yayınlanır.
Devam etmeden önce şunu belirtmekte yarar var: localde tarayıcı kısıtlamaları sebebiyle phaser localde çalışmaz. Açmaya çalıştığınızda boş siyah bir ekran çıkar. Phaser’ın çalışması için bir web server’a ihtiyacımız var. Bunun için XAMMP kullanabilirsiniz ya da Brackets editörünü kullanabilirsiniz (Başka bir çok alternatifte mevcut ama ben yapacağım projeye göre bu ikisinden birisini tercih ediyorum). Detaylar için local (yerel) web server kurulumu yazısına bakabilirsiniz.
Web server işini ayarladıktan sonra Brackets ile çalışıyorsanız herhangi bir yere, XAMMP ile çalışıyorsanız C:\xampp\htdocs klasörünün altına, başka bir web sunucusu kullanıyorsanız onun konumuna phaser3_deneme ya da herhangi bir isimle bir klasör oluşturuyoruz. Klasörün içerisine index.html ve game.js isimleriyle 2 dosya oluşturuyoruz ve indirdiğimiz phaser.js dosyasını da bu klasöre kopyalıyoruz. index.html dosyası şöyle olacak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Phaser 3 Deneme</title> </head> <body> <!-- oyunun ekleneceği div --> <div id="game"></div> <!-- phaser'ın js dosyası ve bizim oyunu kodlayacağımız js dosyasını ekliyoruz. Burada dikkat etmeniz gereken phaser.js dosyasının bizim js dosyamızdan önce olması gerekiyor--> <script src="js/phaser.js"></script> <script src="js/game.js"></script> </body> </html> |
Sonrasında game.js dosyasına şu kodları ekliyoruz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var config = { //Oyun Webgl üzerinde mi canvas üzerinde mi çalışacak ///Phaser 2'de auto özelliği vardı ama 3'te var mı henüz bilmiyorum. type: Phaser.WEBGL, //canvas objesinin(oyunun) ekleneceği div, boş bırakılırsa //body tag'ında en sona ekleniyor diye biliyorum parent: 'game', ///canvas'ın genişliği width: 800, ///canvas'ın yüksekliği height: 600, //oyunun kısımları. Bu da phaser 3'te yeni. //phaser 2'deki state sisteminin karşılığı sanırım. scene: { create: create } }; //oyun objesini yukarıda tanımladığımız özelliklere göre //oluşturuyoruz. var game = new Phaser.Game(config); ///oyun sahnelerinde(scene) sadece create tanımladığımız için //bu fonksiyon çağırılacak function create (){ console.log("Hazırız!"); } |
Web sunucunuz üzerinde index.html dosyasını test ettiğinizde, console(F12) da aşağıdaki gibi yazılar çıkması gerekiyor:
Hata alıyorsanız muhtemelen ya kodlarda ya da web sunucusu ayarlarında bir problem vardır.