Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

Cara Belajar Enjin Permainan Phaser HTML5 

by
Length:LongLanguages:

Malay (Melayu) translation by Meyria (you can also view the original English article)

Phaser adalah rangka kerja permainan sumber terbuka HTML5 yang dihasilkan oleh Storm Photon. Ia direka untuk membuat permainan yang akan berjalan pada desktop dan penyemak imbas web mudah alih. Banyak tumpuan diberikan kepada prestasi dalam pelayar web mudah alih, kawasan permainan web yang semakin berkembang dan penting. Sekiranya peranti itu mampu maka ia menggunakan WebGL untuk rendering, tetapi jika tidak, ia akan dibalikkan semula ke kanvas. Dalam artikel ini, saya akan merangkumi sumber untuk belajar Phaser, serta menunjukkan apa yang boleh dilakukan dan beberapa pemikiran yang masuk ke dalam reka bentuknya.

header

Namun Rangka Kerja Permainan HTML5 Yang Lain ?!

Sederhana untuk mengatakan bahawa ia merasakan seolah-olah satu rangka permainan HTML5 baru dilepaskan setiap minggu, demikian adalah percambahan mereka. Jadi mengapa anda perlu mempertimbangkan Phaser di kalangan pilihan yang besar di luar sana? Saya suka berfikir bahawa sebab itu ada kaitan dengan warisan pasukan yang terlibat dalam membinanya.

Kami di Photon Storm mendedikasikan diri untuk membangun apa-apa tetapi permainan HTML5 beberapa tahun yang lalu, kembali apabila benar-benar tidak banyak pilihan rangka kerja, dan anda boleh mengira jumlah permainan HTML5 devs dalam digit tunggal. Memasuki ruang yang begitu awal, dan datang dari Flash, kami langsung merasakan keperluan untuk membina alat yang kami gunakan dalam AS3.

Kami telah menjadi peminat Flixel dan telah menikmati kejayaan dengan permainan kami sendiri dan dengan Alat Kuasa Flixel kami. Terdapat buzz yang sebenar melihat devs lain menggunakannya untuk membantu mendapatkan permainan mereka dikeluarkan, dan ini adalah sesuatu yang kami ingin duplikat dalam HTML5.

flixel-power-toosls

Walau bagaimanapun, apa yang tidak kami sediakan adalah berapa cepat landskap HTML5 berubah. Malah pada hari ini, saya mempunyai slaid dalam persembahan saya yang saya tunjuk di konferensi yang mengatakan "Bersedia untuk tidak menyedari apa yang anda tahu setiap enam bulan", dan saya percaya ini masih tetap benar. Pembekal penyemak imbas sedang melancarkan dan meningkatkan pada kadar yang luar biasa sekarang. Ia hanya mengambil masa beberapa minggu untuk ciri-ciri baru untuk membolosi kepada orang ramai, dan jika anda dibebani dengan kerangka permainan yang dikekalkan semasa masa lapang seseorang atau pada kitaran pelepasan lambat, maka ia tidak lama lagi perkara-perkara sangat ketinggalan zaman.

Satu lagi tanda perubahan ini adalah jenis pekerjaan klien yang sedang kami berikan untuk membina. Sebagai syarikat kami hanya melakukan dua perkara: membina permainan HTML5, dan membina Phaser. Kami telah membina permainan HTML5 untuk beberapa jenama hiburan terbesar di dunia, dan ini telah memberikan kita wawasan yang mendalam terhadap pelbagai keperluan yang mereka permintaan. Kawasan terbesar yang kami diminta untuk berfungsi ialah permainan yang berjalan di dalam pelayar mudah alih; begitu banyak kerangka HTML5 difokuskan pada desktop, di mana prestasinya banyak dan sambungan cepat dan stabil, dan mengabaikan sisi pelayar mudah alih. Namun, di sinilah kita masih melihat permintaan pelanggan yang paling kuat. Oleh itu adalah penting bahawa Phaser boleh digunakan untuk membina permainan klien kami, tanpa mengira platform.

Sejak pelepasan Phaser 1.0, kemas kini telah teratur dan komprehensif, dengan banyak ciri dan pembetulan baru di tempat dengan cepat. Kami bekerja pada pemulihan kira-kira satu bulan dari dev untuk menguasai-anda boleh melihat changelog lengkap pada GitHub. Menariknya, kami kini melihat permintaan untuk permainan berjalan di dalam WebView, jadi kami akan memastikan bahawa Phaser beroperasi dengan baik dalam persekitaran ini akan berlaku pada tahun 2014.

