1

Basic Game Engine

Tim Penulis Kelompok 2

April, 2016

Kata Pengantar

Buku ini membahas secara spesifik tentang dasar game engine pasher. Phaseradalah salah satu game engine HTML 5 yang dimana buku ini menjelasan ten-tang basic dari salah satu game engine yaitu Phaser.

Pada pembuatan buku ini menggunakan software LxY. Dimana LYX adalahsebua aplikasi yang memudahkan pengguna untuk memanfaatkan keunggulandari 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 IsWhat You Get) dari sebagai model pengolahan kata (word processing) den-gan kemampuan filosofi dari WYSIWYM (What You See Is What You Mean)dari model pengolah dokumen (document Processor). Sehingga tampilan akansangat 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 denganyang ditampilkan di output print. Keunggulan LATEX digunakan dalam men-golah output dari input yang memanfaatkan filosofi pengolah kata dan outputdengan filosofi pengolah dokumen.

Dengan LYX penulisan bidang ilmiah eksak dan teknik akan menjadi lebihmudah dan menyenangkan. penyaluran ini tidak dimaksudkan untuk melakukanplagiat, tetap hanya semata-mata untuk belajar.

Akhir kata semoga buku ini dapat memberikan manfaat bagi semua.Depok, Mei 2016Penulis

1

Contents

Daftar Isi 2

Daftar Pustaka 75

2

BAB 1

Pendahuluan

Game telah menjadi satu hal yang ada dalam keseharian kita. Dahulu, gamehanya dijadikan sarana hiburan semata namun sekarang game telah menjadiluas fungsinya, misalnya game dapat dijadikan sarana pembelajaran, lahan bis-nis dan dipertandingkan sebagai salah satu dari cabang olahraga oleh paraprofesional. Perkembangan game platform juga dapat dilihat secara langsungoleh masyarakat, pada mulanya game hanya dimainkan dikomputer dan consoletetapi sekarang sudah memasuki era penuh kecanggihan.

Buku ini akan membahas mengenai game engine dan game engine phaser un-tuk lebih jelasnya. Game engine merupakan suatu sistem perangkat lunak (soft-ware) yang dirancang untuk pembuatan dan pengembangan video game. Gameengine memberikan kemudahan dalam menciptakan konsep sebuah game yangakan dibuat seperti sistem rendering, AI bahkan sistem networking. Game en-gine dapat dikatakan jiwa dari segala aspek sebuah game.Tujuan digunakannyagame engine adalah mempermudah pembuatan bagian-bagian tertentu dalamgame, membagi-bagi pengembangan game menjadi modul-modul tertentu, danmemudahkan kolaborasi antar pihak.

Dasar game engine merupakan tujuan penting dalam pembuatan buku ini be-serta dengan aplikasi-aplikasi yang digunakan sehingga penulis membuat bukuyang bisa menjadi materi untuk mencari dasar (basic) game engine dan pe-manfaatan game engine terutama untuk game engine phaser. Mudah-mudahanbuku yang penulis ini bisa bermanfaat untuk pembaca buku ini dan penulismengucapkan selamat untuk membaca buku ini.

1.1 Apa itu Game Engine

Game engine adalah sebuah sistem perangkat lunak (software) yang dirancanguntuk pembuatan dan pengembangan suatu video game. Game engine mem-berikan kemudahan dalam menciptakan konsep sebuah game yang akan di buat.Mulai dari sistem rendering, physics, arsitektur suara scripting, A.I, dan bahkansistem networking. Game engine dapat dikatakan sebagai jiwa dari seluruh as-pek sebuah game.

3

CONTENTS 4

Ada banyak mesin permainan yang dirancang untuk bekerja pada konsolpermainan video dan sistem operasi desktop seperti Microsoft Windows, Linux,dan Mac OS X. fungsionalitas inti biasanya disediakan oleh mesin permainanmencakup mesin render ( “renderer”) untuk 2D atau 3D grafis, mesin fisika atautabrakan (dan tanggapan tabrakan), suara, script, animasi, kecerdasan buatan,jaringan, streaming, manajemen memori, threading, dukungan lokalisasi, danadegan grafik. Proses pengembangan permainan sering dihemat oleh sebagianbesar menggunakan kembali mesin permainan yang sama untuk menciptakanpermainan yang berbeda.

Sebuah game engine dibagi lagi menjadi dua bagian besar. Yaitu API danSDK. API ( Applicaiton Programming Interfaces ) adalah bagian operating sys-tem, services dan libraries yang diperlukan untuk memanfaatkan beberapa fea-ture yang diperlukan. Dalam hal ini contohnya DirectX. Sementara SDK adalahkumpulan dari libraries dan API yang sudah siap digunakan untuk memodifikasiprogram yang menggunakan operating system dan services yang sama.

Game engine mempunyai tipe-tipe diantaranya:Roll-your-own game engineGame engine tipe ini lebih disukai karena kemungkinan besar dapat digu-

nakan gratis. selain itu, game engine tipe ini memperbolehkan para developerlebih fleksibel dalam mengintegrasikan komponen yang diinginkan untuk diben-tuk sebagai game engine mereka sendiri. Kelemahan dari tipe game engine inibanyak engine yang dibuat dengan cara semacam ini malah menyerang balikdevelopernya.

CONTENTS 5

Mostly-ready game enginesGame engine biasanya sudah memberikan fitur-fitur kepada developer game

seperti GUI, physiscs, libraries model, texture dan lain-lain. Engine ini memilikibeberapa batasan, terutama jika dibandingkan dengan game engine sebelumnyayang benar-benar terbuka lebar. Hal ini ditujukan agar tidak terjadi banyak er-ror yang mungkin terjadi setelah sebuah game yang menggunakan engine inidirilis dan masih memungkinkan game engine-nya tersebut untuk mengopti-malkan kinerja game-nya. Contoh tipe game engine seperti ini adalah UnrealEngine, Source Engine, id Tech Engine dan sebagainya yang sudah sangat op-timal dibandingkan jika harus membuat dari awal. Dengan hal ini dapat meny-ingkat menghemat waktu dan biaya dari para developer game.

Point-and-click enginesEngine ini merupakan engine yang sangat dibatasi, tapi dibuat dengan san-

gat user friendly. Developer game bahkan bisa mulai membuat game sendirimenggunakan 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 biasanyahal ini mencakup semuanya, mulai dari grafis hingga tata suara. Tapi bukanberarti game engine jenis ini tidak berguna, bagi developer cerdas dan memilikikreativitas tinggi, game engine seperti ini bisa dirubah menjadi sebuah gamemenyenangkan. Game engine ini memang ditujukan bagi developer yang inginmenyingkat waktu pemrogramman dan merilis game-game mereka secepatnya

Contoh-contoh Game Engine1. Freeware game engine/open source game engineBlender Golden T Game Engine (GTGE) DXFramework Ogre Aleph One

