Kodlar arasında yer alan açıklama satırlarını inceleyip ekran çıktısına bakarak yazılan kodların ne işe yaradığını kavrayabilirsiniz.
HTML5 ve PhaserJS ile Oyun Programlama – PART 4 : Sprite Oluşturmak ve Yüklenen Grafiği Tuvale Aktarmak
function create() { game.add.sprite(x, y, 'nesne_ismi'); }
Yukarıdaki metod ile yüklenen grafik, siyah renkli tuval içine aktarılır.
1. parametre; nesnenin x koordinatı.
2. parametre; nesnenin y koordinatı.
3. parametre; gösterilecek olan nesnenin ismi.
Oyunu oluşturmak için mutlaka grafiklere ihtiyacımız vardır. Grafik dosyaları PNG veya JPG formatlıdır.
Phaser.js ilk başladığında, Canvas oluşturulur ve parametre değerlerine göre otomatik olarak preload işlemine başlar. İlgili fonksiyon içinde game.load.img, game.load.spritesheet, game.load.audio gibi metotlarla ilgili dosyalar yüklenir.
Şimdi Phaser.js ile ilk kodlamamızı, yani bir diğer ismi ile “Merhaba Dünya” uygulamamızı yapalım…
Yapacağımız uygulama örneği, Phaser.io adresinde yer alan uygulama örneği ile aynıdır. Yani oradaki örneği biraz revize edip, daha anlaşılabilir bir dil ile anlatmaya çalışacağım. Oyun örneğinde basit bir platform üzerinde karakteri kontrol ettirerek yıldızları toplatacağız.
https://html5gameengine.com/ sitesinin araştırmalarına göre; WebGL ve Canvas destekleyerek, HTML5 Oyun Motorları (aslında bildiğimiz JavaScript Framework’tür) arasında ilk 4. sırada yer almaktadır. Aslında Construc 2’yi öğretmek isterdim ama zorlu bir başlangıç olacaktır.
http://phaser.io/ adresinden Phaser.js’nin resmi sayfasına ulaşabilirsiniz. Bu sayfada yer alan örnekleri mutlaka incelemenizi tavsiye ederim.