Selain menjaga Phaser sehingga kini, penting juga bagi kami bahawa kami membina sesuatu yang sangat mudah digunakan. Dan anda akan melihat ini dapat dilihat di seluruh rangka kerja. Ini berpunca daripada pengalaman kami dengan Alat Kuasa Flixel, dan di luar itu ketika saya pernah bekerja untuk Pencipta Permainan yang membantu untuk menentukan bentuk bahasa permainan mereka. Saya rasa ia sentiasa menjadi sebahagian daripada saya yang saya ingin membuat perkembangan permainan semudah mungkin untuk pemaju, satu trend yang saya akan teruskan apabila Phaser berkembang.

Saya memohon maaf terlebih dahulu daripada mana-mana yang berikut (atau di atas!) Kedengaran sedikit 'pemasaran'. Phaser adalah produk percuma, kami tidak membuat sebarang wang daripada anda menggunakannya, dan jika saya bersemangat mengenainya, itu hanya kerana saya ghairah tentang apa yang saya buat. Jadi tolonglah saya!


Apa Platform Bolehkah Saya Sasarkan Dengan Phaser?

Pelayar Desktop

Phaser adalah perpustakaan JavaScript yang direka untuk berjalan di semua pelayar desktop utama. Ini termasuk Internet Explorer 9 dan ke atas, Firefox, Chrome, dan Safari. Sebelum IE9 ia tidak menyokong kanvas, jadi jika anda benar-benar memerlukan rangka kerja yang dapat mengendalikan DOM, maka Phaser tidak akan sesuai. Walau bagaimanapun, permintaan untuk jenis permainan menjadi lebih rendah; jika ada, ia beralih ke arah yang lain (ke arah WebGL).

Pelayar Mudah Alih

Pada telefon bimbit, Phaser berjalan pada iOS5 dan ke atas dalam Safari Mudah Alih. Pada Android, ia berjalan di 2.2 dan ke atas dalam kedua-dua penyemak imbas stok dan di Chrome. Chrome kini menjadi pelayar Android standard, dengan versi terkini walaupun menyokong WebGL, tetapi anda masih tidak boleh mengabaikan berjuta-juta peranti Android warisan yang masih digunakan.

connect_me_factory

Firefox OS, Tizen, dan Kindle

Terima kasih kepada Mozilla, kami menerima banyak peranti ujian FFOS, dan telah mula memastikan bahawa Phaser berjalan dengan baik kepada mereka. Setakat ini, keadaan kelihatan baik, dan kami akan menghasilkan panduan penggunaan pada tahun baru.

Kami juga melihat permainan Phaser berjalan dengan lancar pada peranti Tizen dan dengan sempurna di bawah pembungkus Kindle HTML5, yang bermaksud anda boleh menggunakan peranti 'keluar dari kotak' itu. Apabila lebih banyak telefon berkuasa web mula memasuki pasaran, kami akan memastikan Phaser dikemas kini untuk mereka.

Aplikasi Native dan Desktop EXEs

Terdapat begitu banyak pilihan pakej pembangunan permainan yang sangat baik yang mensasarkan penciptaan aplikasi asli (Perpaduan, Corona, Loom, dan sebagainya), bahawa ia bukanlah suatu kawasan yang kita ingin menghabiskan banyak usaha yang meliputi pada mulanya, terutamanya jika dibandingkan dengan yang kurang diberi pasaran penyemak imbas mudah alih.

Bagaimanapun, dengan pembangunan pembungkus seperti CocoonJS dan Ejecta, kami melihat pemaju menggunakan Phaser membalut permainan mereka dan membebaskannya sebagai aplikasi asli. Jadi, masuk ke 2014 kami akan mula menambah sokongan untuk CocoonJS terus ke teras, serta sokongan untuk pembungkus desktop seperti node-webkit.

okai

Ciri-ciri utama

Kami akan menyerlahkan beberapa perkara yang kami anggap menjadi ciri paling penting Phaser dari sudut pemaju:

Ia hanya JavaScript biasa

Ini mungkin kedengaran seperti 'ciri' yang pelik, tetapi sebenarnya ia harus cukup menarik. Phaser tidak menggunakan apa-apa amalan gaya OO palsu secara dalaman. Tidak ada rantai warisan atau sistem komponen besar, dan anda tidak perlu memaksa objek anda ke dalam sebarang struktur kelas tetap, sama ada. Ini adalah rangkaian prototaip lurus ke hadapan, cara JavaScript digunakan untuk digunakan.

Ini tidak bermakna anda tidak boleh membina permainan anda dengan cara berstruktur; jauh dari situ. Maksudnya ialah kita tidak menguatkuasakan ini. Ini juga bermakna bahawa Phaser adalah sangat mudah untuk digodam dengan.