Axiom Engine Allegro Library Box2D Build Engine Cube Cube 2 DarkPlacesjMonkeyEngine (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 2003RPG Maker 95 Vision Engine

contoh ulasan game engineUnreal Engine, Game Engine yang satu ini sudah lama diunggulkan bersama

dengan tenarnya Unreal Tournament, sebuah game FPS yang menghadirkangameplay dan grafis yang menawan dari waktu ke waktu. Versi terakhir untuksaat ini adalah Unreal Engine 3, dan didesain untuk bekerja dengan DirectX9maupun 10. Selain ditujukan untuk game-game PC, Unreal Engine 3 juga ditu-jukan untuk game-game console seperti Xbox360 dan PS3. Ada juga game yangmemanfaatkan Unreal Engine 3 yang akan dirilis pada tahun 2010 dan diisukansebagai game dengan tampilan grafis yang sangat bagus, yaitu Mass Effect 2.Sudah begitu didalam Unreal Engine 3 ini terdapat berbagai program yangmendukung kinerjanya seperti NvidiaPhysX, yang memaksimalkan script/efekfisik dari sebuah objek.

CryENGINE adalah sebuah Game Engine yang digunakan dalam sebuahgame FPS berjudul FarCry yang kala itu pada tahun 2004 memiliki grafis yangsangat menawan.

1.2 Sejarah Game Engine

Sebelum (Game Engine) mesin permainan, permainan yang biasanya ditulis se-bagai entitas tunggal: game untuk atari 2600, misalnya, harus dirancang daribawah 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 memoribiasanya menyabotase upaya untuk menciptakan desain data-berat yang mesinkebutuhan. Bahkan pada platform menampung lebih, sangat kecil dapat di-gunakan kembali antara permainan. Kemajuan pesat hardware arcade ujungtombak dari pasar-berarti bahwa sebagian besar kode harus dibuang setelahitu pula, sebagai generasi kemudian akan menggunakan desain permainan gameyang sama sekali berbeda yang mengambil keuntungan dari sumber daya tamba-han. Jadi desain paling permainan melalui 1980 dirancang melalui rule set-kerasdikodekan dengan sejumlah kecil data tingkat dan grafis.

CONTENTS 7

Generasi pertama dari mesin grafik pihak ketiga atau renderers (dan peloporuntuk apa yang sekarang kita kenal sebagai mesin) didominasi oleh tiga pemainyaitu BRender dari Argonaut Software, Renderware dari Kriteria Software Lim-ited dan RenderMorphics ’Realitas Lab. Realitas Lab adalah tercepat dari tigadan adalah yang pertama diperoleh dalam langkah agresif oleh microsoft. TimRenderMorphics Pegawai Negeri Keondjian, Kate Seekings dan Doug Rabsonkemudian bergabung dengan proyek Microsoft yang berubah Realita Lab keDirect3D sebelum Keondjian dan Rabson kiri untuk memulai perusahaan lainmiddleware Qube Software. Renderware akhirnya dibeli oleh EA(ElectronicArts) tetapi dikesampingkan oleh raksasa permainan. Istilah “Game Engine”muncul pada pertengahan 1990-an, terutama dalam kaitannya dengan game3D seperti penembak orang pertama(FPS). Popularitas Id Doom Software dangame Quake, dari pada bekerja dari awal, pengembang lain berlisensi bagianinti dari perangkat lunak dan desain grafis mereka sendiri, karakter, senjatadan tingkat dari aset permainan.

CONTENTS 8

Pemisahan aturan permainan spesifik dan data dari konsep-konsep dasarseperti deteksi tabrakan dan entitas permainan berarti bahwa tim bisa tum-buh dan mengkhususkan. Kemudian permainan, seperti Quake III Arena dan1998 Epic’s Unreal Games dirancang dengan pendekatan ini dalam pikiran, den-gan mesin dan konten dikembangkan secara terpisah. Praktek lisensi teknologitersebut telah terbukti menjadi aliran pendapatan yang berguna tambahan un-tuk beberapa pengembang game, sebagai lisensi satu untuk mesin game high-end komersial dapat berkisar dari US $10.000 untuk jutaan dolar, dan jumlahlisensi dapat mencapai beberapa lusin perusahaan, seperti terlihat dengan Un-real Engine. Paling tidak, mesin dapat digunakan kembali membuat sekuelgame berkembang lebih cepat dan mudah, yang merupakan keunggulan yangberharga dalam industri video game yang kompetitif.

Mesin permainan modern adalah beberapa aplikasi yang paling kompleksyang ditulis, sering menampilkan puluhan sistem tersetel berinteraksi untukmemastikan pengalaman pengguna yang tepat dikendalikan. Evolusi mesinpermainan telah menciptakan sebuah pemisahan yang kuat antara rendering,scripting, karya seni dan desain tingkat misalnya untuk tim pengembangan gamekhas memiliki banyak seniman sebagai programmer yang sebenarnya. Per-mainan penembak orang-pertama tetap menjadi pengguna utama dari mesinpermainan pihak ketiga, tetapi mereka sekarang juga digunakan dalam genrelain. Sebagai contoh, RPG The Elder Scrolls III:Morrowind dan MMORPGDark Age of Camelot didasarkan pada mesin Gamebryo dan MMORPG Lin-eage II didasarkan pada Unreal gme awalnya dikembangkan untuk rumah kon-sol juga, misalnya mesin RenderWare digunakan dalam Grand Theft Auto danWarabala Burnout.

Threading adalah mengambil lebih penting karena sistem multi-core mod-ern (misalnya Cell) dan tuntutan meningkat pada realisme. Benang Khas

CONTENTS 9

melibatkan rendering, streaming, audio dan fisika. Permainan balapan yangbiasanya berada di garis depan threading dengan mesin fisika berjalan dise-buah thread terpisah jauh sebelum subsistem ini lainnya dipindahkan, sebagiankarena rendering dan tugas terkait perlu update hanya pada 30-60 Hz. Sebagaicontoh, PlayStation 3, fisika berlari di Need For Speed pada 100 Hz versus ForzaMotosport 2 pada 360 Hz.

Meskipun istilah ini pertama kali digunakan pada 1990-an, ada sistem se-belumnya beberapa tahun 1980-an yang juga dianggap permainan mesin, sepertiSierra’s Adventure Game Interpreter (AGI) dan sistem SCI, LucasArts ’SCUMMsistem dan Insentif Software mesin Freescape. Tidak seperti kebanyakan mesinpermainan modern, mesin permainan ini tidak pernah digunakan dalam produkpihak ketiga (kecuali untuk sistem SCUMM yang dilisensikan dan digunakanoleh 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 danweb browser saja. Hal ini dapat terjadi berkat berkembangkan HTML5 denganfitur canvasnya yang dapat dimanfaatkan untuk mengembangkan game.

Saya dan pembaca mungkin sebelumnya pernah merasakan betapa kita per-nah cukup bergantung pada teknologi Flash. Flash sendiri merupakan teknologiyang dikembangkan oleh salah satu perusahan komersial Adobe. Salah satutujuan pengembangan HTML5 adalah mengurangi ketergantungan akan ap-likasi pihak ketiga seperti Flash dengan memberikan HTML fitur native untukmelakukan hal-hal yang dapat dilakukan oleh Flash, canvas merupakan salahsatu fitur HTML5 untuk mengatasi permasalahn ini. Canvas sendiri digunakanoleh banyak aplikasi, mulai dari audio player, video player, diagram responsive,dan bahkan game.

Kita dapat membuat game hanya dengan teknolog HTML dan JavaScriptmurni namun membutuhkan usaha yang jauh lebih keras dibandingkan denganmenggunakan game framework yang telah ada. Saat ini tercatat ada 22 gameengine HTML5 di situs html5gameengine.com. Di artikel kumpulan game engineterbaik ini, saya akan memilih game engine yang free dan telah cukup banyakdigunakan.

2.1 EaselJS

EaselJS merupakan game engine yang dikembangkan oleh gskinner.com.EaselJS terinspirasi dari Adobe Flash/ActionScript, oleh karena itu apabilapembaca pernah menggunakan Adobe Flash/ActionScript sebelumnya, seharus-

11

CONTENTS 12

nya pembaca akan lebih cepat beradaptasi dengan EaselJS. EaselJS dapat digu-nakan untuk membuat konten 2d dengan HTML5 seperti visualisasi data, iklan,game, dll.

EaselJS merupakan aplikasi free and open source dibawah lisensi MIT, kodesumbernya dapat diakses melalui halaman github.com. Dokumentasi lengkapmengenai modul-modul EaselJS dapat dibaca melalui halaman dokumentasinyaselain itu juga ada panduan untuk pemula yang baru mengenal EaselJS di hala-man Getting Started. Puluhan contoh dapat pembaca lihat di halaman exam-ple. Informasi terbaru mengenai EaselJS dapat pembaca ikuti melalui twitter,google+, dan blog mereka.

Pembaca pasti penasaran ingin melihat seperti apa game yang pernah dibuatdengan 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. Dirilispertama kali pada awal tahun 2013, saat ini versi pixi.js adalah versi 2.0. Pixi.jsdikembangkan oleh goodboy digital. Tujuan pengembangan pixi.js adalah untukmenyediakan pustaka 2d yang cepat dan ringan yang dapat berjalan disemuaperangkat. Pixi memberikan penggunanya kemudahan untuk memanfaatkan

CONTENTS 15

kelebihan hardware acceleration tanpa perlu memiliki pengathuan akan webGLsebelumnya. Situs resmi pixi.js ada di github.com. Ikuti informasi terbarupixi.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 dokumen-tasi pixi.js di github.com. Contoh penggunaan pixi.js dapat diakses melalui ha-laman example. Forum pixi.js dapat diikuti melalui htmlgamedevs.com. Kumpu-lan artikel dan tutorial tentang pixi.js ada di halaman resources. Akses langsungsitusnya 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 sangatbisa diandalkan. Phaser dikembangkan oleh Richard Davey (Photon Storm).Game yang dibuat dengan Phaser dapat dikompile ke Android dan iOS melaluiaplikasi pihak ketiga. Versi terakhir Phaser adalah versi 2.2.2 dan versi 3 saatini masih dalam pengembangan. Phaser adalah aplikasi free and open sourcedibawah lisensi MIT.

Pembaca dapat mengunduh Phaser melalui github dan membuat game den-gan JavaScript maupun TypeScript. Phaser juga memiliki forum sendiri bagiorang-orang yang ingin bertemu dengan sesama pengguna Phaser. Forum iniada di html5gamedevs.com.

Phaser sangat ramah akan pengguna baru, mereka memiliki lebih dari 400contoh untuk berbagai jenis game yang bisa pembaca lihat di example.phaser.io.Hanya sedikit framework yang dapat memberikan contoh sebanyak itu. Denganbegini, kita tidak akan terlalu kesulitan untuk mencari cara penggunaan Phasermelalui ratusan contoh yang disediakan.

Penasaran dengan game-game yang telah dibuat dengan Phaser? Beberapacontoh di bawah ini adalah game yang dibuat dengan Phaser seperti The DefiantFew, Chuck, Tap Tap Submarine, Foot Chinko, Moon Rocket, The Hobbit, dll.

• The Defiant Few

CONTENTS 17

• Foot Chinko

• The Hobbit

CONTENTS 18

• Gattai

Phaser memiliki panduan pengguna baru dan dokumentasi yang sangatlengkap. Pembuat Phaser juga sedang menulis buku resmi yang membahastentang Phaser, dari ketiga buku baru dua yang telah siap yaitu A Guide to thePhaser Tween Manager dan A Guide to the Phaser Scale Manager.

CONTENTS 19

Untuk mendapatkan informasi terbaru mengenai Phaser, kunjungi situsnyadi phaser.io, disana terdapat bagian News, yang akan terus memberikan in-formasi terbaru setiap harinya. Pembaca juga dapat mengikuti akun twitterPhoton Storm. Selain itu Photon Storm juga merilis buletin Phaser CodingTips setiap minggunya.

BAB 3

20

Phaser Game Engine

Phaser merupakan kerangka permainan sumber HTML5 terbuka diciptakanoleh Photon Badai. Ini dirancan untuk membuat game yang akan berjalan padadestop dan browser web mobile. Banyak fokus diberikan kepada kinerja dalammembuat werb brower mobile, daerh berkembang dan penting dari web game.Jika perangkat ini mampu maka menggunakan webGL untuk rendering, tapijika tidak mulus akan beralih ke kanvas. Penulis akan membahas sumber dayauntuk Basic Game Engine tentang Phaser.

3.1 HTML 5 permainan Kerangka Phaser

Untuk mengatakan bahwa rasanya seolah-olah kerangka HTML5 permainanbaru dirilis setiap minggu, seperti adalah proliferasi dari mereka. Penulis suka

21

CONTENTS 22

berpikir bahwa alasannya adalah sesuatu yang harus di lakukan dengan warisantim yang terlibar dalam bangunan itu.

Sejak rislis Phaser 1.0, update telah biasa dan komprhensif, dengan banyakfitur baru dan perbaikan ditempat dengan cepat. Kami bekerja pada perputaransekitar satu bulan dari developer ke master, penulisa dapat melihat changeloglengkap di GitHub. Menariknya, kita sekarang meilihat permintaan untuk per-mainan berjalan dalam WbView, jadi kami akan memastikan bahwa Phaserberoperasi dengan baik dalam lingkungan ini.

Serta menjaga Phaser up to date, itu juga sangat penting bagi kami bahwakami membangun sesuatu yang benar-benar mudah digunakan. Dan penulisanakan melihat ini tercemin diseluruh karangka. Ini berasal dari pengalamanpenulis dengan Flixer Power Tools, dan diluar itu ketika penulis di gunakan un-tuk bekerja untuk Tehe Game Creators membangun untuk menentukan bentukbahasa permainan mereka. Penulis selalu menjadi bagian dari pengembanganmembuat game untuk pengembangan, tren spenulisan sebagai pengemban dariPhaser.

3.2 Platform Yang Ditargetkan Dengan Phaser

3.2.1 Desktop Browser

Phaser adalah perpustakaan JavaScript dirancang untuk berjalan pada semuabrowser dekstop utama. Ini termasuk Internet Explorer 9 dan di atas, Firefox,Chrome, dan Safari. Sebelum IE9 tidak mendukung kanvas, jadi jika andabenar-benar membutuhkan kerangka kerja yang dapat menangani DOM rendermaka Phaser tidak akan cocok. Namun, permintaan untuk jenis permainanmenjadi 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 sahamdan Chrome. Chrome sekarang menjadi browser standar pada Android, denganversi terbaru yang mendukung webGL, tapi anda masih tidak bisa mengabaikanjutaan 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 mulaimemastikan bahwa Phaser berjalan dengan baik pada mereka. Sejauh ini, hal-hal yang terlihat baik, dan kami akan memproduksi panduan penyebaran ditahun baru.

kami juga telah melihat permainan Phaser berjalan dengan baik pada perangkatTizen dan sempurna di bawah wrapper Kindle HTML5, yang berarti anda dapatmenyebarkan kepada orang - perangkat “out of the box”. Karena lebih banyakweb bertenaga ponsel mulai memasuki pasar, kita akan pastikan untuk tetapPhaser diperbarui untuk mereka.

3.2.4 Aplikasi asli dan ongkos Dekstop

Ada seperti pilihan besar paket pengembangan permainan yang sangat baikyang menargetkan menciptakan aplikasi asli (Unity, Corona, Loom, dan seba-gainya), bahwa itu bukan daerah kami berharap untuk menghabiskan banyakusaha yang meliput pada awalnya, terutama bila dibandingkan dengan terlayanipasar browser mobile.

Namun, dengan perkembangan pembungkus seperti CocoonJS dan letu-san, kita melihat pengembangan menggunakan Phaser membungkus permainanmereka dan melepaskan mereka sebagai aplikasi asli. Jadi, pergi ke 2014 kitaakan mulai menambahkan dukungan untuk CocoonJS langsung ke inti, sertadukungan 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 meru-pakan sesuatu yang cukup menarik. Phaser tidak menggunakan praktek fauxOO- gaya internal. tidak ada besar rantai warisan atau komponen sistem, dan andatidak perlu memaksa benda anda kedalam setiap struktur kelas tetap baik. Iniadalah sederhana lurus kedepan rantai prototype, cara JavaScript dimaksudkanuntuk digunakan.

Ini tidak berarti anda tidak bisa membangun permainan anda dalam carayang terstruktur, jauh dari itu. Semua itu berarti bahwa kita tidak menegakkanitu. 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 dayaberdasarkan JS)

• Tilemaps (CSV dan Ubin Format peta)

• Bitmap Font

Kami secara rutin mengekspor file atlas tekstur dari Flash langsung ke per-mainan Phaser kami, dan mendukung atlas sepenuhnya dipangkas. Aset da-pat menjadi bagian-loaded, cache, dan ditarik dari URL yand berbeda (untukdukungan CDN), dan anda bahkan dapat mengubah sprite apapun menjadisebuah progress bar dengan satu baris kode.

CONTENTS 26

3.3.3 Rendering: WebGL dan Canvas

Internal, Phaser menggunakan Pixi.js untuk rendering. Pixi adalah sangatbagus, rendering yang cepat dan library yang berfokus pada kanvas dan We-bGL. Ini adalah Library yang berkontibusi untuk memantu mendorong hal-halke depan.

Untuk pembuatan game, ini berarti bahwa jika browser mendukung We-bGL maka pemain akan lebih sering daripada mendapatkan sebuah pengala-man yang lebih halus. WebGL merupakan sesuatu yang umum di Dekstoptetapi masih muncul di ponsel meskipun demikian, itumerupakan dimana se-buah 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 andabisa 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 watuyang lama. Hanya beberapa tahun yang lalu, kita dihadapkan dengan pili-han memiliki satu saluran tunggal audio high-latency yang akan melumpuhkanperangkat selama pemutaran atau tidak memiliki audio sama sekali. Tapi zamantelah berubah, dan Web API Audio datang ke keselamatan kita. Hal ini memu-ngkinkan untuk dukungan audio yang tepat berbasis node, dengan beberapasaluran, simpul routing dan dan segala macam efek. Jadi Phaser mendukungpenuh Web Audio.

Namun, pada Android terutama, kebanyakan perangkat masih tidak men-dukung thi, jadi kami juga mendukung warisan Audio dan penggunaan Audio

CONTENTS 27

Sprite : metode kemasan sekelompok sampel bersama-sama ke dalam satu filedan menggunakan tanda pemutaran untuk melompat ke berbagai efek. Phaserakan menukar antara dua tergantung pada kemampuan perangkat dan juga ter-masuk membuka sub sistem audio secara otomatis untuk anda, sesuatu yangbisa 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 potensipilihan input. Phaser mendukung keyboard, mouse, sentuhan, MSPointer (sekarangPointer bawah IE11), dan kombinasinya. Sebagai contoh, pada perangkat Sur-face Windows yang bisa swap antara menggunakan mouse dan sentuhan, ataumemang 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 melacakmereka semua secara acak indpenden, mengunakan acara mereka untuk menan-gani 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 memu-ngkinkan anda untuk menerapkan gravitasi dan gerakan untuk setiap Sprite,kemudian menguji tabrakan dan pemisahan. Menggunakan Quadtree berbasisdunia untuk membantu meminimalkan tes tabrakan, anda dapat mencapai hasilyang layak cepat dengan waktu pemrosesan sedikit dibutuhkan.

Namun, kami memahami bahwa ini tidak akan sesuai dengan semua jenispermainan, sehingga sistem fisika mudah untuk mengganti dan tidak ada sifatfisika terikatuntuk Sprite yang sebenarnya (melainkan untuk komponen tubuh),sehingga dapat bertukar keluar untuk seperti Box2D atau p2.js. Sebuah sistemtweening juga bulit-in, yang memungkinan anda untuk tween benda atau sifatmudah. Dan harus jeda pertandingan, maka semua remaja anda akan berhentisecara otomatis dan melanjutkan yan diperlukan.

CONTENTS 29

3.3.7 Plugin

Ini adalah tujuan kami bahwa inti dari phaser akhirnya akan menetap danmemukul keseimbangan stabil bagus, dimana kita tidak mungkin untuk menyen-tuh lebih jauh perbaikan dan pembaruan browser. Namun, kami ingin phasermembawa pada pertumbuhan, menyediakan fitur untuk semua jenis game tapitanpa menyebabkan perpustakaan inti meledak dalam pertumbuhan. Untuktujuan 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 tamba-han yang berguna. Sebuah contoh yang bagus dari hal ini adalah baru baruini merilis plugin yang easystar. Kami akan merilis plugin diri kita sendiri danberharap untuk melihat lebih datang dari masyarakat di masa depan.

3.4 Cara mendownload Phaser

Phaser adalah sebuah proyek open source dan tersedia untuk download secaragratis.Tidak ada biaya untuk membayar ketika menggunakan Phaser, terlepasjika anda menggunakannya untuk proyek komersial atau gratis.

Kami menggunakan github untuk mengelola proyek dan anda memiliki berba-gai pilihan tentang bagaimana untuk mendownloadnya.

“DAPATKAN PHASER DENGAN KLONING REPOSITORI, MERAIHFILE JS ATAU MEN-DOWNLOAD SEMUANYA SEBAGAI ZIP”

Github memberikan opsi untuk men-download seluruh repositori sebagai zipatau 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 waktuyang anda ingin berkontribusi kode terhadap Phaser itu membuat melakukanjauh lebih mudah.

Jika anda tidak suka belajar menggunakan git melalui baris perintah ada be-berapa aplikasi yang besar anda dapat gunakan.DirekomendasikanSmartGitpadaWindows 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 cobadulu, terutama dalam permainan tingkat produksi.

Cabangdevadalah di mana kita bekerja padaversi betadari Phaser. Dalamdevandaakan menemukan fitur eksperimental, perbaikan bug dan perubahan API, be-berapa diantaranya mungkin belum bekerja.Ini cabang life dan breath, seringberubah berkali-kali dalam sehari.Ini juga dimana anda akan melihat fitur mu-takhir yang anda kerjakan.

Kecuali anda tahu bahwa anda perludevselalu menggunakan rilis stabil saatini, yang ditemukan di cabangmaster.

CONTENTS 31

3.4.2 Hello World!

Dengan editor set-up yang anda gunakan, web server diinstal dan Phaser su-dah ter-download saatnya untuk membuat sesuatu dan memeriksa semuanyabekerja.

Anda perlu menemukan di mana ’web root’ anda pada aplikasi anda.Iniadalah folder di mana server mencari file.Jika anda menggunakan WAMP padaWindows anda dapat menemukannya dengan mengklik ikonWAMP dalam sistem-tray dan pilih ”direktori www” dari menu pop-up.server lain akan memilikimetode 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 ’hel-lophaser’ di dalamnya lalu anda akan menemukan sebuah file JavaScript, sebuahindex.html dan PNG.Copy folder ’hellophaser’ ke webroot anda.

3.4.3 Test

Buka browser web anda dan browse ke folderhellophaserdi server lokal. Inimungkin sesuatu yang sederhana seperti mengetik dilocalhost/hellophaseratau127.0.0.1/hel-lophaserke dalam browser anda.Atau anda mungkin perlu untuk menentukannomor port juga, itu tergantung sepenuhnya pada server yang metode set-upyang anda gunakan.

Jika semuanya berjalan benar maka akan muncul area permainan hitamdengan logo phaser di tengah.

Jika tidak untuk alasan apa pun yang anda butuhkan untuk membuka konsoldebug dan melihat apa kesalahan adalah output.Dalam kebanyakan browseranda dapat melakukan ini dengan menekanF12.Ini bekerja di Chrome, Firefoxdan Internet Explorer 11. Periksa untuk melihat apa kesalahan adalah, mudah-mudahan itu yang sederhana seperti file yang hilang, dalam hal memeriksa namafolder anda dan refresh halaman.

Jika itu sesuatu yang lebih kompleks merasa bebas untuk posting tentanghal 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 satucara terbaik bagi orang untuk belajar bagaimana menggunakannya akan meng-hasilkan contoh.Jadi kami berangkat untuk menciptakan banyak contoh yangberbeda, yang mencakup semua bidang utama Phaser.Dari cara set-up animasiuntuk bagaimana menggunakan fisika. Awalnya contoh yang termasuk dalamrepositori Phaser utama.Tapi seiring waktu mereka outgrew ini dan sebaliknyakita memindahkan mereka ke repositori mereka sendiri.Mereka juga tersediauntuk browsing di situs ini.

Contoh Phaser secara online Anda dapat menelusuri semuaContoh Phaserdisitus Phaser.io.Anda juga akan menemukan editor life code, sehingga anda dapat

CONTENTS 32

memodifikasi source dan kembali menjalankan Phaser.io secara realtime untukmelihat perubahan secara langsung.

Phaser Contoh Repository Anda juga dapat men-download setiap con-toh tunggal dari Phaser Example github repository.Phaser akan sangat men-yarankan memiliki salinan ini secara lokal.Karena memungkinkan anda untukmenelusuri kode lebih cepat, dan membuat contoh Anda sendiri.anda juga akanmemiliki seluruh aset yang kami sediakan untuk digunakan dalam permainanpengujian anda sendiri.

Panduan Memulai

Setelah didownload , kami sangat menyarankan anda mengikuti resmi panduanmemulai. Ini akan memandu anda melalui pengaturan web server lokal, memilihlingkungan pengembangan, dan bahkan membangun di awan jika anda begituingin.

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 pengembangandengan dan bagaimana anda dapat membangun game Phaser Anda. Ini akanmencakup menjalankan web server lokal, memilih sebuah IDE, mendapatkanversi terbaru dari Phaser dan memeriksa semuanya bekerja bersama-sama.

”Mengapa saya membutuhkan web server lokal? Bisakah saya hanya dragfile 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 dapatmembawa file ini ke browser anda dan melihat hasil akhirnya. Anda juga dapat

CONTENTS 33

melakukan ”Save As” seluruh halaman web lokal dan membuka halaman weblokal itu kembali dengan keadaan konten yang utuh. Jika kedua hal ini bekerjamengapa tidak dapat anda tarik permainan HTML5 ke dalam browser danmenjalankannya?

Ini harus dilakukan dengan protokol yang digunakan untuk mengakses file.Ketika Anda meminta sesuatu atas web yang Anda gunakan HTTP, dan kea-manan tingkat server cukup untuk memastikan anda hanya dapat mengaksesfile yang anda maksud. Akan tetapi ketika Anda menyeret file di dalamnyadimuat melalui sistem file lokal (secara teknis file:// ) dan yang besar-besarandibatasi, 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 FILEANDA?

Tanyakan pada diri anda: apakah anda benar-benar ingin JavaScript memi-liki 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 bawahfile:// 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 diperlakukansebagai domain lokal yang unik. Itulah sebabnya ”halaman Web lainnya” bek-erja, untuk gelar. Ini membuka di bawah pembatasan lintas-situs yang samaseolah-olah mereka berada di server hidup. Ada bahasan yang lebih rinci ten-tang hal itu pada blog Chromium yang layak dibaca jika Anda ingin mempela-jari lebih lanjut. Permainan anda akan memuat sumber: gambar, file audio,data JSON, mungkin file lainnya JavaScript. Dan untuk melakukan hal iniperlu menjalankannya tanpa hambatan belenggu dari keamanan browser. Perluhttp:// 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 dariexe tunggal.

SKYPE KERAPKALI MENCURI PORT 80 SECARADEFAULT. PASTIKANUNTUK MENGKONFIGURASI ULANG ITU!

Untuk itu direkomendasikan baik WAMP ServeratauXAMPPyang keduanyamemiliki panduan set-up mudah tersedia.WAMP khusus menginstal ikon kedalam sistem-tray anda dimana anda dapat berhenti dan me-restart layanan,serta mengubah pengaturan Apache seperti membuat alias folder baru untuksebuah proyek.

Cesanta menyediakanweb server Mongoose.Ini adalah aplikasi yang sangatkecil yang tidak memerlukan instalasi dan dapat dijalankan sebagai file exe tung-gal.Tanpa semua berkas tambahan seperti SSI dan WebDAV (tidak ada yang

CONTENTS 34

anda perlukan untuk sebuah game HTML5) exe adalah 45KB dalam ukurankecil.Bahkan versi fitur lengkapnya hanya berukuran 355KB.

Bukan sebuah ‘All in One’ bundel anda juga bisa men-download untuk keper-lunan web server itu sendiri.KeduaMicrosoft IISdanApachedapat didownloadsecara gratis.

Catatan:Skype kerap kali mencuri port 80 secara default.Ini adalah port tra-disional untuk web server yang digunakan untuk menjalankannya dan mungkinberhenti WAMP atau seperti bisa dijalankan ketika mau dimulai.Untuk menon-aktifkan ini didalam Skype pergi ke ”Tools - Options - Connection” dan hapuscentang ”Gunakan port 80 dan 443 sebagai alternatif untuk koneksi masuk”.

Catatan:Jika anda menggunakan WAMP Server anda mungkin akan mene-mukan bahwa IE11 menyebabkannya menjadi freeze.

3.5.2 OS X

Berada didalam lingkungan Unix dihati ada lebih banyak pilihan yang tersediadi OS X daripada di Windows.Akan tetapi jika anda ingin ”All in One” sepertiyang terjadi pada WAMP, dengan tampilan yang bersih dan tampilan mudahuntuk digunakan dan juga bagus, maka sangat disarankanMAMP. MAMP initerbagi dalam dua versi: gratis dan berbayar.

Tentu ada juga panduan untuk menyiapkan web server lokal secara man-ual, sepertipanduan ini ditulis untuk Mountain Lion.Memilih mana pendekatanAnda merasa paling nyaman dengan.

3.5.3 Grunt Connect

Gruntadalah alat yang sangat berguna untuk di-instal, tidak peduli apakahanda menggunakannya sebagai web server atau tidak.Pada esensinya adalahJavaScript based task runner dan memungkinkan anda untuk mengotomati-sasi tugas-tugas yang memakan waktu dan membosankan.Dalam penggunaanyadalam Phaser yaitu untuk membangun script distribusi game tersebut.Tetapijuga dapat dikonfigurasi dengan pluginConnectuntuk melayani file 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 ingindipusingkan dengan pengaturan Apache ataupun mengunduh aplikasi, makaPython dapat membantu anda.Python datang dengan built-in server HTTPyang sederhana, yang dapat melayani file dari folder lokal.Tentu satu-satunyahal yang perlu anda butuhkan adalah menginstal Python.

3.5.5 Server Untuk Node.js

Http-serveradalah sesuatu yang sederhana, nol-konfigurasi baris perintah httpserver untuknode.js.Hal ini cukup kuat untuk penggunaan produksi, namun

CONTENTS 35

sederhana dan cukup hackable untuk digunakan untuk pengujian, pengemban-gan lokal dan pembelajaran.Atau sebagai situs web mengatakan ”Melayani filestatis 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 beruru-tan, tapi cukup kuat untuk menguji HTML5 permainan.Ini dipanggil dari satubaris perintah panggilan dan anda dapat menemukan rincian tentang bagaimanauntuk melakukan hal ini di sini di PHP Manual.

Run in the cloud

Jika anda tidak nyaman dengan github kloning, atau menyiapkan web serverlokal, anda dapat menjalankan phaser di Cloud.

Lebih dari sebuah kata kunci pemasaran, banyak pengembang ingin mem-bangun dengan cloud sehingga mereka dapat membuatnya, mengedit dan berbagikonten mereka tanpa harus menginstal apapun.file dan kode mereka tersediatidak peduli perangkat mereka login atau tidak.

Ada beberapa JavaScript aplikasi kolaborasi online sepertiJSBin,codependanJSFiddle.Tapi ini lebih untuk tes cepat skrip tunggal.Untuk lingkunganpengembangan yang lengkap sangat disarankanCloud9.Hal ini memungkinkananda membangun dan berjalan sangat cepat seperti yang anda akan lihat:

Pertama, mendaftar ke situs web menggunakan GitHub, dan setelah ini se-lesai, 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 proyekdari repositori GitHub.

Klik ”Create New Workspace” tombol dan pilih ”clone dari URL” pilihandari 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 mem-buat kode baru.

sekarang anda memiliki salinan lengkap dari repositori Phaser yang dapatanda mengubah seperlunya.

Memilih Editor

Akan dibutuhkan editor dimana untuk mempersiapkan kode JavaScript anda.Adabanyakterse-dia, masing-masing dengan kekuatan dan kelemahan mereka sendiri.Jika Andaseorang pengembang yang berpengalaman anda akan mungkin sudah memilikieditor pilihan anda sendiri, dalam hal membawa ke Bagian 5 dari panduanini.Jika tidak, disini ada beberapa pilihan untuk Anda:

Teks Sublime

CONTENTS 38

Ini adalah editor tim penggunaan Phaser untuk membangun kerangka dansemua proyek.Itu bahkan editor buku ini ditulis didalam. Sublime harus diang-gap 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 tercepatdan paling serbaguna yang pernah kita digunakan dalam harfiahdekadepemban-gunan.

Menggunakan sistem Paket yang komprehensif dapat meningkatkan dalambeberapa cara.Berikut adalahpanduan yang sangat baikuntuk fitur dan paketuntuk 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 ap-likasi mobile hybrid, termasuk game 2D HTML5.fitur XDK Intel khusus untukpengembang game termasuk manajer pertandingan aset, terkait game plug-inAPI, sampel permainan dan template untuk mesin permainan didukung, petun-juk autocompletion di built-in editor kode, dan fitur standar yang tersedia untukpengembang aplikasi menggunakan Intel XDK, seperti aplikasi kemasan untukplatform yang berbeda.

CONTENTS 39

Versi terbaru dari Intel XDK termasuk Phaser template yang built-in dancara-cara mudah untuk ekspor ke semua berbagai toko aplikasi, jadi layak lihat.

3.5.6 WebStorm

JetBrains WebStorm adalah sebuah lingkungan pengembangan lengkap dansangat canggih.Ini melampaui editing kode sederhana dan menawarkan semuafitur tingkat tinggi yang anda harapkan dari sebuah IDE yang tepat.Termasukwawasan kode, NPM built-in, Style code dan laporan sintaks, kontrol sumberdan kekayaan fitur lainnya.Banyak fitur yang dirancang untuk pengembang webdaripada pengembang game, namun masih berguna untuk dipelajari.

Ini semua berdasarkan pada IntelliJ IDEA, editor tingkat tinggi berbasisJava, yang merupakan sebuah hal yang baik dan buruk.Untuk memulai pen-galaman kode editing sebenarnya tidak seperti yang halus dan bentuk yangunik seperti Sublime, Dan non-standar integrasi OS lemah.Tetapi fitur listriksering dapat membuat untuk itu.Memiliki kesalahan dengan kode anda terlihatuntuk anda, bahkan sebelum anda telah diuji permainan anda dapat benar-benar berguna.Dan kode-completion terlalu besar, meskipun jelas agak terbatasdengan berbagai cara JavaScript dapat ditulis.

Studio Visual

Ini harus benar-benar dipertimbangkan jika anda ingin menulis permainan andamenggunakannaskahbukan dari JavaScript.Phaser memiliki naskah definisi men-gajukan tersedia.Hal ini memungkinkan anda untuk menggunakan Microsoftsbaru ES6 bahasa terinspirasi untuk dikembangkan. Ini memberi anda akses kebahasa statis, dengan turunan kelas tradisional, antarmuka dan sebagian besarornamen OO Style anda dapat digunakan untuk dari bahasa lain seperti AS3atau 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 danLinux. Ini sebenarnya ditulis dalam JavaScript dan sangat hackable, denganversi baru dan ekstensi dirilis setiap beberapa minggu.Memiliki UI modern dangelap, mungkin akrab dengan siapa saja yang menggunakan Adobe CreativeSuite.Layak mempertimbangkan, terutama jika Anda setelah editor gratis.

CONTENTS 40

3.6 Membuat Permainan Pertama Anda

Dengan lingkungan pengembangan anda mengatur, saatnya untuk membangunpermainan. Kami sarankan mulai dengan membuat phaser game pertama anda.Tutorial ini akan memandu anda melalui proses menciptakan permainan plat-form sederhana, memperkenalkan anda dengan konsep inti dari bagaimananphaser bekerja dan membuat anda siap siap untuk memperluas itu dan beljarlebih banyak.

Bila anda checkout atau mendownload phaser, itu akan datang dengan kamicontoh suite. Ini adalah situs web mandiri yang terdiri lebih dari 170 contohkode yang berbeda, membagi menjadi bintang utama seperti fisika, tabrakan,sprite, text dan banyak lagi. Setiap contoh adalah sepotong mandiri sepenuhnyabekerja kode yang anda dapat membuka, mudah mengedit, dan belajar. Digu-nakan bersama dengan dokumentasi API, ini adalah jalur cepat untuk cepatbelajar tentang bagian bagian tertentu dari phaser.

CONTENTS 41

Dokumen API

Dokumen API yang tersedia dalam repositori dalam folder docs. Kami telahbekerja keras pada dokumen selama ini beberapa bualn dari sekarang dan se-mentara masih sedikit kasar di sekitar tepi, komprehensif, mencakup seluruhkerangka.

Rilis terbaru (1.1.3) melihat pembaruan besar lain untuk mereka, denganbanyak 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 JSHintsebelum rilis. Kami menyediakan file konfigurasi kan di repositori juga.

JSHint adalah cara bagi kita untuk memastikan bahwa kode kerangka berikutseperangkat tetap pedoman pada struktur kode, dari cara kita menangani tabdan lekungan untuk variabel dan gaya kutipan. Mereka yang ingin berkon-tribusi terhadap Phaser harus memerika pembaruan mereka terhadap konfig-urasi JSHint kami.

CONTENTS 42

Langkah Selanjutnya

Jika memahapi menagapa Phaser besar, apa yang penulis bertujuan untuk mem-buat game dengan Phaser. Tetapi aspek yang paling penting dari kerangkapermainan tidak begitu banyak fitur itu olahraga atau demo dari teknologi, itumasyarakat di belakangnya.

Membuat game adalah kerja keras, periode. Dan itu bahkan sulit untukdilakukan dalam isolasi, dengan merek kerangka kerja baru yang hampir pastibekerja secara berbeda dari apapun yang penulis telah gunakan untuk masa lalu.Untungnya, Phaser memiliki komunitas yang berkembang bedarkan sekitarnyadan semakin majunya zaman ini.

HTML 5 Pengembangan Game Forum

Dengan didirikan forum HTML 5 Pengembangan Game beberapa saatu yanglalu, tidak secara khusu untuk Phaser, tetapi hanya karena membuat HTML 5permainan adalah sebuah wilayah baru yang kami ingin dapat berbicara dengnaorang 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 untukPhaser, dan akan menemukan banyak rekan developer yang ramah untuk bangkitide dan pertanyaan. Forum ini juga rumah bagi perpustakaan besar lainnyatermasuk Pixi.js dan kerangka Babylon.js 3D, dan ada yang besar PermainanShowcase daerah untuk memamerkan apapun yang membuat menjatuhkan olehmereka setiap hari adalah sumber inpirasi bagi penulis, dan itu benar-benarbagus untuk melihat apakah developer menglola untuk mendapatkan HTMLuntuk melalukan hari ini.

CONTENTS 43

Laporan berkala

Phaser dirilis sebulan sekali dengan berisi rincian tentang rilis baru, artikelsingkat tentang topik Phaser baru dan plugin dan tutorial. Berlangganan ,bebas dan dikelola melalui Campaign Monitor, sehingga penulis dapat yakintidak ada spam dan cara mudah untuk berhenti berlangganan jika penulis ingin.

Menyumbang

Penulis dapat membantu membentuk cara dimana Phaser tumbuh. Jika andamenemukan big, tolong laporkan pada developer Phaser. Ini tidak akan mem-bawa lama, dan sampai saat ini kami tetap lebih dari 91% dari semua masalahyang dilaporkan (dan kami masih bekerja di sisi lain 9%). Penulis juga dapatmengeluarkan permintaan tarik terhadap pengembangan cabang, atau melepaskanplugin penulis sendiri atau filter.

Tampilkan Dengan Game

Developer menghabiskan berjam-jam tak kenal lelah bekerja pada Phaser karenadeveloper ingin menjadi lebih baik dalam kerangka pembangunan HTML 5 per-mainan itu mungkin bisa. Developer memahami itu tidak akan cocok untuksemua orang, dan kami dengan itu. Tetapi jika penulis menggunakan dan mem-buat 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 jangkauaknuntuk kita di forum , melalui Twitter atau dengan email kebanyakan dari semua,developer berharap pemain bersenang-senang membuat permainan ini untuk se-mua.

3.7 Cara Instalasi Phaser

• Download terlebih dahulu game engine phaser, bisa buka di phaser.io pilihdownload 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 kitaakan 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 se-belumnya dari aplikasi yang di instal dan anda tidak menghapus databaseketika 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-upgrademenggunakan informasi dari database anda saat ini dan jika instalasi terakhiradalah untuk akun yang sama dan dikonfigurasi dengan benar untuk instalasibaru.

Create New Database

Membuat database baru jika anda ingin membuat database baru. Dengan pil-ihan ini aplikasi panggung database anda saat ini, tetapi anda masih perlumengkonfigurasi aplikasi dan mencari printer lagi untuk database baru anda.Gunakan pengaturan ini jika akun yang digunakan untuk instalasi sebelumnyatidak diketahui, berbeda dengan akun baru atau konfigurasi jika anda inginmemulai dengan instalasi yang bersih dengan pengaturan default.

• Klik install pada pada tampilan instalasi

Note : Jika anda menginstal aplikasi pada sistem operasi dalam bahasa lainselain bahasa inggris dimana “Program Files” nama direktori terlokalisir, pathdefault 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 kitaklik finish. Jika pada checkbox di ceklis maka phaser akan langsung berjalanjika tidak phaser tidak akan langsung berjalan.

3.8 Salah Satu Manfaat Game Phaser

Salah satu manfaat utama dari Platform Smart TV berbasis OS Tizen platformperangkat lunak adalah bahwa penyanyi berbasis web (HTML5), sehingga bisamengambil keuntungan penuh dari banyaknya perpustakaan milik pihak ketigayang ada pada ekosistem development web.Salah satu perpustakaan dari pi-hak ketiga adalah Phaser, kerangka permainan Berbasis HTML5 untuk reviewdevelopment game mobile PC dan dekstop.Berkat OS Tizen, kini Phaser bisadigunakan untuk review membuat permainan buat Smart TV.

Tim riset samsung untuk review produk TV di amerika utara baru-barupenyanyi nya menemukan fakta pada penyanyi ketika mengadakan Tizen TVHackathon.Sesi penyanyi menghasilkan beberapa demo yang bisa digunakan un-tuk review belajar tentang development HTML5 dan Tizen TV.

CONTENTS 48

Gambar 1Nenek bakeryadalah permainan yang menantang pemain untuk review men-

cocokkan tiga makanan penutup untuk review mencetak poin.SedangkanSimonsaysadalah versi permainan untuk review pertandingan Smart TV dari klasikYang mengajak pemain untuk review mengingat dan mengulangi urutan polawarna.

Gambar 2Pada riset Samsung penulis banyak belajar dari beberapa kasus tentang

cara efektif pada membuat permainan platform untuk review TV.Satu pela-jaran adalah bahwa desain aplikasi harus dioptimalkan untuk review masukan

CONTENTS 49

perangkat TV (Remote Control).Pengalaman pengguna untuk review perangkatseluler (Berbasis Sentuhan) sangat jauh berbeda dari TV.

Pelajaran berbaring adalah bahwa elemen UI di Layar TV harus lebih be-sar dan lebih jelas dari pada perangkat seluler karena resolusi dan jarak pa-gar pandangan.Sebuah TV dianggap sebagai ”Interface 10 kesemek”, yang be-rarti bahwa penonton biasanya duduk dengan jarak pagar 10 kesemek dari TVmereka. Teks dan grafis yang terlihat baik pada layar PC / ponsel mungkintidak terbaca di TV karena jarak pagar adanya.

BAB 4

50

Permainan PelarianMenggunakan Phaser

Setiap langkah diedit, sampel hidup yang tesedia untuk bermain dengan begitu,anda dapat melihat apa tahap mengah harus terlihat seperti ini. Anda akanmempelajari dasar-dasar menggunakan kerangka Phaser menerapkan permainanmekanik dasar seperti rendering dan gambar, deteksi tabrakan, mekanisme kon-trol, fungsi pembantu, kerangka khusus, animasi dan remaja bergerak, danmenang dan kalah permainan.

Untuk dapat hasil maksimal anda harus memiliki dasar untuk menggunakanpengetahuan JavaScript. Setelah bekerja melalui tutorial ini anda harus dapatmembangung permainan web sederhana sendiri menggunakan phaser.

Gambar 1

4.1 Rincian Pelajaran

semua pelajaran dan versi yang berbeda dari pemainan MDN Breakout kitasedang 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 JavaScriptadalah cara terbaik untuk mendapatkan pengetahuan yang kokoh dari pengem-bangan web game. Jika anda belum terbiasa dengan pengembangan gameJavaScript murni, Kami sarankan agar anda pertama belajar menggunakanJavaScript

Setelah itu, Anda dapat memilih kerangka apapun yang anda suka den-gan mengunakannya untuk proyek-proyek anda. Penulis telah memilih Phaserkarena merupakan kerangka kerja yang solid dan baik, dengan dukungan yangbaik dari komunitas yang tersedia, dan baik set plugin. Kerangka mempercepatwaktu 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 terjadiatau anda ingin menulis beberapa fungsi kerangka tidak menyediakan, andaakan memerlukan beberapa pengetahuan JavaScript.

1. Menginisialisasi Kerangka

Ini adalah langkah 1 dari 16 dari tutorial gamedev Phaser. Sebelum masukmenulis fungsi permainan, kita perlu membuat struktur dasar untuk mem-buat permainan dalam. Hal ini dapat dilakukan dengan menggunakan HTML- kerangka Phaser akan menghasilkan di perlukan <canvas> elemen.

CONTENTS 53

Permainan HTML

Struktur dokumen HTML cukup sederhana, karena permainan akan diberikansepenuhnya pada <canvas> elemen yang di hasilkan oleh framwork. Menggu-nakan editor teks favorit anda, membuat dokumen HTML baru, simpan sebagaiindex.html di lokasi yang masuk akal dan tambahkan kode berikut.

Gambar 2

Download Kode Phaser

Selanjutnya, kita perlu untuk melalui proses download source code Phaser danmenerapkan 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 puladan anda tidak mungkin perlu untuk menambahkan di dalam kode sum-ber.

3. Menyimpan kode Phase di dalam/js langsung dilokasi yang sama dengananda index.html berkas

4. Uprage src nilai pertama <script> elemen yang di tunjukan yang di per-lukan.

Berjalan Melalui Apa yang Sejauh ini Dimiliki

Pada titik ini kita memiliki charset didefinisikan <title> dan beberapa CSSdasar di header untuk mereset default margin dan padding. Phaser juga memi-liki <script> selemen untuk menerapkan kode sumber Phaser ke halaman.Tubuh berisi dua <script> elemen, di mana kita akan menulis kode JavaScriptuntuk membuat permainan dan mengendalikannya.

<canvas> elemen di hasilkan secara otomatis oleh framwork. Kami mengin-isialisasi dengan menciptakan Phaser baru. Game objek dan menugaskan kevariabel permainan, parameter adalah:

• Lebar dan tinggi untuk mengatur <canvas> untuk.

CONTENTS 54

• Metode rendering. Tiga pilihan lain AUTO , CANVAS dan WEBGL.Kita dapat menerapkan satu dari dua terakhir secara eksplisit atau meng-gunakan AUTO membiarkan Phaser memutuskan mana yang akan di gu-nakan. Ini biasanya menggunakan WebGL jika tersedia di browser , makakembali ke Canvas 2D jikta tidak.

• Dari <canvas> digunakan untuk rendering jika sudah ada dihalaman(kami telah ditentukan nol karena kami ingin Phaser membuat sendiri).

• Nama-nama yang di gunakan untuk tiga funsi Phaser yang mebuat danmemulai permainan, dan memperbaharui loop perminan pada setia frame; kita akan menggunakan nama yang sama untuk tetap bersih.

– preload mengurus preloading aset

– create dijalankan sekali ketika semuanya dimuat dan siap

– updatedijalankan pada setiap frame

2. Scaling

Ini adalah langkah 2 dari 16 dari tutorial gamedev Phaser. Scaling mengacumemiliki kanvas permainan akan skala pada ukuran layar yang berbeda. Kitabisa membuat sekali permainan untuk muat pada ukuran layar secara otomatisselama tahap preload, jadi kita tidak perlu khawatir tentang hal itu kemuadia.

Objek Skala Phasar

Ada Scale Objek yang tersedia di Ohaser dengan metode praktis sedikit danproperti yang tersedia Update Preload () berfungsi sebagai berikut :

Gambar 3ScaleMode memiliki beberapa pilihan yang berbeda tersedia untuk bagaimana

Canvas dapat ditingkatkan:

• NO SCALE - tidak ada yang bersisik.

• EXACT FIT - Skala kanvas untuk mengisi semua ruang yang tersedia baiksecara bertikal maupun horizontal tanpa menjaga aspek rasio.

• SHOW ALL - Sisik kanvas, Namun tetap rasio aspek tersentuh, sehinggagambar tidak akan miring seperti dimode sebelumnya. Mungkin ada garis-garis hitam terlihat di tepi layar, tapi kita bisa hidup dengan itu.

• RESIZE - menciptakan kanvas dengna ukuran yang sama dengan lebaryang tersedia dan tinggi, sehingga anda harus menempatkan objek dalampermaianan anda secara dinamis, hal ini adalah lebih dari sebuah modelanjutan.

CONTENTS 55

• USER SCALE - memungkinkan anda untuk memiliki skala kustom di-namis, menghitung ukuran, skala dan rasio pada anda sendiri, ini adalahlebih dari sebuah mode lanjutan

Dua baris lain kode di preload() fungsi bertanggung jawab untuk menyelaraskanelemen kanvas horizontal dan bertikal, sehingga selalu berpusat pada layar ter-lepas dari ukuran.

Menambahkan Warna Kostum Kanvas Latar

Kami juga dapat menambahkan warna latar belakang kostum ke kanvas kita,sehingga tidak akan tingagl hitam. Objek memiliki background Color propertiuntuk tujuan ini, yang kami akan diatur menggunakan sintaks definisi warnaCSS. Tambahkan baris berikut dibawah tiga lainnya anda menambahkan se-belumnya.

Gambar 4

3. Memuat Aset Dan Menceteknya di Layar

Ini adalah langkah 3 dari 16. Permainan Phaser akan menampilkan sebuah bolayang menggelinding di sekitar layar, memantul dari dayung, dan menghacurkanbatu bata untuk mendapatkan point ya familiar

Memiliki Bola

Mari kita mulai dengan menciptakan sebuah variabel JavaScript untuk mewakilibola yang di tambahakan baris berikut antar kode permianan inisialisasi danpreload () fungsi.

• var ball: var bola;

Memuat Spire Bola

Memuat gambar dan menteak mereka diatas kanvas kami jauh lebih mudahmenggunakan Phaser daripadamengggunakan JavaScript. Untuk membuat aset,kita akan menggunakan game objek yang diciptakan oleh Phaser, mengek-sekusinya load.image() metode. Tabahkan baris baru berikut hanya di dalampreload() fungsi, di bagian bawah:

Gambar 5Parameter pertama adalah nama kami ingin memberi aset ini akan di gu-

nakan di seluruh kode permianan kami misalkan kami ball nama bariabel, jadi

CONTENTS 56

kami harus memastikan itu adalah sama. Parameter kedua adalah jalan re-latif terhadap aset grafis. Dalam kasus kami, kami akan memuat gambar untukbola kami (perhatikan bahwa nama file tidak juga harus sama, tetapi kamiakan merekomendasikan hal ini karena membuat segalanya lebih mudah untukmengikuti).

Tentu saja, untuk memuat gambar itu harus tersedia dalam direktori kitadan menyimpannya didalam sebuah /img direktori ditempat yang sama sepertitadi index.html adalah sebuah berkas.

Sekarang, untuk menunjukkan di layar kita akan menggunakan metode Phaserlain yang disebut add.spite() : tembhakan mengikuti garis kode baru dalam cre-ate() fungsi seperti yang ditunjukan:

Gambar 6Ini akam menambahkan bola permainan dan membuat itu di layar. Dua

parameter pertama adalajh x dan koordinat y dari kanvas anda inginkan tam-bahkan dan yang ketiga adalah nama dari aset kita deginikan sebelumnya. itusaja jika anda membuat indexhtml file yang akan melihat gambar yang sudahdi muat dan di berikan kanvas.

4. Pindahkan Bola

ini adalah langkah ke 4 dari 16. Kami meiliki bola biru kami dicetak dilayar,tapi itu melakukan menjadi dingin dan bergerak entah bagaimana. ha itu akandi bawah di point 4 yaitu pindahkan bola.

Memperbarui Posisi Bola Pada Setiap Frame

Ingat update () fungsi dan definisinya. Kode didalamnya dijalankan pada setiapframe jadi hal itu menjadi tempat yang sempurna untuk menempatkan kodeyang akan di perbaharui posisi bola di layar. Tambahkan baris baru berikut kedalam update() seperti yang ditunjukan :

Gambar 7Kode diatas menambahkan 1 ke x dan y sifat yang mewakili koordinat bola

dikanvas, pada setiap frame. Reload index.html dan akan melihat bola bergulirdi layar.

5. Fisika

Ini adalah langkah ke 5 dari 16. Untuk deteksi tabrakan yang tepat antaraobjek dalam permainan kami, kami akan perlu memiliki fisika.

CONTENTS 57

Menambhakan Fisika

Phaset di bunder dengan tiga mesin fisika yang berbeda yaitu ARcade Fisika,P2 dan Ninja Fisika dengan pilihan keempat Box2D menjadi tersedia sebagaiplugin komersial Untuk game sederhana seperti kita, kita dapat menggunakanmesin Arcade Fisika. Kami tidak membutuhkan perhitungan geometri berat ,setelah semua itu hanya bola memantuk dari dinding dan batu bata.

Pertamam. mari kita menginisialisasi mesin Arcade Fisika dalam perminankami. Tambahkan physics.startSystem() metode awal create fungsi (membuatbari pertama dalam fungsi), seperti di tunjukan di bawah ini.

• game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.start-System (Phaser.Physics.ARCADE);

Selanjutnya, kita harus mengaktifkan bola kami untuk sistem fisika , Phaserobjek fisika tidak diaktifkan secara default. Tambhakan baris berikut padabagian bawah create() fungsi :

• game.physics.enable(ball, Phaser.Physics.ARCADE); game.physics.enable(bola, Phaser.Physics.ARCADE);

Selanjutnya, Jika kita ingin memindahkan bola kami di layar, kita dapat men-gatur velocity padanya body. Tambhakan baris berikut, Lagi di bagian bawahcreate ():

• ball.body.velocity.set(150, 150); ball.body.velocity.set (150, 150);

Menghapus Petunjuk Update Kami Sebelumnya

Ingatlah untuk menghapus metode lama kami menambhakan nilai ke X dan ydari update () fungsi:

Gambar 8Kita sekarang menangani ini dengan bagi dengan baik dengan mesin fisika.

Cek Kode Akhir

Kode terbaru akan terlihat seperti ini:

CONTENTS 58

Gambar 9Coba muat ulang index.html lagi , bola sekarang harus bergerak terus dalam

arah tertentu. Saat ini, mesin fisika memiliki gravitasi dan gesekan diatur kenol. Menambahkan gravitasi akan menghasilkan bola jatuh kebawah sementaragesekan akhirnya akan menghentikan bola.

Menyenangkan dengan Fisika

Anda dapat melakukan lebih banyak lagi dengan fisika, misalnya dengan menam-bahkan ball.body.gravitasy.y = 100; anda akan mengatur gravitasi vertikal bolaakibarnya itu akan diluncurkan ke atas, tetapi kemuadian jatuh karena efekgravitasi menariknya ke bawah.

fungsi semacam ini hanyalah punyak gunung es , ada berbagai fungsi danvariabel yang dapat membantu anda memanipulasi objek fisika, Memerikasaresmi dokumentasi fisika dan melihat koleksi contoh menggunakan Arcade danP2 sistem fisika.

6. Memantul dari Dinding

Ini adalah langkah 6 dari 16. Sekarang fisika yang telah diperkenalkan, kita da-pat mulai menerapkan tabrakan ke dalam permainan, pertama kita akan melihatdinding.

Memantul dari Batas - Batas Dunia

Cara termudah untuk mendapatkan bola kami memantul dari dinding adalahuntuk memberitahu kerangka yang ingin kita memperlakukan batas - batas<canvas> elemen sebagai dinding dan tidak membiarkan bola bergerak mele-wati mereka. Dalam Phaser ini dapat dengan mudah dicapai menggunakan col-lideworldsbound properti. Tambahkan baris ini tepat setelah ada game.physics.en-able() metode panggilan :

• ball.body.collideWorldBounds = true; ball.body.collideWorldBounds = true;

CONTENTS 59

Sekarang Bola akan berhenti di tepi layar bukannya menghilang, tetapi tidakterpental untuk membuat ini terjadi kita harus mengatur bouncinessnya. Tam-bahkan baris berikut di bawah ini yang sebelumnya.

• ball.body.bounce.set(1); ball.body.bounce.set (1);

Coba muat ulang index.html lagi , sekarang anda akan melihat bola memantukdari semua dinding dan bergerak di dalam area kanvas.

7. Pemain Dayung Dan Kontrol

Ini adalah langkah ke 7 dari 16. Kami memiliki bola bergerak dan memantuldari dinding, tapi dengan cepat akan membosankan dan tidak ada interaktivitas.Kita perlu cara untuk mempernalkan gameplay sehinggal dalam artikel ini kitaakan membuat dayung untuk bergerak dan memantul bola.

Rendering Dayung

Dari sudut kerangka pandang dayung sangat mirip dengna bola, kita perlumenambahkan variabel untuk mewakili itu, memuat aset gambar yang relevandan kemudian melakukan keajaiban.

Memuat Dayung

Pertama, tambahkan paddle variabel kita akan menggunakan dalam permainankai tepat setelah ball variabel:

• var paddle; var dayung;

Kemudian dalam preload fungsi, memuat paddle gambar dengna menambahkanberikut baru load.image() panggilan:

Gambar 10

Menambahkan Dayung Grafis

Hanya supaya kita jangan lupa pada titik ini , anda harus ambil grafis dayungdari Github, dan menyimpannya dalam folder /img.

Rendering dayung dengan Fisika

Selanjutnya, kita akan init dayung kita dengan menambahkan berikut add.sprite()panggilan dalam create () fungsi , menambahkannya tepat dibagian bawah:

CONTENTS 60

• paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, ’pad-dle’); dayung = game.add.sprite (game.world.width * 0,5, game.world.height-5, ’paddle’);

Kita dapat menggunakan world.width dan world.height nilai untuk posisi dayungpersis dimana kita inginkan : game.world.width*0.5 akan tepat di tengah - ten-gah layar. Dalam kasus ini adalah dunia sama dengan kanvas, tapi untuk jenispermainan lainnya, sperti sisi scrollers misalkan dunia akan menjadi lebih be-sar dan anda dapat bermain-main dengan itu untuk menciptakan efek yangmenarik.

seperti yang anda akan melihat jika anda memuat ulang index.html padasaat ini, dayung saat ini tidak persis di tenah . Mengapa? Karena jangkardari mana posisi dihitung selalu dimulai dari tepi kiri tas objek. Kita bisamengibah itu untuk memiliki jangkar di tengah lebar dayung dan di bagiandibagian bawah itu tinggi, sehingga lebih mudah untuk posisi itu terhadap tepibawah. Tambahkan baris berikut di bawah baru sebelumnya:

• paddle.anchor.set(0.5,1); paddle.anchor.set (0.5,1);

Dayung sekarang diposisikan tepat dimana kita ingin menjadi. Sekarang, un-tuk membuat bertabrakan dengan bola kita harus mengaktifkan fisika untukdayung. Lanjutkan dengan menambhakan barus baru berikut, lagi di bawahbawah create() fungsi.

• game.physics.enable(paddle, Phaser.Physics.ARCADE); game.physics.en-able (dayung, Phaser.Physics.ARCADE);

Sekarang sihir dapat mulai terjadi, kerangka bisa mengurus memeriksa tabrakanpada setiap frame. Untuk mengaktifkan tabrakan antara pemukul dan bola,Tambahkan collide() metode untuk update() fungsi seperti yangdi tunjukan:

Gambar 11Parameter pertama adalah salah satu objek yang kita tarik dalam kasus

bola, dan yang kedua adalah yang satu dayung. Ini bekerja tapi tidak cukupseperti yang kami harapkan untuk ketika bola menyetuh pemukul. Pemukuljatuh dari layar, yang kami inginkan adalah bola memantuk dari dayung dandayung tinggal di tempat yang sama. Kita dapat mengatur body dari dayngdan dayung tinggal di tempat yang sama. Kita dapat mengatur body daridayung menjadi immovable, sehingga bola tidak akan bergerak ketika itu hitsitu. Untuk melakukan hal ini, Tambahkan dibawah garis bawah create() fungsi:

• paddle.body.immovable = true; paddle.body.immovable = true;

Sekarang bekerja seperti yang diharapkan.

CONTENTS 61

8. Permainan Telah Berakhir

Ini adalah langah ke 8 dari 16. Untuk membuat permainan lebih menarikkita bisa memperkenalkan kemampuan untuk menurunkan , jika anda tidakmemukul bola sebelum mencapai tepi bawah layar akan game over.

Cara Menurunkan

Unntuk memberikan kemampuan untuk kalah, kita akan menonaktifkan tabrakanbola dengan ujung bawah layar. Tambahkan kode berikut dalam create() fungsi;hanya setelah anda menentukan atribut bola saja:

• game.physics.arcade.checkCollision.down = false; game.physics.arcade.check-Collision.down = false;

Ini akan membuat tiga dinding (atas, kiri dan kanan ) bangkit bola kembali tapikeempat (bawah) akan hilang, membiarkan bola jatuh dari layar jika dayungmemerlukan itu. Kita perlu cara untuk mendeteksi ini dan bertindak sesuaisettingan. Tambhakan baris berikut tepat di bawah baru sebelumnya:

Gambar 12Menambahkan garis - garis akan membuat bola memerksa dunia (dalam

kasus kanvas) batas dan melaksanakan fungsi terikat pada onoutofbounds acara.Ketika anda mengklik pada peringatan yang dihasilkan, halaman akan dimuatulang sehingga anda dapat bermain lagi.

9. Membangun Bidang Bata

Ini adalah carake 9 dari 16. Membangun bidang batu bata adalah sedikit lebihrumit daripada menambhakan satu objek ke layar, meskipun itu masih lebihmudah dengan Phaser dari dalam JavaScript. Mari kita menjelajah cara mem-buat sekelompok batu bata dan mencetaknya di layar menggunakan loop

Mendefinisikan Variabel Baru

Pertama, Mari kita mendefinisikan variabel yang di butuhkan , tambahkanberikut di bawah ini definisi variabel sebelumnya:

Gambar 13Variabel akan digunakan untuk membuat grup, newBrick akan menjadi ob-

jek bari ditambahkan kegrup pada setiap iterasi dari loop dan brickinfo akanmenyimpan semua data yang kita butuhkan.

CONTENTS 62

Rendering Gambar Dta

Selanjutnya, mari kita membuat gambar dari batu bata , tambahkan berikutload.image() panggilan cepat di bawah ini adalah:

Gambar 14Anda juga perlu ambil gambar bata dari Github dan menyimpannya dalam

direktori /img direktori.

Menggambar Batu Bata

Kami akam menempatkan semua kode untuk menggambar batu bata di dalaminitBricks fungsi untuk tetap terpisah dari kode. Menambahkan panggilan keinitBricks di akhir create() fungsi:

Gambar 15Sekarang ke fungsi itu sendiri. Tambahkan initBricks() fungsi pada akhir

kode permainan kami, sebelum menutup </script> tag, seperti yang ditunjukandi bawah ini. Untuk mulai dengan kami menyertakan brickInfo objek, karenahal ini akan berguna segera.

Gambar 16Ini BrickInfo objek akan menampung semua informasi yang kita butuhkan:

lebar dan tinggi dari batu bata tunggal, Jumlah baris dalam kolom dari batubata kita akan melihat di layar atas dan kiri offset (lokasi di kanvas di manakita akan mulai menarik batu bata) dan padding antara setiap baris dan kolobatu bata.

Sekarang, Mari kita mulai membuat batu bata sendiri , menambahkan grupkosong pertama yang berisi batu bata dengan menambahkan baris berikut dibagian bawah initVrick() fungsi:

• bricks = game.add.group(); batu bata = game.add.group ();

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

CONTENTS 63

Gambar 17Dengan Cara ini kita akan membuat jumlah yang tepat dari batu bata yang

kita butuhkan dan semua yang terkandung dalam sekelompok. Sekarang kitaperlu menambahkan beberapa kode di dalam loop structure bersarang untukmenarik setiap batu bata. isikan seperti berikut :

Gambar 18Di sini kita perulangan melalui baris dan kolom untuk membuat batu bata

baru dan menempatkan mereka di layar. Bata yang baru di buat di aktigkanuntuk mesin fisika Arcade, itu butuh di atur menjadi tidak bergerak (sehinggatidak akan bergerak ketika terkena bola), dan kami juga menetapkan jangkarberada di tengah di menambahkan bata di grup.

Masalahnya saat itu adalah bahwa kita melukis seua batu bata di satu tem-pat, di koodinat (0.0) apa yang perlu kita lakukan adalah menggambarkan se-tiap bata pada X sendiri dan posisi y. Update brickx dan brick Y baris sebagaiberikut :

Gambar 19Setiap brickx posisi yang bekerja sebagai brickInfo.width di tambah brick-

Info.padding , di kalikan dengan jumlah baris r , di tambahkan brickInfo.off-set.left , logika untuk brick y identik keciali membawah ia menggunakan nilai -nilai untuk jumlah kolom, brickInfo.height dan brickInfo.top . Sekarang setiapbatu bata tunggal dapat ditempatkan di tempat yang benar dengan bantalanantara masing - masing batu bata dan di tarik pada offset dari terpi kanvas kiridan atas.

10. Tabrakan

Ini adalah langkah 10 dari 16. Sekarang ke tantangan berikutnya , deteksitumbukan antara bola dan baru bata. Untungnya cukup kita dapat menggu-nakan mesin fisika untuk memeriksa tabrakan tidak hanya antara objek tunggal(seperti bola dan dayung) tetapi juga antara objek dan kelompok

Tambrakan Bata / Bola

Mesin fisika membuat segalanya jauh lebih mudah , kita hanya perlu menamb-hakan dua buah kode sederhana. Pertama, tambahkan baris baru di dalam up-date () fungsi yang memeriksa untuk deteksi antara bola dan batu bata seperti

CONTENTS 64

yang di tunjukan di bawah ini :

Gambar 20Posisi bola dihitung terhadap posisi semua batu bata dalam kelompok. Yang

ketiga, parameter opsional adalah fungsi dijalankan ketuka tabrakan terjadiballHitBrick() membuat fungsi baru ini sebagai bawah kode sebelum menutup</scrip> tag, sebagai berikut

Gambar 21Dan hanya itu , reload kode anda dan harus melihat tabrakan baru bekerja

sama diperlukanBerkat Phaser ada dua parameter yang dikirimkan ke fungsi yang pertama

adalah bola yang kami sekplisit didefinisikan dalam metode bertabrakan, danyang kedua adalah batu bata tunggal dari kelompok batu bata yang bertabrakandengan bola. Dalam fungsi kita menghapus batu bata tersebut dari layar hanyajdengan menjalankan kill() metide di atasnya.

Anda harapkan untuk harus mnulis lebih banyak perhitungan anda sendiriuntuk melaksanakan deteksi tabrakan ketika menggunakan JavaScript. Itu-lah keindahan mengguanakan kerangka anda dapat meninggalakn banyak kodemembosakan untuk Phaser dan fokus pada yang paling menyenangkan danmenarik dari pembuatan game.

11. Nilai

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

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’, fill:’#0095DD’ }); scoreText = game.add.text (5, 5, ’Tempat: 0’, {font: ’18pxArial’, 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 kasusukami teks skor akan berwarna biru, berukuran di 18 piksel dan menggunakanfont Arial.

Memperbaharui Skor Ketika Baru Bata Hancur

Kami akan meningkatkan jumlah poin setiap kali bola menyentuh batu batadan mempengaruhi scoreText untuk menampilan skor saat ini. Hal ini dapatdilakukan dengan menggunakan setText() metode , tambahkan dua barus baruyang terlihat di bawah ke ballHitVrick() fungsi:

Gambar 23Itu 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 adalahhal 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 24loop 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 menampilkanpesan menang, restart permainan setelah peringatan tersebut diberhentikan.

13. Kehidupan Ekstra

Ini adalah langkah ke 13 dari 16. Kita bisa membuat permainan menyenangkanbagi yang lain untuk menambahkan kehidupan. Sehingga pemain dapat terusbermain sampai mereka telah kehilangan tiga kehidupan, bukan hanya satu.

Variabel Baru

Menambahkan variabel baru berikut di bawha ini yang sudah ada adlam kodeanda.

Gambar 25Ini masing- masing akan menyimpan jumlah nyawa, label teks yang menampilkan

jumlah nyawa yang tetap, dan label teks yang akan ditampilkan pada layar saatpemain kehilangan satu dari kehidupannya.

Mendefinisikan Label Teks Baru

Mendefinisikan teks terlihat seperti sesuatu yang kita sudah lakukan di skorpelajaran. Tambahkan baris berikut di bawha ada scoreText definisi dalamcreate() function:

Gambar 26livesText dan lifelostText benda terlihat sangat mirip dengan scoreText satu,

mereka menentukan posisi pada layar, tels yang sebenarnya untuk menampilkandan sytling font. Yang pertama berlabuh di tepi atas hak untuk menyelaraskandengan benar dengan layar dan yang teakhir berpusat, baik menggunakan an-chor.set ()

lifelostText akan ditampilkan hanya ketika hidup gilang sehingga visivilitasawalnya 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 fontatau warna kita harus melakukannya di banyak tempat. Untuk membuatnya

CONTENTS 67

lebih mudah bagi kita untuk mempertahankan dimasa depan kita dapat mem-buat sebuah variabel terpisah yang akan mengadakan styling kami, sebut sajatextStyle dan tempat itu sebelum definisi teks:

• textStyle = { font: ’18px Arial’, fill: ’#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 denganbariabel:

Gambar 27Dengan cara ini mengubah font dalam satu variabel akan menerapkan pe-

rubahan untuk setiap tempat itu diginakan.

Kehidupan Kode Penanganan

Untuk menerapkan hidup dalam permaianan kami, mari kita pertama men-gubah fungsi bola terikat pada onoutofbounds acara. Alih - alih menjalankanfungsi anonim dan menunjukan peringatan segera:

Gambar 28kami akan menerapkan fungsi baru yang disebut ballleaveScreen ; menghapus

event sebelumnya handler (ditampilkan di atas) dan menggantikannya denganbaris 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() definisi fungsi di akhir kode kita;

Gambar 29Alih - alih langsung mencetak peringatan ketika anda kehilangan kehidupan,

pertama kita kurangi satu lehidupan dari jumlah saat ini dan memeriksa apakahitu nilai non-nol. Jika ya, maka pemain masih memiliki beberapa kehidupan kiridan 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 atausentuhan) pesan akan disembunyikan dan bola akan mulai bergerak lagi.

Ketika jumlah nyawa yang tersedia mencapai nol, permainan berakhir danpermainan lebih pesan peringatan akan ditampilkan.

Acara

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

14. Animasi Dan Remaja

Ini adalah langkah ke 14 dari 16. Untuk membuat permainan terlihat lebihjuicy 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 permainankami.

Animasi

Dalam Phaser animasi melibatkan mengambil spritesheet dari sumber ekster-nal dan menampilkan sprite berurutan. Sebagai contoh, kita akan membuatgoyangan 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 untukmenciptakan ilusi animasi.The spritesheet() dua paremeters tambahan metodeini menentukan lebar dan tinggi setiap frame tunggal dalam file spritesheetyang diberikan, menunjukkan kepada program bagaimana memotongnya untukmendapatkan frame individu.

Memuat animasi

Selanjutnya, masuk ke fungsi yang Anda buat , cari baris yang memuat spritebola, dan di bawahnya menempatkan panggilan untuk animations.add() dilihatdibawah ini:

CONTENTS 69

Untuk menambahkan animasi ke objek yang kita gunakan animations.add()metode, yang berisi parameter berikut

• Nama memilih untuk animasi

• Array mendefinisikan urutan untuk menampilkan frame selama animasi.Jika Anda melihat kembali pada wobble.png gambar, Anda akan melihatada tiga frame.Phaser ekstrak ini dan toko referensi dalam array - posisi0, 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 24fpsdan ada 9 frame, animasi akan menampilkan hanya di bawah tiga kali perdetik.

Menerapkan animasi ketika bola menyentuh pemukul

Dalam arcade.collide() metode (baris pertama dalam panggilan yang menanganitabrakan antara bola dan dayung update() , lihat di bawah dapat menambahkanparameter tambahan yang menentukan fungsi yang akan dieksekusi setiap kalitabrakan terjadi, di fasion sama dengan ballHitBrick() fungsi. Update barispertama dalamupdate() seperti berikut:

Maka kita dapat membuat ballHitPaddle() function (memiliki ball dan pad-dle sebagai parameter default), memainkan animasi goyangan ketika dipanggil.Menambahkan fungsi berikut sebelum penutupan Anda </script> tag:

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

Remaja

Sedangkan remaja lancar bernyawa sifat suatau objek gameworld seperti lebardan opacity.

Mari kita tambahkan tween untuk permainan kami untuk membuat batubata lancar hilang ketika mereka terkena bola.

CONTENTS 70

Mari kita berjalan melalui ini sehingga Anda dapat melihat apa yang terjadidi sini:

1. Ketika mendefinisikan tween baru Anda harus menentukan properti akanTweened - dalam kasus kami, bukannya menyembunyikan batu bata seketikasaat terkena bola, kami akan membuat lebar dan skala tinggi ke nol, se-hingga mereka akan baik disapear. Untuk akhirnya, kita menggunakanadd.tween() metode, menetapkanbrick.scale sebagai argumen seperti iniadalah 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 diinginkanparameter yang dipilih ini (skala mengambil nilai skala, 1 menjadi 100%dari ukuran, 0 menjadi 0% dari ukuran, dll), saat tween dalam milidetikdan jenis pelonggaran menggunakan untuk tween.

3. Kami juga akan menambahkan opsional onComplete event, yang mendefin-isikan fungsi yang akan dijalankan ketika tween selesai.

4. Hal terakhir yang Anda lakukan untuk adalah untuk memulai tween segeramenggunakan start() . Itu versi diperluas dari definisi tween, tetapi kitajuga bisa menggunakan sintaks singkatan:

Itu versi diperluas dari definisi tween, tetapi kita juga bisa menggunakan sintakssingkatan:

tween ini akan menggandakan skala bata dalam setengah menggunakan pe-longgaran 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 kitadapat meninggalkan bahwa keputusan untuk pemain dengan menambahkantombol start mereka dapat menekan. Mari kita menyelidiki bagaimana untukmelakukan itu.

Memuat Tombol Spritesheet

kami dapat memuat tombol spritesheet dengan cara yang sama kita dimuatanimasi 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 tinggidan anda juga perlu ambil tombol spritesheet dari Github dan menyimpan didirektori /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 Andacreate() function:

Button() parameter metode ini adalah sebagai berikut:

• Tombol ini x dan y koordinat

• Nama aset grafis 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 mendefinisikan startGame() fungsi dirujuk dalam kode diatas:

Ketika tombol ditekan, kita menghapus tombol, menetapkan kecepatan awalbola dan mengatur playing variabel untuk true .

Akhirnya untuk bagian ini, kembali ke Anda create() fungsi, menemukanball.body.velocity.set(150, -150); line, dan menghapusnya. Anda hanya inginbola untuk bergerak ketika tombol ditekan.

Menjaga dayung masih sebelum pertandingan dimulai

Ia bekerja seperti yang diharapkan, tapi kami masih bisa bergerak dayung saatpertandingan belum dimulai, yang tampak agak konyol.

Untuk menghentikan ini, kita dapat mengambil keuntungan dari playingvariabel dan membuat bergerak dayung hanya saat pertandingan baru dimulai.Untuk melakukan itu, menyesuaikan update() fungsi seperti:

Gambar 3Dengan 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 tetapijika anda melihat cukup dekan akan melihat bahwa bola memantul dari dayungpada suduht yang sama diseluruh permainan.

CONTENTS 72

Pembuatan Rebound Lebih Acak

Kami dapat mengubah kecepatan bola tergantung pada tempat yang tepat hit,dengan memoifikasi x kecepatan setiap kali ballHitPaddle() function dijalankanmenggunakan garis sepanjangan garis di bawah.

Gambar 31Ini sedikit sihir kecepatan baru lebih tinggi semakin besar jarak antara pusat

dayung dan tempat dimana boleh menyentuh.itu terakhir seperti itu karenasedikit ekspreimen dengna nilai yang diberikan, anda dapat melakukan ekspre-rimen sendiri dan melihat apa yang terjadi. Ini tidak benar - benar acak tentisaja, tapi tidak membuat gameplay sedikit lebih tak terduga dan karena itulebih menarik.

BAB 5

73

Penutup

5.1 Kesimpulan

Buku ini bermaksud untuk mencari dasar game engine phaser dan kasus kasusyang terdapat dalam game engine phaser :

1. Merupakan salah satu framework game engine terbaik untuk pengemban-gan HTML5 sejauh ini. Sangat cepat, sangat membantu para pengembangdalam belajar membuat atau mengembangkan game, banyak contoh untukpemula dan advance programmer, sering diupdate, mudah dikembangkandan digunakan.

2. Bekerja dikebanyakan perangkat dan sistem operasi yang sudah lawas.Mempunyai banyak sekali fitur pendukung yang bekerja mumpuni wala-pun ada juga fitur yang kurang baik.

5.2 Penutup

Buku ini dibuat untuk memenuhi tugas yang diberikan dosen Softskill yaituBapak Dr. Rar. Net I. Made Wiryana, S.Kom, MApp.Sc. Semoga denganadanya buku Basic Game Engine (Phaser) ini penulis semakin giat untuk terusmenggali, mencari pengetahuan.

Demikian uraian tentang teori, software yang digunakan dan contoh kasus.Penulis menyadari bahwa dalam pembuatan buku ini terdapat banyak kekuran-gan dan kesalahan dalam pendeskripsian materi, kesalahan dalam penggunaanpenulisan dan kesalahan pada penyampaian materi. Penulis mohon maaf danmeminta 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