Eki.21

HTML5 ve PhaserJS ile Oyun Programlama – PART 2 : Platform Oyunu

Ş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.

Phaser ile kodlamalarınızı yaparken lokal sistemde tam verimli sonuç alamayabilirsiniz veya kodlar çalışmayabilir. Bu nedenle uygulamanızı test ederken mutlaka bir sunucu üzerinde çalıştırın.

Phaser.Js Framework’ü İndirmek

http://phaser.io/download/stable adresinden phaser.js dosyasını indirin.

Kodlama Şablonu

Phaser ile oyun kodlarken şunlara ihtiyacımız olacak:

1. Framework’ü include etmek.
2. Canvas alanı oluşturmak.
3. preload() fonksiyonunu tanımlamak ve harici kaynakları yüklemek.
4. create() fonksiyonu tanımlamak ve oyun bileşenlerini (çevre, karakterler, fizik vs.) tanımlamak.
5. update() fonksiyonu tanımlamak ve oyun sahnesin güncellemek.

Sonuç itibari ile boş bir şablon sayfa şu şekilde olacaktır:

<!doctype html> 
<head> 
	<meta charset="UTF-8" />
	<script type="text/javascript" src="js/phaser.min.js"></script>
</head>
<body>
<script type="text/javascript">
	var oyun = new Phaser.Game(800, 600, Phaser.AUTO, '', 
{ preload: preload, create: create, update: update });
	function preload() {
	}
	function create() {
	}
	function update() {
	}
</script>

Canvas oluştururken alınan parametreleri inceleyelim…

1. parametre; genişlik.
2. parametre; yükseklik.
3. parametre; Phaser’in render metodunu seçiyoruz. Phaser.CANVAS, Phaser.WEBGL veya Phaser.AUTO şeklinde tanımlayabiliriz.
4. parametre; DOM kimliği. Boş parametre.
5. parametre; preaload parametresi için gerekli fonksiyonu tanımlıyoruz. Parametre ile fonksiyon ismi aynıdır, isterseniz değiştirebilirsiniz.
6. parametre; create parametresi için gerekli fonksiyonu tanımlıyoruz. Parametre ile fonksiyon ismi aynıdır, isterseniz değiştirebilirsiniz.
7. parametre; update parametresi için gerekli fonksiyonu tanımlıyoruz. Parametre ile fonksiyon ismi aynıdır, isterseniz değiştirebilirsiniz.

http://phaser.io/sandbox/ adresinden gerçek zamanlı olarak tarayıcı üzerinde kodlama yapıp Render Build edebilirsiniz. Bu sayfayı ilk pratikleriniz yaparken kullanabilirsiniz fakat harici kaynaklara çalıştığınızda yetersiz kalabilir.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum