İçindekiler
gelişi HTML5 Web'i görme biçimimizi değiştirdi, bize yalnızca geliştirmeleri için daha iyi araçlar vermekle kalmadı, aynı zamanda video oyunlarında olduğu gibi daha da ileri giden uygulamalar geliştirmemiz için olanaklar yarattı.Bir video oyunu yapmanın avantajı HTML5 tarayıcısı olan hemen hemen her cihazla uyumlu olması ve ek kurulumlar indirmeye veya yapmaya gerek kalmadan daha da iyi olmasıdır.
Bu yeni popülerlik sayesinde, her biri kendine has özellikleri ve avantajları olan video oyunları geliştirmeye yönelik çerçeveler çoğaldı, bu sefer üzerinde duracağız. fazer, nedenleri birkaç tanedir ve bunları aşağıdaki listede görebiliriz:
- Harika bir topluluğu var ve aktif.
- Periyodik olarak güncellenmektedir.
- Kullanımı ücretsizdir.
- Hayatı bizim için kolaylaştıran fizik araçlarına sahiptir.
1- Bu da dahil olmak üzere çerçevenin kurulumu sırasında ortaya çıkan tüm kaynakları indirebilmek için İnternet erişimine ihtiyacımız var.
2- Stilin bir web sunucusunu kurmuş veya kurabiliyor olmalıyız LAMBA veya WAMP veya MAMP işletim sistemimize bağlı olarak, bunun nedeni fazer kullanır HTML5 ve ayrıca JavaScript Bu nedenle, güvenlik önlemleri nedeniyle tarayıcımız yerel yürütmeleri kabul etmeyecektir.
3- Framework kurulumu sırasında belirlenen gerekli klasörlere ve servislere erişim için izinlere ihtiyacımız var.
4- Uyumlu bir tarayıcıya ihtiyacımız var. HTML5 ve hata ayıklama araçlarına sahip olduğunu, bu eğitimde kullanacağız Firefox Geliştirici Sürümü şu anda en son sürümünde, ancak kendilerine en uygun olanı seçmekte özgürler.
5- Son olarak, örnekler için kod yazabilmek için bir metin düzenleyiciye ihtiyacımız var, her zaman elimizde ne varsa olabilir, tavsiye etmemize rağmen Yüce metin o NotePad ++, her ikisinde de bulunan ve geliştiriciler olarak hayatımızı kolaylaştıran çok sayıda eklenti nedeniyle.
Kurulum yapabilmek için yapacağımız ilk şey fazer resmi web sitesine gitmek ve burada birkaç kaynak bulacağız, ancak şimdilik yazan bölüme gideceğiz İndirmek:
BÜYÜT
belgeler / index.htmlBurada, yeni indirdiğimiz sürümün çevrimdışı ve resmi belgelerine girişimiz var, bazı ayrıntıları gözden geçirmemize yardımcı olabilir, ancak İnternet'e gitme ve kendimizi belgeleme seçeneğimiz varsa, her zaman daha iyi seçeneklerimiz olacaktır.
inşa / fazer.min.jsBu bizim çerçevemizdir, ilk projelerimizi başlatmak için ihtiyaç duyacağımız tüm araçları içeren küçültülmüş ve sıkıştırılmış kitaplıktır.
Projeyi indirdiğimiz için, her şeyin doğru olduğunu doğrulamak için, web sunucumuzla erişebileceğimiz sıkıştırılmamış klasörü kopyalamamız yeterlidir, genellikle bu dizindir. www veya public_html, hepsi gerçekten çevremize bağlı.
Bir kez orada tarayıcımıza gitmeli ve yerel ana bilgisayar / fazer veya yerleştirdiğimiz ad ve dosyaların listesini göreceğiz, burada aşağıdaki klasöre gitmeliyiz: kaynaklar / öğreticiler / 01 Başlarken / hellophaser / index.html ve aşağıdaki ekran görüntüsünde gördüklerimizi takdir edebiliriz:
BÜYÜT
Web sunucumuzda frameworkün bulunduğu klasörde yeni bir klasör oluşturacağız, bu durumda onu arayacağız fazer-örnek, içine dosyayı yerleştireceğiz fazer.min.js kökünde, adında bir dosya oluşturacağız. index.html ve denilen başka bir dosya ana.jsadlı bir resim de yerleştirmeliyiz. logo.png.webp çerçeve kaynaklarında bulunabilecek ve bu, önerilen 180 x 64 piksel boyutunda olabilir. Sonunda, dizinimiz şöyle görünmelidir:
Phaser'daki İlk OyunumuzBu, kullanıcının içeriği görebilmesi için oyunumuzun destekleneceği temel olacaktır. İlk oyunumuzu oluşturmanın bir sonraki adımı, kodunu yazmaktır. ana.jsoyunumuzun tüm mantığını işleyecek ve üç anahtar yöntemi içeren , bakalım:İlk Oyunumuz =)
ön yüklemeBu yöntem, oyunumuzun ihtiyaç duyduğu görsel, ses, video vb. tüm kaynakların önceden yüklenmesinden sorumludur. Her zaman başlangıçta çalışır.
oluşturmakBu yöntem bittikten sonra çalışır ön yükleme ve işlevi, bize oyunun ilk kurulumunu kurma imkanı vermenin yanı sıra, yüklenen kaynakları oyunumuza dahil etmektir.
GüncellemeSon olarak, bu yöntem saniyede 60 kez çalışır ve oyunumuzun gerçek mantığını içerir, deyim yerindeyse bize hareketi veren de budur..
Gördüğümüz gibi, bu yöntemlerin her biri oyunun bir durumundan sorumludur, ilk ikisi oyunun başlangıcından öncedir, oysa Güncelleme yürütme sırasında oluşur. Her yöntemin ne yaptığını tanımladıktan sonra, yalnızca ihtiyacımız olan kodu görmemiz gerekir:
var mainState = {preload: function () {// Resmi yüklüyoruz game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Oyundaki resmimizi this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// saniyede 60 kez açıyı bir birim değiştiriyoruz // bu bize bir görüntü döndürme efekti verecek this.sprite.angle + = 1; }}; // burada oyunumuza başlıyoruz ve // HTMLvar oyunumuza koyduğumuz div gameDiv'i kullanacak şekilde ayarlıyoruz = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('ana', mainState); game.state.start ('ana');Yöntemlerin sonunda görebileceğimiz gibi, adında bir değişken oluşturuyoruz. oyun ve bunda bir örneğini yürütüyoruz Phaser.Oyun bazı parametreleri ilettiğimiz yerde, şu anda onlar hakkında fazla bir şey bilmeye gerek yok, onları gördüğümüz gibi kopyalıyoruz. Ancak kabaca bu, uygulamamıza aramasını söylediğimiz kısımdır. fazer böylece yukarıda ve sonunda oluşturduğumuz yöntemlerle ne yapacağınızı söyler. oyun.durum.başlangıç çerçeveye oyunumuzu başlatmasını söylediğimiz yerdir.Şimdi her şey yolunda gittiyse, projemizi tarayıcıda çalıştıracağız ve seçilen görüntünün ekranda döndüğünü görmeliyiz:
Bununla bu öğreticiyi bitirdik, başarıyla yükledik fazer, bu harika çerçevenin bazı başlangıç özelliklerini biliyoruz ve bununla küçük bir uygulama veya oyun yarattık. hakkında biraz daha derinlemesine araştırma yapmak için bu öğreticiyi bir başlangıç noktası olarak almak önemlidir. fazer, bu bize sunduğu her şeyin %1'i bile olmadığı için, ancak çoğu zaman atmanın bize maliyeti olan bir ilk adımdır.
