Oyun Geliştirme İçin Phaser ile Başlarken

Phaser, 2D video oyunları oluşturmak için bir çerçevedir. Oyunu görüntülemek için HTML5 Canvas'ı ve oyunu çalıştırmak için JavaScript'i kullanır. Phaser'ı vanilya JavaScript'e göre kullanmanın avantajı, oyunun kendisini tasarlamaya konsantre olmanızı sağlayan video oyunlarının fiziğinin çoğunu tamamlayan geniş bir kütüphaneye sahip olmasıdır.

Phaser, geliştirme süresini azaltır ve iş akışını kolaylaştırır. Phaser ile basit bir oyun oluşturmayı öğrenelim.

Neden Phaser ile Geliştirmelisiniz?

Fazer Programın döngüsel güncellemelere dayalı olması açısından diğer görsel programlama dillerine benzer. Phaser'ın üç ana aşaması vardır: ön yükleme, oluşturma ve güncelleme.

Ön yüklemede, oyunun varlıkları yüklenir ve oyuna sunulur.

Oluştur, oyunu ve tüm başlangıç ​​oyun öğelerini başlatır. Oyun başladığında bu işlevlerin her biri bir kez çalıştırılır.

Öte yandan güncelleme, oyun boyunca bir döngü halinde çalışır. Oyunun unsurlarını interaktif hale getirmek için güncelleyen bir beygirdir.

Phaser ile Oyun Geliştirmek İçin Sisteminizi Kurun

Phaser'ın HTML ve JavaScript üzerinde çalışmasına rağmen, oyunlar aslında istemci tarafında değil sunucu tarafında çalıştırılır. Bu, oyununuzu çalıştırmanız gerekeceği anlamına gelir. yerel ana makineniz. Oyun sunucusu tarafında çalıştırmak, oyununuzun program dışındaki ek dosyalara ve varlıklara erişmesine olanak tanır. Ben tavsiye ediyorum bir localhost kurmak için XAMPP kullanma halihazırda bir kurulumunuz yoksa.

127.0 0.1, Localhost veya Loopback Adresi Nedir?

Bilgisayarınızda "localhost" u gördünüz, ama nedir? 127.0.0.1 adresi ne anlama geliyor? Hacklendin mi?

Aşağıdaki kod sizi hazır hale getirecek. Temel bir oyun ortamı kurar.

Oyunu çalıştırmak için, yerel ana makinenizdeki bir "img" klasörüne kaydedilmiş "gamePiece" adlı bir PNG görüntüsü gerekir. Basit olması için, bu örnek 60xgame de60px turuncu kare kullanır. Oyununuz şunun gibi görünmeli:

Bir sorunla karşılaşırsanız, neyin yanlış gittiğini anlamak için tarayıcınızın hata ayıklayıcısını kullanın. Tek bir karakterin bile eksik olması hasara neden olabilir, ancak genellikle hata ayıklayıcınız bu küçük hataları yakalayacaktır.

Kurulum Kodunu Açıklamak

Şimdiye kadar oyun hiçbir şey yapmıyor. Ama biz zaten pek çok yeri kapladık! Koda daha derinlemesine bakalım.

Bir Phaser oyununun çalışması için, Phaser kitaplığını içe aktarmanız gerekir. Bunu 3. satırda yapıyoruz. Bu örnekte, kaynak koduna bağlandık, ancak onu yerel ana makinenize indirebilir ve dosyaya da başvurabilirsiniz.

Şimdiye kadarki kodun çoğu, değişken olan oyun ortamını yapılandırır. yapılandırma mağazalar. Örneğimizde, mavi (onaltılık renk kodunda CCFFFF) arka planı 600 piksele 600 piksel olan bir fazer oyunu kuruyoruz. Şimdilik oyun fiziği şu şekilde ayarlandı: oyun makinesiama Phaser farklı fizik sunuyor.

En sonunda, faliyet alani, sahne programa şunu çalıştırmasını söyler önyükleme oyun başlamadan önce işlevi ve oluşturmak oyunu başlatmak için fonksiyon. Tüm bu bilgiler, adı verilen oyun nesnesine aktarılır. oyun.

İlişkili: Programlama ve Kodlama için En İyi 6 Dizüstü Bilgisayar

Kodun bir sonraki bölümü, oyunun gerçekten şekillendiği yerdir. Ön yükleme işlevi, oyununuzu çalıştırmak için ihtiyacınız olan her şeyi başlatmak istediğiniz yerdir. Bizim durumumuzda, oyun parçamızın görüntüsünü önceden yükledik. İlk parametresi .image resmimizi adlandırır ve ikincisi programa resmin nerede bulunacağını söyler.

GamePiece görüntüsü oyuna oluşturma işlevinde eklendi. Satır 29, gamePiece görselini oyun alanımızın sol üst köşesinden 270px sola ve 450px aşağıya sprite olarak eklediğimizi söylüyor.

Oyun Parçamızı Harekete Geçirme

Şimdiye kadar buna oyun denemez. Birincisi, oyun parçamızı hareket ettiremiyoruz. Oyunumuzdaki şeyleri değiştirebilmek için bir güncelleme fonksiyonu eklememiz gerekecek. Ayrıca, oyunu güncellediğimizde hangi işlevi çalıştıracağımızı oyuna söylemek için yapılandırma değişkenindeki sahneyi ayarlamamız gerekecek.

Güncelleme İşlevi Ekleme

Yapılandırmada yeni sahne:

faliyet alani, sahne: {
önyükleme: önyükleme,
oluştur: oluştur,
güncelleme: güncelleme
}

Ardından, oluşturma işlevinin altına bir güncelleme işlevi ekleyin:

function update () {
}

Temel Girişleri Alma