Tetapi saya suka TypeScript!

Baik-kerana kita mempunyai fail definisi TypeScript juga! Terdapat panduan khusus untuk menggunakan Phaser dengan TypeScript yang tersedia.

phaser-typescript

Memuatkan Aset Mudah

Phaser mempunyai Loader aset terbina dalam yang boleh mengendalikan:

  • Imej
  • Sprite Sheet (bingkai bersaiz tetap)
  • Tekstur Atlases (termasuk Texture Packer, JSON Hash, JSON Array, Flash CS6/CC, dan format Starling XML)
  • Fail audio
  • Fail Data (XML, JSON, teks biasa)
  • Fail JavaScript (jadi anda boleh memuatkan sebahagian permainan atau sumber yang berasaskan JS)
  • Tilemaps (format peta CSV dan Tiles)
  • Bitmap Font

Kami secara rutin mengeksport fail-fail atlas tekstur dari Flash terus ke permainan Phaser kami, dan ia menyokong atlas sepenuhnya dipotong. Aset boleh dimuatkan sebahagian, di-cache, dan ditarik dari URL yang berlainan (untuk sokongan CDN), dan anda juga boleh mengubah sebarang sprite ke bar kemajuan dengan satu baris kod.

Rendering: WebGL dan Kanvas

Secara dalaman, Phaser menggunakan Pixi.js untuk membuat rendering. Pixi adalah sebuah perpustakaan rendering yang hebat yang memberi tumpuan kepada Kanvas dan WebGL. Ia adalah sebuah perpustakaan yang kami terus menyumbang ke arah untuk membantu mendorong perkara ke hadapan.

Untuk permainan anda, ini bermakna bahawa jika penyemak imbas menyokong WebGL maka pemain akan lebih kerap daripada tidak mendapat pengalaman yang lebih lancar. WebGL biasa di desktop tetapi masih muncul di telefon bimbit; walaupun begitu, di mana permainan HTML5 akan menuju ke hadapan, jadi menyokongnya adalah penting. Pembebasan terbaru Phaser memperkenalkan penyokong WebGL dan sokongan penapis, dan yang akan datang akan melaksanakan peta biasa supaya anda dapat memperoleh manfaat dari alat baru seperti Sprite Lamp.

phaser-shaders

Audio: Audio Web dan Audio Legacy

Audio telah menjadi salah satu titik paling lemah dalam permainan HTML untuk masa yang lama. Hanya beberapa tahun yang lalu, kami berhadapan dengan pilihan mempunyai satu saluran audio latency tinggi yang akan melumpuhkan peranti semasa main semula atau tidak mempunyai audio sama sekali. Tetapi masa telah berubah, dan API Audio Web datang kepada keselamatan kita. Ia membolehkan sokongan audio berasaskan nod yang betul, dengan pelbagai saluran, penghalaan nod dan semua jenis kesan. Jadi Phaser sepenuhnya menyokong Web Audio.

Walau bagaimanapun, pada Android terutamanya, banyak peranti masih tidak menyokong thi-jadi kami juga menyokong warisan Audio dan penggunaan Sprites Audio: kaedah membungkus sekumpulan sampel bersama-sama ke dalam satu fail dan menggunakan penanda main balik untuk melompat ke berbeza kesan. Phaser akan menukar antara kedua-dua bergantung pada keupayaan peranti dan juga termasuk membuka kunci sub-sistem audio secara automatik untuk anda, sesuatu yang menangkap banyak devs mudah alih pertama kali!

peterrabbit

Input: Multi-Touch, Papan Kekunci, Penunjuk, Tetikus

Apabila menyokong desktop dan mudah alih terdapat bilangan pilihan masukan yang semakin bervariasi. Phaser menyokong papan kekunci, tetikus, sentuhan, MSPointer (kini Pointer di bawah IE11), dan gabungannya. Sebagai contoh, pada peranti Windows Surface anda boleh menukar antara menggunakan tetikus dan sentuhan, atau sesungguhnya menggunakan kedua-duanya.

Untuk input sentuhan, Phaser akan mengatasi persekitaran sentuhan dan sentuhan sentuhan. Anda boleh menentukan sehingga 10 titik sentuh dan menjejaki semua secara berasingan, menggunakan peristiwa mereka untuk mengendalikan interaksi Sprite seperti menyeret, mengetuk, dan perlanggaran.

wolfblood

Fizik, Tweens, dan Zarah

