Phaser.js Nedir?

Phaser.js Nedir?

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.

İlk Uygulma: 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 anltmaya çalışacağım.Oyun örneğinde basit bir platform örneğinde karakteri kontrol ettirerek yıldızları toplatacağız.Phaser ile kodlamalarımı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 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 lanı oluşturmak
  3. preload() fonksiyonunu tanımlamak ve harici kaynakları yüklemek
  4. create() fonksiyonunu tanımlamak ve oyun bileşenlerini(çevre,karakterler,fizik vs.) tanımlamak
  5. update() fonksiyonu tanımlamak vee oyun sahnesine güncellemek.

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

 HTML

 5

sablon.html

<!doctype html>

<head>

< meta charset=”UTF-8″ />

 <script type=”text/javascript”src=”js/phasermin.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. prametre;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 pratiklerinizi yaparken kullanabilirsiniz fakat harici kaynaklara çalıştığınızda yetersiz kalabilir.

Bu bölümde anlatılan örneğe ait kaynak kodları ,DVD/Kaynak Kodlar/PhaserJS-MerhabaDunya/sablon.html ismi ile bulabilirsiniz.

Share this post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir