Home-theater-designers
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. Vanilya JavaScript yerine Phaser kullanmanın yararı, video oyunlarının fiziğinin çoğunu tamamlayan, oyunun kendisini tasarlamaya konsantre olmanızı sağlayan kapsamlı bir kitaplığa sahip olmasıdır.
Phaser, geliştirme süresini kısaltır ve iş akışını kolaylaştırır. Phaser ile temel bir oyun oluşturmayı öğrenelim.
Neden Phaser ile Geliştirme Yapmalısınız?
fazer programın döngülü güncellemelere dayanması bakımı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 oyunun kullanımına sunulur.
Create, oyunu ve tüm başlangıç oyun öğelerini başlatır. Bu işlevlerin her biri, oyun başlatıldığında bir kez çalıştırılır.
Güncelleme ise oyun boyunca bir döngü içinde çalışır. Oyunun öğelerini etkileşimli hale getirmek için güncelleyen 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 sunucunuz . Oyunun sunucu tarafında çalıştırılması, oyununuzun program dışındaki ek dosyalara ve varlıklara erişmesine olanak tanır. Ben tavsiye ediyorum localhost kurmak için XAMPP kullanma zaten bir kurulumunuz yoksa.
Aşağıdaki kod sizi çalıştıracak ve çalıştıracaktır. Temel bir oyun ortamı kurar.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Oyunu çalıştırmak için, yerel sunucunuzdaki bir 'img' klasörüne kaydedilen 'gamePiece' adlı bir PNG görüntüsü gerekir. Basit olması için bu örnekte 60xgame de60px turuncu kare kullanılmıştır. Oyununuz şöyle görünmelidir:
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çıklama
Şimdiye kadar, oyun hiçbir şey yapmıyor. Ama şimdiden çok yol kat ettik! Kodu daha derinlemesine inceleyelim.
Bir Phaser oyununun çalışması için Phaser kitaplığını içe aktarmanız gerekir. Bunu 3. satırda yapıyoruz. Bu örnekte, kaynak koda bağladık, ancak onu yerel ana makinenize indirebilir ve dosyaya da başvurabilirsiniz.
ps1 oyunu bilgisayarda nasıl oynanır
Şimdiye kadarki kodun çoğu, değişkenin kullandığı oyun ortamını yapılandırır. yapılandırma mağazalar. Örneğimizde, 600 piksele 600 piksel olan mavi (onaltılık renk kodunda CCFFFF) arka planı olan bir fazer oyunu kuruyoruz. Şimdilik, oyun fiziği şu şekilde ayarlandı: Arkadyalı , ancak Phaser farklı fizik sunar.
Nihayet, faliyet alani, sahne programı çalıştırmasını söyler ön yükleme oyun başlamadan önce işlev ve oluşturmak Oyunu başlatmak için işlev. Tüm bu bilgiler, adı verilen oyun nesnesine iletilir. oyun .
İlgili: 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. ilk parametresi .image resmimizi adlandırır ve ikincisi programa resmi nerede bulacağını söyler.
Oyuna oluştur fonksiyonunda gamePiece görseli eklendi. 29. satır, gamePiece resmini oyun alanımızın sol üst köşesinden 270 piksel sola ve 450 piksel aşağıya hareketli grafik olarak eklediğimizi söylüyor.
Oyun Parçamızı Hareket Ettirmek
Şimdiye kadar, buna pek oyun denilemez. Birincisi, oyun parçamızı hareket ettiremiyoruz. Oyunumuzda bir şeyleri değiştirebilmek için bir güncelleme işlevi eklememiz gerekecek. Ayrıca oyunu güncellediğimizde hangi fonksiyonun çalıştırılacağını oyuna söylemek için config değişkenindeki sahneyi ayarlamamız gerekecek.
Güncelleme İşlevi Ekleme
Yapılandırmadaki yeni sahne:
scene: {
preload: preload,
create: create,
update: update
}Ardından, oluşturma işlevinin altına bir güncelleme işlevi ekleyin:
Windows 10 kötü amaçlı yazılımdan koruma hizmeti yürütülebilir yüksek işlemci
function update(){
}Anahtar Girdileri Alma
Oyuncunun oyun parçasını yön tuşlarıyla kontrol etmesine izin vermek için, oyuncunun hangi tuşlara bastığını izlemek için bir değişken eklememiz gerekecek. Aşağıda gamePieces olarak tanımladığımız keyInputs adında bir değişken tanımlayın. Bunu orada bildirmek, tüm fonksiyonların yeni değişkene erişmesine izin verecektir.
var gamePiece;
var keyInputs;Oyun oluşturma işlevinde oluşturulduğunda keyInput değişkeni başlatılmalıdır.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Şimdi güncelleme fonksiyonunda, oyuncunun bir ok tuşuna basıp basmadığını kontrol edebiliriz ve eğer öyleyse, oyun parçamızı buna göre hareket ettirebiliriz. Aşağıdaki örnekte, oyun parçası 2 piksel taşınmıştır, ancak bunu daha büyük veya daha küçük bir sayı yapabilirsiniz. Parçayı bir seferde 1 piksel 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;
}
}Oyun artık hareketli bir karaktere sahip! Ama gerçekten bir oyun olmak için bir amaca ihtiyacımız var. Bazı engeller ekleyelim. Engellerden kaçmak, 8-bit çağındaki birçok oyunun temeliydi.
Oyuna Engel Eklemek
Bu kod örneği, engel1 ve engel 2 olarak adlandırılan iki engel hareketli grafiğini kullanır. Engel1 mavi bir karedir ve engel2 yeşildir. Her görüntünün, oyun parçası hareketli grafiği gibi önceden yüklenmesi gerekir.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Ardından, her bir engel hareketli grafiğinin, oyun parçası gibi, oluşturma işlevinde başlatılması gerekecektir.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Engelleri Hareket Ettirmek
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 güncelleme işlevine aşağıdaki kodu ekleyin:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Yukarıdaki kod, engel1'i ekranın aşağısına ve engel2'yi her karede 4 piksel oyun alanı boyunca hareket ettirecektir. Bir kare ekrandan çı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ı Tespit Etme
Ama henüz tam olarak işimiz bitmedi. Oyuncumuzun engelleri tam olarak geçebildiğini fark etmişsinizdir. Oyuncunun bir engele çarptığını oyunun tespit etmesini ve oyunu bitirmesini sağlamamız gerekiyor.
Phaser fizik kitaplığında bir çarpıştırıcı dedektörü vardır. Tek yapmamız gereken onu create fonksiyonunda başlatmak.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Çarpıştırıcı yöntemi üç parametre gerektirir. İlk iki parametre hangi nesnelerin çarpıştığını tanımlar. Yani yukarıda, ayarlanmış iki çarpıştırıcımız var. İlki oyun parçasının engel1 ile ne zaman çarpıştığını algılar ve ikinci çarpıştırıcı oyun parçası ile engel2 arasındaki çarpışmaları arar.
Üçüncü parametre, çarpıştırıcıya bir çarpışma algıladığında ne yapacağını söyler. Bu örnekte bir fonksiyon var. Bir çarpışma varsa, tüm oyun öğeleri yok edilir; bu oyunu durdurur. Artık oyuncu bir engele çarparsa oyun oynayacak.
Phaser ile Oyun Geliştirmeyi Deneyin
Bu oyunu geliştirmenin ve daha karmaşık hale getirmenin birçok farklı yolu var. Sadece bir oyuncu oluşturduk, ancak ikinci bir oynanabilir karakter eklenebilir ve 'awsd' kontrolleri ile kontrol edilebilir. Benzer şekilde, daha fazla engel eklemeyi ve hareket hızlarını değiştirmeyi deneyebilirsiniz.
bir şeye hakim olmak kaç saat sürer
Bu tanıtım başlamanıza yardımcı olacak, ancak öğrenecek daha çok şey var. Phaser'ın en güzel yanı, oyun fiziğinin büyük bir kısmının sizin için yapılmış olmasıdır. 2D oyunlar tasarlamaya başlamak için harika bir kolay yol. Bu kodu geliştirmeye devam edin ve oyununuzu geliştirin.
Herhangi bir hatayla karşılaşırsanız, tarayıcı hata ayıklayıcınız sorunu keşfetmenin harika bir yoludur.
Paylaş Paylaş Cıvıldamak E-posta Web Sitesi Sorunlarını Gidermek için Chrome Geliştirici Araçları Nasıl KullanılırWeb sitelerinizi geliştirmek için Chrome tarayıcısının yerleşik geliştirme araçlarını nasıl kullanacağınızı öğrenin.
Sonrakini Oku İlgili konular- Programlama
- JavaScript
- HTML5
- Oyun Geliştirme
J. Seaton, karmaşık konuları ayrıştırma konusunda uzmanlaşmış bir Bilim Yazarıdır. Saskatchewan Üniversitesi'nden doktora derecesine sahiptir; Araştırması, öğrencilerin çevrimiçi katılımını artırmak için oyun tabanlı öğrenmeyi kullanmaya odaklandı. Çalışmadığı zamanlarda onu kitap okurken, video oyunları oynarken ya da bahçe işleriyle uğraşırken bulacaksınız.
Jennifer Seaton'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın