Flash oyunlarını HTML5'e dönüştürün

Flaş yavaş yavaş Adobe tarafından HTML5 ve JavaScript lehine terk edilir; Resmi hayat sonu 2020 yılı için belirlenmiştir. Ve bu makalenin kullanışlı olduğu yer burasıdır.

• 2018 için 2004 Flash web sitesini yeniden inşa edin

Aşağıda açıklanan ipuçları HTML5 oyun geliştiricilerinin, Flash oyunlarını JavaScript'e dönüştürürken ortak hatalardan kaçınmasını ve tüm geliştirme sürecinin mümkün olduğunca sorunsuz hale getirilmesini sağlar. İhtiyacınız olan tek şey Javascript, WebGL ve Phaser Framework'in temel bilgileridir.

SWF'den JavaScript'e oyun tasarımınızı değiştirmek daha iyi verebilir kullanıcı deneyimi , bu da modern bir görünüm verir. Ama nasıl yapmalı? Bu modası geçmiş teknolojisinden kurtulmak için özel bir Javascript oyun dönüştürücüye ihtiyacınız var mı? Peki, html5 dönüşümüne flaş bir parça kek olabilir - işte deneyimli bir JavaScript oyun geliştiricisinin meseleyle ilgili söylemesi gerektiği.

Tasarım sürecinizi basit tutmak ister misiniz? Bir Web Sitesi Oluşturucu ve doğru ağ sağlayıcısı Sağlayıcı bu şekilde saklayabilir.

01. HTML5 oyun deneyimini geliştirin

Bir oyunu başka bir platforma dönüştürmek, geliştirmek, konularını düzeltmek ve izleyiciyi artırmak için mükemmel bir fırsattır. Aşağıda kolayca yapılabilir ve dikkate değer olabilecek birkaç şey var:

• Mobil cihazları desteklemek
  Flaştan JavaScript'e dönüştürülmesi, daha geniş bir kitleye ulaşılmasını sağlar - dokunmatik ekran kontrollerinin kullanıcıları genellikle oyuna uygulanması gerekir. Neyse ki, hem Android hem de iOS cihazları artık WebGL'yi de destekliyor, bu yüzden 30 veya 60 fps oluşturma genellikle kolayca ulaşılabilir. Çoğu durumda, 60 fps, yalnızca mobil cihazlar gittikçe daha performans sergilediği için, yalnızca zamanla iyileştirecek herhangi bir soruna neden olmaz.
• Performansı iyileştirmek
  ActionScript ve JavaScript ile karşılaştırıldığında, ikincisi daha hızlıdır. Bunun dışında, bir oyunu dönüştürmek, oyun kodunda kullanılan algoritmaları tekrar ziyaret etmek için iyi bir fırsattır. Javascript oyun geliştirmesiyle, onları optimize edebilir veya orijinal geliştiriciler tarafından bırakılan kullanılmayan kodları tamamen soyabilirsiniz.
• Hataların sabitlenmesi ve oyuna iyileştirmeler yapmak
  Oyunun kaynak koduna bakarak yeni geliştiricilere sahip olmak, bilinen hataları düzeltmek veya yeni ve çok nadir olanları keşfetmeye yardımcı olabilir. Bu, oyunu sitenize daha fazla zaman geçirmelerini ve diğer oyunlarınızı denemelerini teşvik eden oyuncuları daha az rahatsız edici hale getirir.
• Web Analytics Ekleme
  Trafiği izlemeye ek olarak, Web Analytics, oyuncuların bir oyunda nasıl davrandığı ve oyun sırasında nasıl sıkışıp kaldıkları hakkında bilgi toplamak için de kullanılabilir.
• Yerelleştirme ekleme
  Bu izleyiciyi artıracak ve oyunlarınızı oynayan diğer ülkelerden çocuklar için önemlidir. Ya da belki oyununuz ingilizce değil ve bu dili desteklemek istiyorsunuz?

02. 60 fps elde et