Dibundarkan ke dalam perpustakaan teras adalah sistem ArcadePhysics dan Arcade. Ini adalah perpustakaan ringan ringan AABB yang membolehkan anda menggunakan graviti dan gerakan ke mana-mana Sprite, kemudian menguji perlanggaran dan pemisahan. Menggunakan quadtree berasaskan dunia untuk membantu mengurangkan ujian perlanggaran, anda boleh mencapai keputusan yang baik dengan cepat dengan sedikit masa pemprosesan yang diperlukan.

Walau bagaimanapun, kami faham bahawa ini tidak sesuai dengan semua jenis permainan, jadi sistem fizik mudah diganti dan tidak ada sifat fizik yang terikat pada sprite sebenar (tetapi sebaliknya kepada komponen tubuh), jadi boleh ditukar untuk seperti Box2D atau p2.js. Sistem tweening juga terbina dalam, membolehkan anda membuat objek atau harta dengan mudah. Dan sekiranya jeda permainan, maka semua tweens anda akan berhenti sebentar secara automatik dan disambung semula seperti yang diperlukan.

phaser-particles

Plugins

Adalah matlamat kami bahawa teras Phaser akhirnya akan menetap dan mencapai keseimbangan stabil yang baik, di mana kami tidak mungkin menyentuh lebih jauh daripada pembetulan dan kemas kini penyemak imbas. Walau bagaimanapun, kami mahu Phaser terus berkembang, menyediakan ciri-ciri untuk semua jenis permainan tetapi tanpa menyebabkan perpustakaan teras meletup dalam pertumbuhan. Untuk tujuan ini, kami telah membina sistem pemalam.

Plugin Phaser boleh mendaftarkan diri mereka dengan kerangka teras, dikemas kini sejajar dengan gelung permainan teras, dan melaksanakan semua jenis tugas tambahan yang berguna. Satu contoh hebat ini adalah laluan EasyStar yang baru dikeluarkan plugin. Kami akan melepaskan plugin kami dan mengharapkan untuk melihat lebih banyak lagi datang dari masyarakat pada masa akan datang.


Bermula

Di sini, kami akan menampung di mana untuk memuat turun Phaser, bagaimana untuk ditubuhkan untuk pembangunan, dan di mana untuk bermula.

Memuat turun Phaser

Projek Phaser dihoskan pada GitHub di https://github.com/photonstorm/phaser. Terdapat dua cawangan utama: master adalah di mana pelepasan stabil terkini boleh didapati, dan dev adalah di mana versi terbina dalam kerja dibina. Sebaik sahaja versi baru selesai, kami menolak dari dev untuk menguasai dan kemudian dev dikemas kini untuk menyediakan untuk pembebasan seterusnya. Kecuali anda tahu anda memerlukan cawangan dev, anda harus selalu bermula dengan tuan.

Idealnya, anda perlu menggunakan git dan checkout atau fork repositori, supaya anda boleh mengemas kini dengan mudah. Tetapi jika anda baru untuk git atau tidak selesa menggunakannya lagi, terdapat pilihan untuk memuat turun fail zip repositori keseluruhan juga.

gravity-smash

Panduan Bermula

Sebaik sahaja dimuat turun, kami sangat menyarankan anda mengikuti Getting Started Guide. Ini akan membawa anda melalui menubuhkan pelayan web tempatan, memilih persekitaran pembangunan, dan juga membina di awan jika anda inginkan.

Panduan itu memecah bahagian berikut:

Terdapat juga panduan yang setara untuk TypeScript.

Membuat Permainan Pertama Anda

Dengan persekitaran pembangunan anda, tiba masanya untuk membina permainan. Kami mengesyorkan bermula dengan Membuat tutorial permainan Phaser pertama anda. Ia akan membimbing anda melalui proses mewujudkan permainan platform yang mudah, memperkenalkan anda kepada konsep utama bagaimana Phaser berfungsi, dan menyediakan anda untuk mengembangkannya dan mempelajari lebih lanjut.

phaser-starter-tutorial

Contoh Phaser

Apabila anda menyemak atau memuat turun Phaser, ia akan datang dengan suite Contoh kami. Ini adalah laman web mandiri yang mengandungi lebih daripada 170 contoh kod yang berbeza, berpecah kepada bidang utama: Fizik, Perlanggaran, Sprite, Teks, dan banyak lagi. Setiap contoh adalah sekeping kod lengkap yang berfungsi sendiri yang boleh anda buka, mudah mengedit, dan belajar dari. Digunakan bersama dengan dokumen API, ini adalah pantas untuk belajar dengan cepat mengenai bahagian tertentu Phaser.

phaser-examples

API Docs

Dokumen API boleh didapati dalam repositori Phaser dalam folder docs. Kami telah bekerja keras pada dokumen selama beberapa bulan sekarang dan, sementara masih sedikit kasar di sekitar tepi, mereka kini komprehensif, yang meliputi keseluruhan rangka kerja.

