Konversi game flash ke HTML5

Flash perlahan ditinggalkan oleh Adobe yang mendukung HTML5 dan Javascript; Akhirnya kehidupan resmi ditetapkan untuk tahun 2020. Dan di situlah artikel ini akan berguna.

• Membangun kembali situs web flash 2004 untuk 2018

Tips yang dijelaskan di bawah ini bertujuan untuk membantu pengembang game HTML5 menghindari kesalahan umum ketika mengkonversi game flash ke javascript, serta membuat seluruh proses pengembangan berjalan semulus mungkin. Yang Anda butuhkan hanyalah pengetahuan dasar tentang Javascript, WebGL dan Framework Phaser.

Mengubah desain game Anda dari SWF ke JavaScript dapat menghasilkan yang lebih baik pengalaman pengguna , yang pada gilirannya memberikan tampilan modern. Tetapi bagaimana cara melakukannya? Apakah Anda memerlukan konverter game JavaScript khusus untuk menyingkirkan teknologi usang ini? Nah, flash ke konversi HTML5 bisa menjadi sepotong kue - inilah yang dikatakan pengembang game JavaScript yang berpengalaman tentang masalah ini.

Suka Sederhana Proses Desain Anda? SEBUAH Pembangun Situs Web dan yang benar hosting web. Penyedia dapat mempertahankannya.

01. Meningkatkan pengalaman game HTML5

Mengubah permainan ke platform lain adalah kesempatan yang sangat baik untuk memperbaikinya, memperbaiki masalahnya dan meningkatkan penonton. Di bawah ini adalah beberapa hal yang dapat dengan mudah dilakukan dan layak dipertimbangkan:

• Mendukung perangkat seluler
  Konversi dari Flash ke JavaScript memungkinkan mencapai audiens yang lebih luas - Pengguna dukungan perangkat seluler untuk kontrol layar sentuh biasanya perlu diimplementasikan ke dalam permainan. Untungnya, perangkat Android dan iOS sekarang juga mendukung WebGL, jadi rendering 30 atau 60 FPS biasanya dapat dengan mudah dicapai. Dalam banyak kasus, 60 fps tidak akan menyebabkan masalah, yang hanya akan membaik seiring waktu, karena perangkat seluler menjadi semakin banyak pertunjukan.
• Meningkatkan kinerja
  Ketika datang untuk membandingkan ActionScript dan Javascript, yang terakhir lebih cepat. Selain itu, konversi permainan adalah kesempatan yang baik untuk mengunjungi kembali algoritma yang digunakan dalam kode game. Dengan pengembangan game JavaScript Anda dapat mengoptimalkannya atau benar-benar menghapus kode yang tidak digunakan yang ditinggalkan oleh pengembang asli.
• Memperbaiki bug dan melakukan perbaikan pada gameplay
  Memiliki pengembang baru yang melihat kode sumber game dapat membantu memperbaiki bug yang dikenal atau menemukan yang baru dan sangat jarang. Ini akan membuat bermain permainan kurang mengiritasi para pemain, yang akan membuat mereka menghabiskan lebih banyak waktu di situs Anda dan mendorong mereka untuk mencoba permainan Anda yang lain.
• Menambahkan Analytics Web.
  Selain melacak lalu lintas, analytics web juga dapat digunakan untuk mengumpulkan pengetahuan tentang bagaimana pemain berperilaku dalam permainan dan di mana mereka terjebak selama gameplay.
• Menambahkan lokalisasi
  Ini akan meningkatkan penonton dan penting bagi anak-anak dari negara lain yang memainkan permainan Anda. Atau mungkin permainan Anda tidak dalam bahasa Inggris dan Anda ingin mendukung bahasa itu?

02. Mencapai 60 fps

Ketika datang ke pengembangan game JavaScript, mungkin menggoda untuk memanfaatkan HTML dan CSS untuk tombol dalam game, widget, dan elemen GUI lainnya. Saran kami adalah dengan berhati-hati di sini. Ini berlawanan dengan intuitif, tetapi sebenarnya memanfaatkan elemen DOM kurang berkinerja pada game yang kompleks dan ini semakin signifikan pada ponsel. Jika Anda ingin mencapai konstan 60 fps pada semua platform, maka mengundurkan diri dari HTML dan CSS mungkin diperlukan.

Elemen GUI non-interaktif, seperti bar kesehatan, bar amunisi atau penghitung skor dapat dengan mudah diimplementasikan dalam faser dengan menggunakan gambar biasa (kelas 'phaser.image'), memanfaatkan properti '.crop' untuk pemangkasan dan 'faser. Kelas teks untuk label teks sederhana.