JavaScript oyun geliştirme söz konusu olduğunda, oyun içi düğmeler, widget'lar ve diğer GUI öğeleri için HTML ve CSS'yi kaldırmak cazip olabilir. Tavsiyemiz burada dikkatli olmak. Bu karşı çıkan, ancak aslında DOM elemanlarını kullanan karmaşık oyunlarda daha az performans gösteriyor ve bu da bu mobil üzerinde daha fazla önem kazanıyor. Tüm platformlarda sabit 60 fps elde etmek istiyorsanız, daha sonra HTML ve CSS'den istifa etmek gerekebilir.

Sağlık çubukları, cephane barları veya skor sayaçları gibi etkileşimli olmayan GUI elemanları, normal görüntüleri ('Phaser.Image' sınıfı) kullanılarak Phaser'da kolayca uygulanabilir. Basit metin etiketleri için metin 'sınıfı.

Düğmeler ve onay kutuları gibi etkileşimli unsurlar, yerleşik 'Phaser.Button' sınıfı kullanılarak uygulanabilir. Diğer, daha karmaşık unsurlar, gruplar, görüntüler, düğmeler ve metin etiketleri gibi farklı basit tiplerden oluşabilir.

03. Özel Yazı Tiplerini Yükleme

Özel bir vektör yazı tipi (örneğin TTF veya OTF) ile metin oluşturmak istiyorsanız, herhangi bir metin oluşturmadan önce yazı tipinin tarayıcı tarafından yüklendiğinden emin olmalısınız. Phaser V2.6 bu amaç için bir çözüm sağlamaz, ancak başka bir kütüphane kullanılabilir - Web yazı tipi yükleyici .

