Eki.21

HTML5 ve PhaserJS ile Oyun Programlama – PART 3 : Harici Grafikleri Yüklemek

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.

Oyun örneği için 3 adet PNG statik grafik, 1 tane de animasyon oluşturmak için SpriteSheet PNG yükleniyor.

assets/platform.png

assets/sky.png

assets/star.png

assets/dude.png

function preload() {
    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

İlk 3 grafik sabit grafikler olduğu için doğrudan yüklenmiş. Ancak 4. grafiğe dikkat ettiğinizde grafik için yükseklik ve genişlik ölçüsü verilmiş. dude.png grafiğine baktığınızda grafik yatay olarak uzundur ve her bir hareket için farklı görüntüler vardır. İşte biz de 32×48 pixel ölçüsü ile bir görünüm alanı, yani bir maske tanımlayıp, karakterin her bir hareketini o alan içerisinde göstereceğiz.

Yüklenen grafiklerin de her birinin bir nesne içine yüklendiğinde dikkat edin. Mesela platform.png dosyası yüklendiğinde ground isimli nesneye aktarılmış.

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

Leave a comment

Yorum