Basic Game Engine.Pdf

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 matem- atika, menangani penulisan referensi dan sebagainya. Saat ini banyak keraga- man atau ketakutan dari pengguna LATEX karena terkesan rumit dalam peng- gunaannya 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 di- ingat, apa yang ditampilkan discreen tidak mutlak seratus persen sama dengan yang ditampilkan di output print. Keunggulan LATEX digunakan dalam men- golah 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 bis- nis 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 be- serta dengan aplikasi-aplikasi yang digunakan sehingga penulis membuat buku yang bisa menjadi materi untuk mencari dasar (basic) game engine dan pe- manfaatan 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 fea- ture 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 diben- tuk 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 er- ror yang mungkin terjadi setelah sebuah game yang menggunakan engine ini dirilis dan masih memungkinkan game engine-nya tersebut untuk mengopti- malkan 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. Kekurangan- nya 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 rutin- core hari ini disebut kernel oleh retro pengembang. Platform lain telah ke- longgaran 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 graﬁs. CONTENTS 7

Generasi pertama dari mesin graﬁk 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 Lim- ited 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 graﬁs 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 high- end komersial dapat berkisar dari US $10.000 untuk jutaan dolar, dan jumlah lisensi dapat mencapai beberapa lusin perusahaan, seperti terlihat dengan Un- real 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. Per- mainan 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 Lin- eage 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 dise- buah 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 13

• Ion Drift 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 ﬁtur-ﬁtur 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 ﬁtur 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. Kumpu- lan 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. Populari- tasnya 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 Deﬁant Few, Chuck, Tap Tap Submarine, Foot Chinko, Moon Rocket, The Hobbit, dll. • The Deﬁant Few CONTENTS 17

• Foot Chinko