Elemen interaktif seperti tombol dan kotak centang dapat diimplementasikan dengan menggunakan kelas 'phaser.button' bawaan. Elemen lain, lebih kompleks dapat terdiri dari berbagai jenis sederhana, seperti grup, gambar, tombol dan label teks.

03. Memuat font khusus

Jika Anda ingin membuat teks dengan font vektor khusus (mis. TTF atau OTF), maka Anda perlu memastikan bahwa font telah dimuat oleh browser sebelum merender teks apa pun. Phaser v2.6 tidak memberikan solusi untuk tujuan ini, tetapi perpustakaan lain dapat digunakan - Web Font Loader. .

Dengan asumsi bahwa Anda memiliki file font dan memasukkan font font web di halaman Anda, maka di bawah ini adalah contoh sederhana tentang cara memuat font. Buat file CSS sederhana yang akan dimuat oleh Web Font Loader (Anda tidak perlu memasukkannya ke HTML Anda):

 @ font-face {
  // nama ini akan Anda gunakan di js
  Font-Family: 'Gunplay';
  // url ke file font, bisa relatif atau absolut
  SRC: URL ('../ Font / Gunplay.ttf') Format ('truetype');
  Font-weight: 400;
} 

Sekarang mendefinisikan variabel global bernama webfontconfig. Sesuatu sesederhana ini biasanya akan cukup:

 var webfontconfig = {
  'Kelas': Salah,
  'batas waktu': 0,
  'aktif': fungsi () {
  // font telah berhasil dimuat ...
  },
  'Kustom': {
  'Keluarga': ['Gunplay'],
  // url ke CSS yang disebutkan sebelumnya
  'URL': ['Gaya / Fonts.css']
  }
}; 

Ingatlah untuk meletakkan kode Anda dalam panggilan balik 'aktif' yang ditunjukkan di atas. Dan hanya itu!

04. Simpan game

Sekarang kita berada di titik tengah flash kami untuk konversi javascript - saatnya untuk merawat shader. Untuk terus menyimpan data lokal dalam ActionScript, Anda akan menggunakan kelas 'SharedObject'. Dalam Javascript, penggantian sederhana adalah API LocalStorage , yang memungkinkan penyimpanan string untuk pengambilan nanti, memuat ulang halaman yang bertahan.

Menyimpan data sangat sederhana:

 VAR Progress = 15;
localstorage.setitem ('mygame.progress', kemajuan); 

Perhatikan bahwa dalam contoh di atas variabel 'kemajuan', yang merupakan angka, akan dikonversi ke string.

