1
Basic Game Engine Tim Penulis Kelompok 2 April, 2016
Kata Pengantar Buku ini membahas secara spesifik tentang dasar game engine pasher. Phaser adalah salah satu game engine HTML 5 yang dimana buku ini menjelasan tentang basic dari salah satu game engine yaitu Phaser. Pada pembuatan buku ini menggunakan software LxY. Dimana LYX adalah sebua aplikasi yang memudahkan pengguna untuk memanfaatkan keunggulan dari LATEX dalam menangani otomatis layout, menangani persamaan matematika, menangani penulisan referensi dan sebagainya. Saat ini banyak keragaman atau ketakutan dari pengguna LATEX karena terkesan rumit dalam penggunaannya termasuk beberapa font - end editor LATEX. Latex mencoba mengkomindasikan filosofi WYSIWYG (What You See Is What You Get) dari sebagai model pengolahan kata (word processing) dengan kemampuan filosofi dari WYSIWYM (What You See Is What You Mean) dari model pengolah dokumen (document Processor). Sehingga tampilan akan sangat mirip dengan pengguna yang telah bisa menggunakan pengolah kata, termasuk tampilan output langsung seperti yang dimaksudkan. tetapi perlu diingat, apa yang ditampilkan discreen tidak mutlak seratus persen sama dengan yang ditampilkan di output print. Keunggulan LATEX digunakan dalam mengolah output dari input yang memanfaatkan filosofi pengolah kata dan output dengan filosofi pengolah dokumen. Dengan LYX penulisan bidang ilmiah eksak dan teknik akan menjadi lebih mudah dan menyenangkan. penyaluran ini tidak dimaksudkan untuk melakukan plagiat, tetap hanya semata-mata untuk belajar. Akhir kata semoga buku ini dapat memberikan manfaat bagi semua. Depok, Mei 2016 Penulis
1
Contents Daftar Isi
2
Daftar Pustaka
75
2
BAB 1 Pendahuluan Game telah menjadi satu hal yang ada dalam keseharian kita. Dahulu, game hanya dijadikan sarana hiburan semata namun sekarang game telah menjadi luas fungsinya, misalnya game dapat dijadikan sarana pembelajaran, lahan bisnis dan dipertandingkan sebagai salah satu dari cabang olahraga oleh para profesional. Perkembangan game platform juga dapat dilihat secara langsung oleh masyarakat, pada mulanya game hanya dimainkan dikomputer dan console tetapi sekarang sudah memasuki era penuh kecanggihan. Buku ini akan membahas mengenai game engine dan game engine phaser untuk lebih jelasnya. Game engine merupakan suatu sistem perangkat lunak (software) yang dirancang untuk pembuatan dan pengembangan video game. Game engine memberikan kemudahan dalam menciptakan konsep sebuah game yang akan dibuat seperti sistem rendering, AI bahkan sistem networking. Game engine dapat dikatakan jiwa dari segala aspek sebuah game.Tujuan digunakannya game engine adalah mempermudah pembuatan bagian-bagian tertentu dalam game, membagi-bagi pengembangan game menjadi modul-modul tertentu, dan memudahkan kolaborasi antar pihak. Dasar game engine merupakan tujuan penting dalam pembuatan buku ini beserta dengan aplikasi-aplikasi yang digunakan sehingga penulis membuat buku yang bisa menjadi materi untuk mencari dasar (basic) game engine dan pemanfaatan game engine terutama untuk game engine phaser. Mudah-mudahan buku yang penulis ini bisa bermanfaat untuk pembaca buku ini dan penulis mengucapkan selamat untuk membaca buku ini.
1.1 Apa itu Game Engine Game engine adalah sebuah sistem perangkat lunak (software) yang dirancang untuk pembuatan dan pengembangan suatu video game. Game engine memberikan kemudahan dalam menciptakan konsep sebuah game yang akan di buat. Mulai dari sistem rendering, physics, arsitektur suara scripting, A.I, dan bahkan sistem networking. Game engine dapat dikatakan sebagai jiwa dari seluruh aspek sebuah game.
3
CONTENTS
4
Ada banyak mesin permainan yang dirancang untuk bekerja pada konsol permainan video dan sistem operasi desktop seperti Microsoft Windows, Linux, dan Mac OS X. fungsionalitas inti biasanya disediakan oleh mesin permainan mencakup mesin render ( “renderer”) untuk 2D atau 3D grafis, mesin fisika atau tabrakan (dan tanggapan tabrakan), suara, script, animasi, kecerdasan buatan, jaringan, streaming, manajemen memori, threading, dukungan lokalisasi, dan adegan grafik. Proses pengembangan permainan sering dihemat oleh sebagian besar menggunakan kembali mesin permainan yang sama untuk menciptakan permainan yang berbeda. Sebuah game engine dibagi lagi menjadi dua bagian besar. Yaitu API dan SDK. API ( Applicaiton Programming Interfaces ) adalah bagian operating system, services dan libraries yang diperlukan untuk memanfaatkan beberapa feature yang diperlukan. Dalam hal ini contohnya DirectX. Sementara SDK adalah kumpulan dari libraries dan API yang sudah siap digunakan untuk memodifikasi program yang menggunakan operating system dan services yang sama. Game engine mempunyai tipe-tipe diantaranya: Roll-your-own game engine Game engine tipe ini lebih disukai karena kemungkinan besar dapat digunakan gratis. selain itu, game engine tipe ini memperbolehkan para developer lebih fleksibel dalam mengintegrasikan komponen yang diinginkan untuk dibentuk sebagai game engine mereka sendiri. Kelemahan dari tipe game engine ini banyak engine yang dibuat dengan cara semacam ini malah menyerang balik developernya.
CONTENTS
5
Mostly-ready game engines Game engine biasanya sudah memberikan fitur-fitur kepada developer game seperti GUI, physiscs, libraries model, texture dan lain-lain. Engine ini memiliki beberapa batasan, terutama jika dibandingkan dengan game engine sebelumnya yang benar-benar terbuka lebar. Hal ini ditujukan agar tidak terjadi banyak error yang mungkin terjadi setelah sebuah game yang menggunakan engine ini dirilis dan masih memungkinkan game engine-nya tersebut untuk mengoptimalkan kinerja game-nya. Contoh tipe game engine seperti ini adalah Unreal Engine, Source Engine, id Tech Engine dan sebagainya yang sudah sangat optimal dibandingkan jika harus membuat dari awal. Dengan hal ini dapat menyingkat menghemat waktu dan biaya dari para developer game. Point-and-click engines Engine ini merupakan engine yang sangat dibatasi, tapi dibuat dengan sangat user friendly. Developer game bahkan bisa mulai membuat game sendiri menggunakan engine seperti GameMaker, Torque Game Builder dan Unity3D. Dengan sedikit memanfaatkan coding, sudah bisa merilis game. Kekurangannya terletak pada terbatasnya jenis interaksi yang bisa dilakukan dan biasanya hal ini mencakup semuanya, mulai dari grafis hingga tata suara. Tapi bukan berarti game engine jenis ini tidak berguna, bagi developer cerdas dan memiliki kreativitas tinggi, game engine seperti ini bisa dirubah menjadi sebuah game menyenangkan. Game engine ini memang ditujukan bagi developer yang ingin menyingkat waktu pemrogramman dan merilis game-game mereka secepatnya Contoh-contoh Game Engine 1. Freeware game engine/open source game engine Blender Golden T Game Engine (GTGE) DXFramework Ogre Aleph One Axiom Engine Allegro Library Box2D Build Engine Cube Cube 2 DarkPlaces jMonkeyEngine (jME) Panda3D Sphere Unreal Engine
CONTENTS
6
2. Commercial engines/game engine berbayar (komersial) Alamo A.L.I.V.E BigWorld DXStudio Dunia Engine Euphoria GameStudio Jade Engine Jedi Medusa RPG Maker VX RPG Maker XP RPG Maker 2003 RPG Maker 95 Vision Engine contoh ulasan game engine Unreal Engine, Game Engine yang satu ini sudah lama diunggulkan bersama dengan tenarnya Unreal Tournament, sebuah game FPS yang menghadirkan gameplay dan grafis yang menawan dari waktu ke waktu. Versi terakhir untuk saat ini adalah Unreal Engine 3, dan didesain untuk bekerja dengan DirectX9 maupun 10. Selain ditujukan untuk game-game PC, Unreal Engine 3 juga ditujukan untuk game-game console seperti Xbox360 dan PS3. Ada juga game yang memanfaatkan Unreal Engine 3 yang akan dirilis pada tahun 2010 dan diisukan sebagai game dengan tampilan grafis yang sangat bagus, yaitu Mass Effect 2. Sudah begitu didalam Unreal Engine 3 ini terdapat berbagai program yang mendukung kinerjanya seperti NvidiaPhysX, yang memaksimalkan script/efek fisik dari sebuah objek. CryENGINE adalah sebuah Game Engine yang digunakan dalam sebuah game FPS berjudul FarCry yang kala itu pada tahun 2004 memiliki grafis yang sangat menawan.
1.2 Sejarah Game Engine Sebelum (Game Engine) mesin permainan, permainan yang biasanya ditulis sebagai entitas tunggal: game untuk atari 2600, misalnya, harus dirancang dari bawah keatas untuk memanfaatkan optimal hardware layar tampilan ini rutincore hari ini disebut kernel oleh retro pengembang. Platform lain telah kelonggaran lebih, tetapi bahkan ketika layar itu bukan masalah, kendala memori biasanya menyabotase upaya untuk menciptakan desain data-berat yang mesin kebutuhan. Bahkan pada platform menampung lebih, sangat kecil dapat digunakan kembali antara permainan. Kemajuan pesat hardware arcade ujung tombak dari pasar-berarti bahwa sebagian besar kode harus dibuang setelah itu pula, sebagai generasi kemudian akan menggunakan desain permainan game yang sama sekali berbeda yang mengambil keuntungan dari sumber daya tambahan. Jadi desain paling permainan melalui 1980 dirancang melalui rule set-keras dikodekan dengan sejumlah kecil data tingkat dan grafis.
CONTENTS
7
Generasi pertama dari mesin grafik pihak ketiga atau renderers (dan pelopor untuk apa yang sekarang kita kenal sebagai mesin) didominasi oleh tiga pemain yaitu BRender dari Argonaut Software, Renderware dari Kriteria Software Limited dan RenderMorphics ’Realitas Lab. Realitas Lab adalah tercepat dari tiga dan adalah yang pertama diperoleh dalam langkah agresif oleh microsoft. Tim RenderMorphics Pegawai Negeri Keondjian, Kate Seekings dan Doug Rabson kemudian bergabung dengan proyek Microsoft yang berubah Realita Lab ke Direct3D sebelum Keondjian dan Rabson kiri untuk memulai perusahaan lain middleware Qube Software. Renderware akhirnya dibeli oleh EA(Electronic Arts) tetapi dikesampingkan oleh raksasa permainan. Istilah “Game Engine” muncul pada pertengahan 1990-an, terutama dalam kaitannya dengan game 3D seperti penembak orang pertama(FPS). Popularitas Id Doom Software dan game Quake, dari pada bekerja dari awal, pengembang lain berlisensi bagian inti dari perangkat lunak dan desain grafis mereka sendiri, karakter, senjata dan tingkat dari aset permainan.
CONTENTS
8
Pemisahan aturan permainan spesifik dan data dari konsep-konsep dasar seperti deteksi tabrakan dan entitas permainan berarti bahwa tim bisa tumbuh dan mengkhususkan. Kemudian permainan, seperti Quake III Arena dan 1998 Epic’s Unreal Games dirancang dengan pendekatan ini dalam pikiran, dengan mesin dan konten dikembangkan secara terpisah. Praktek lisensi teknologi tersebut telah terbukti menjadi aliran pendapatan yang berguna tambahan untuk beberapa pengembang game, sebagai lisensi satu untuk mesin game highend komersial dapat berkisar dari US $10.000 untuk jutaan dolar, dan jumlah lisensi dapat mencapai beberapa lusin perusahaan, seperti terlihat dengan Unreal Engine. Paling tidak, mesin dapat digunakan kembali membuat sekuel game berkembang lebih cepat dan mudah, yang merupakan keunggulan yang berharga dalam industri video game yang kompetitif. Mesin permainan modern adalah beberapa aplikasi yang paling kompleks yang ditulis, sering menampilkan puluhan sistem tersetel berinteraksi untuk memastikan pengalaman pengguna yang tepat dikendalikan. Evolusi mesin permainan telah menciptakan sebuah pemisahan yang kuat antara rendering, scripting, karya seni dan desain tingkat misalnya untuk tim pengembangan game khas memiliki banyak seniman sebagai programmer yang sebenarnya. Permainan penembak orang-pertama tetap menjadi pengguna utama dari mesin permainan pihak ketiga, tetapi mereka sekarang juga digunakan dalam genre lain. Sebagai contoh, RPG The Elder Scrolls III:Morrowind dan MMORPG Dark Age of Camelot didasarkan pada mesin Gamebryo dan MMORPG Lineage II didasarkan pada Unreal gme awalnya dikembangkan untuk rumah konsol juga, misalnya mesin RenderWare digunakan dalam Grand Theft Auto dan Warabala Burnout. Threading adalah mengambil lebih penting karena sistem multi-core modern (misalnya Cell) dan tuntutan meningkat pada realisme. Benang Khas
CONTENTS
9
melibatkan rendering, streaming, audio dan fisika. Permainan balapan yang biasanya berada di garis depan threading dengan mesin fisika berjalan disebuah thread terpisah jauh sebelum subsistem ini lainnya dipindahkan, sebagian karena rendering dan tugas terkait perlu update hanya pada 30-60 Hz. Sebagai contoh, PlayStation 3, fisika berlari di Need For Speed pada 100 Hz versus Forza Motosport 2 pada 360 Hz. Meskipun istilah ini pertama kali digunakan pada 1990-an, ada sistem sebelumnya beberapa tahun 1980-an yang juga dianggap permainan mesin, seperti Sierra’s Adventure Game Interpreter (AGI) dan sistem SCI, LucasArts ’SCUMM sistem dan Insentif Software mesin Freescape. Tidak seperti kebanyakan mesin permainan modern, mesin permainan ini tidak pernah digunakan dalam produk pihak ketiga (kecuali untuk sistem SCUMM yang dilisensikan dan digunakan oleh humongous Entertainment).
BAB 2
10
Kerangka HTML 5 Membuat game tidak harus menggunakan aplikasi yang besar, berat, dan mahal. Sekarang kita bisa membuat game hanya dengan bermodalkan text editor dan web browser saja. Hal ini dapat terjadi berkat berkembangkan HTML5 dengan fitur canvasnya yang dapat dimanfaatkan untuk mengembangkan game. Saya dan pembaca mungkin sebelumnya pernah merasakan betapa kita pernah cukup bergantung pada teknologi Flash. Flash sendiri merupakan teknologi yang dikembangkan oleh salah satu perusahan komersial Adobe. Salah satu tujuan pengembangan HTML5 adalah mengurangi ketergantungan akan aplikasi pihak ketiga seperti Flash dengan memberikan HTML fitur native untuk melakukan hal-hal yang dapat dilakukan oleh Flash, canvas merupakan salah satu fitur HTML5 untuk mengatasi permasalahn ini. Canvas sendiri digunakan oleh banyak aplikasi, mulai dari audio player, video player, diagram responsive, dan bahkan game. Kita dapat membuat game hanya dengan teknolog HTML dan JavaScript murni namun membutuhkan usaha yang jauh lebih keras dibandingkan dengan menggunakan game framework yang telah ada. Saat ini tercatat ada 22 game engine HTML5 di situs html5gameengine.com. Di artikel kumpulan game engine terbaik ini, saya akan memilih game engine yang free dan telah cukup banyak digunakan.
2.1 EaselJS
EaselJS merupakan game engine yang dikembangkan oleh gskinner.com. EaselJS terinspirasi dari Adobe Flash/ActionScript, oleh karena itu apabila pembaca pernah menggunakan Adobe Flash/ActionScript sebelumnya, seharus-
11
CONTENTS
12
nya pembaca akan lebih cepat beradaptasi dengan EaselJS. EaselJS dapat digunakan untuk membuat konten 2d dengan HTML5 seperti visualisasi data, iklan, game, dll. EaselJS merupakan aplikasi free and open source dibawah lisensi MIT, kode sumbernya dapat diakses melalui halaman github.com. Dokumentasi lengkap mengenai modul-modul EaselJS dapat dibaca melalui halaman dokumentasinya selain itu juga ada panduan untuk pemula yang baru mengenal EaselJS di halaman Getting Started. Puluhan contoh dapat pembaca lihat di halaman example. Informasi terbaru mengenai EaselJS dapat pembaca ikuti melalui twitter, google+, dan blog mereka. Pembaca pasti penasaran ingin melihat seperti apa game yang pernah dibuat dengan EaselJS. Berikut ini tiga contoh game yang pernah dibuat dengan EaselJS. • Atari Arcade
• Dragon Age
CONTENTS
• Ion Drift
13
CONTENTS
14
2.2 Pixi.JS
Pixi.js merupakan pemain baru dibidang renderer game HTML5. Dirilis pertama kali pada awal tahun 2013, saat ini versi pixi.js adalah versi 2.0. Pixi.js dikembangkan oleh goodboy digital. Tujuan pengembangan pixi.js adalah untuk menyediakan pustaka 2d yang cepat dan ringan yang dapat berjalan disemua perangkat. Pixi memberikan penggunanya kemudahan untuk memanfaatkan
CONTENTS
15
kelebihan hardware acceleration tanpa perlu memiliki pengathuan akan webGL sebelumnya. Situs resmi pixi.js ada di github.com. Ikuti informasi terbaru pixi.js melalui twitter (@doormat23) dan blog goodboydigital.com. Pixi.js saat ini telah memiliki fitur-fitur yang cukup lengkap yaitu: • WebGL renderer (batching yang cepat dan performa sangat cepat) • Canvas renderer (Paling cepat diantara pustaka lain) • Full scene graph • API sangat mudah untuk digunakan (mirip dengan API display list Flash) • Mendukung texture atlases • Asset loader / sprite sheet loader • Memiliki fitur Auto-detect yang akan memilih renderer yang harus dipakai • Full Mouse dan Multi-touch Interaction • Text • BitmapFont text • Multiline Text • Render Texture • Spine support • Primitive Drawing • Masking • Filters Dokumentasi mengenai penggunaan Pixi dapat anda baca di halaman dokumentasi pixi.js di github.com. Contoh penggunaan pixi.js dapat diakses melalui halaman example. Forum pixi.js dapat diikuti melalui htmlgamedevs.com. Kumpulan artikel dan tutorial tentang pixi.js ada di halaman resources. Akses langsung situsnya di pixijs.com.
CONTENTS
16
2.3 Phaser Phaser merupakan framework game HTML5 yang sedang naik daun. Popularitasnya sangat tinggi dan dikenal sebagai framework game HTML5 yang sangat bisa diandalkan. Phaser dikembangkan oleh Richard Davey (Photon Storm). Game yang dibuat dengan Phaser dapat dikompile ke Android dan iOS melalui aplikasi pihak ketiga. Versi terakhir Phaser adalah versi 2.2.2 dan versi 3 saat ini masih dalam pengembangan. Phaser adalah aplikasi free and open source dibawah lisensi MIT. Pembaca dapat mengunduh Phaser melalui github dan membuat game dengan JavaScript maupun TypeScript. Phaser juga memiliki forum sendiri bagi orang-orang yang ingin bertemu dengan sesama pengguna Phaser. Forum ini ada di html5gamedevs.com. Phaser sangat ramah akan pengguna baru, mereka memiliki lebih dari 400 contoh untuk berbagai jenis game yang bisa pembaca lihat di example.phaser.io. Hanya sedikit framework yang dapat memberikan contoh sebanyak itu. Dengan begini, kita tidak akan terlalu kesulitan untuk mencari cara penggunaan Phaser melalui ratusan contoh yang disediakan. Penasaran dengan game-game yang telah dibuat dengan Phaser? Beberapa contoh di bawah ini adalah game yang dibuat dengan Phaser seperti The Defiant Few, Chuck, Tap Tap Submarine, Foot Chinko, Moon Rocket, The Hobbit, dll. • The Defiant Few
CONTENTS • Foot Chinko
• The Hobbit
17
CONTENTS
18
• Gattai
Phaser memiliki panduan pengguna baru dan dokumentasi yang sangat lengkap. Pembuat Phaser juga sedang menulis buku resmi yang membahas tentang Phaser, dari ketiga buku baru dua yang telah siap yaitu A Guide to the Phaser Tween Manager dan A Guide to the Phaser Scale Manager.
CONTENTS
19
Untuk mendapatkan informasi terbaru mengenai Phaser, kunjungi situsnya di phaser.io, disana terdapat bagian News, yang akan terus memberikan informasi terbaru setiap harinya. Pembaca juga dapat mengikuti akun twitter Photon Storm. Selain itu Photon Storm juga merilis buletin Phaser Coding Tips setiap minggunya.
BAB 3
20
Phaser Game Engine
Phaser merupakan kerangka permainan sumber HTML5 terbuka diciptakan oleh Photon Badai. Ini dirancan untuk membuat game yang akan berjalan pada destop dan browser web mobile. Banyak fokus diberikan kepada kinerja dalam membuat werb brower mobile, daerh berkembang dan penting dari web game. Jika perangkat ini mampu maka menggunakan webGL untuk rendering, tapi jika tidak mulus akan beralih ke kanvas. Penulis akan membahas sumber daya untuk Basic Game Engine tentang Phaser.
3.1 HTML 5 permainan Kerangka Phaser Untuk mengatakan bahwa rasanya seolah-olah kerangka HTML5 permainan baru dirilis setiap minggu, seperti adalah proliferasi dari mereka. Penulis suka
21
CONTENTS
22
berpikir bahwa alasannya adalah sesuatu yang harus di lakukan dengan warisan tim yang terlibar dalam bangunan itu. Sejak rislis Phaser 1.0, update telah biasa dan komprhensif, dengan banyak fitur baru dan perbaikan ditempat dengan cepat. Kami bekerja pada perputaran sekitar satu bulan dari developer ke master, penulisa dapat melihat changelog lengkap di GitHub. Menariknya, kita sekarang meilihat permintaan untuk permainan berjalan dalam WbView, jadi kami akan memastikan bahwa Phaser beroperasi dengan baik dalam lingkungan ini. Serta menjaga Phaser up to date, itu juga sangat penting bagi kami bahwa kami membangun sesuatu yang benar-benar mudah digunakan. Dan penulisan akan melihat ini tercemin diseluruh karangka. Ini berasal dari pengalaman penulis dengan Flixer Power Tools, dan diluar itu ketika penulis di gunakan untuk bekerja untuk Tehe Game Creators membangun untuk menentukan bentuk bahasa permainan mereka. Penulis selalu menjadi bagian dari pengembangan membuat game untuk pengembangan, tren spenulisan sebagai pengemban dari Phaser.
3.2 Platform Yang Ditargetkan Dengan Phaser 3.2.1 Desktop Browser Phaser adalah perpustakaan JavaScript dirancang untuk berjalan pada semua browser dekstop utama. Ini termasuk Internet Explorer 9 dan di atas, Firefox, Chrome, dan Safari. Sebelum IE9 tidak mendukung kanvas, jadi jika anda benar-benar membutuhkan kerangka kerja yang dapat menangani DOM render maka Phaser tidak akan cocok. Namun, permintaan untuk jenis permainan menjadi sebelah minimal; jika ada, itu menggeser arah lain (arah webGL).
3.2.2 Browser Ponsel Pada ponsel, Phaser berjalan pada iOS5 dan di atas dalam Mobile Safari. Pada Android, berjalan pada versi 2.2 dan di atas di kedua browser saham dan Chrome. Chrome sekarang menjadi browser standar pada Android, dengan versi terbaru yang mendukung webGL, tapi anda masih tidak bisa mengabaikan jutaan perangkat Android warisan yang tetap digunakan.
CONTENTS
23
3.2.3 Firefox OS, Tizen, dan Kindle Berkat Mozilla, kami menerima sekelompok Ffos perangkat tes, dan telah mulai memastikan bahwa Phaser berjalan dengan baik pada mereka. Sejauh ini, halhal yang terlihat baik, dan kami akan memproduksi panduan penyebaran di tahun baru. kami juga telah melihat permainan Phaser berjalan dengan baik pada perangkat Tizen dan sempurna di bawah wrapper Kindle HTML5, yang berarti anda dapat menyebarkan kepada orang - perangkat “out of the box”. Karena lebih banyak web bertenaga ponsel mulai memasuki pasar, kita akan pastikan untuk tetap Phaser diperbarui untuk mereka.
3.2.4 Aplikasi asli dan ongkos Dekstop Ada seperti pilihan besar paket pengembangan permainan yang sangat baik yang menargetkan menciptakan aplikasi asli (Unity, Corona, Loom, dan sebagainya), bahwa itu bukan daerah kami berharap untuk menghabiskan banyak usaha yang meliput pada awalnya, terutama bila dibandingkan dengan terlayani pasar browser mobile. Namun, dengan perkembangan pembungkus seperti CocoonJS dan letusan, kita melihat pengembangan menggunakan Phaser membungkus permainan mereka dan melepaskan mereka sebagai aplikasi asli. Jadi, pergi ke 2014 kita akan mulai menambahkan dukungan untuk CocoonJS langsung ke inti, serta dukungan untuk pembungkus desktop seperti simpul - webkit.
CONTENTS
24
3.3 Fitur Utama 3.3.1 Ini Just Plain JavaScript Hal ini mungkin terdengar seperti sebuah fitur aneh pada Phaser, tapi itu merupakan sesuatu yang cukup menarik. Phaser tidak menggunakan praktek fauxOO - gaya internal. tidak ada besar rantai warisan atau komponen sistem, dan anda tidak perlu memaksa benda anda kedalam setiap struktur kelas tetap baik. Ini adalah sederhana lurus kedepan rantai prototype, cara JavaScript dimaksudkan untuk digunakan. Ini tidak berarti anda tidak bisa membangun permainan anda dalam cara yang terstruktur, jauh dari itu. Semua itu berarti bahwa kita tidak menegakkan itu. ini juga berarti bahwa Phaser secara internal sangat mudak untuk dihack.
CONTENTS
25
3.3.2 Easy Asset Loading Phaser memiliki Loader aset built-in yan dapat menagani : • Gambar • Sprite Lembar (fixed frame ukuran) • Tekstur Atlas (termasuk tekstur Packer, JSON Array< Flash CS6/CC, dan format XML Starling) • File Audio • File Data (XML, JSON, teks biasa) • File JavaScript (sehingga anda dapat bagian load game atau sumber daya berdasarkan JS) • Tilemaps (CSV dan Ubin Format peta) • Bitmap Font Kami secara rutin mengekspor file atlas tekstur dari Flash langsung ke permainan Phaser kami, dan mendukung atlas sepenuhnya dipangkas. Aset dapat menjadi bagian-loaded, cache, dan ditarik dari URL yand berbeda (untuk dukungan CDN), dan anda bahkan dapat mengubah sprite apapun menjadi sebuah progress bar dengan satu baris kode.
CONTENTS
26
3.3.3 Rendering: WebGL dan Canvas Internal, Phaser menggunakan Pixi.js untuk rendering. Pixi adalah sangat bagus, rendering yang cepat dan library yang berfokus pada kanvas dan WebGL. Ini adalah Library yang berkontibusi untuk memantu mendorong hal-hal ke depan. Untuk pembuatan game, ini berarti bahwa jika browser mendukung WebGL maka pemain akan lebih sering daripada mendapatkan sebuah pengalaman yang lebih halus. WebGL merupakan sesuatu yang umum di Dekstop tetapi masih muncul di ponsel meskipun demikian, itumerupakan dimana sebuah game HTML5 menuju ke masa depan, sehingga patut untuk didukung. Rilisan baru dari Phaser memperkenalkan WebGL shader dan filter dukungan, dan orang-orang yang akan datang akan menerapkan peta normal sehingga anda bisa mendapatkan keuntungan dari alat-alat baru seperti Sprite Lamp.
3.3.4 Audio: Web Audio dan Legacy Audio Audio telah menjadi salah satu titik lemah dari permainan HTML untuk watu yang lama. Hanya beberapa tahun yang lalu, kita dihadapkan dengan pilihan memiliki satu saluran tunggal audio high-latency yang akan melumpuhkan perangkat selama pemutaran atau tidak memiliki audio sama sekali. Tapi zaman telah berubah, dan Web API Audio datang ke keselamatan kita. Hal ini memungkinkan untuk dukungan audio yang tepat berbasis node, dengan beberapa saluran, simpul routing dan dan segala macam efek. Jadi Phaser mendukung penuh Web Audio. Namun, pada Android terutama, kebanyakan perangkat masih tidak mendukung thi, jadi kami juga mendukung warisan Audio dan penggunaan Audio
CONTENTS
27
Sprite : metode kemasan sekelompok sampel bersama-sama ke dalam satu file dan menggunakan tanda pemutaran untuk melompat ke berbagai efek. Phaser akan menukar antara dua tergantung pada kemampuan perangkat dan juga termasuk membuka sub sistem audio secara otomatis untuk anda, sesuatu yang bisa menarik kelauar banyak pengembang mobile pada awal mula.
3.3.5 Input: Multi-Touch, Keyboard, Pointer, Mouse Ketika mendukung dekstop dan ponsel ada jumlah yang semakin beragam potensi pilihan input. Phaser mendukung keyboard, mouse, sentuhan, MSPointer (sekarang Pointer bawah IE11), dan kombinasinya. Sebagai contoh, pada perangkat Surface Windows yang bisa swap antara menggunakan mouse dan sentuhan, atau memang menggunakan kedua bersama-sama. Untuk input sentuhan, Phaser berupaya dengan baik single-touch dan multitouch lingkungan. Anda dapat menentukan hingga 10 titik sentuh dan melacak mereka semua secara acak indpenden, mengunakan acara mereka untuk menangani interaksi Sprite seperti menyeret, penyadapan, dan tabrakan.
CONTENTS
28
3.3.6 Fisika, semi-remaja, dan Partikel Dibundel ke dalam perpustakaan inti adalah ArcadePsysics dan sistem ArcadeParticles. Ini adalah AABB perpustakaan ringan sederhana yang memungkinkan anda untuk menerapkan gravitasi dan gerakan untuk setiap Sprite, kemudian menguji tabrakan dan pemisahan. Menggunakan Quadtree berbasis dunia untuk membantu meminimalkan tes tabrakan, anda dapat mencapai hasil yang layak cepat dengan waktu pemrosesan sedikit dibutuhkan. Namun, kami memahami bahwa ini tidak akan sesuai dengan semua jenis permainan, sehingga sistem fisika mudah untuk mengganti dan tidak ada sifat fisika terikatuntuk Sprite yang sebenarnya (melainkan untuk komponen tubuh), sehingga dapat bertukar keluar untuk seperti Box2D atau p2.js. Sebuah sistem tweening juga bulit-in, yang memungkinan anda untuk tween benda atau sifat mudah. Dan harus jeda pertandingan, maka semua remaja anda akan berhenti secara otomatis dan melanjutkan yan diperlukan.
CONTENTS
29
3.3.7 Plugin Ini adalah tujuan kami bahwa inti dari phaser akhirnya akan menetap dan memukul keseimbangan stabil bagus, dimana kita tidak mungkin untuk menyentuh lebih jauh perbaikan dan pembaruan browser. Namun, kami ingin phaser membawa pada pertumbuhan, menyediakan fitur untuk semua jenis game tapi tanpa menyebabkan perpustakaan inti meledak dalam pertumbuhan. Untuk tujuan ini, kita sudah dibangun dalam sistem plugin. Plugin phaser dapat mendaftar diri dengan kerangka inti, diperbaharui sejalan dengan loop inti permainan, dan melakukan segala macam tugas tambahan yang berguna. Sebuah contoh yang bagus dari hal ini adalah baru baru ini merilis plugin yang easystar. Kami akan merilis plugin diri kita sendiri dan berharap untuk melihat lebih datang dari masyarakat di masa depan.
3.4 Cara mendownload Phaser Phaser adalah sebuah proyek open source dan tersedia untuk download secara gratis.Tidak ada biaya untuk membayar ketika menggunakan Phaser, terlepas jika anda menggunakannya untuk proyek komersial atau gratis. Kami menggunakan github untuk mengelola proyek dan anda memiliki berbagai pilihan tentang bagaimana untuk mendownloadnya. “DAPATKAN PHASER DENGAN KLONING REPOSITORI, MERAIH FILE JS ATAU MEN-DOWNLOAD SEMUANYA SEBAGAI ZIP” Github memberikan opsi untuk men-download seluruh repositori sebagai zip atau rar berkas.Namun sangat disarankan anda untuk belajar menggunakan git
CONTENTS
30
sebagai gantinya.Ini akan memungkinkan anda untuk dengan mudah memperbarui ke versi terbaru dari Phaser seperti yang dirilis.Dan jika dalam waktu yang anda ingin berkontribusi kode terhadap Phaser itu membuat melakukan jauh lebih mudah. Jika anda tidak suka belajar menggunakan git melalui baris perintah ada beberapa aplikasi yang besar anda dapat gunakan.DirekomendasikanSmartGitpada Windows atauGit Menaradi OS X.
3.4.1 Struktur Repository Phaser repositori dibagi menjadi 2 cabang utama:masterdandev.Cabang masterberisi rilis stabil terbarudan merupakan salah satu yang anda harus coba dulu, terutama dalam permainan tingkat produksi. Cabangdevadalah di mana kita bekerja padaversi betadari Phaser. Dalamdevanda akan menemukan fitur eksperimental, perbaikan bug dan perubahan API, beberapa diantaranya mungkin belum bekerja.Ini cabang life dan breath, sering berubah berkali-kali dalam sehari.Ini juga dimana anda akan melihat fitur mutakhir yang anda kerjakan. Kecuali anda tahu bahwa anda perludevselalu menggunakan rilis stabil saat ini, yang ditemukan di cabangmaster.
CONTENTS
31
3.4.2 Hello World! Dengan editor set-up yang anda gunakan, web server diinstal dan Phaser sudah ter-download saatnya untuk membuat sesuatu dan memeriksa semuanya bekerja. Anda perlu menemukan di mana ’web root’ anda pada aplikasi anda.Ini adalah folder di mana server mencari file.Jika anda menggunakan WAMP pada Windows anda dapat menemukannya dengan mengklik ikon WAMP dalam sistemtray dan pilih ”direktori www” dari menu pop-up.server lain akan memiliki metode lain untuk menentukan lokasi, tetapi dari titik ini kita akan menyebutnya sebagai ’webroot’. Ambilfile zip pada Phaser.io.File tersebut berisi sebuah folder bernama ’hellophaser’ di dalamnya lalu anda akan menemukan sebuah file JavaScript, sebuah index.html dan PNG.Copy folder ’hellophaser’ ke webroot anda.
3.4.3 Test Buka browser web anda dan browse ke folderhellophaserdi server lokal. Ini mungkin sesuatu yang sederhana seperti mengetik dilocalhost/hellophaseratau127.0.0.1/hellophaserke dalam browser anda.Atau anda mungkin perlu untuk menentukan nomor port juga, itu tergantung sepenuhnya pada server yang metode set-up yang anda gunakan. Jika semuanya berjalan benar maka akan muncul area permainan hitam dengan logo phaser di tengah. Jika tidak untuk alasan apa pun yang anda butuhkan untuk membuka konsol debug dan melihat apa kesalahan adalah output.Dalam kebanyakan browser anda dapat melakukan ini dengan menekanF12.Ini bekerja di Chrome, Firefox dan Internet Explorer 11. Periksa untuk melihat apa kesalahan adalah, mudahmudahan itu yang sederhana seperti file yang hilang, dalam hal memeriksa nama folder anda dan refresh halaman. Jika itu sesuatu yang lebih kompleks merasa bebas untuk posting tentang hal itupada forumdan kami akan mencoba sebaik mungkin untuk membantu.
3.4.4 Contoh Phaser Dari saat kami merilis versi pertama dari Phaser kita tahu bahwa salah satu cara terbaik bagi orang untuk belajar bagaimana menggunakannya akan menghasilkan contoh.Jadi kami berangkat untuk menciptakan banyak contoh yang berbeda, yang mencakup semua bidang utama Phaser.Dari cara set-up animasi untuk bagaimana menggunakan fisika. Awalnya contoh yang termasuk dalam repositori Phaser utama.Tapi seiring waktu mereka outgrew ini dan sebaliknya kita memindahkan mereka ke repositori mereka sendiri.Mereka juga tersedia untuk browsing di situs ini. Contoh Phaser secara online Anda dapat menelusuri semuaContoh Phaserdi situs Phaser.io.Anda juga akan menemukan editor life code, sehingga anda dapat
CONTENTS
32
memodifikasi source dan kembali menjalankan Phaser.io secara realtime untuk melihat perubahan secara langsung. Phaser Contoh Repository Anda juga dapat men-download setiap contoh tunggal dari Phaser Example github repository.Phaser akan sangat menyarankan memiliki salinan ini secara lokal.Karena memungkinkan anda untuk menelusuri kode lebih cepat, dan membuat contoh Anda sendiri.anda juga akan memiliki seluruh aset yang kami sediakan untuk digunakan dalam permainan pengujian anda sendiri. Panduan Memulai Setelah didownload , kami sangat menyarankan anda mengikuti resmi panduan memulai. Ini akan memandu anda melalui pengaturan web server lokal, memilih lingkungan pengembangan, dan bahkan membangun di awan jika anda begitu ingin. Panduan terurai menjadi bagian berikut: • Pengantar • Instalasi web server • Jalankan di Cloud • Memilih Editor • Download phaser • Halo World! • Phaser contoh • Langkah selanjutnya Ada juga panduan setara untuk naskah.
3.5 Penjelasan Panduan Bagaimana kita akan menutupi pengaturan sebuah lingkungan pengembangan dengan dan bagaimana anda dapat membangun game Phaser Anda. Ini akan mencakup menjalankan web server lokal, memilih sebuah IDE, mendapatkan versi terbaru dari Phaser dan memeriksa semuanya bekerja bersama-sama. ”Mengapa saya membutuhkan web server lokal? Bisakah saya hanya drag file html ke browser saya?” Tidak hari ini, tidak ada. Saya menghargai bahwa itu agak membingungkan, bahkan bertentangan sekali, tapi itu semua terpacu pada keamanan browser. Jika Anda membuat sebuah halaman web html statis maka Anda gembira dapat membawa file ini ke browser anda dan melihat hasil akhirnya. Anda juga dapat
CONTENTS
33
melakukan ”Save As” seluruh halaman web lokal dan membuka halaman web lokal itu kembali dengan keadaan konten yang utuh. Jika kedua hal ini bekerja mengapa tidak dapat anda tarik permainan HTML5 ke dalam browser dan menjalankannya? Ini harus dilakukan dengan protokol yang digunakan untuk mengakses file. Ketika Anda meminta sesuatu atas web yang Anda gunakan HTTP, dan keamanan tingkat server cukup untuk memastikan anda hanya dapat mengakses file yang anda maksud. Akan tetapi ketika Anda menyeret file di dalamnya dimuat melalui sistem file lokal (secara teknis file:// ) dan yang besar-besaran dibatasi, untuk alasan yang jelas. Di bawah file:// tidak ada konsep domain, tidak ada keamanan tingkat server, hanya sistem file mentah. ANDA BENAR-BENAR INGIN JAVASCRIPT UNTUK MEMILIKI KEMAMPUAN UNTUK MEMUAT FILE DARI MANA SAJA DI SISTEM FILE ANDA? Tanyakan pada diri anda: apakah anda benar-benar ingin JavaScript memiliki kemampuan untuk memuat file dari mana saja di sistem file lokal anda? Jawaban segera anda tentunya harus menjadi ”Pasti itu akan sangat lama”. Jika JavaScript memiliki perintah yang bebas sementara beroperasi di bawah file:// akan ada yang menghentikan itu memuat cukup banyak file apapun. Karena ini sangat browser berbahaya mengunci diri mereka lebih ketat dari Alcatraz ketika berjalan di bawah file:// . Setiap halaman menjadi diperlakukan sebagai domain lokal yang unik. Itulah sebabnya ”halaman Web lainnya” bekerja, untuk gelar. Ini membuka di bawah pembatasan lintas-situs yang sama seolah-olah mereka berada di server hidup. Ada bahasan yang lebih rinci tentang hal itu pada blog Chromium yang layak dibaca jika Anda ingin mempelajari lebih lanjut. Permainan anda akan memuat sumber: gambar, file audio, data JSON, mungkin file lainnya JavaScript. Dan untuk melakukan hal ini perlu menjalankannya tanpa hambatan belenggu dari keamanan browser. Perlu http:// akses ke file game. Dan untuk itu kita membutuhkan web server.
3.5.1 Window Pada Windows ada banyak ”paket installer ” yang tersedia yang paket bersamasama dan set-up teknologi web populer seperti Apache, PHP dan MySQL dari exe tunggal. SKYPE KERAP KALI MENCURI PORT 80 SECARA DEFAULT. PASTIKAN UNTUK MENGKONFIGURASI ULANG ITU! Untuk itu direkomendasikan baik WAMP ServeratauXAMPPyang keduanya memiliki panduan set-up mudah tersedia.WAMP khusus menginstal ikon ke dalam sistem-tray anda dimana anda dapat berhenti dan me-restart layanan, serta mengubah pengaturan Apache seperti membuat alias folder baru untuk sebuah proyek. Cesanta menyediakanweb server Mongoose.Ini adalah aplikasi yang sangat kecil yang tidak memerlukan instalasi dan dapat dijalankan sebagai file exe tunggal.Tanpa semua berkas tambahan seperti SSI dan WebDAV (tidak ada yang
CONTENTS
34
anda perlukan untuk sebuah game HTML5) exe adalah 45KB dalam ukuran kecil.Bahkan versi fitur lengkapnya hanya berukuran 355KB. Bukan sebuah ‘All in One’ bundel anda juga bisa men-download untuk keperlunan web server itu sendiri.KeduaMicrosoft IISdanApachedapat didownload secara gratis. Catatan:Skype kerap kali mencuri port 80 secara default.Ini adalah port tradisional untuk web server yang digunakan untuk menjalankannya dan mungkin berhenti WAMP atau seperti bisa dijalankan ketika mau dimulai.Untuk menonaktifkan ini didalam Skype pergi ke ”Tools - Options - Connection” dan hapus centang ”Gunakan port 80 dan 443 sebagai alternatif untuk koneksi masuk”. Catatan:Jika anda menggunakan WAMP Server anda mungkin akan menemukan bahwa IE11 menyebabkannya menjadi freeze.
3.5.2 OS X Berada didalam lingkungan Unix dihati ada lebih banyak pilihan yang tersedia di OS X daripada di Windows.Akan tetapi jika anda ingin ”All in One” seperti yang terjadi pada WAMP, dengan tampilan yang bersih dan tampilan mudah untuk digunakan dan juga bagus, maka sangat disarankanMAMP. MAMP ini terbagi dalam dua versi: gratis dan berbayar. Tentu ada juga panduan untuk menyiapkan web server lokal secara manual, sepertipanduan ini ditulis untuk Mountain Lion.Memilih mana pendekatan Anda merasa paling nyaman dengan.
3.5.3 Grunt Connect Gruntadalah alat yang sangat berguna untuk di-instal, tidak peduli apakah anda menggunakannya sebagai web server atau tidak.Pada esensinya adalah JavaScript based task runner dan memungkinkan anda untuk mengotomatisasi tugas-tugas yang memakan waktu dan membosankan.Dalam penggunaanya dalam Phaser yaitu untuk membangun script distribusi game tersebut.Tetapi juga dapat dikonfigurasi dengan pluginConnectuntuk melayani file lokal, bertindak sebagai web server.
3.5.4 HTTP Server Sederhana Dengan Python Jika anda membutuhkan web server berjalan dengan cepat dan anda tidak ingin dipusingkan dengan pengaturan Apache ataupun mengunduh aplikasi, maka Python dapat membantu anda.Python datang dengan built-in server HTTP yang sederhana, yang dapat melayani file dari folder lokal.Tentu satu-satunya hal yang perlu anda butuhkan adalah menginstal Python.
3.5.5 Server Untuk Node.js Http-serveradalah sesuatu yang sederhana, nol-konfigurasi baris perintah http server untuknode.js.Hal ini cukup kuat untuk penggunaan produksi, namun
CONTENTS
35
sederhana dan cukup hackable untuk digunakan untuk pengujian, pengembangan lokal dan pembelajaran.Atau sebagai situs web mengatakan ”Melayani file statis seperti kura-kura yang terikat pada roket” php 5 built-in web server Pada PHP 5.4.0, CLI SAPI menyediakan web server built-in.Ini hanya benarbenar cocok untuk tujuan pengembangan dan melayani semua file secara berurutan, tapi cukup kuat untuk menguji HTML5 permainan.Ini dipanggil dari satu baris perintah panggilan dan anda dapat menemukan rincian tentang bagaimana untuk melakukan hal ini di sini di PHP Manual. Run in the cloud
Jika anda tidak nyaman dengan github kloning, atau menyiapkan web server lokal, anda dapat menjalankan phaser di Cloud. Lebih dari sebuah kata kunci pemasaran, banyak pengembang ingin membangun dengan cloud sehingga mereka dapat membuatnya, mengedit dan berbagi konten mereka tanpa harus menginstal apapun.file dan kode mereka tersedia tidak peduli perangkat mereka login atau tidak. Ada beberapa JavaScript aplikasi kolaborasi online sepertiJSBin,codepen danJSFiddle.Tapi ini lebih untuk tes cepat skrip tunggal.Untuk lingkungan pengembangan yang lengkap sangat disarankanCloud9.Hal ini memungkinkan anda membangun dan berjalan sangat cepat seperti yang anda akan lihat: Pertama, mendaftar ke situs web menggunakan GitHub, dan setelah ini selesai, anda akan diarahkan ke dashboard anda.
CONTENTS
36
Dari dashboard ini, anda dapat membuat proyek pribadi atau bersama, atau, fitur lain yang menarik dalam hal ini yaitu anda dapat membuat sebuah proyek dari repositori GitHub. Klik ”Create New Workspace” tombol dan pilih ”clone dari URL” pilihan dari menu drop-down.
Setelah repositori terintegrasi ke c9.io anda akan melihat jendela ini:
CONTENTS
37
Ketika anda klik pada ”Mulai mengedit” tombol akan membuka editor kode, yang memungkinkan anda untuk mengedit kedua kode sumber Phaser dan membuat kode baru.
sekarang anda memiliki salinan lengkap dari repositori Phaser yang dapat anda mengubah seperlunya. Memilih Editor Akan dibutuhkan editor dimana untuk mempersiapkan kode JavaScript anda.Adabanyaktersedia, masing-masing dengan kekuatan dan kelemahan mereka sendiri.Jika Anda seorang pengembang yang berpengalaman anda akan mungkin sudah memiliki editor pilihan anda sendiri, dalam hal membawa ke Bagian 5 dari panduan ini.Jika tidak, disini ada beberapa pilihan untuk Anda: Teks Sublime
CONTENTS
38
Ini adalah editor tim penggunaan Phaser untuk membangun kerangka dan semua proyek.Itu bahkan editor buku ini ditulis didalam. Sublime harus dianggap sebagai editor teks yang sangat kuat daripada IDE. Fitur seperti kemampuan untuk ”Go-to”, Split Editing, Beberapa kursor, gangguan modus gratis dan banyak Plugin yang kuat membuat editor tercepat dan paling serbaguna yang pernah kita digunakan dalam harfiahdekadepembangunan. Menggunakan sistem Paket yang komprehensif dapat meningkatkan dalam beberapa cara.Berikut adalahpanduan yang sangat baikuntuk fitur dan paket untuk Sublime. Versi lengkap biaya $ 70 tapi bernilai setiap sen dan tersedia untuk Windows, OS X dan Linux. Intel XDK
Intel XDK menyediakan lingkungan pengembangan untuk menciptakan aplikasi mobile hybrid, termasuk game 2D HTML5.fitur XDK Intel khusus untuk pengembang game termasuk manajer pertandingan aset, terkait game plug-in API, sampel permainan dan template untuk mesin permainan didukung, petunjuk autocompletion di built-in editor kode, dan fitur standar yang tersedia untuk pengembang aplikasi menggunakan Intel XDK, seperti aplikasi kemasan untuk platform yang berbeda.
CONTENTS
39
Versi terbaru dari Intel XDK termasuk Phaser template yang built-in dan cara-cara mudah untuk ekspor ke semua berbagai toko aplikasi, jadi layak lihat.
3.5.6 WebStorm
JetBrains WebStorm adalah sebuah lingkungan pengembangan lengkap dan sangat canggih.Ini melampaui editing kode sederhana dan menawarkan semua fitur tingkat tinggi yang anda harapkan dari sebuah IDE yang tepat.Termasuk wawasan kode, NPM built-in, Style code dan laporan sintaks, kontrol sumber dan kekayaan fitur lainnya.Banyak fitur yang dirancang untuk pengembang web daripada pengembang game, namun masih berguna untuk dipelajari. Ini semua berdasarkan pada IntelliJ IDEA, editor tingkat tinggi berbasis Java, yang merupakan sebuah hal yang baik dan buruk.Untuk memulai pengalaman kode editing sebenarnya tidak seperti yang halus dan bentuk yang unik seperti Sublime, Dan non-standar integrasi OS lemah.Tetapi fitur listrik sering dapat membuat untuk itu.Memiliki kesalahan dengan kode anda terlihat untuk anda, bahkan sebelum anda telah diuji permainan anda dapat benarbenar berguna.Dan kode-completion terlalu besar, meskipun jelas agak terbatas dengan berbagai cara JavaScript dapat ditulis. Studio Visual Ini harus benar-benar dipertimbangkan jika anda ingin menulis permainan anda menggunakannaskahbukan dari JavaScript.Phaser memiliki naskah definisi mengajukan tersedia.Hal ini memungkinkan anda untuk menggunakan Microsofts baru ES6 bahasa terinspirasi untuk dikembangkan. Ini memberi anda akses ke bahasa statis, dengan turunan kelas tradisional, antarmuka dan sebagian besar ornamen OO Style anda dapat digunakan untuk dari bahasa lain seperti AS3 atau Java. Brackets Meskipun pada awalnya dikembangkan untuk membangun situs web kode, Brackets telah benar-benar datang dengan sendirinya akhir-akhir ini.Ini adalah opensource code editor gratis dan dapatkan dijalankan pada Windows, OS X dan Linux. Ini sebenarnya ditulis dalam JavaScript dan sangat hackable, dengan versi baru dan ekstensi dirilis setiap beberapa minggu.Memiliki UI modern dan gelap, mungkin akrab dengan siapa saja yang menggunakan Adobe Creative Suite.Layak mempertimbangkan, terutama jika Anda setelah editor gratis.
CONTENTS
40
3.6 Membuat Permainan Pertama Anda Dengan lingkungan pengembangan anda mengatur, saatnya untuk membangun permainan. Kami sarankan mulai dengan membuat phaser game pertama anda. Tutorial ini akan memandu anda melalui proses menciptakan permainan platform sederhana, memperkenalkan anda dengan konsep inti dari bagaimanan phaser bekerja dan membuat anda siap siap untuk memperluas itu dan beljar lebih banyak.
Bila anda checkout atau mendownload phaser, itu akan datang dengan kami contoh suite. Ini adalah situs web mandiri yang terdiri lebih dari 170 contoh kode yang berbeda, membagi menjadi bintang utama seperti fisika, tabrakan, sprite, text dan banyak lagi. Setiap contoh adalah sepotong mandiri sepenuhnya bekerja kode yang anda dapat membuka, mudah mengedit, dan belajar. Digunakan bersama dengan dokumentasi API, ini adalah jalur cepat untuk cepat belajar tentang bagian bagian tertentu dari phaser.
CONTENTS
41
Dokumen API Dokumen API yang tersedia dalam repositori dalam folder docs. Kami telah bekerja keras pada dokumen selama ini beberapa bualn dari sekarang dan sementara masih sedikit kasar di sekitar tepi, komprehensif, mencakup seluruh kerangka. Rilis terbaru (1.1.3) melihat pembaruan besar lain untuk mereka, dengan banyak daerah diisi dengan rincian lebih lanjut dan itu misi penulis yang berkelanjutan untuk meningkatkan dokumen dengan setiap rilis Phaser baru.
JSHint Sejak versi 1.1.3 dari Phaser, kerangka penuh sekarang dijalankan melalui JSHint sebelum rilis. Kami menyediakan file konfigurasi kan di repositori juga. JSHint adalah cara bagi kita untuk memastikan bahwa kode kerangka berikut seperangkat tetap pedoman pada struktur kode, dari cara kita menangani tab dan lekungan untuk variabel dan gaya kutipan. Mereka yang ingin berkontribusi terhadap Phaser harus memerika pembaruan mereka terhadap konfigurasi JSHint kami.
CONTENTS
42
Langkah Selanjutnya Jika memahapi menagapa Phaser besar, apa yang penulis bertujuan untuk membuat game dengan Phaser. Tetapi aspek yang paling penting dari kerangka permainan tidak begitu banyak fitur itu olahraga atau demo dari teknologi, itu masyarakat di belakangnya. Membuat game adalah kerja keras, periode. Dan itu bahkan sulit untuk dilakukan dalam isolasi, dengan merek kerangka kerja baru yang hampir pasti bekerja secara berbeda dari apapun yang penulis telah gunakan untuk masa lalu. Untungnya, Phaser memiliki komunitas yang berkembang bedarkan sekitarnya dan semakin majunya zaman ini.
HTML 5 Pengembangan Game Forum Dengan didirikan forum HTML 5 Pengembangan Game beberapa saatu yang lalu, tidak secara khusu untuk Phaser, tetapi hanya karena membuat HTML 5 permainan adalah sebuah wilayah baru yang kami ingin dapat berbicara dengna orang lain tentang hal itu. Sejak itu, telah pergi dari kekuatan ke kekuatan, dengan papan aktif, 250.000 setiap bulan dan basis user friendly dan profesional. Masuk akal bagi kita akan menggunakan ini sebagai rumah resmi untuk Phaser, dan akan menemukan banyak rekan developer yang ramah untuk bangkit ide dan pertanyaan. Forum ini juga rumah bagi perpustakaan besar lainnya termasuk Pixi.js dan kerangka Babylon.js 3D, dan ada yang besar Permainan Showcase daerah untuk memamerkan apapun yang membuat menjatuhkan oleh mereka setiap hari adalah sumber inpirasi bagi penulis, dan itu benar-benar bagus untuk melihat apakah developer menglola untuk mendapatkan HTML untuk melalukan hari ini.
CONTENTS
43
Laporan berkala Phaser dirilis sebulan sekali dengan berisi rincian tentang rilis baru, artikel singkat tentang topik Phaser baru dan plugin dan tutorial. Berlangganan , bebas dan dikelola melalui Campaign Monitor, sehingga penulis dapat yakin tidak ada spam dan cara mudah untuk berhenti berlangganan jika penulis ingin. Menyumbang Penulis dapat membantu membentuk cara dimana Phaser tumbuh. Jika anda menemukan big, tolong laporkan pada developer Phaser. Ini tidak akan membawa lama, dan sampai saat ini kami tetap lebih dari 91% dari semua masalah yang dilaporkan (dan kami masih bekerja di sisi lain 9%). Penulis juga dapat mengeluarkan permintaan tarik terhadap pengembangan cabang, atau melepaskan plugin penulis sendiri atau filter.
Tampilkan Dengan Game Developer menghabiskan berjam-jam tak kenal lelah bekerja pada Phaser karena developer ingin menjadi lebih baik dalam kerangka pembangunan HTML 5 permainan itu mungkin bisa. Developer memahami itu tidak akan cocok untuk semua orang, dan kami dengan itu. Tetapi jika penulis menggunakan dan membuat sesuatu, tidak peduli seberapa kecil penulis berpikir, Silakan beritahu Developer. Penulis tidak percaya dengan dorongan motivasi yang nyata adalah
CONTENTS
44
ktika Devs menunjukan permainan yang mereka telah bekerja pada jangkauakn untuk kita di forum , melalui Twitter atau dengan email kebanyakan dari semua, developer berharap pemain bersenang-senang membuat permainan ini untuk semua.
3.7 Cara Instalasi Phaser • Download terlebih dahulu game engine phaser, bisa buka di phaser.io pilih download dan get started. • Klik dua kali file instalasi dan pilih bahasa layar display.
• Pastikan bahasa yang disorot benar • Klik instal dan akan muncul perjanjian lisensi
CONTENTS
45
• Klik lihat readme.file readme akan menampilkan readme dimana cara kita akan menggunakan phaser nantinya.
• Pilih tombol pada lisensi yang bertuliskan “I am authorized to accept” dan “ accept the terms of the license agreement”
• Jika anda melakukan upgrade dari versi sebelumnya atau memiliki versi sebelumnya dari aplikasi yang di instal dan anda tidak menghapus database ketika di uninstal, akan muncul tampilan database.
• Pilih salah satu :
CONTENTS
46
Use Existing Database Berarti kita menggunakan database yang ada jika anda ingin pergi meng-upgrade menggunakan informasi dari database anda saat ini dan jika instalasi terakhir adalah untuk akun yang sama dan dikonfigurasi dengan benar untuk instalasi baru. Create New Database Membuat database baru jika anda ingin membuat database baru. Dengan pilihan ini aplikasi panggung database anda saat ini, tetapi anda masih perlu mengkonfigurasi aplikasi dan mencari printer lagi untuk database baru anda. Gunakan pengaturan ini jika akun yang digunakan untuk instalasi sebelumnya tidak diketahui, berbeda dengan akun baru atau konfigurasi jika anda ingin memulai dengan instalasi yang bersih dengan pengaturan default. • Klik install pada pada tampilan instalasi
Note : Jika anda menginstal aplikasi pada sistem operasi dalam bahasa lain selain bahasa inggris dimana “Program Files” nama direktori terlokalisir, path default instalasi akan ditampilkan dalam bahasa inggris. Aplikasi, bagaimanapun menginstal pada direktori lokal yang benar untuk bahasa yang dipilih. • Instalasi Selesai
CONTENTS
47
Setelah itu tekan next, jika sudah next akan muncul tampilan diatas lalu kita klik finish. Jika pada checkbox di ceklis maka phaser akan langsung berjalan jika tidak phaser tidak akan langsung berjalan.
3.8 Salah Satu Manfaat Game Phaser Salah satu manfaat utama dari Platform Smart TV berbasis OS Tizen platform perangkat lunak adalah bahwa penyanyi berbasis web (HTML5), sehingga bisa mengambil keuntungan penuh dari banyaknya perpustakaan milik pihak ketiga yang ada pada ekosistem development web.Salah satu perpustakaan dari pihak ketiga adalah Phaser, kerangka permainan Berbasis HTML5 untuk review development game mobile PC dan dekstop.Berkat OS Tizen, kini Phaser bisa digunakan untuk review membuat permainan buat Smart TV. Tim riset samsung untuk review produk TV di amerika utara baru-baru penyanyi nya menemukan fakta pada penyanyi ketika mengadakan Tizen TV Hackathon.Sesi penyanyi menghasilkan beberapa demo yang bisa digunakan untuk review belajar tentang development HTML5 dan Tizen TV.
CONTENTS
48
Gambar 1 Nenek bakeryadalah permainan yang menantang pemain untuk review mencocokkan tiga makanan penutup untuk review mencetak poin.SedangkanSimon saysadalah versi permainan untuk review pertandingan Smart TV dari klasik Yang mengajak pemain untuk review mengingat dan mengulangi urutan pola warna.
Gambar 2 Pada riset Samsung penulis banyak belajar dari beberapa kasus tentang cara efektif pada membuat permainan platform untuk review TV.Satu pelajaran adalah bahwa desain aplikasi harus dioptimalkan untuk review masukan
CONTENTS
49
perangkat TV (Remote Control).Pengalaman pengguna untuk review perangkat seluler (Berbasis Sentuhan) sangat jauh berbeda dari TV. Pelajaran berbaring adalah bahwa elemen UI di Layar TV harus lebih besar dan lebih jelas dari pada perangkat seluler karena resolusi dan jarak pagar pandangan.Sebuah TV dianggap sebagai ”Interface 10 kesemek”, yang berarti bahwa penonton biasanya duduk dengan jarak pagar 10 kesemek dari TV mereka. Teks dan grafis yang terlihat baik pada layar PC / ponsel mungkin tidak terbaca di TV karena jarak pagar adanya.
BAB 4
50
Permainan Pelarian Menggunakan Phaser Setiap langkah diedit, sampel hidup yang tesedia untuk bermain dengan begitu, anda dapat melihat apa tahap mengah harus terlihat seperti ini. Anda akan mempelajari dasar-dasar menggunakan kerangka Phaser menerapkan permainan mekanik dasar seperti rendering dan gambar, deteksi tabrakan, mekanisme kontrol, fungsi pembantu, kerangka khusus, animasi dan remaja bergerak, dan menang dan kalah permainan. Untuk dapat hasil maksimal anda harus memiliki dasar untuk menggunakan pengetahuan JavaScript. Setelah bekerja melalui tutorial ini anda harus dapat membangung permainan web sederhana sendiri menggunakan phaser.
Gambar 1
4.1 Rincian Pelajaran semua pelajaran dan versi yang berbeda dari pemainan MDN Breakout kita sedang membangun bersama-sama yang tersedia di GitHub : 1. Menginisialisasi kerangka 2. Scaling 51
CONTENTS
52
3. Memuat aset dan mencetaknya di layat 4. Pindahkan Bola 5. Fisika 6. memantul dari dinding 7. Permainan dayung dan kontrol 8. Permianan telah berakhir 9. Membangung bidang bata 10. Tabrakan 11. Nilai 12. Memenangkan pertandingan 13. Kehidupan ekstra 14. Animasi dan remaja 15. Kancing-kancing 16. GamePlay mengacak Sebagai catatan pada jalur belajar , dimulai dengan pengetahuan JavaScript adalah cara terbaik untuk mendapatkan pengetahuan yang kokoh dari pengembangan web game. Jika anda belum terbiasa dengan pengembangan game JavaScript murni, Kami sarankan agar anda pertama belajar menggunakan JavaScript Setelah itu, Anda dapat memilih kerangka apapun yang anda suka dengan mengunakannya untuk proyek-proyek anda. Penulis telah memilih Phaser karena merupakan kerangka kerja yang solid dan baik, dengan dukungan yang baik dari komunitas yang tersedia, dan baik set plugin. Kerangka mempercepat waktu pengembangan dan membantu mengurus bagian yang membosankan, memungkinkan anda untuk beronsentrasi pada hal-hal menyenangkan. Namun, kerangka tidak selalu sempurna, jadi jika sesuatu yang tidak terduga terjadi atau anda ingin menulis beberapa fungsi kerangka tidak menyediakan, anda akan memerlukan beberapa pengetahuan JavaScript.
1. Menginisialisasi Kerangka Ini adalah langkah 1 dari 16 dari tutorial gamedev Phaser. Sebelum masuk menulis fungsi permainan, kita perlu membuat struktur dasar untuk membuat permainan dalam. Hal ini dapat dilakukan dengan menggunakan HTML - kerangka Phaser akan menghasilkan di perlukan