• The Hobbit 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 ﬁtur 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, hal- hal 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 letu- san, 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 ﬁtur 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 (ﬁxed 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 ﬁle 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 We- bGL. Ini adalah Library yang berkontibusi untuk memantu mendorong hal-hal ke depan. Untuk pembuatan game, ini berarti bahwa jika browser mendukung We- bGL 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 ﬁlter 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 ﬁle 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 Sur- face 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 multi- touch 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 Ar- cadeParticles. 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 ﬁsika mudah untuk mengganti dan tidak ada sifat ﬁsika 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 ﬁtur 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 se- jalan 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 memper- barui 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 mas- terberisi 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 ﬁtur 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 ﬁtur mu- takhir 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 sistem- tray dan pilih ”direktori www” dari menu pop-up.server lain akan memiliki metode lain untuk menentukan lokasi, tetapi dari titik ini kita akan menyebut- nya 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/hel- lophaserke 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, mudah- mudahan itu yang sederhana seperti ﬁle 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 ﬁsika. 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 memodiﬁkasi 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 KE- MAMPUAN 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 Al- catraz 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 bersama- sama 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 ﬁle 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 ﬁtur lengkapnya hanya berukuran 355KB. Bukan sebuah ‘All in One’ bundel anda juga bisa men-download untuk keper- lunan 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 menon- aktifkan 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 mengotomati- sasi tugas-tugas yang memakan waktu dan membosankan.Dalam penggunaanya dalam Phaser yaitu untuk membangun script distribusi game tersebut.Tetapi juga dapat dikonﬁgurasi dengan pluginConnectuntuk melayani ﬁle lokal, bertin- dak 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 ﬁle 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 benar- benar 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.ﬁle 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, ﬁtur 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.Adabanyakterse- dia, 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 harﬁahdekadepemban- gunan. Menggunakan sistem Paket yang komprehensif dapat meningkatkan dalam beberapa cara.Berikut adalahpanduan yang sangat baikuntuk ﬁtur 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.ﬁtur XDK Intel khusus untuk pengembang game termasuk manajer pertandingan aset, terkait game plug-in API, sampel permainan dan template untuk mesin permainan didukung, petun- juk autocompletion di built-in editor kode, dan ﬁtur 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 benar- benar 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 deﬁnisi men- gajukan 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, Brack- ets telah benar-benar datang dengan sendirinya akhir-akhir ini.Ini adalah open- source 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 ﬁsika, tabrakan, sprite, text dan banyak lagi. Setiap contoh adalah sepotong mandiri sepenuhnya bekerja kode yang anda dapat membuka, mudah mengedit, dan belajar. Digu- nakan 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 berke- lanjutan 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 ﬁtur 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 ﬁlter.

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 De- veloper. 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 ﬁle instalasi dan pilih bahasa layar display.

• Pastikan bahasa yang disorot benar • Klik instal dan akan muncul perjanjian lisensi CONTENTS 45

• Klik lihat readme.ﬁle 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 dikonﬁgurasi 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 mengkonﬁgurasi 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 konﬁgurasi 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, bagaimana- pun 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 ﬁnish. 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 men- cocokkan 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 graﬁs 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

Permainan HTML Struktur dokumen HTML cukup sederhana, karena permainan akan diberikan sepenuhnya pada

Gambar 2

Download Kode Phaser Selanjutnya, kita perlu untuk melalui proses download source code Phaser dan menerapkan pada HTML kita. 1. Pergi ke http://phaser.io/download/stable&usg=ALkJrhjv8GqpVPWM- lEpdeLTat9uqNCETcg untuk mendowloadnya. 2. Pilih opsi yang cocok untuk ana yang terbaik , penulis akan merekomen- dasikan pilihan min.js karena membuat kode sumber yang lebih kecil pula dan anda tidak mungkin perlu untuk menambahkan di dalam kode sumber. 3. Menyimpan kode Phase di dalam/js langsung dilokasi yang sama dengan anda index.html berkas

4. Uprage src nilai pertama tag, seperti yang ditunjukan di bawah ini. Untuk mulai dengan kami menyertakan brickInfo objek, karena hal ini akan berguna segera.

Gambar 16 Ini BrickInfo objek akan menampung semua informasi yang kita butuhkan: lebar dan tinggi dari batu bata tunggal, Jumlah baris dalam kolom dari batu bata kita akan melihat di layar atas dan kiri oﬀset (lokasi di kanvas di mana kita akan mulai menarik batu bata) dan padding antara setiap baris dan kolo batu bata. Sekarang, Mari kita mulai membuat batu bata sendiri , menambahkan grup kosong pertama yang berisi batu bata dengan menambahkan baris berikut di bagian bawah initVrick() fungsi: • bricks = game.add.group(); batu bata = game.add.group ();

Kita bisa loop melalui baris dan kolom untuk membuat batu bata baru setiap interasi tambahkan loop bersarang berikut di bawha garis sebelumn kode. CONTENTS 63

Gambar 17 Dengan Cara ini kita akan membuat jumlah yang tepat dari batu bata yang kita butuhkan dan semua yang terkandung dalam sekelompok. Sekarang kita perlu menambahkan beberapa kode di dalam loop structure bersarang untuk menarik setiap batu bata. isikan seperti berikut :

Gambar 18 Di sini kita perulangan melalui baris dan kolom untuk membuat batu bata baru dan menempatkan mereka di layar. Bata yang baru di buat di aktigkan untuk mesin ﬁsika Arcade, itu butuh di atur menjadi tidak bergerak (sehingga tidak akan bergerak ketika terkena bola), dan kami juga menetapkan jangkar berada di tengah di menambahkan bata di grup. Masalahnya saat itu adalah bahwa kita melukis seua batu bata di satu tempat, di koodinat (0.0) apa yang perlu kita lakukan adalah menggambarkan setiap bata pada X sendiri dan posisi y. Update brickx dan brick Y baris sebagai berikut :

Gambar 19 Setiap brickx posisi yang bekerja sebagai brickInfo.width di tambah brick- Info.padding , di kalikan dengan jumlah baris r , di tambahkan brickInfo.oﬀ- set.left , logika untuk brick y identik keciali membawah ia menggunakan nilai - nilai untuk jumlah kolom, brickInfo.height dan brickInfo.top . Sekarang setiap batu bata tunggal dapat ditempatkan di tempat yang benar dengan bantalan antara masing - masing batu bata dan di tarik pada oﬀset dari terpi kanvas kiri dan atas.

10. Tabrakan Ini adalah langkah 10 dari 16. Sekarang ke tantangan berikutnya , deteksi tumbukan antara bola dan baru bata. Untungnya cukup kita dapat menggunakan mesin ﬁsika untuk memeriksa tabrakan tidak hanya antara objek tunggal (seperti bola dan dayung) tetapi juga antara objek dan kelompok

Tambrakan Bata / Bola Mesin ﬁsika membuat segalanya jauh lebih mudah , kita hanya perlu menamb- hakan dua buah kode sederhana. Pertama, tambahkan baris baru di dalam update () fungsi yang memeriksa untuk deteksi antara bola dan batu bata seperti CONTENTS 64 yang di tunjukan di bawah ini :

Gambar 20 Posisi bola dihitung terhadap posisi semua batu bata dalam kelompok. Yang ketiga, parameter opsional adalah fungsi dijalankan ketuka tabrakan terjadi ballHitBrick() membuat fungsi baru ini sebagai bawah kode sebelum menutup tag, sebagai berikut

Gambar 21 Dan hanya itu , reload kode anda dan harus melihat tabrakan baru bekerja sama diperlukan Berkat Phaser ada dua parameter yang dikirimkan ke fungsi yang pertama adalah bola yang kami sekplisit dideﬁnisikan dalam metode bertabrakan, dan yang kedua adalah batu bata tunggal dari kelompok batu bata yang bertabrakan dengan bola. Dalam fungsi kita menghapus batu bata tersebut dari layar hanyaj dengan menjalankan kill() metide di atasnya. Anda harapkan untuk harus mnulis lebih banyak perhitungan anda sendiri untuk melaksanakan deteksi tabrakan ketika menggunakan JavaScript. Itu- lah keindahan mengguanakan kerangka anda dapat meninggalakn banyak kode membosakan untuk Phaser dan fokus pada yang paling menyenangkan dan menarik dari pembuatan game.

11. Nilai Ini adalah langkah ke 11 dari 16. Memiliki skor juga dapat membuat permainan menjadi lebih menarik dan anda dapat mencoba untuk mengalahkan nilai tert- inggai dari yang telah di mainkan.Kami akan menggunakan variabel terpisah untuk menyimpan skor dan Phaser ini text() metode untuk mencetaknya ke layar.

Variabel Baru Tambahkan dua bariabel baru setelah yang ditetapkan sebelumnya.

Gambar 22

Menambahkan Skor Teks Ke Layar Permainan Sekarang tambahkan barus ini di ahir create() fungsi : CONTENTS 65

• scoreText = game.add.text(5, 5, ’Points: 0’, { font: ’18px Arial’, ﬁll: ’#0095DD’ }); scoreText = game.add.text (5, 5, ’Tempat: 0’, {font: ’18px Arial’, isi: ’# 0095DD’}); Text() metode dapat mengambil empat parameter : • x dan y koodinat untuk menggabar teks • teks yang sebenarnya yang akan diberikan. • Haya font untuk membuat teks Parameter terakhir terlihat sangat miri dengan CSS styling. Dalam kasusu kami teks skor akan berwarna biru, berukuran di 18 piksel dan menggunakan font Arial.

Memperbaharui Skor Ketika Baru Bata Hancur Kami akan meningkatkan jumlah poin setiap kali bola menyentuh batu bata dan mempengaruhi scoreText untuk menampilan skor saat ini. Hal ini dapat dilakukan dengan menggunakan setText() metode , tambahkan dua barus baru yang terlihat di bawah ke ballHitVrick() fungsi:

Gambar 23 Itu saja untuk saat ini , ulangi index.html dan periksa bahwa update skore pada setiap hit bata.

12. Memenangkan Pertandingan Ini adalah langkah ke 12 dari 16. Menerapkan menang dalam permainan adalah hal yang cukup mudah. Jika kebetulan untuk menghacurkan semua batu bata, maka menang.

Bagaimana Untuk Menang ? Tambahkan kode baru berikut ke ballHitBrick() fungsi : CONTENTS 66

Gambar 24 loop melalui batu bata dalam kelompok menggunakan bick.children, memeriksa untuk gairah masing - masing dengan masing - masing batu bata ini .alive () metode. Jika tidak ada lagi batu bata yang masih hidup, maka kita menampilkan pesan menang, restart permainan setelah peringatan tersebut diberhentikan.

13. Kehidupan Ekstra Ini adalah langkah ke 13 dari 16. Kita bisa membuat permainan menyenangkan bagi yang lain untuk menambahkan kehidupan. Sehingga pemain dapat terus bermain sampai mereka telah kehilangan tiga kehidupan, bukan hanya satu.

Variabel Baru Menambahkan variabel baru berikut di bawha ini yang sudah ada adlam kode anda.

Gambar 25 Ini masing- masing akan menyimpan jumlah nyawa, label teks yang menampilkan jumlah nyawa yang tetap, dan label teks yang akan ditampilkan pada layar saat pemain kehilangan satu dari kehidupannya.

Mendefinisikan Label Teks Baru Mendefinisikan teks terlihat seperti sesuatu yang kita sudah lakukan di skor pelajaran. Tambahkan baris berikut di bawha ada scoreText definisi dalam create() function:

Gambar 26 livesText dan lifelostText benda terlihat sangat mirip dengan scoreText satu, mereka menentukan posisi pada layar, tels yang sebenarnya untuk menampilkan dan sytling font. Yang pertama berlabuh di tepi atas hak untuk menyelaraskan dengan benar dengan layar dan yang teakhir berpusat, baik menggunakan an- chor.set () lifelostText akan ditampilkan hanya ketika hidup gilang sehingga visivilitas awalnya di atur ke false.

Membuat Styling Teks Kita Kering Seperti yang anda kita menggunakan styling yang sama untuk ketiga teks socre- Text, livesText dan lifelostText. Jika kita pernah ingin mengubah ukuran font atau warna kita harus melakukannya di banyak tempat. Untuk membuatnya CONTENTS 67 lebih mudah bagi kita untuk mempertahankan dimasa depan kita dapat membuat sebuah variabel terpisah yang akan mengadakan styling kami, sebut saja textStyle dan tempat itu sebelum deﬁnisi teks: • textStyle = { font: ’18px Arial’, ﬁll: ’#0095DD’ }; textstyle = {font: ’18px Arial’, isi: ’# 0095DD’}; Kami sekarang dapat menggunakan variabel ini ketika styling label teks kami, memperbaharui kode sehingga beberapa contoh dari styling teks diganti dengan bariabel:

Gambar 27 Dengan cara ini mengubah font dalam satu variabel akan menerapkan perubahan untuk setiap tempat itu diginakan.

Kehidupan Kode Penanganan Untuk menerapkan hidup dalam permaianan kami, mari kita pertama mengubah fungsi bola terikat pada onoutofbounds acara. Alih - alih menjalankan fungsi anonim dan menunjukan peringatan segera:

Gambar 28 kami akan menerapkan fungsi baru yang disebut ballleaveScreen ; menghapus event sebelumnya handler (ditampilkan di atas) dan menggantikannya dengan baris berikut : • ball.events.onOutOfBounds.add(ballLeaveScreen, this); ball.events.onOut- OfBounds.add (ballLeaveScreen, ini); Kami ingin mengurangi jumlah nyawa setiap kali bola meninggalkan kanvas. Tambahkan ballLeaveScree() deﬁnisi fungsi di akhir kode kita;

Gambar 29 Alih - alih langsung mencetak peringatan ketika anda kehilangan kehidupan, pertama kita kurangi satu lehidupan dari jumlah saat ini dan memeriksa apakah itu nilai non-nol. Jika ya, maka pemain masih memiliki beberapa kehidupan kiri dan dapat terus bermain - mereka melihat pesan hidup yang hilang, posisi bola CONTENTS 68 dan dayung akan diatur ulang pada layar dan pada input berikutnya (klik atau sentuhan) pesan akan disembunyikan dan bola akan mulai bergerak lagi. Ketika jumlah nyawa yang tersedia mencapai nol, permainan berakhir dan permainan lebih pesan peringatan akan ditampilkan.

Acara Anda mungkin telah memperhatikan add() dan addOnce() metode panggilan dalam dua blok kode di atas dan bertanya-tanya bagaimana mereka berbeda. Perbedaannya adalah bahwa add() metode mengikat fungsi yang diberikan dan menyebabkan ia akan dieksekusi setiap kali peristiwa itu terjadi, sementara ad- dOnce() berguna ketika Anda ingin memiliki fungsi yang terikat dieksekusi hanya sekali dan kemudian terikat sehingga tidak dieksekusi lagi. Dalam kasus kami, pada setiap outOfBounds acara ballLeaveScreen akan dieksekusi, tapi ketika bola meninggalkan layar kita hanya ingin menghapus pesan dari layar sekali.

14. Animasi Dan Remaja Ini adalah langkah ke 14 dari 16. Untuk membuat permainan terlihat lebih juicy dan hidurp kita dapat menggunakan animasi dan remaja. Ini akan men- gahasilkan yang lebih baik, pengalaman yang lebih menghibur. Mari kita men- jelajahi bagaimana menerapkan Phaser animasi dan remaja dalam permainan kami.

Animasi Dalam Phaser animasi melibatkan mengambil spritesheet dari sumber ekster- nal dan menampilkan sprite berurutan. Sebagai contoh, kita akan membuat goyangan bola ketika hit sesuatu. Pertama - tama ambil spritesheet dan Github dan menyumpannya dala, direktori /img. • game.load.spritesheet(’ball’, ’img/wobble.png’, 20, 20); game.load.spritesheet ( ’bola’, ’img / wobble.png’, 20, 20); Alih-alih memuat satu gambar bola kita bisa memuat seluruh spritesheet - koleksi gambar yang berbeda. Kami akan menunjukkan sprite berurutan untuk menciptakan ilusi animasi.The spritesheet() dua paremeters tambahan metode ini menentukan lebar dan tinggi setiap frame tunggal dalam ﬁle spritesheet yang diberikan, menunjukkan kepada program bagaimana memotongnya untuk mendapatkan frame individu.

Memuat animasi Selanjutnya, masuk ke fungsi yang Anda buat , cari baris yang memuat sprite bola, dan di bawahnya menempatkan panggilan untuk animations.add() dilihat dibawah ini: CONTENTS 69

Untuk menambahkan animasi ke objek yang kita gunakan animations.add() metode, yang berisi parameter berikut • Nama memilih untuk animasi • Array mendeﬁnisikan urutan untuk menampilkan frame selama animasi. Jika Anda melihat kembali pada wobble.png gambar, Anda akan melihat ada tiga frame.Phaser ekstrak ini dan toko referensi dalam array - posisi 0, 1, dan 2. Array di atas mengatakan bahwa kita menampilkan frame 0, maka 1, maka 0, dll • Framerate, di fps. Karena kita sedang menjalankan animasi pada 24fps dan ada 9 frame, animasi akan menampilkan hanya di bawah tiga kali per detik.

Menerapkan animasi ketika bola menyentuh pemukul Dalam arcade.collide() metode (baris pertama dalam panggilan yang menangani tabrakan antara bola dan dayung update() , lihat di bawah dapat menambahkan parameter tambahan yang menentukan fungsi yang akan dieksekusi setiap kali tabrakan terjadi, di fasion sama dengan ballHitBrick() fungsi. Update baris pertama dalamupdate() seperti berikut:

Maka kita dapat membuat ballHitPaddle() function (memiliki ball dan paddle sebagai parameter default), memainkan animasi goyangan ketika dipanggil. Menambahkan fungsi berikut sebelum penutupan Anda tag:

Animasi dimainkan setiap kali bola menyentuh pemukul. Anda dapat menambahkan animations.play() panggilan dalam ballHitBrick() fungsi juga, jika anda merasa itu akan membuat permainan terlihat lebih baik.

Remaja Sedangkan remaja lancar bernyawa sifat suatau objek gameworld seperti lebar dan opacity. Mari kita tambahkan tween untuk permainan kami untuk membuat batu bata lancar hilang ketika mereka terkena bola. CONTENTS 70

Mari kita berjalan melalui ini sehingga Anda dapat melihat apa yang terjadi di sini: 1. Ketika mendefinisikan tween baru Anda harus menentukan properti akan Tweened - dalam kasus kami, bukannya menyembunyikan batu bata seketika saat terkena bola, kami akan membuat lebar dan skala tinggi ke nol, sehingga mereka akan baik disapear. Untuk akhirnya, kita menggunakan add.tween() metode, menetapkanbrick.scale sebagai argumen seperti ini adalah apa yang kita ingin tween. 2. The to() metode mendefinisikan keadaan objek pada akhir tween. Dibu- tuhkan sebuah objek yang mengandung nilai-nilai akhir yang diinginkan parameter yang dipilih ini (skala mengambil nilai skala, 1 menjadi 100% dari ukuran, 0 menjadi 0% dari ukuran, dll), saat tween dalam milidetik dan jenis pelonggaran menggunakan untuk tween. 3. Kami juga akan menambahkan opsional onComplete event, yang mendefinisikan fungsi yang akan dijalankan ketika tween selesai. 4. Hal terakhir yang Anda lakukan untuk adalah untuk memulai tween segera menggunakan start() . Itu versi diperluas dari definisi tween, tetapi kita juga bisa menggunakan sintaks singkatan: Itu versi diperluas dari definisi tween, tetapi kita juga bisa menggunakan sintaks singkatan:

tween ini akan menggandakan skala bata dalam setengah menggunakan pelonggaran elastis kedua, akan dimulai secara otomatis, dan mengalami keter- lambatan dari 100 milidetik.

15. Kancing - Kancing Ini adalah langkah 15 dari 16. Alih - alih memulai permainan segera kita dapat meninggalkan bahwa keputusan untuk pemain dengan menambahkan tombol start mereka dapat menekan. Mari kita menyelidiki bagaimana untuk melakukan itu.

Memuat Tombol Spritesheet kami dapat memuat tombol spritesheet dengan cara yang sama kita dimuat animasi goyangan bola. Tambhakan baris berikut ke bagian bawah preload() fungsi : • game.load.spritesheet(’button’, ’img/button.png’, 120, 40); game.load.spritesheet ( ’tombol’, ’img / button.png’, 120, 40); Sebuah bingkai tombol tunggal adalah 120 piksel lebar dan 40 piksel tinggi dan anda juga perlu ambil tombol spritesheet dari Github dan menyimpan di direktori /img. CONTENTS 71

Menambahkan tombol untuk permainan Menambahkan tombol baru untuk permainan ini dilakukan dengan menggu- nakanadd.button metode. Tambahkan baris berikut ke bagian bawah Anda create() function:

Button() parameter metode ini adalah sebagai berikut:

• Tombol ini x dan y koordinat • Nama aset graﬁs untuk ditampilkan untuk tombol • Sebuah fungsi callback yang akan dijalankan ketika tombol ditekan • Sebuah referensi untuk this untuk menentukan konteks eksekusi

• Frame yang akan digunakan untuk lebih, dan turun peristiwa. Sekarang kita perlu mendeﬁnisikan startGame() fungsi dirujuk dalam kode di atas:

Ketika tombol ditekan, kita menghapus tombol, menetapkan kecepatan awal bola dan mengatur playing variabel untuk true . Akhirnya untuk bagian ini, kembali ke Anda create() fungsi, menemukan ball.body.velocity.set(150, -150); line, dan menghapusnya. Anda hanya ingin bola untuk bergerak ketika tombol ditekan.

Menjaga dayung masih sebelum pertandingan dimulai Ia bekerja seperti yang diharapkan, tapi kami masih bisa bergerak dayung saat pertandingan belum dimulai, yang tampak agak konyol. Untuk menghentikan ini, kita dapat mengambil keuntungan dari playing variabel dan membuat bergerak dayung hanya saat pertandingan baru dimulai. Untuk melakukan itu, menyesuaikan update() fungsi seperti: Gambar 3 Dengan cara itu dayung adalah bergerak setelah semuanya dimuat dan siap, tetapi sebelum memulai permainan yang sebenarnya.

16. Gameplay Mengacak Ini adalah langkah ke 16 dari 16. Permainan kami tampaknya akan selesai tetapi jika anda melihat cukup dekan akan melihat bahwa bola memantul dari dayung pada suduht yang sama diseluruh permainan. CONTENTS 72

Pembuatan Rebound Lebih Acak Kami dapat mengubah kecepatan bola tergantung pada tempat yang tepat hit, dengan memoiﬁkasi x kecepatan setiap kali ballHitPaddle() function dijalankan menggunakan garis sepanjangan garis di bawah.

Gambar 31 Ini sedikit sihir kecepatan baru lebih tinggi semakin besar jarak antara pusat dayung dan tempat dimana boleh menyentuh.itu terakhir seperti itu karena sedikit ekspreimen dengna nilai yang diberikan, anda dapat melakukan ekspre- rimen sendiri dan melihat apa yang terjadi. Ini tidak benar - benar acak tenti saja, tapi tidak membuat gameplay sedikit lebih tak terduga dan karena itu lebih menarik. BAB 5

73 Penutup

5.1 Kesimpulan

Buku ini bermaksud untuk mencari dasar game engine phaser dan kasus kasus yang terdapat dalam game engine phaser : 1. Merupakan salah satu framework game engine terbaik untuk pengembangan HTML5 sejauh ini. Sangat cepat, sangat membantu para pengembang dalam belajar membuat atau mengembangkan game, banyak contoh untuk pemula dan advance programmer, sering diupdate, mudah dikembangkan dan digunakan. 2. Bekerja dikebanyakan perangkat dan sistem operasi yang sudah lawas. Mempunyai banyak sekali ﬁtur pendukung yang bekerja mumpuni wala- pun ada juga ﬁtur yang kurang baik.

5.2 Penutup

Buku ini dibuat untuk memenuhi tugas yang diberikan dosen Softskill yaitu Bapak Dr. Rar. Net I. Made Wiryana, S.Kom, MApp.Sc. Semoga dengan adanya buku Basic Game Engine (Phaser) ini penulis semakin giat untuk terus menggali, mencari pengetahuan. Demikian uraian tentang teori, software yang digunakan dan contoh kasus. Penulis menyadari bahwa dalam pembuatan buku ini terdapat banyak kekurangan dan kesalahan dalam pendeskripsian materi, kesalahan dalam penggunaan penulisan dan kesalahan pada penyampaian materi. Penulis mohon maaf dan meminta saran serta kritik dari pembaca untuk perbaikan yang lebih baik kede- pannya.

74 Daftar Pustaka

https://html5gameengine.com/details/25/phaser http://phaser.io/tutorials/getting-started http://phaser.io/tutorials/getting-started/part2 http://phaser.io/tutorials/getting-started/part3 http://phaser.io/tutorials/getting-started/part4 http://phaser.io/tutorials/getting-started/part5 http://phaser.io/tutorials/getting-started/part6 http://phaser.io/tutorials/getting-started/part7 https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_ game_Phaser https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Initialize_the_framework https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Scaling https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Load_the_assets_and_print_them_on_screen https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Move_the_ball https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Physics https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Bounce_off_the_walls https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Player_paddle_and_controls https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Game_over https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Build_the_brick_field https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Collision_detection https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/The_score https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Win_the_game

75 CONTENTS 76

https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Extra_lives https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Animations_and_tweens https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Buttons https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_ game_Phaser/Randomizing_gameplay