Yazı tipi dosyanız var ve sayfanızdaki Web yazı tipi yükleyicisini eklediğinizi varsayarsak, aşağıda aşağıda bir yazı tipinin nasıl yükleneceğine dair basit bir örnektir. Web yazı tipi yükleyici tarafından yüklenecek olan basit bir CSS dosyası yapın (HTML'nize eklemeniz gerekmez):

 @ font-face {
  // JS'de kullanacağınız bu isim
  Yazı Tipi ailesi: 'Gunlay';
  // font dosyasına URL, göreceli veya mutlak olabilir
  SRC: URL ('../ fonts / gunplay.ttf') formatı ('truetype');
  Yazı tipi ağırlığı: 400;
} 

Şimdi WebFontconfig adlı bir genel değişken tanımlayın. Bu genellikle yeterli olacak kadar basit bir şey:

 var webfontconfig = {
  'Sınıflar': Yanlış,
  'Zaman aşımı': 0,
  'Aktif': fonksiyon () {
  // font başarıyla yüklendi ...
  }
  'özel': {
  'Aileler': ['Gunplay'],
  // önceden belirtilen CSS'ye URL
  'URLS': ['Stilleri / Fonts.CSS']
  }
}; 

Kodunuzu yukarıda gösterilen 'aktif' geri çağrıya koymayı unutmayın. Ve bu kadar!

04. Oyunu Kaydet

Şimdi JavaScript dönüşümüne flaşımızın orta noktasıyız - gölgelendiricilere dikkat etme zamanı. Yerel verileri ActionScript'te ısrar etmek için 'SharedObject' sınıfını kullanırsınız. Javascript'te basit değiştirme Yerel Masal API , daha sonra geri almak için dizeleri saklamaya izin veren, hayatta kalan sayfa yeniden yüklenir.

Verileri kaydetme çok basittir:

 Var ilerleme = 15;
localstorage.setitem ('mygame.progress', ilerleme); 

Yukarıdaki örnekte, bir sayı olan 'İlerleme' değişkeninin bir dizeye dönüştürüleceğini unutmayın.

Yükleme de basittir, ancak elde edilmeyen değerlerin dizeleri veya boş olacağını unutmayın.

 Var Progress = Parseint (localstorage.getitem ('MyGame.Progress')) || 0; 

İşte iade değerinin bir sayı olduğunu garanti ediyoruz. Varsa, 0 'ilerleme' değişkenine 0 atanacak.

Ayrıca, daha karmaşık yapıları da saklayabilir ve alabilirsiniz, örneğin JSON:

 Var istatistikleri = {'Hedefler': 13, 'kazanır': 7, 'Kayıplar': 3, 'Çekiliyor': 1
};
localstorage.setitem ('mygame.stats', json.Stringify (istatistikler));
...
var istatistikleri = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

'LocalStorage' nesnesinin mevcut olmayacağı bazı durumlar var. Örneğin, dosyayı kullanırken: // Protokol veya bir sayfa özel bir pencerede yüklendiğinde. Kodunuzun çalışmaya devam etmesini ve aşağıdaki örnekte gösterilen varsayılan değerleri kullanmasını sağlamak için 'deneyin ve yakala' ifadesini kullanabilirsiniz:

 deneyin {
    var Egzersiz = localstorage.getitem ('MyGame.Progress');
} yakalamak (istisna) {
  // localstorage mevcut değil, varsayılan değerleri kullanın
} 

Hatırlanması gereken bir başka şey, depolanan verilerin URL başına değil, etki alanı başına kaydedilmesidir. Öyleyse, birçok oyunun tek bir alanda barındırıldığı bir risk varsa, kaydederken bir önek (ad alanı) kullanmak daha iyidir. Yukarıdaki örnekte, 'MyGame'. bir önektir ve genellikle oyunun adıyla değiştirmek istiyorsunuz.

Oyununuz bir iframe içine gömülürse, LocalStorage iOS'ta devam etmeyecektir. Bu durumda, bunun yerine ebeveyn iframe içindeki verileri saklamanız gerekir.

05. Varsayılan parça gölgelendiricisi

Phaser ve PixiJ'ler sprite'lerinizi oluştururken, basit bir iç parça gölgelendiricisi kullanırlar. Çok fazla özelliğe sahip değil çünkü hız için uyarlanmış. Ancak, bu gölgelendiriciyi amaçlarınız için değiştirebilirsiniz. Örneğin, fordraw'ı denetlemek veya işleme için daha fazla özellik desteklemek için yararlanabilirsiniz. Aşağıda, kendi varsayılan parça gölgelendiricinizin Phaser v2'ye nasıl tedarik edileceğine bir örnektir.

 fonksiyonu preload () {
  this.load.shader ('dosyaadı.frag', 'gölgelendiriciler / dosyaadı.frag');
}
fonksiyon yaratma () {
  var renderer = this.Renderer;
  var parti = renderer.spriteebatch;
  topch.defaultshader =
  yeni pixi.abstractfilter (this.cache.getshader ('dosyaadı.frag'));
  topch.setcontext (renderer.gl);
} 

06. Renklendirme yöntemini değiştirin

PHASER ve PIXIJ'lerde varsayılan renklendirme yöntemlerinin yerini almak için özel bir varsayılan gölgelendirici kullanılabilir. Phaser ve Pixij'lerde renklendirme, doku piksellerini belirli bir renkle çarparak çalışır. Çarpma her zaman renkleri açıkça bir sorun değil; Flash renklendirmeden farklıdır. Oyunlarımızdan biri için Flash'a benzer renklendirmeyi yapmamız gerekiyordu ve özel bir varsayılan gölgelendiricinin kullanılabileceğine karar verdi. Aşağıda böyle bir parça gölgelendiricinin örneğidir:

// özel tonu değişkeni, ekleyen flaş renklendirmeye benzer
// renge ve çarpmaz. Bir renk olumsuz
// bu gölgelendiricinin düzgün çalışması için sağlanmalıdır, yani set
// Sprite.Tint'e, tüm sprite'i beyaza çevirmek için 0.
hassas lowp şamandıra;
Değişen VEC2 VTEXTURECOORD;
Değişen VEC4 VKÇİ;
Üniforma Sampler2D USampler;
void ana (void) {
  vec4 f = texture2d (USEPPLER, VTEXTURECOORD);
  float a = kelepçe (vcolor.a, 0.00001, 1.0);
  GL_FRAGCOLOR.RGB = F.RGB * VCOLOR.A + Kelepçe (1.0 - Vcolor.RGB / A, 0.0, 1.0) * VCOLOR.A * F.A;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Bu gölgelendirici, tonu olana bir temel renk ekleyerek pikselleri aydınlatır. Bunun çalışması için istediğiniz renge olumsuz vermeniz gerekir. Bu nedenle, beyazlaşabilmek için ayarlamanız gerekir:

 sprite.tint = 0x000000; // bu renkleri beyaza renklendirir
Sprite.tint = 0x00ffff; // bu kırmızı verir 

07. Overdraw'i inceleyin

Varsayılan bir gölgelendiricinin değiştirilmesi, hata ayıklamaya yardımcı olmak için de kaldırılabilir. Aşağıda, overdraw'un böyle bir gölgelendiriciyle nasıl tespit edilebileceğini açıkladık.

Üst düzeyde, ekrandaki birçok veya tüm piksellerin birden çok kez işlendiğinde gerçekleşir. Örneğin, aynı yeri alan ve birbiri ardına bir tane oluşturur. Bir GPU'nun saniyede ne kadar piksel oluşturabileceğini, doldurma oranı olarak tanımlanır. Modern masaüstü GPU'lar, normal 2D amaçlar için aşırı doldurma hızı vardır, ancak mobil olanlar çok daha yavaştır.

Ekrandaki her pikselin, Pixijs ve Phaser'daki varsayılan Global Fragment Shader'ı değiştirerek, bununla birlikte kaç kez yazıldığını bulmak için basit bir yöntem vardır:

 Void Main (Void) {
  GL_FRAGCOLOR.RGB + = 1.0 / 7.0;
} 

Bu gölgelendirici işlenecek pikselleri aydınlatır. 7.0 numara, pikselleri beyazı çevirmek için kaç tane yazmanın gerekli olduğunu gösterir; Bu numarayı beğeninize ayarlayabilirsiniz. Başka bir deyişle, ekrandaki daha hafif pikseller birkaç kez yazılmış ve en az yedi kez beyaz pikseller yazılmıştır.

Bu gölgelendirici, bir nedenden ötürü hala 'görünmez' nesneleri bulmanıza yardımcı olur ve elden geçirilmesi gereken aşırı şeffaf alanlara sahip olan sprites (GPU'nun dokularınızdaki şeffaf pikselleri işlemesi gerekir).

08. Neden fizik motorları arkadaşların?

Bir fizik motoru, fizik cisimlerini (genellikle sert vücut dinamikleri) ve çarpışmalarını simüle etmekten sorumlu bir ortamdır. Fizik motorları 2D veya 3D boşlukları simüle eder, ancak ikisi de değil. Tipik bir fizik motoru sağlayacaktır:

• Hızlar, hızlar, eklemler ve motorlar belirleyerek nesne hareketi;
• Çeşitli şekil tipleri arasındaki çarpışmaları tespit etmek;
• Çarpışma tepkilerini hesaplama, yani, çarpıştıklarında iki nesne nasıl tepki vermelidir.

Bu amaç için iyi çalışan bir Phaser eklentisi var. Box2D, Unity oyun motorunda ve GameMaker Studio 2'de de kullanılır.

Bir fizik motoru gelişiminizi hızlandırırken, ödeme yapmanız gereken bir fiyat var: Kalıcı çalışma zamanı performansı. Çarpışmaları tespit etmek ve cevapları hesaplamak, bir CPU yoğun görevdir. Cep telefonlarındaki bir sahnede birkaç düzine dinamik nesne ile sınırlı olabilirsiniz veya yüzüntülü performansın yanı sıra 60 fps'nin derinliklerinin altındaki kare hızı.

09. İhracat sesleri

Bir .FLA dosyasının içindeki bir flash oyun ses efektiniz varsa, bu amaca hizmet eden menü seçeneklerinin bulunmamasından dolayı, bunları GUI'den dışa aktarmak mümkün değildir (en azından Adobe Animate CC 2017). Ancak başka bir çözüm var - sadece bunu yapan özel bir komut dosyası:

 fonksiyon normalizefilename (ad) {
  // bir camel kartı adını Snake_Case adına dönüştürür
  dönüş adı. (/ ([A-z]) / g, '_ $ 1'). (/ ^ _ /, '') .Tolowercase ();
}
işlev DisplayPath (yol) {
  // dosya yolunu daha okunabilir hale getirir
  UNESCAPE (YOL) iade .Replace ('Dosya: ///', '') .Replace ('|', ':');
}
fl.outputpanel.clear ();
if (fl.getdocumentdom (). library.getselecteditems (). Uzunluk ve gt; 0)
  // sadece seçilen öğeleri edinin
  var kütüphane = fl.getdocumentdom (). library.getselcoeditems ();
Başka
  // tüm öğeleri al
  var kütüphane = fl.getdocumentdom (). library.items;
// Kullanıcı isteyin Hedef dizinini isteyin
var root = fl.browseforfolderurl ('Bir klasör seçin.');
var hataları = 0;
için (var i = 0; ben & library.length; i ++) {
  var öğesi = kütüphane [i];
  eğer (item.itemtype! == 'ses')
  devam et;
  var yolu = kök + '/';
  Eğer (item.originalcompressionType === 'RAW')
  yol + = normalizefilename (item.name.split ('.') 
) + '.wav';
  Başka
  yol + = normalizefilename (item.Name);
  var başarı = item.exporttofile (yol);
  Eğer (! Başarı)
  Hatalar + = 1;
  fl.trace (DisplayPath (yol) + ':' + (Başarı? 'Tamam': 'Hata'));
}
fl.trace (Hatalar + 'Hata (ler)'); 

Ses dosyalarını dışa aktarmak için komut dosyası nasıl kullanılır:

1. Yukarıdaki kodu bilgisayarınızda .jsfl dosyası olarak kaydedin.
2. Adobe Animate ile .fla dosyasını açın.
3. Komutları ve GT'yi seçin; Komutu üst menüden çalıştırın ve açılan diyalogdaki komut dosyasını seçin.
4. Şimdi Dışa Aktar Hedef dizinini seçmek için başka bir diyalog dosyası açılır.

Bitti! Şimdi belirtilen dizindeki WAV dosyalarına sahip olmalısınız. Yapılacak olan şey, örneğin MP3, OGG veya AAC'ye dönüştürmektir. (Güvenli tutmak için oyun dosyalarınız varsa, iyice yükseltin Bulut depolama .)

10. MP3'ler nasıl kullanılır?

İyi eski MP3 formatı geri döndü, çünkü bazı patentlerin süresi dolmuş ve şimdi her tarayıcı MP3'leri çözebilir ve oynatabilir. Bu, gelişimi biraz daha kolaylaştırır, çünkü nihayet iki ayrı ses formatı hazırlamaya gerek yoktur. Daha önce, örneğin OGG ve AAC dosyalarına ihtiyaç duydunuz, şimdi MP3 yeterli olacaktır.

Bununla birlikte, mp3 hakkında hatırlamanız gereken iki önemli şey var:

• MP3'lerin, özellikle mobil cihazlarda zaman alıcı olabilecek yüklendikten sonra çözülmesi gerekir. Tüm varlıklarınız yüklendikten sonra bir duraklama görürseniz, muhtemelen MP3'lerin kod çözüldüğü anlamına gelir.
• Uzaklıksızca oynayan ilmekli mp3'ler biraz sorunludur. Çözüm, MP3Loop kullanmaktır, Daha fazla bilgi edinin Bu makalede Compu Faz tarafından gönderildi.

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi Web Tasarımcısı'nın 277 sayısında yayınlandı. Sayı 277 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

• Tasarımcılar için 5 Gündelik Oyunlar
• Kendi webgl fiziğinizi oluşturun oyunu
• Birlik varlık ithalat boru hattını anlamak