Memuat itu juga sederhana, tetapi ingat bahwa nilai yang diambil akan menjadi string atau nol jika mereka tidak ada.

 VAR Progress = ParseINT (localstorage.getitem ('mygame.progress') || 0; 

Di sini kami memastikan bahwa nilai pengembalian adalah angka. Jika tidak ada, maka 0 akan ditugaskan ke variabel 'kemajuan'.

Anda juga dapat menyimpan dan mengambil struktur yang lebih kompleks, misalnya, JSON:

 var stats = {'gol': 13, 'menang': 7, 'kerugian': 3, 'Draws': 1
};
localstorage.setitem ('mygame.stats', json.stringify (stats));
...
var stats = json.parse (localstorage.getitem ('mygame.stats') || {}; 

Ada beberapa kasus ketika objek 'localstorage' tidak akan tersedia. Misalnya, saat menggunakan file: // protokol atau ketika halaman dimuat di jendela pribadi. Anda dapat menggunakan pernyataan 'Try and Catch' untuk memastikan kode Anda keduanya akan terus berfungsi dan menggunakan nilai default, yang ditunjukkan pada contoh di bawah ini:

 coba {
    var progress = localstorage.getitem ('mygame.progress');
} Catch (Exception) {
  // localstorage tidak tersedia, gunakan nilai default
} 

Hal lain yang perlu diingat adalah bahwa data yang disimpan disimpan per domain, bukan per URL. Jadi jika ada risiko bahwa banyak game diselenggarakan pada satu domain, maka lebih baik menggunakan awalan (namespace) saat menyimpan. Dalam contoh di atas, 'MyGame.' Adalah awalan dan Anda biasanya ingin menggantinya dengan nama permainan.

Jika gim Anda tertanam dalam iframe, maka LocalStorage tidak akan bertahan pada iOS. Dalam hal ini, Anda perlu menyimpan data dalam induk IFRAME sebagai gantinya.

05. Shader fragmen default

Ketika Phaser dan Pixijs membuat sprite Anda, mereka menggunakan shader fragmen internal yang sederhana. Tidak memiliki banyak fitur karena dirancang untuk kecepatan. Namun, Anda dapat mengganti shader itu untuk keperluan Anda. Misalnya, Anda dapat memanfaatkannya untuk memeriksa overdraw atau mendukung lebih banyak fitur untuk rendering. Di bawah ini adalah contoh cara memasok shader fragmen default Anda sendiri ke Phaser V2.

 fungsi preload () {
  this.load.shader ('nama file.frag', 'shaders / filename.frag');
}
Fungsi Buat () {
  var renderer = this.renderer;
  var batch = renderer.spritebatch;
  batch.defaultshader =
  Pixi.abstractractFilter (this.cache.getshader ('nama file.frag'));
  batch.setcontext (renderer.gl);
} 

06. Ubah metode pewarnaan

Shader default khusus dapat digunakan untuk mengganti metode pencahayaan default di Phaser dan Pixijs. Pewarnaan di Phaser dan Pixijs berfungsi dengan mengalikan piksel tekstur dengan warna tertentu. Pergoleran selalu menggelapkan warna, yang jelas bukan masalah; Ini sangat berbeda dari pewarnaan flash. Untuk salah satu game kami, kami perlu menerapkan pewarnaan mirip dengan flash dan memutuskan bahwa shader default khusus dapat digunakan. Di bawah ini adalah contoh shader fragmen seperti itu:

// varian warna spesifik, mirip dengan warna flash yang ditambahkan
// untuk warna dan tidak berkembang biak. Sebuah warna negatif
// harus disuplai untuk shader ini berfungsi dengan benar, A.E. Set
// sprite.tint to 0 untuk mengubah seluruh sprite menjadi putih.
presisi lowp float;
variasi vec2 vtextureCoord;
varigasi VEC4 VCOLOR;
seragam sampler2d usampler;
void main (void) {
  vec4 f = texture2d (usampler, vtextureCoord);
  float a = clamp (vcolor.a, 0,00001, 1.0);
  gl_fragcolor.rgb = f.rgb * vcolor.a + clamp (1.0 - vcolor.rgb / a, 0,0, 1.0) * vcolor.a * f.a;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Shader ini meringankan piksel dengan menambahkan warna dasar ke warna. Agar ini berfungsi, Anda perlu memasok negatif warna yang Anda inginkan. Karena itu, untuk menjadi putih, Anda perlu mengatur:

 sprite.tint = 0x000000; // warna ini sprite ke putih
Sprite.tint = 0x00ffff; // ini memberi merah 

07. Periksa overdraw.

Mengganti shader default juga dapat dimanfaatkan untuk membantu debugging. Di bawah ini kami telah menjelaskan seberapa overdraw dapat dideteksi dengan shader seperti itu.

Pengguling terjadi ketika banyak atau semua piksel pada layar diberikan beberapa kali. Misalnya, banyak benda mengambil tempat yang sama dan diberi satu lagi. Berapa piksel yang dapat diberikan GPU per detik digambarkan sebagai laju pengisian. GPU desktop modern memiliki tingkat pengisian berlebihan untuk keperluan 2D yang biasa, tetapi ponsel yang jauh lebih lambat.

Ada metode sederhana untuk mengetahui berapa kali setiap piksel pada layar ditulis dengan mengganti shader fragmen global default di Pixijs dan Phaser dengan yang satu ini:

 void main (void) {
  gl_fragcolor.rgb + = 1.0 / 7.0;
} 

Shader ini meringankan piksel yang sedang diproses. Nomor 7.0 menunjukkan berapa banyak penulis yang diperlukan untuk memutar piksel putih; Anda dapat menyesuaikan nomor ini sesuai dengan keinginan Anda. Dengan kata lain, piksel yang lebih ringan pada layar ditulis beberapa kali, dan piksel putih ditulis setidaknya tujuh kali.

Shader ini juga membantu menemukan objek 'tak terlihat' yang karena beberapa alasan masih diberikan, dan sprite yang memiliki area transparan yang berlebihan di sekitar yang perlu dilucuti (GPU masih perlu memproses piksel transparan dalam tekstur Anda).

08. Mengapa mesin fisika adalah teman Anda

Mesin fisika adalah middleware yang bertanggung jawab untuk mensimulasikan badan fisika (biasanya dinamika tubuh yang kaku) dan tabrakan mereka. Mesin fisika mensimulasikan ruang 2D atau 3D, tetapi tidak keduanya. Mesin fisika khas akan menyediakan:

• Gerakan objek dengan menetapkan kecepatan, akselerasi, sendi, dan motor;
• Mendeteksi tabrakan antara berbagai jenis bentuk;
• Menghitung respons tabrakan, I.E. Bagaimana dua objek harus bereaksi ketika bertabrakan.

Ada plugin phaser yang bekerja dengan baik untuk tujuan ini. BOX2D juga digunakan dalam mesin game Unity dan studio gamemaker 2.

Sementara mesin fisika akan mempercepat perkembangan Anda, ada harga yang harus Anda bayar: berkurangnya kinerja runtime. Mendeteksi tabrakan dan menghitung tanggapan adalah tugas intensif CPU. Anda mungkin terbatas pada beberapa lusin objek dinamis dalam adegan pada ponsel atau menghadapi kinerja yang terdegradasi, serta mengurangi kecepatan bingkai dalam 60 fps.

09. Suara Ekspor

Jika Anda memiliki efek suara flash game di dalam file .fla, kemudian mengekspornya dari GUI tidak memungkinkan (setidaknya tidak di Adobe Animate CC 2017) karena kurangnya opsi menu yang melayani tujuan ini. Tetapi ada solusi lain - skrip khusus yang hanya terjadi:

 Fungsi NormalizeFilename (nama) {
  // Konversi nama camelcase ke nama Snake_Case
  Return Name.Replace (/ ([A-Z]) / g, '_ $ 1'). Ganti (/ ^ _ /, '') .Tolowercase ();
}
fungsi displaypath (path) {
  // membuat jalur file lebih mudah dibaca
  Return Unescape (Path) .Replace ('File: ///', '') .Replace ('|', ':');
}
fl.Outputpanel.clear ();
if (fl.getdocumentdom (). perpustakaan.getselectedItem (). Panjang & gt; 0)
  // dapatkan hanya item yang dipilih
  var library = fl.getdocumentdom (). library.getselectedItems ();
lain
  // Dapatkan semua item
  var library = fl.getdocumentdom (). perpustakaan.Itu;
// ajukan pengguna untuk direktori tujuan ekspor
var root = fl.browseffolderurl ('pilih folder.');
kesalahan var = 0;
untuk (var i = 0; i & lt; library.length; i ++) {
  var item = pustaka [i];
  Jika (item.Itemtype! == 'Sound')
  terus;
  var path = root + '/';
  if (item.originalcompresitype === 'RAW')
  path + = normalizeFilename (item.name.split ('.') 
) + '.wav';
  lain
  path + = normalizeFilename (item.name);
  var berhasil = item.exporttofile (path);
  Jika (! Sukses)
  Kesalahan + = 1;
  Fl.Trace (DisplayPath (Path) + ':' + (Sukses? 'OK': 'Kesalahan'));
}
Fl.Trace (Kesalahan + 'Kesalahan (S)'); 

Cara menggunakan skrip untuk mengekspor file suara:

1. Simpan kode di atas sebagai file .jsfl di komputer Anda.
2. Buka file .fla dengan Adobe Animate.
3. Pilih perintah & gt; Jalankan perintah dari menu atas dan pilih skrip dalam dialog yang terbuka.
4. Sekarang file dialog lain muncul untuk memilih Direktori Tujuan Ekspor.

Selesai! Anda sekarang harus memiliki file WAV di direktori yang ditentukan. Yang tersisa untuk dilakukan adalah mengubahnya menjadi, misalnya, MP3, OGG atau AAC. (Jika Anda memiliki file game untuk tetap aman, tingkatkan ke Layak penyimpanan awan .)

10. Cara Menggunakan MP3

Format MP3 lama yang baik kembali, karena beberapa paten telah kedaluwarsa dan sekarang setiap browser dapat memecahkan kode dan memutar MP3. Ini membuat pengembangan sedikit lebih mudah, karena akhirnya tidak perlu menyiapkan dua format audio terpisah. Sebelumnya Anda perlu, misalnya, file OGG dan AAC, sementara sekarang MP3 akan mencukupi.

Meskipun demikian, ada dua hal penting yang perlu Anda ingat tentang MP3:

• Mp3 perlu memecahkan kode setelah memuat, yang dapat memakan waktu, terutama pada perangkat seluler. Jika Anda melihat jeda setelah semua aset Anda dimuat, maka itu mungkin berarti bahwa MP3 sedang diterjemahkan
• Bermain Gaplessly memutar mp3s sedikit bermasalah. Solusinya adalah menggunakan MP3LOOP, Baca lebih lanjut dalam artikel ini diposting oleh fase compu.

Artikel ini awalnya diterbitkan dalam penerbitan 277 desainer Web Majalah Web Design Creative. Beli masalah 277 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• 5 Game Santai untuk Desainer
• Bangun game fisika WebGL Anda sendiri
• Memahami pipa impor aset persatuan