Pembebasan terkini (1.1.3) melihat satu lagi kemas kini yang besar kepada mereka, dengan banyak bidang diisi dengan lebih banyak butiran, dan misi kami yang berterusan untuk meningkatkan dokumen dengan setiap pembebasan Phaser baru.

JSHint

Sejak versi 1.1.3 Phaser, rangka kerja penuh kini dijalankan melalui JSHint sebelum dibebaskan. Kami menyediakan fail konfigurasi kami dalam repositori juga.

JSHint adalah satu cara bagi kita untuk memastikan bahawa kod rangka kerja mengikuti garis panduan struktur kod tetap, dari cara kita mengendalikan tab dan indentasi kepada nama variabel dan gaya kutipan. Mereka yang ingin menyumbang ke arah Phaser perlu menyemak kemas kini mereka terhadap konfigurasi JSHint kami.


Langkah seterusnya

Sekiranya anda telah mengikuti artikel ini, anda akan memahami mengapa Phaser hebat, apa yang telah kami targetkan untuk membuatnya, dan bagaimana anda boleh belajar membuat permainan dengannya. Tetapi aspek yang paling penting dari mana-mana rangka kerja permainan tidak banyak ciri-ciri sukan atau demo teknologi, ia adalah komuniti di belakangnya.

Membuat permainan adalah kerja keras, tempoh. Dan ia lebih sukar dilakukan secara berasingan, dengan rangka baru yang hampir pasti berfungsi dengan berbeza dari apa yang telah anda gunakan pada masa lalu. Syukurlah, Phaser mempunyai komuniti yang berkembang maju di sekelilingnya.

tildeath

Forum Devs Permainan HTML5

Kami menyediakan forum HTML5 Game Devs yang lalu, tidak khusus untuk Phaser, tetapi semata-mata kerana membuat permainan HTML5 adalah kawasan baru yang kami mahu dapat bercakap dengan orang lain mengenainya. Sejak itu, ia telah hilang kekuatan, dengan papan aktif, 250,000 pandangan sebulan dan asas pengguna yang ramah dan profesional.

Adalah masuk akal bahawa kami akan menggunakan ini sebagai rumah rasmi untuk Phaser, dan anda akan mendapati banyak rakan-rakan yang ramah di sana untuk melantun idea dan soalan. Forum ini juga menjadi rumah kepada perpustakaan besar lain termasuk Pixi.js dan kerangka 3D Babylon.js, dan ada kawasan Pertunjukan Permainan yang hebat untuk memamerkan apa sahaja yang anda buat-menjatuhkan di sana setiap hari adalah sumber inspirasi yang berterusan bagi saya, dan ia benar-benar hebat untuk melihat apa yang sedang menguruskan untuk mendapatkan HTML5 untuk melakukan hari ini.

html5gamedevs

Surat berita

Newsletter Phaser dilepaskan sekali sebulan dan mengandungi butiran mengenai siaran baru, artikel ringkas tentang topik dan plugin Phaser baru dan tutorial. Langganan adalah, sememangnya, percuma, dan diuruskan melalui Pemantauan Kempen, jadi anda boleh yakin tidak ada spam dan cara mudah untuk berhenti berlangganan sekiranya anda ingin.

Penyumbang

Anda boleh membantu membentuk cara di mana Phaser bertumbuh. Sekiranya anda mendapati bug, sila laporkannya. Ia tidak akan membawa anda lama, dan setakat ini kami menetapkan lebih daripada 91% daripada semua isu yang dilaporkan (dan kami masih bekerja pada 9% yang lain). Anda juga boleh mengeluarkan permintaan tarik terhadap cawangan pembangunan, atau melepaskan pemalam atau penapis anda sendiri.

Tunjukkan Kami Permainan Anda!

Kami menghabiskan banyak masa yang tidak menentu yang bekerja pada Phaser kerana kami mahu ia menjadi rangka pembangunan pembangunan HTML5 terbaik yang mungkin. Kami faham ia tidak akan sempurna untuk semua orang, dan kami sejuk dengannya. Tetapi jika anda menggunakannya dan membuat sesuatu, tidak kira berapa kecil anda fikir itu, sila beritahu kami. Anda tidak akan percaya dengan rangsangan motivasi sebenar, apabila devs menunjukkan kepada kami permainan yang telah mereka kerjakan! Jangkau kepada kami sama ada di forum, melalui Twitter (@hothotstorm) atau melalui e-mel.

Paling penting, kami benar-benar berharap anda bersenang-senang membuat permainan anda.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.