Oyuncunun oyun parçasını ok tuşlarıyla kontrol etmesine izin vermek için, oyuncunun hangi tuşlara bastığını izlemek için bir değişken eklememiz gerekecek. GamePieces'i tanımladığımız yere aşağıda keyInputs adlı bir değişken bildirin. Orada bildirmek, tüm işlevlerin yeni değişkene erişmesine izin verecektir.

var gamePiece;
var keyInputs;

KeyInput değişkeni, oyun oluşturma işlevinde oluşturulduğunda başlatılmalıdır.

function create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Şimdi güncelleme işlevinde, oyuncunun bir ok tuşuna basıp basmadığını kontrol edebilir ve eğer öyleyse, oyun parçamızı buna göre hareket ettirebiliriz. Aşağıdaki örnekte, oyun parçası 2px taşınır, ancak bunu daha büyük veya daha küçük bir sayı yapabilirsiniz. Parçayı bir seferde 1px hareket ettirmek biraz yavaş görünüyordu.

function update () {
if (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
if (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
if (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
if (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Oyunun artık hareketli bir karakteri var! Ama gerçek bir oyun olmak için bir hedefe ihtiyacımız var. Bazı engeller ekleyelim. Engellerden kaçmak, 8-bit çağındaki pek çok oyunun temelini oluşturuyordu.

Oyuna Engel Eklemek

Bu kod örneği, engel1 ve engel 2 olarak adlandırılan iki engel sprite kullanır. engel1 mavi bir karedir ve engel2 yeşildir. Her görüntünün oyun parçası sprite gibi önceden yüklenmesi gerekecektir.

function preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('engel1', 'img / engel1.png');
this.load.image ('engel2', 'img / engel2.png');
}

Daha sonra her engel sprite, tıpkı oyun parçası gibi oluşturma işlevinde başlatılmalıdır.

function create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
engel1 = this.physics.add.sprite (200, 0, 'engel1');
engel2 = this.physics.add.sprite (0, 200, 'engel2');
}

Engelleri Harekete Geçirmek

Bu sefer taşları hareket ettirmek için oyuncu girdisini kullanmak istemiyoruz. Bunun yerine, bir parçayı yukarıdan aşağıya, diğerini soldan sağa hareket ettirelim. Bunu yapmak için, aşağıdaki kodu güncelleme işlevine ekleyin:

engel1.y = engel1.y + 4;
eğer (engel1.y> 600) {
engel1.y = 0;
engel1.x = Fazer. Matematik. (0, 600) Arası;
}
engel2.x = engel2.x + 4;
eğer (engel2.x> 600) {
engel2.x = 0;
engel2.y = Fazer. Matematik. (0, 600) Arası;
}

Yukarıdaki kod, engel1'i ekranda aşağı ve engel2'yi oyun alanı boyunca her karede 4 piksel hareket ettirecektir. Bir kare ekran dışına çıktığında, yeni bir rastgele noktada karşı tarafa geri taşınır. Bu, oyuncu için her zaman yeni bir engel olmasını sağlayacaktır.

Çarpışmaları Algılama

Ancak henüz işimiz bitmedi. Oyuncumuzun engelleri aşabildiğini fark etmiş olabilirsiniz. Oyuncunun bir engele çarpıp oyunu bitirdiğinde oyunun bunu algılamasını sağlamalıyız.

Phaser fizik kütüphanesinde bir çarpıştırıcı detektörü vardır. Tek yapmamız gereken, onu create işlevinde başlatmaktır.

this.physics.add.collider (gamePiece, engel1, function (gamePiece, engel1) {
gamePiece.destroy ();
engel.destroy ();
engel2.destroy ();
});
this.physics.add.collider (gamePiece, engel2, function (gamePiece, engel2) {
gamePiece.destroy ();
engel.destroy ();
engel2.destroy ();
});

Çarpıştırıcı yöntemi üç parametre gerektirir. İlk iki parametre hangi nesnelerin çarpıştığını tanımlar. Yukarıda, iki çarpıştırıcı kurduk. Birincisi, oyun parçasının engelle1 çarpıştığını ve ikinci çarpıştırıcının oyun parçası ile engel2 arasındaki çarpışmaları aradığını algılar.

Üçüncü parametre, çarpıştırıcıya bir çarpışma algıladığında ne yapması gerektiğini söyler. Bu örnekte bir fonksiyon var. Bir çarpışma varsa, tüm oyun öğeleri yok edilir; bu oyunu durdurur. Şimdi oyuncu bir engele çarptığında oyunu geçecek.

Phaser ile Oyun Geliştirmeyi Deneyin

Bu oyunu geliştirmenin ve daha karmaşık hale getirmenin birçok farklı yolu var. Sadece bir oyuncu yarattık, ancak "awsd" kontrolleri ile ikinci bir oynanabilir karakter eklenebilir ve kontrol edilebilir. Benzer şekilde, daha fazla engel eklemeyi ve hareketlerinin hızını değiştirmeyi deneyebilirsiniz.

Bu tanıtım, başlamanıza yardımcı olacaktır, ancak öğrenecek çok şey var. Phaser ile ilgili harika olan şey, oyun fiziğinin çoğunun sizin için yapılmış olmasıdır. 2D oyunları tasarlamaya başlamanın harika ve kolay bir yoludur. Bu kodu geliştirmeye ve oyununuzu geliştirmeye devam edin.

Herhangi bir hatayla karşılaşırsanız, tarayıcı hata ayıklayıcınız sorunu keşfetmenin harika bir yoludur.

Web Sitesi Sorunlarını Gidermek için Chrome Geliştirme Araçlarını Kullanma

Web sitelerinizi iyileştirmek için Chrome tarayıcının yerleşik geliştirme araçlarını nasıl kullanacağınızı öğrenin.

Yazar hakkında