Kata Pengantar
May 23, 2016
Softskill adalah suatu kemampuan, bakat, atau keterampilan yang ada di
dalam diri setiap manusia. Softskill adalah kemampuan yang dilakukan dengan
ara non teknis artinya tidak berbentuk atau tidak terlihat wujudnya. Namun,
softskill ini dapat dikatakan sebagai keterampilan personal dan inter personal.
sedangkan lawan katanya adalah HardSkill. Softskill dan Hardskill adalah 2 hal
yang saling melengkapi bagi seseorang dalam menggapai prestasi dan kinerja
gemilang. Seorang lulusan perguruan tinggi dituntut untuk memiliki kompe-
tensi hard skill dan softskill. Kompetensi Hardskill merupakan penguasaan dan
penggunaan ilmu pengetehuan dan teknologi. sedangkan kompetensi Softskill
merupakan kemampuan mengatur dirinya sendiri dan orang lain. dalam dunia
kerja, sebuah profesi dituntut memiliki hard skill yang berbeda-beda. Soft-
skill merupakan kompetensi yang seharusnya dimiliki oleh semua orang, apapun
profesinya. oleh karena itu Universitas Gunadarma memasukan bahan kuliah
tersendiri untuk menunjang Softskill para mahasiswanya dengan membuat mata
kuliah softskill ini. Pada kesempatan kali ini, kami akan membuat sebuah buku
berkenaan dengan tugas mata kuliah Softskill dan akan mengangkat sebuah
tema yaitu Ar
a
h Physi
h . Buku ini dibuat oleh kami untuk memenuhi
tugas mata kuliah Softskill pada kampus kami. Kami berharap buku ini dapat
berguna dan bermanfaat dalam menambah wawasan serta pengetahuan kita
mengenai tema yang akan kami angkat kali ini. kami juga menyadari sepenuh-
nya bahwa di dalam buku ini terdapat kekurangan dan jauh dari kata sempurna.
oleh sebab itu, kami berharap adanya kritik, saran dan usulan demi memper-
baiki buku yang telah kami buat di masa yang akan datang, mengingat tidak
ada sesuatu yang sempurna tanpa saran yang membangun. Kami juga men-
gu
apkan puji syukur kehadirat Tuhan yang Maha Esa karena dengan rahmat,
karunia, serta tau k dan hidayatnya buku ini dapat selesai tepat waktu. dan
juga kami berterima kasih kepada Bapak Dr. rer. nat. I MADE WIRYANA,
SSI,SKOM,MS
selaku dosen mata kuliah Softskill Universitas Gunadarma yang
telah memberikan tugas ini kepada kami. Semoga buku ini dapat dipahami bagi
siapapun yang akan memba
anya. Sebelumnya kami mohon maaf apabila ada
kesalahan penulisan atau kalimat yang kurang berkenan. Terima Kasih.
Depok, Januari 2016
Penyusun
3
Bab 1
Pendahuluan
a. Latar Belakang
Ar
ade adalah sistem sika real digunakan dengan Phaser dan menyediakan
sistem sika dasar yang memungkinkan untuk tabrakan, per
epatan, ke
epatan
dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan
Anda akan terbiasa dengan sistem sika Ar
ade. Phaser memiliki 3 sistem sika
yang tersedia salah satunya adalah ar
ade physi
h. Bila menggunakan sistem
Ar
ade Fisika, yang HitBox untuk sprite akan selalu menjadi Lon
at persegi
panjang sederhana. dalam beberapa game Ar
ade Physi
biasanya adalah game
yang membutuhkan dasar- dasar sika dalam proses pembuatannya. dalam hal
ini, kalian dapat menggunakan Ar
ade Physi
h dalam pembuatan game yang
memerlukan skill seperti pada skill diatas.
Dewasa ini, perkembangan game yang menggunakan sistem pada phaser dan
menjadikan game ar
ade physi
sangatlah beragam dan digunakan untuk semua
kalangan. tidak hanya untuk game remaja hingga dewasa game anak anak juga
dapat menggunakan ar
ade physi
dalam proses pembuatannya. dalam perkem-
bangannya pula, anak-anak muda sangatlah menyukai game sik yang sangat
real daripada hanya game 2d yang tidak nyata. atau game yang dapat mengasah
kemampuan seseorang dalam menyelesaikan suatu misi permainan didalamnya.
Video game dapat memberikan stimulus positif terhadap anak apabila apa yang
anak-anak mainkan sesuai dengan usia dan tujuan dalam mengembangkan ke-
mampuan motorik anak tersebut. Game dapat membuat seorang anak ber kir
se
ara tidak langsung dengan suatu kejadian yang akan menimpanya atau seo-
rang anak lebih respe
t terhadap suatu hal akibat dari permainan game yang ia
mainkan. banyak hal positif yang bisa didapatkan para orang tua pada anaknya
jika memang seorang anak tersebut memainkan permainan yang berbobot atau
sesuai dengan usianya yang masih sangat produktif.
Pada makalah kali ini, kami akan membahas se
ara terperin
i mengenai be-
berapa game yang menggunakan sistem ar
ade physi
pada phaser dan juga
kami akan memberikan
ontoh-
ontoh game yang telah dibuat pada makalah
ini. mengenai kodingan tentang ar
ade physi
hingga hasil dari game yang da-
pat dimainkan oleh anak-anak. sasaran dalam game ini adalah memberikan efek
tampilan yang lebih nyata pada sebuah permainan baik itu pada versi mobile
atau dekstop.
Mengapa menggunakan ar
ade Physi
dalam pembuatan
game ?
Meskipun telah banyak hasil yang lebih memuaskan dibandingkan dengan meng-
gunakan ar
ade physi
tetapi perkembangannya ar
ade physi
amsih sangat
4
diminati para pembuat industri game untuk membuat game lebih hidup atau
lebih baik dari segi tampilan dan hasilnya.
Dasar Teori
Dasar teori yang ditulis dalam pembuatan makalah ini di dapat dari pen
arian
internet dan blog-blog terkait yang akan dituliskan se
ara rin
i pada daftar
pustaka.
Estimasi fungsi pada ar
ade physi
Estimasi fungi ini memastikan bahwa penggunaan rumus rumus yang dipakai
dalam pembuatan game menggunakan ar
ade physi
ini berjalan sesuai yang
diinginkan oleh pembuat dan juga dapat membantu mempermudah dalam pem-
buatan gamabr lebih halus dan tajam pada hasil yang akan di tampilkannya.
dan data statistik yang dipergunakan nantinya telah memiliki keaslian data
tersebut.
b. Rumusan Masalah
Dalam makalah kali ini dijalskan mengenai ar
ade physi
dan juga bagaimana
pembuatan game yang menggunakan sistem tersebut mulai dari awal hingga
game dapat digunakan oleh seorang pengguna dan tidak terjadi masalah yang
berarti pada proses debug.
. Tujuan Penulisan
Dengan memilih tema diatas dan menyusun buku ini diharapkan agar para
pemba
a mampu memahami atau hanay sekedar mengenal mengenai Ar
ade
Physi
tersebut. serta teknik-teknik dalam menggunakan sistem tersebut di
dalam pharse. sekaligus, buku ini dibuat untuk memenuhi tugas perkuliahan
penulis, dengan mata kuliah Softskill di jurusan Teknik Informatika.
Bab 2
Konsep Dasar Ar
ade Physi
h
Ar
ade adalah sistem sika real digunakan dengan Phaser dan menyediakan
sistem sika dasar yang memungkinkan untuk tabrakan, per
epatan, ke
epatan
dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan
Anda akan terbiasa dengan sistem sika Ar
ade. Phaser memiliki 3 sistem sika
yang tersedia salah satunya adalah ar
ade physi
h. Bila menggunakan sistem
Ar
ade Fisika, yang HitBox untuk sprite akan selalu menjadi Lon
at persegi
panjang sederhana. dalam beberapa game Ar
ade Physi
biasanya adalah game
5
yang membutuhkan dasar- dasar sika dalam proses pembuatannya. dalam hal
ini, kalian dapat menggunakan Ar
ade Physi
h dalam pembuatan game yang
memerlukan skill seperti pada skill diatas.
Phaser memiliki 3 sistem sika yang tersedia:
1. Ar
ade Fisika
2. Ninja Fisika
3. P2 Fisika
Anda dapat memba
a lebih lanjut tentang sistem Ninja Fisika di sini, tapi
dalam tutorial ini kita akan melihat bagaimana menggunakan sistem P2 sika
di Tahap dengan bantuan Fisika Editor. P2 Fisika memungkinkan kita un-
tuk membuat lebih banyak interaksi sika kompleks (hal-hal seperti mata air
dan pendulum) dan juga memungkinkan untuk tabrakan jauh lebih kompleks.
Bila menggunakan sistem Ar
ade Fisika, yang HitBox untuk sprite akan selalu
menjadi Lon
at persegi panjang sederhana. Ini baik-baik saja dalam beberapa
kasus, tetapi mengambil sprite berikut misalnya:
Pisang diperlakukan sebagai persegi panjang di Ar
ade - dan juga berperi-
laku seperti satu. Pisang menumpuk seperti kotak. Dengan menggunakan P2
Fisika dan program Fisika Editor, Anda dapat membuat bentuk tabrakan jauh
lebih akurat yang hanya akan menyebabkan tabrakan ketika harus ada tabrakan.
Dan lihat bagaimana baik pisang menumpuk.
So why is the Ar
ade physi
s system the default in Phaser if P2 physi
s is
better?
Semua yang fungsi tambahan datang pada biaya kinerja. Sejak sika jauh
lebih kompleks, dibutuhkan kekuatan pemrosesan lebih banyak, dan ini dapat
terutama terlihat ketika menjalankan game pada perangkat mobile. Jadi jika
permainan Anda akan bekerja dengan Ar
ade sika, Anda mungkin harus meng-
gunakan itu, tapi untuk game yang lebih kompleks (seperti demo gila kita akan
membangun) Anda dapat menggunakan P2 sika.
Sebelum kita memulainya kami akan menunjukkan kepada Anda bagaimana
membangun sebuah permainan (atau mungkin menyebutnya simulasi akan lebih
akurat) menggunakan P2 sika dan Fisika Editor di Phaser. Aku tidak akan
melalui salah satu Phaser dasar mengatur atau langkah-langkah struktur. Game
ini akan menggunakan struktur dasar, yang diran
ang untuk game Phaser yang
dapat Anda gunakan di hampir setiap proyek. Jika Anda ingin mengikuti dan
kode Anda dapat men-download template (serta preview gratis Mobile Develop-
ment saya untuk Web Developer saja yang berjalan melalui pengaturan proyek
6
Phaser) di bawah ini: Download Template & Bonus Phaser Konten Anda juga
bisa mendapatkan kode sumber lengkap dari Github. Ini berisi beberapa folder
untuk berbagai tahap tutorial. Creating
ollision shapes for P2 Physi
s Phaser
tidak memiliki
ara untuk se
ara otomatis men
iptakan bentuk tabrakan akurat
seperti pada gambar di atas. Anda harus menentukan bentuk tabrakan dengan
menyediakan permainan Phaser kami dengan le JSON yang terlihat seperti ini:
Mudah! Ya benar ... Ini adalah apa yang Physi
sEditor untuk dan itu
akan membuat hidup Anda jauh lebih mudah. Fisika Editor memungkinkan
Anda untuk menentukan bentuk tabrakan dan kemudian mengekspornya ke
format yang sesuai yang Anda butuhkan. Dalam kasus Phaser, yaitu JSON, tapi
Physi
sEditor bekerja untuk sekelompok kerangka permainan yang berbeda.
Mari kita berjalan melalui bagaimana melakukan itu sekarang.
Download Physi
sEditor
You
an grab Physi
sEditor and start your free trial where you will have
a
ess to all of its features.
Import your Sprite
Setelah Anda download dan diinstal Physi
sEditor Anda harus disambut
7
dengan layar yang terlihat seperti ini:
Anda akan menggunakan sprite berikut untuk permainan - men-download
dan letakkan di dalam folder aset:
Mulailah dengan menambahkan sprite. Anda dapat drag dan drop sprite
pada panel sebelah kiri atau gunakan toolbar. Sepanjang toolbar atas, Anda
8
akan melihat tombol Add sprite. Klik ini dan memuat sprite yang ingin Anda
gunakan.
Mulailah dengan betty.png - sprite karakter. Tra
e your Sprite
Toolbar atas sprite Anda berisi ikon tongkat sihir. Klik. Alat ini membuat
super
epat dan mudah untuk men
iptakan bentuk tabrakan yang sesuai. Yang
harus Anda lakukan adalah klik tongkat dan Anda akan melihat layar seperti
ini:
Anda dapat mengubah toleransi untuk efek berapa banyak simpul yang di-
gunakan, semakin rendah toleransi, semakin simpul dan lebih akurat bentuk.
9
Tetapi lebih akurasi berarti juga lebih kompleks yang menghasilkan perhitungan
yang lebih untuk CPU! Semuanya selalu datang pada biaya.
Bentuk kiri memiliki terlalu banyak simpul. Sebuah bentuk di tengah-tengah
gambar harus ok. Bentuk yang tepat tidak
o
ok terlalu baik - tetapi masih
mungkin memberikan tabrakan
ukup baik.
Ingat: Pemain tidak melihat poligon - ia hanya melihat reaksi pada hit. Dan
jika kinerja yang dipertaruhkan lebih baik untuk pergi dengan kurang akurat
dibandingkan frame yang lebih sedikit per detik.
Klik Ok untuk menerima bentuk ditelusuri.
Anda juga dapat men-tweak poligon:
>Tekan tombol mouse pada titik untuk memindahkannya
>Klik dua kali vertex untuk menghapusnya
10
>klik ganda dekat jalur untuk memasukkan titik baru A
elerate To Pointer
11
Angle Between
12
Angle to Pointer
13
14
Angular Velo
ity
15
16
Asteroids Movement
17
18
19
Body Debug
20
Menetapkan a
eleration.x / y properti pada objek layar sehingga akan berg-
erak menuju target pada ke
epatan tertentu (dalam piksel per sq detik.) Anda
harus memberikan nilai ke
epatan maksimum, di luar yang objek layar tidak
akan pergi lebih
epat . Catatan: Objek display tidak terus mela
ak target.
Jika target perubahan lokasi selama transit objek layar tidak akan mengubah
jalurnya. Catatan: Objek display tidak berhenti bergerak setelah men
apai
koordinat tujuan.
returns nomor -
21
Sudut (dalam radian) bahwa objek harus visual diatur dalam rangka untuk
men
o
okkan lintasan baru
a
elerateToPointer(displayObje
t, pointer, speed, xSpeedMax, ySpeedMax)
{number} Menetapkan a
eleration.x / y properti pada objek layar sehingga
akan bergerak menuju target pada ke
epatan tertentu (dalam piksel per sq de-
tik.) Anda harus memberikan nilai ke
epatan maksimum, di luar yang objek
layar tidak akan pergi lebih
epat .
Catatan: Objek display tidak terus mela
ak target. Jika target perubahan
lokasi selama transit objek layar tidak akan mengubah jalurnya.
Catatan: Objek display tidak berhenti bergerak setelah men
apai koordinat
tujuan.
Returns nomor -
Sudut (dalam radian) bahwa objek harus visual diatur dalam rangka untuk
men
o
okkan lintasan baru.
a
elerateToXY(displayObje
t, x, y, speed, xSpeedMax, ySpeedMax)
{number} Menetapkan a
eleration.x / y properti pada objek layar sehingga
akan bergerak menuju x / y koordinat pada ke
epatan tertentu (dalam piksel
per sq detik.) Anda harus memberikan nilai ke
epatan maksimum, di luar yang
objek layar tidak akan pergi lebih
epat.
Catatan: Objek display tidak terus mela
ak target. Jika target perubahan
lokasi selama transit objek layar tidak akan mengubah jalurnya.
Catatan: Objek display tidak berhenti bergerak setelah men
apai koordinat
tujuan.
Returns nomor -
Sudut (dalam radian) bahwa objek harus visual diatur dalam rangka untuk
men
o
okkan lintasan baru.
a
elerationFromRotation(rotation, speed, point) {Phaser.Point} Mengin-
gat rotasi (dalam radian) dan ke
epatan menghitung per
epatan dan mengem-
balikannya sebagai objek Point, atau set ke objek titik tertentu. Salah satu
22
ara untuk menggunakan ini adalah: akselerasi Dari Rotation (rotasi, 200,
sprite.a
eleration) yang akan menetapkan nilai-nilai langsung ke akselerasi sprite
dan tidak membuat objek titik baru.
Returns Phaser.Point -
Point dimana point.x berisi x nilai per
epatan dan point.y mengandung nilai
per
epatan y.
angleBetween(sour
e, target) {number}
Cari sudut dalam radian antara dua benda display (seperti Sprite).
Returns nomor -
Sudut dalam radian antara sumber dan target objek display.
ˆ Bertabrakan (Objek1,Objek2, Collide
allba
k, Prosess
allba
k,Callba
kContext)
{Boolean}
Cek untuk tumbukan antara dua benda permainan. Anda dapat melakukan
Spite vs Spite, Spite vs Group, Group vs Group, Spite vs Tilemap LAyer atau
Group vs tabrakan lapisan Tilemap. kedua parameter pertama dan kedua dapat
array objek, jenis yang berbeda. jika dua array berlalu, isi parameter pertama
akan diuji trhadap semua isi dari 2 parameter. Objek yang juga se
ara otomatis
dipisahkan. Jika anda tidak memerlukan pemisahan kemudian menggunakan
Ar
adePhysi
s.overlap gantinya. Sebuah proses
allba
k opsional dapat dise-
diakan. Jika diberikan fungsi ini akan dipanggil ketika dua spite ditemukan
bertabrakan. Hal tersebut sebelum pemisahan apapun terjadi, memberikan
anda kesempatan untuk melakukan pemimsahantambahan. jika fungsi yang
mengendalikan benar maka tabrakan dan pemisahaan dilakukan. jika ia men-
gendalikan palsu itu dilewati. the
ollide
allba
k merupakan fungi optional yang
hanya dipanggil jika ada dua spite bertabrakan. jika proses
allba
k telah dite-
tapkan maka perlu untuk kembali benar untuk
ollide
allba
k untuk dipanggil.
atatan : Fungsi ini tidak rekursif, dan tidak akan menguji terhadap anak
dari objek berlalu ( yaitu Group atau Tilemaps dalam Group lainya ) Aktifkan
Opsi( objek, anak-anak). Ini akan mebuat tubuh Ar
ade pada objek permainan
diberikan atau array dari objek permainan. Sebuah permainan objek hanya
dapat memiliki sika tubuh aktir pada satu
waktu, dan dapat diubah semapai objek dihan
urkan.
23
1. PARAMETER.
Name Type Argument Default Des
ription
Objek 1 Phaser.Spite, Spaser.Group, Phaser.Parti
les.Emitter Objek pertama Objel 2 Phaser.sprite, Phaser.Group, Phaser.Parti
les.Emitter Objekr CollideCallBA
k Fun
tion <Optional> null Fungsi
ProsesCallBA
k Fun
tion <optional> null Sebuah Callba
kContext Obje
t <optional>
allba
k
ˆ Class: Phaser.Sprite
Pembina :
new Sprite(game, x, y, kun
i, bingkai)
Sprite adalah sumber dari permainan anda, digunakan untuk hampir se-
mua visual. pada dasarnya sebuah Spite terdiri dari satu set koordinat dan
tekstur yang diberikan ke kanvas. Mereka juga mengandung sifat tamba-
han yang memungkinkan untuk gerak sika(Sprite.Body), masukan pem-
nanganan (sprite.input), perinstiwa (sprite.event) animasi (sprite.animations),
kamera pemusnahan dan banyak lagi.
Nama Tipe Pengertian
Game Phase.game Sebuah referensi untuk permainan yang sedang berjalan.
x number Koordinat x (di ruang dunia) untuk memposisikan Sprite di.a
y number Koordinat y (dalam ruang dunia) untuk meposisikan Sprite di.
key String, phaser.renderTexture ini adalah gambar atau tekstur yang digunakan oleh Sprite selama frame String| Number JIka Sprite ini mengunakan bagian dari lembaran sprite atau atlas ˆ Class: Phaser.Group
Pembina :
New Group( permainan, orang tua, nama, addToStage, anableBody, physi
s-
BodyType)
Sebuah Group adalah wadah untuk menampilkan objek termasuk Sprite
dan gambar.
Kelompok membentuk struktur pohon logis dari duisplay/ gra k adegan
di mana transformasi lokal yang diterapkan kepada anak-anak. Misalnya,
semua anak juga dipindahkan/ diputar/ diperke
il ketika kelompok dipin-
dahkan / diputar/ diperke
il. selain itu, Grup menyediakan dukungan
untuk penyatuan
epat dan daur ulang objek. Kelopok juga menampilkan
objek dan dapat diulang sebagai anak-anak dalam kelompok lainya.
24
Name type Argument Default Des
ription
game phaser.Game Sebuah refenrensi untuk permainan parent DisplayObje
t| null <optional> (game world) parent group atau (DisplayObjek name string <optional> 'Group' sebuah nama untuk kelompok addtoStrage boolean <optional> false jika benar kelompok ini akan ditambhkan enableBody boolean <optional> false jika benar semua sprite dibuat physi
sBodyType integer <optional> O tipe tubuh sika untuk digunakan ˆ Class : PhaserTilemapLayer
pembina :
new TilemapLayer(permainan, tilemap, indeks, lebar, tinggi)
sebuah TilemapLayer adalah Phaser.Image / sprite yang membuat se-
buah Tilelayer tertentu dari TileMap. Sejka Tilemaplayer adalah Sprite
itu dapat dipindahkan disekitar ayar, ditambahkan kekelompok lain atau
menampilakn objek dll. dengan tilemaps layers bawaan harus xedto
am-
era diatur ken\benaran. mengubah ini akan mematakan kamera tindak
dan bergulir perilaku.
Nama Type Des
ription
Game phaser.Game referensi oermainan ke permainan yang sedang berjalan.
tilemap Phaser.tilemap tilemap mana lapisan ini milik
index integer indeks dari TileLayer untuk mebuat dalam Tikemap
width integer Lebar area renderable dari lapisan (dalam pixel)
height integer Ketingggian daerah renderable dari lapisan (dalam Pixel)
ComputeVelo
ity (axis, tubuh, ke
epatan, per
epatan, drag, max)
Sebuah fungsi tween seperti yang mengambil ke
epatan awal dan beberapa fak-
tor lainya dan mengembalikan sebuah ke
epatan yang berbah. Berdasarkan
fungsi di ixer.
Name Type Argument default Axis number 0 untuk Body phaser.Physi
s.ar
ade.Body Velo
ity number A
eleration number drag number benar-benar jenis deselerasi, ini adalah max number <optional> 10000 ˆ Pengambilan Nomor: diubah nilai velo
ity.
1. Class : Phaser.physi
s.ar
ade.body.
pembina :
new Body (sprite)
25
sika tubuh terhubung dengan sprite tunggal. semua operasi sika harus
dilakukan terhadap tubuh daripada sprite iitu snediri. misalhnya anda dapat
mengantur ke
epatan, akselerasi, nilai-niali boun
e dll semua pada tubuh.
Name Type Des
ription
Sprite Sprite.Body ini milik sprite keberatan tubuh sika
Di
stan
eBetween (Sumber, target)
Cari jarak antarab dua denda display(seperti Sprite).
Name Type Desription
Sumber manapun display objek untuk menguji dari.
menargetkan manapun display objek untuk menguji untuk
MoveToObje
t( DisplayObje
t, tujuan< ke
epatan, maxTime)
MEmindahkan objek display yang diberikan terhadap objek tujuan pada
ke
epatan yang stabil. Jika anda menentukan MaxTime maka akan menye-
suaikan ke
epatan (Timpa apa yang ditetapkan) sehingga tiba tujuan
dalamjumlah detik. Timing adalah perkiraan karena
ara Browser time
bekerja. Memungkinkan untuk varians +- 50ms.
Catatan : objek display tidak terus mela
ak target.Jika target peruba-
han lokasi selama transit objek layar tudak akan mengubah jalurnya.
Catatan : Objek display tidak berhenti bergerak setelah me
apai koor-
dinattujuan.
atatan : APakah tidak memperhitungkan per
epatan akun, maxVelo
-
ity atau drag (jika anda menetapkan hambatan atau per
epatan ter-
lalu tinggi objek ini mungkin tidak bergerak sama sekali).
Name Type Argument default Des
ription
displayobje
t apa saja objek untuk layar
destination apa saja objek layar untuk bergerak kearah. dapat berupa obek speed nomer <optional> 60 ke
epatan itu akan bergerak , dalam partikel perdetik(default maxtime nomer <optional> 0 waktu yang diberikkan dalam milidetik(1000 = 1 detik). ˆ pengembalian : nomor
sudut (dalam radian) bahwa objek harus visual diatur dalam rangka untuk
men
o
okan ke
epatan baru.
MoveToPointer (DisplayObje
t, ke
epatan, pointer, maxTime)
memindahkan objek layar diberkan terhadap pointer pada ke
epatan
stabil.Jika tidak ada pointer yang diberikan itu akan menggunakan
Phaser.input.a
tivepointer. Jika anda menetukan maxTime maka
akan menyesuaikan ke
epatan (over-menulis apa yang anda set) se-
hingga tiba ditujuan dalam jumlah titik. Timing adalah perkiraan
kareana
ara browser timer bekerja. memungkinkan untuk varians
+- 50ms.
26
atatan : objek objek disolay tidak akan terus mela
ak terget. jika target
perubahan lokasi selama transit objek layar tidak akan mengubah
jalurnya.
atatan : objek display tidak berhenti bergerak setelah men
apai koor-
dinat tujuan.
Name Type Argument Default Des
ription
DisplayObjek any objek layar untuk bergerak.
speed nomor <optional> 60 ke
epatan itu akan bergerak,dalam piksel pointer phaser <optional> pointer untuk bergerak kearah.Standarnya, maxtime nomor <optional> 0 Waktu yang diberikan dalam milidetik (1000 pengembalian : nomor
sudut(dalam radian) bahwa objek harus visual diatur dalam rangka untuk
men
o
okan ke
epatan baru.
MoveToXY (DisplayObje
t, x, x, ke
epatan, maxTime)
Memindahkan objek display yang diberikan terhadap x/y koordinat pada
ke
epatan stabil. Jika anda menetukan maxtime maka akan menyesuaikan
ke
epatan(Over-writing apa yang anda set) sehingga tiba di tujuan dalam
juamlah detik. Timing adalah perkiraan kerana
ara browser timer bek-
erja. memungkinkan untuk varians -+50ms.
atatan : obje
t display tidak terus mela
ak target. jika target peruba-
han lokasi selama transit objek layar tidak akan mengubah jalurnya.
atatan : objek display tidak berhenti bergerak setelah men
apai koor-
dinat tujuan.
atatan : apakah tidak memperhitungkan per
epatan akun, maxvelo
ity
atau drag (jika anda terlah menetapkan hambatan atau per
epatan
terlalu tinggi objek ini mungkin tidak bergerak sama sekali).
Name Type Argument Default displayobje
t any x nomor y nomor speed nomor <optional> 60 ke
epatan Maxtime nomor <optional> 0 waktu yang diberikan dalam milidetik (100 Bab 3
Pembahasan Perangkat Lunak
27
Phaser
Phaser adalah open sour
e kerangka kerja HTML5 permainan
epat, gratis
dan menyenangkan. Ini menggunakan membangun kebiasaan Pixi.js un-
tuk WebGL dan Canvas rendering di desktop dan browser web mobile.
Permainan dapat dikompilasi untuk iOS, Android dan aplikasi desktop
melalui alat pihak ke-3 seperti Co
oon, Cordova dan Ele
tron.Seiring
dengan komunitas open sour
e yang fantastis Phaser se
ara aktif dikem-
bangkan dan dikelola oleh Photon Badai Terbatas .
Sebagai hasil dari dukungan yang
epat dan pengembang ramah API
Phaser saat ini salah satu yang paling membintangi kerangka permainan di
GitHub.Ribuan pengembang di seluruh dunia menggunakannya. Dari in-
dies dan lembaga digital multi-nasional untuk sekolah-sekolah dan univer-
sitas. Setiap men
iptakan permainan yang luar biasa mereka sendiri.Kerangka
28
Phaser menyediakan Anda dengan satu set alat yang akan memper
epat
pembangunan dan membantu menangani tugas-tugas generik yang dibu-
tuhkan untuk menyelesaikan permainan, sehingga Anda dapat fokus pada
ide permainan itu sendiri.
Beberapa software resmi memiliki Panduan Memulai yang men
akup se-
mua yang Anda butuhkan untuk mulai mengembangkan permainan den-
gan Phaser. Dari menyiapkan web server, untuk memilih sebuah IDE dan
oding game pertama Anda. Silakan mulai di sini tidak peduli apa dev
game-pengalaman Anda, sebelum menyelam ke API.
Single sumber daya Phaser terbesar adalah situs web Phaser . Memiliki
ratusan tutorial terdaftar dan yang segar ditambahkan setiap minggu.
Terus datang kembali untuk melihat apa yang baru!
Menggunakan Phaser dengan naskah? Periksa seri besar ini Permainan
Dari S
rat
h tutorial.
Contoh Sour
e
ode pada Phaser
Interphase
Interfase adalah sebuah buku baru untuk Phaser pengembang dari semua
tingkat keahlian. kalian dapat menemukan pembuatan game panduan
dan tutorial.
Phaser Editor - Sebuah lengkap Phaser Editor
Phaser Editor adalah merek baru berbasis editor E
lipse yang menawarkan
banyak built-in alat khusus untuk pengembang phaser. tur berguna ter-
masuk kode Pintar auto-
ompletion, built-in web server, pen
arian doku-
mentasi, manajemen aset, tekstur atlas pen
ipta, sprite pen
ipta audio,
preview aset dan banyak lagi.
Game Me
hani
Explorer
The Permainan Me
hani
Explorer adalah
ara interaktif yang bagus un-
tuk belajar bagaimana mengembangkan permainan mekanik yang ada di
Phaser. Layak mengeksplorasi setelah Anda punya Anda lingkungan dev
set-up.
Editor perkasa - Game Editor Visual
MightyEditor adalah Phaser visual yang permainan Editor berbasis browser.
Membuat peta Anda dengan mudah, objek posisi dan membaginya dalam
hitungan detik. Hal ini juga ekspor ke kode Phaser asli. Baik untuk
tingkat
epat pengaturan-up dan adegan.
Menggunakan phaser
Phaser disediakan siap disusun dalam build folder dari repositori. Ada
kedua versi plain dan diminimalkan. Versi plain untuk digunakan selama
29
pengembangan dan versi mini ed untuk produksi.
Membangun Custom
Phaser termasuk berdasarkan mendengus membangun sistem yang memu-
ngkinkan Anda untuk menghapus banyak tur tambahan yang Anda mungkin
tidak memerlukan, menghemat ratusan KB dalam proses. Jangan gu-
nakan Suara apapun dalam permainan Anda? Maka Anda sekarang dapat
menge
ualikan seluruh sistem suara. Tidak perlu dukungan Keyboard?
Yang dapat dilu
uti keluar juga. Sebagai hasil dari pekerjaan ini mini-
mum ukuran membangun dari Phaser kini hanya 80KB mini ed dan gzip.
Browserify / CJS
Phaser tidak pernah ditulis untuk menjadi modular. Semuanya ada di
bawah satu namespa
e global tunggal, dan Anda tidak dapat require
bagian itu yang dipilih ke dalam membangun. Ia mengharapkan 3 vars
global yang ada dalam rangka untuk bekerja dengan baik: Phaser , PIXI
dan p2 . Berikut ini adalah salah satu
ara untuk melakukan hal ini:
Jika Anda membangun sebuah versi khusus dari Phaser (lihat di atas)
akan membagi libs inti 3 keluar ke le mereka sendiri, yang memungkinkan
Anda untuk meminta mereka seperti di atas. Mereka menghargai ini hanya
band-bantuan dan bukan penggunaan yang tepat dari modul,itu hanya
tidak pernah dibangun untuk digunakan dengan
ara ini. Anda men
oba
untuk menyesuaikan pasak persegi di lubang browserify berbentuk bu-
lat, sehingga kompromi harus dibuat. Jangan membuka masalah GitHub
tentang hal itu. Mereka tidak mengubah Phaser pada tahap hidupnya.
Penuh pembangunan berbasis modul sedang dilakukan di Lazer.
Webpa
k
Mulai dari Phaser 2.4.5 kita sekarang termasuk membangun kustom untuk
Webpa
k.
Anda perlu menambahkan p2 sebagai dependensi.
Webpa
k Con g
ini adalah
ontoh koding pada webpa
k
on g dalam pembuatan game
ar
ade physi
.
30
le utama Javas
riptnya
selain itu, telah banyak game yang berhasil dibuat di phaser ini. dan
beberapa persyaratan yang mesti dipenuhi sebelum men
oba mendown-
loadnya adalah sPhaser membutuhkan web browser yang mendukung tag
kanvas . Ini termasuk Internet Explorer 9 +, Firefox, Chrome, Safari
dan Opera di desktop. iOS Safari, Android Browser dan Chrome untuk
Android yang didukung pada ponsel.Sementara Phaser melakukan yang
terbaik untuk memastikan pengalaman
ross-platform yang konsisten, se-
lalu sadar browser dan perangkat keterbatasan. Hal ini sangat penting
berkaitan dengan memori dan GPU keterbatasan pada ponsel, dan kom-
patibilitas HTML5 browser lawas.
IE9
Jika Anda perlu untuk mendukung IE9 / Android 2.x dan penggunaan
P2 sika maka Anda harus menggunakan poly ll di resour
es/IE9 Poly ll
folder. Jika Anda tidak menggunakan P2 (atau tidak peduli IE9!) Anda
dapat melewatkan ini.
JavaS
ript dan naskah
Phaser dikembangkan dalam JavaS
ript. Kami telah membuat asumsi
tentang bagaimana Anda ingin kode dan berhati-hati untuk tidak memak-
sakan struktur yang ketat pada Anda. Anda tidak akan menemukan
Phaser dibagi menjadi modul, membutuhkan langkah membangun, atau
membuat Anda menggunakan pendekatan OOP
lass / warisan. Itu tidak
berarti Anda tidak dapat melakukannya, itu hanya berarti kami tidak
memaksa Anda untuk. Itu pilihanmu.
Jika Anda kode dengan naskah ada le de nisi yang komprehensif dalam
types
ript folder. Mereka adalah untuk naskah 1.4 +.
Road Map
31
Mayoritas pembangunan Phaser sekarang mengambil tempat di Lazer
proyek (Phaser 3). Phaser 2
abang masih akan didukung dan masalah
tetap, namun tur roadmap telah bermigrasi.
Lazer
Lazer adalah generasi berikutnya dari kerangka Phaser permainan, dan
sebelumnya disebut Phaser 3. Menggunakan basis sepenuhnya ES6 itu
penyaji agnostik, memungkinkan untuk DOM, SVG, kanvas dan WebGL
rendering, di desktop dan browser web mobile.Lazer dalam pengembangan
aktif tapi belum siap untuk penggunaan produksi. beberapa
ontoh game
yang telah dibuat menggunakan phaser
32
33
34
35
36
37
Bab 4
Contoh Kasus Pada Ar
ade Physi
38
Dalam
ontoh kali ini kita akan menuju proses membangun sebuah game
mobile HTML5 yang menggunakan Orientasi Perangkat dan Getaran API untuk
meningkatkan gameplay dan dibangun menggunakan Phaser kerangka. Juga
pengetahuan JavaS
ript dasar dianjurkan untuk mendapatkan hasil maksimal
dari tutorial ini.
Permainan 2D labirin dengan orientasi perangkat
Pada akhir tutorial anda akan mendapatkan permainan yang telah berfungsi
sempurna. seperti pada gambar dan berikut langkah-langkah pengerjaannya.
Kerangka Phaser Phaser merupakan framework untuk membangun desktop
dan game HTML5 mobile.Hal ini
ukup baru, tapi berkembang pesat berkat
komunitas yang bersemangat terlibat dalam proses pembangunan. Kerangka
Phaser menyediakan Anda dengan satu set alat yang akan memper
epat pem-
bangunan dan membantu menangani tugas-tugas generik yang dibutuhkan un-
tuk menyelesaikan permainan, sehingga Anda dapat fokus pada ide permainan
itu sendiri.
Mengawali dengan pembuatan projek
Struktur folder
ukup mudah: titik awal adalah index.html le di mana kita
menginisialisasi kerangka dan mendirikan sebuah <
anvas> untuk membuat
39
game.
Anda dapat membuka le indeks di browser favorit Anda untuk memulai
permainan dan men
obanya. Ada juga tiga folder di direktori:
ˆ img : Semua gambar yang akan kita gunakan dalam permainan.
ˆ sr
: le tersebut JavaS
ript dengan semua kode sumber dari permainan
dide nisikan di dalam.
ˆ audio: le Suara digunakan dalam permainan.
Menyiapkan Kanvas
Pada
ontoh ini kami akan merender permainan kami pada kanvas, tapi kami
tidak akan melakukannya se
ara manual, ini akan diurus oleh framework. Mari
kita mengaturnya: titik awal kita adalah index.html le dengan konten berikut.
Anda dapat membuat ini sendiri jika Anda ingin mengikuti bersama:
40
Sejauh ini kita memiliki website HTML sederhana dengan beberapa kon-
ten dasar dalam<head> bagian:
harset, judul, CSS styling dan masuknya le
JavaS
ript. The <body> berisi inisialisasi dari kerangka Phaser dan de nisi
negara permainan.
Baris di atas akan menginisialisasi
ontoh Phaser - argumen yang lebar kan-
vas, ketinggian Canvas, metode render (kami menggunakan CANVAS , tetapi
ada juga WEBGL dan AUTOpilihan yang tersedia) dan opsional ID wadah
DOM kami ingin menempatkan kanvas di. Jika tidak ada yang ditentukan dalam
argumen terakhir atau unsur ini tidak ditemukan, kanvas akan ditambahkan ke
<body> tag.
Tanpa kerangka, untuk menambahkan elemen Canvas ke halaman, Anda
harus menulis sesuatu seperti ini di dalam <body> tag: <
anvas id='game'
width='320' height='480'></
anvas> <Canvas id = 'permainan' width = '320'
height = '480'> </
anvas>
Yang penting untuk diingat adalah bahwa kerangka adalah menyiapkan
metode membantu untuk memper
epat banyak hal seperti manipulasi gambar
41
atau manajemen aset, yang akan menjadi jauh lebih sulit untuk dilakukan se
ara
manual.
Kembali ke permainan: garis bawah adalah menambahkan negara baru yang
disebut Boot ke permainan:
Nilai pertama adalah nama negara dan yang kedua adalah objek yang kita
ingin menetapkan untuk itu. The start Metode mulai negara diberikan dan
membuatnya aktif.Mari kita lihat apa negara sebenarnya.
Mengelola Negara Permainan Negara-negara di Phaser merupakan bagian
yang terpisah dari logika permainan, dalam kasus ini, memuat mereka dari le
JavaS
ript independen untuk pemeliharaan yang lebih baik. Negara dasar yang
digunakan dalam game ini adalah: Boot , Preloader ,MainMenu , Howto dan
Game . Boot akan mengurus menginisialisasi beberapa pengaturan,Preloader
akan memuat semua aset seperti gra s dan audio, MainMenu adalah menu
dengan tombol start, How to menunjukkan "
ara bermain" petunjuk dan Game
negara memungkinkan Anda benar-benar bermain game. Mari kita
epat pergi
walaupun isi dari negara. Boot.js The Boot negara adalah yang pertama dalam
permainan.
Ball utama objek dide nisikan dan kami menambahkan dua variabel dise-
but _WIDTH dan_HEIGHT yang lebar dan tinggi dari Canvas permainan -
mereka akan membantu kita memposisikan elemen pada layar. Kami memuat
dua gambar pertama yang akan digunakan nanti dalam Preload negara un-
tuk menunjukkan kemajuan memuat semua aset lainnya. The
reate fungsi
memegang beberapa kon gurasi dasar: kami sedang menyiapkan s
aling dan
keselarasan dari kanvas, dan pindah ke Preload negara ketika semuanya sudah
siap. Preloader.js The Preloader negara mengurus memuat semua aset:
42
Ada gambar tunggal, spritesheets dan le audio dimuat oleh framework.
Dalam keadaan ini preloadBar menunjukkan kemajuan di layar. kemajuan yang
aset dimuat divisualisasikan oleh kerangka dengan menggunakan satu gambar.
Dengan setiap aset dimuat Anda dapat melihat lebih dari preloadBar image:
dari 0% sampai 100%, diperbarui setiap frame. Setelah semua aset tersebut
dimuat, MainMenu negara dilun
urkan. MainMenu.js The MainMenu negara
menunjukkan menu utama dari permainan, di mana Anda dapat mulai bermain
dengan mengklik tombol.
Untuk membuat tombol baru ada add.button metode dengan daftar berikut
43
argumen opsional:
ˆ posisi absolut atas pada kanvas dalam piksel.
ˆ Meninggalkan posisi absolut pada kanvas dalam piksel.
ˆ Nama dari aset gambar tombol menggunakan.
ˆ Fungsi yang akan dijalankan ketika seseorang mengklik tombol.
ˆ Eksekusi konteks.
ˆ Frame dari aset gambar yang digunakan sebagai "melayang-layang" ne-
gara tombol ini.
ˆ Frame dari aset gambar yang digunakan sebagai "normal" atau "keluar"
negara tombol ini.
ˆ Frame dari aset gambar yang digunakan sebagai "klik" atau "down" ne-
gara tombol ini. The an
hor.set adalah menyiapkan titik an
hor pada
tombol yang semua perhitungan posisi diterapkan. Dalam kasus kami itu
berlabuh setengah jalan dari tepi kiri dan pada awal tepi atas, sehingga
dapat dengan mudah horizontal di tengah layar tanpa perlu mengetahui
lebarnya. Ketika tombol start ditekan, bukannya melompat langsung ke
tindakan permainan akan menampilkan layar dengan informasi tentang
ara bermain game.
Howto negara menunjukkan petunjuk gameplay pada layar sebelum memulai
permainan. Setelah mengklik layar permainan yang sebenarnya dilun
urkan.
Game.js The Game negara dari Game.js le di mana semua keajaiban terjadi.
Semua inisialisasi adalah dalam
reate() fun
tion (dilun
urkan sekali pada awal
permainan). Setelah itu beberapa fungsi akan membutuhkan kode lebih lanjut
untuk mengendalikan - kami akan menulis fungsi sendiri untuk menangani tugas-
tugas yang lebih rumit. Se
ara khusus, men
atat update() fun
tion (dieksekusi
pada setiap frame), yang update hal-hal seperti posisi bola.
44
Create dan update fungsi yang kerangka khusus, sementara yang lain akan
kreasi kita sendiri:
ˆ initLevels menginisialisasi data tingkat.
ˆ showLevel men
etak data tingkat di layar.
ˆ updateCounter update waktu yang dihabiskan bermain setiap tingkat dan
men
atat total waktu yang dihabiskan bermain game ..
ˆ managePause berhenti dan resume permainan.
ˆ manageAudio ternyata audio dan mematikan.
ˆ wallCollision dijalankan ketika bola menyentuh dinding atau benda lain-
nya.
ˆ handleOrientation adalah fungsi terikat pada a
ara yang bertanggung
jawab untuk Devi
e Orientasi API, menyediakan kontrol gerak saat laga
berjalan pada perangkat mobile dengan perangkat keras yang sesuai.
ˆ nishLevel beban tingkat yang baru ketika tingkat saat ini selesai, atau
mengakhiri pertandingan jika tingkat akhir selesai.
Menambahkan bola dan geraknya.
Pertama, menuju ke
reate() fungsi, menginisialisasi objek bola itu sendiri dan
menetapkan beberapa properti untuk itu:
Penambahkan sprite di tempat tertentu pada layar dan menggunakan 'ball'
gambar dari aset gra s yang dimuat. juga menetapkan jangkar untuk setiap
perhitungan sika ke tengah bola, memungkinkan mesin sika Ar
ade (yang
menangani semua sika untuk gerakan bola), dan pengaturan ukuran tubuh
45
untuk mendeteksi tabrakan. The boun
e properti digunakan untuk mengatur
boun
iness bola ketika hits hambatan.
Mengontrol Bola Untuk memiliki bola yang dapat dilemparkan sekitar di
area bermain, tetapi juga penting untuk dapat benar-benar memindahkannya!
Sekarang kita akan menambahkan kemampuan untuk mengontrol bola dengan
keyboard pada perangkat desktop, dan kemudian kami akan pindah ke pelak-
sanaan Perangkat Orientasi API. Mari kita fokus pada keyboard pertama den-
gan menambahkan berikut ke
reate() fungsi:
Seperti yang Anda lihat ada fungsi Phaser khusus yang disebut
reateCur-
sorKeys() , yang akan memberi kita sebuah objek dengan event handler untuk
empat tombol panah untuk bermain dengan: atas, bawah, kiri dan kanan. Se-
lanjutnya kita akan menambahkan kode berikut ke update() fungsi, sehingga
akan dipe
at pada setiap frame. The this.keys objek akan diperiksa terhadap
masukan pemain, sehingga bola bisa bereaksi sesuai dengan kekuatan yang telah
ditetapkan:
Dengan begitu kita dapat memeriksa kun
i yang ditekan pada frame yang
diberikan dan menerapkan gaya dide nisikan bola, sehingga meningkatkan ke-
epatan dalam arah yang benar.
Menerapkan Perangkat Berorientasi API Mungkin bagian yang paling
menarik dari permainan ini adalah penggunaannya dari API Perangkat Orien-
tasi untuk kontrol pada perangkat mobile. Berkat ini Anda dapat memainkan
game dengan memiringkan perangkat ke arah yang Anda ingin bola untuk roll.
Berikut kode dari
reate() fungsi bertanggung jawab untuk ini:
Tambahkan pendengar a
ara ke "devi
eorientation" a
ara dan mengikathandle-
Orientation fungsi yang terlihat seperti ini:
46
Semakin Anda memiringkan perangkat, lebih banyak kekuatan diterapkan
untuk bola, oleh karena itu lebih
epat bergerak (ke
epatan yang lebih tinggi).
seperti dibawah ini
Menambahkan Lubang Tujuan utama dalam permainan ini adalah untuk
memindahkan bola dari posisi awal ke posisi akhir: sebuah lubang di tanah.
Pelaksanaan terlihat sangat mirip dengan bagian di mana kita buat bola, dan
itu juga menambahkan dalam
reate() fungsi kami Game World:
Perbedaannya adalah bahwa lubang tidak akan bergerak ketika kita memukul
bolanya dan akan memiliki tabrakan yang dapat dihitung.
Membangun Blok Labirin Untuk membuat permainan lebih keras dan
lebih menarik kita akan menambahkan beberapa kendala antara bola dan pintu
47
keluar. Kita bisa menggunakan editor tingkat, tetapi demi tutorial ini mari kita
membuat sesuatu pada kita sendiri. Untuk menahan informasi blok kita akan
menggunakan array data tingkat: untuk setiap blok kami akan menyimpan po-
sisi atas dan kiri mutlak dalam piksel ( x dan y ) dan jenis blok - horizontal
atau vertikal ( t dengan 'w' lebar nilai yang berarti dan 'h' yang berarti tinggi).
Kemudian, untuk memuat tingkat kami akan mengurai data dan menunjukkan
blok khusus untuk tingkat itu. Dalam initLevels fungsi yang kita miliki:
Setiap elemen array menyimpan koleksi blok dengan x dan y posisi dan t
nilai untuk setiap. Setelah levelData , tapi masih dalam initLevels fungsi, kami
menambahkan blok ke dalam sebuah array dalam for lingkaran menggunakan
beberapa metode kerangka khusus:
Pertama, add.group() digunakan untuk membuat grup baru dari item. Ke-
mudian ARCADEtipe tubuh diatur untuk kelompok yang mengaktifkan perhi-
tungan sika. ThenewLevel.
reate metode men
iptakan item baru dalam kelom-
pok dengan mulai posisi kiri dan atas, dan gambar sendiri. Jika Anda tidak ingin
loop melalui daftar item lagi untuk menambahkan properti ke setiap satu ek-
splisit, Anda dapat menggunakan setAll pada kelompok untuk menerapkannya
ke semua item dalam kelompok itu.
Objek disimpan dalam this.levels array, yang se
ara default tidak terlihat.
Untuk memuat tingkat tertentu, kita pastikan tingkat sebelumnya yang tersem-
bunyi, dan menunjukkan satu arus:
48
permainan ini memberikan pemain sebuah tantangan - sekarang dia harus
roll bola di area bermain dan membimbing melalui labirin dibangun dari blok.
Ini hanya sebuah
ontoh loading tingkat, dan hanya ada 5 dari mereka hanya
untuk menampilkan ide, tetapi Anda dapat bekerja pada perluasan yang Anda
sendiri.
Tabrakan Pada titik ini kita punya bola yang dikendalikan oleh pemain,
lubang untuk men
apai dan rintangan menghalangi jalan. Ada masalah meskipun
- permainan kami tidak memiliki tabrakan belum, jadi tidak ada yang terjadi
ketika bola menyentuh blok - itu hanya melewati. Mari kita memperbaikinya!
Kabar baiknya adalah bahwa kerangka akan mengurus menghitung tabrakan,
kita hanya harus menentukan objek bertabrakan diupdate() fungsi:
Ini akan memberitahu kerangka untuk menjalankan wallCollision fungsi ketika
bola menyentuh salah satu dinding. Kita dapat menggunakan wallCollision
fungsi untuk menambahkan fungsi yang kita inginkan seperti bermain suara
boun
e dan melaksanakan Getaran API.
Menambahkan Suara Di antara aset preloaded ada tra
k audio (dalam
berbagai format untuk kompatibilitas browser), yang dapat kita gunakan sekarang.
Ini harus dide nisikan dalam
reate()Fungsi pertama:
Jika status audio yang benar (sehingga suara dalam permainan diaktifkan),
kita bisa memainkannya di wallCollision fungsi:
Itu semua dalam membuat permainan suara dengan mudah dengan Phaser.
Menerapkan getaran API Ketika obje
t tabrakan bekerja seperti yang
diharapkan mari kita tambahkan beberapa efek khusus dengan bantuan dari
Getaran API.
49
Cara terbaik untuk menggunakannya dalam kasus kami adalah untuk berge-
tar telepon setiap kali bola menyentuh dinding - dalam wallCollision fungsi:
Jika vibrate metode ini didukung oleh browser dan tersedia dalam win-
dow.navigatorobjek, bergetar telepon untuk 100 milidetik. dan berhasil di-
jalankan.
Menambahkan waktu yang telah berlalu Untuk meningkatkan replaya-
bility dan memberikan pemain pilihan untuk bersaing satu sama lain kita akan
menyimpan waktu berlalu - pemain kemudian dapat men
oba untuk memper-
baiki permainan waktu penyelesaian terbaik mereka. Untuk melaksanakan ini
kita harus membuat variabel untuk menyimpan jumlah aktual detik berlalu
dari awal permainan, dan untuk menunjukkan untuk pemain dalam permainan.
Mari kita mende nisikan variabel dalam
reate fungsi pertama:
Kemudian, tepat setelah itu, kita dapat menginisialisasi objek teks yang
diperlukan untuk menampilkan informasi ini kepada pengguna:
50
Kami mende nisikan posisi atas dan kiri dari teks, konten yang akan dita-
mpilkan dan styling diterapkan ke teks. Kami telah ini di
etak di layar, tapi itu
akan baik untuk memperbarui nilai-nilai setiap detik:
Lingkaran ini, juga dalam
reate fungsi, akan mengeksekusi updateCounter
fungsi setiap detik dari awal permainan, sehingga kita dapat menerapkan pe-
rubahan sesuai. Ini adalah bagaimana lengkap updateCounter fungsi terlihat:
Seperti yang Anda lihat kita in
rementing this.timer variabel dan memper-
barui isi teks objek dengan nilai saat ini pada setiap iterasi, sehingga pemain
melihat waktu yang telah berlalu.
Finishing Tingkat dan Permainan Bola bergulir di layar, timer bekerja
dan memiliki lubang dibuat bahwa kita harus men
apai. Sekarang mari kita
mengatur kemungkinan untuk benar-benar menyelesaikan level! Mengikuti garis
di update() fungsi menambahkan pendengar yang kebakaran ketika bola sampai
ke lubang.
Ini bekerja sama dengan
ollide metode dijelaskan sebelumnya. Ketika bola
tumpang tindih dengan lubang (bukan bertabrakan), yang nishLevel fungsi
dijalankan:
51
Jika level yang saat itu sama dengan jumlah maksimum tingkat (dalam
hal ini 5), maka permainan selesai - Anda akan mendapatkan pesan selamat
bersama dengan jumlah detik berlalu melalui seluruh permainan, dan tombol
untuk menekan bahwa membawa Anda ke menu utama. Jika level yang saat
itu lebih rendah dari 5, semua variabel ne
esary-reset dan tingkat berikutnya
dimuat.
Ide untuk tur baru Ini hanyalah sebuah demo yang bekerja dari permainan
yang bisa memiliki banyak tur tambahan. Kita bisa misalnya menambah
power-up untuk mengumpulkan sepanjang jalan yang akan membuat gulungan
bola kami lebih
epat, menghentikan timer selama beberapa detik atau mem-
berikan bola kekuasaan khusus untuk pergi melalui rintangan.Ada juga ruang
untuk perangkap yang akan memperlambat bola ke bawah atau membuat lebih
sulit untuk men
apai lubang. Anda dapat membuat tingkat lebih kesulitan
meningkat. Anda bahkan dapat menerapkan prestasi, leaderboards dan medali
untuk tindakan yang berbeda dalam permainan. Ada kemungkinan tak terbatas
- mereka hanya bergantung pada imajinasi Anda.
Ringkasan Tutorial ini akan membantu Anda menyelam ke pengembangan
game 2D dan menginspirasi Anda untuk membuat game yang mengagumkan
pada Anda sendiri. Anda dapat memainkan game demo Cyber Orb dan memeriksa
nya kode sumber di GitHub. HTML5 memberi kita alat baku, kerangka kerja
52
yang dibangun di atas itu semakin
epat dan lebih baik, jadi sekarang adalah
waktu yang tepat masuk ke pengembangan web game. Dalam tutorial ini kami
menggunakan Phaser, tetapi ada sejumlah kerangka kerja lainnya layak diper-
timbangkan juga seperti Impa
tJS , Membangun 2 atau PlayCanvas - itu ter-
gantung pada preferensi Anda, keterampilan (atau ketiadaan), skala proyek,
persyaratan dan aspek lainnya
oding. Anda harus memeriksa mereka semua
dan memutuskan mana yang sesuai dengan kebutuhan Anda yang terbaik.
ontoh lainnya adalah pada game dibawah ini
ˆ Dengan kodingan
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_
olor_40x60.png',
40, 60); game.load.image('atari', 'assets/sprites/atari130xe.png');
}
var sprite; var sprite2; var sprite3;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#124184';
// In this example the little Gameboy sprite
an pass through the top/bottom
of the Atari sprite // Be
ause it's set to ignore
ollisions on its top/bottom fa
es.
sprite = game.add.sprite(300, 200, 'atari'); sprite.name = 'atari'; game.physi
s.enable(sprite,
53
Phaser.Physi
s.ARCADE); sprite.body.
ollideWorldBounds= true; sprite.body.
he
kCollision.up
= false; sprite.body.
he
kCollision.down = false; sprite.body.immovable = true;
sprite2 = game.add.sprite(350, 400, 'gameboy', 2); sprite2.name = 'game-
boy';
game.physi
s.enable(sprite2, Phaser.Physi
s.ARCADE); sprite2.body.
ollideWorldBounds
= true; sprite2.body.boun
e.setTo(1, 1);
sprite3 = game.add.sprite(0, 210, 'gameboy', 4);
game.physi
s.enable(sprite3, Phaser.Physi
s.ARCADE);
sprite3.name = 'gameboy2'; sprite3.body.
ollideWorldBounds = true; sprite3.body.boun
e.setTo(1,
1);
sprite2.body.velo
ity.y = -200; sprite3.body.velo
ity.x = 200;
}
fun
tion update() {
game.physi
s.ar
ade.
ollide(sprite, sprite2); game.physi
s.ar
ade.
ollide(sprite,
sprite3);
}
fun
tion render() {
game.debug.bodyInfo(sprite, 16, 24);
// game.debug.body(sprite); // game.debug.body(sprite2);
}
atau dapat juga membuatnya seperti yang satu ini jika permainan yang akan
anda buat sesuai maka ikutilah kodingan dibawah ni
ostum sprite vs group
Vegetable = fun
tion (game) {
frame = game.rnd.between(0, 35);
54
// Just be
ause we don't want a false
hilli (frame 17) if (frame === 17) {
frame = 1; }
var x = game.rnd.between(100, 770); var y = game.rnd.between(0, 570);
Phaser.Image.
all(this, game, x, y, 'veggies', frame);
};
Vegetable.prototype = Obje
t.
reate(Phaser.Image.prototype); Vegetable.prototype.
onstru
tor
= Vegetable;
Chilli = fun
tion (game) {
var x = game.rnd.between(100, 770); var y = game.rnd.between(0, 570);
Phaser.Sprite.
all(this, game, x, y, 'veggies', 17);
game.physi
s.ar
ade.enable(this);
};
Chilli.prototype = Obje
t.
reate(Phaser.Sprite.prototype); Chilli.prototype.
onstru
tor
= Chilli;
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
preload: preload,
reate:
reate, update: update });
fun
tion preload() {
game.load.image('phaser', 'assets/sprites/phaser-dude.png'); game.load.spritesheet('veggies',
'assets/sprites/fruitnveg32wh37.png', 32, 32);
}
var sprite; var group; var
ursors;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#2d2d2d';
// This example will
he
k Sprite vs. Group
ollision group = game.add.group();
for (var i = 0; i < 70; i++) { if (i < 50) { // Vegetables don't have any
physi
s bodies group.add(new Vegetable(game)); } else { // But a
hilli has a
physi
s body group.add(new Chilli(game)); } }
// Our player sprite = game.add.sprite(32, 200, 'phaser');
game.physi
s.ar
ade.enable(sprite);
ursors = game.input.keyboard.
reateCursorKeys();
}
fun
tion update() {
game.physi
s.ar
ade.overlap(sprite, group,
ollisionHandler, null, this);
sprite.body.velo
ity.x = 0; sprite.body.velo
ity.y = 0;
if (
ursors.left.isDown) { sprite.body.velo
ity.x = -200; } else if (
ursors.right.isDown)
{ sprite.body.velo
ity.x = 200; }
if (
ursors.up.isDown) { sprite.body.velo
ity.y = -200; } else if (
ursors.down.isDown)
{ sprite.body.velo
ity.y = 200; }
}
fun
tion
ollisionHandler (player,
hilli) {
// If the player
ollides with a
hilli it gets eaten :)
hilli.kill();
}
55
jika kita ingin membuat efek obje
t menjadi tidak beraturan dan
memenuhi setiap
anvas yang ada kita dapat menggunakannya memakai
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('
ar', 'assets/sprites/
ar90.png'); game.load.image('baddie',
'assets/sprites/spa
e-baddie.png');
}
var
ar; var aliens; var
ursors; var spa
eKey;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
aliens = game.add.group(); aliens.enableBody = true;
for (var i = 0; i < 50; i++) { var s = aliens.
reate(game.world.randomX,
game.world.randomY, 'baddie'); s.name = 'alien' + s; s.body.
ollideWorldBounds
= true; s.body.boun
e.setTo(0.8, 0.8); s.body.velo
ity.setTo(10 + Math.random()
* 40, 10 + Math.random() * 40); }
ar = game.add.sprite(400, 300, '
ar');
ar.name = '
ar';
ar.an
hor.set(0.5);
game.physi
s.enable(
ar, Phaser.Physi
s.ARCADE);
ar.body.
ollideWorldBounds= true;
ar.body.boun
e.set(0.8);
ar.body.allowRotation
56
= true;
ar.body.immovable = true;
ursors = game.input.keyboard.
reateCursorKeys();
spa
eKey = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spa
eKey.onDown.add(togglePause,
this);
}
fun
tion togglePause() {
game.physi
s.ar
ade.isPaused = (game.physi
s.ar
ade.isPaused) ? false :
true;
}
fun
tion update() {
game.physi
s.ar
ade.
ollide(
ar, aliens);
ar.body.velo
ity.x = 0;
ar.body.velo
ity.y = 0;
ar.body.angularVelo
ity =
0;
if (
ursors.left.isDown) {
ar.body.angularVelo
ity = -200; } else if (
ur-
sors.right.isDown) {
ar.body.angularVelo
ity = 200; }
if (
ursors.up.isDown) {
ar.body.velo
ity.
opyFrom(game.physi
s.ar
ade.velo
ityFromAngle(
ar.angle,
300)); }
}
fun
tion render() {
}
selain itu, kita juga dapat membuat sebuah obje
t dengan pengen-
dalian gravitasi seperti gambar dibawah ini
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
preload: preload,
reate:
reate, render: render });
fun
tion preload() {
game.load.image('ilkke', 'assets/sprites/ilkke.png');
}
var sprite1; var sprite2; var sprite3; var sprite4;
57
fun
tion
reate() {
game.stage.ba
kgroundColor = '#2d2d2d';
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
// Set the world (global) gravity game.physi
s.ar
ade.gravity.y = 100;
// Sprite 1 will use theWorld (global) gravity sprite1 = game.add.sprite(100,
96, 'ilkke');
// Sprite 2 is set to ignore the global gravity and use its own value sprite2
= game.add.sprite(300, 96, 'ilkke');
// Sprite 3 will use both the world gravity and its own gravityS
ale modi er
sprite3 = game.add.sprite(500, 96, 'ilkke');
// Sprite 4 will ignore all gravity sprite4 = game.add.sprite(700, 96, 'ilkke');
// Enable physi
s on those sprites game.physi
s.enable( [ sprite1, sprite2,
sprite3, sprite4 ℄, Phaser.Physi
s.ARCADE);
sprite1.body.
ollideWorldBounds = true; sprite1.body.boun
e.y = 0.8; sprite2.body.
ollideWorldBounds
= true; sprite2.body.boun
e.y = 0.8; sprite2.body.gravity.y= 200; sprite3.body.
ollideWorldBounds
= true; sprite3.body.boun
e.y = 0.8; sprite3.body.gravity.y = 50;
sprite4.body.allowGravity = false;
}
fun
tion render() {
game.debug.text('world gravity', sprite1.x - 32, 64); game.debug.text('lo
al
gravity', sprite2.x - 32, 64); game.debug.text('lo
al / 2', sprite3.x - 32, 64);
game.debug.text('no gravity', sprite4.x - 32, 64);
}
Move Towards Obje
t
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
preload: preload,
reate:
reate, update: update });
58
fun
tion preload() {
game.load.image('ball', 'assets/sprites/shinyball.png');
}
var balls;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
balls = game.add.group(); balls.enableBody = true;
for (var i = 0; i < 50; i++) { var ball = balls.
reate(game.world.randomX,
game.world.randomY, 'ball'); }
}
fun
tion update() {
if (game.input.mousePointer.isDown) { // First is the
allba
k // Se
ond is
the
ontext in whi
h the
allba
k runs, in this
ase game.physi
s.ar
ade
// Third is the parameter the
allba
k expe
ts - it is always sent the Group
hild as the rst parameter balls.forEa
h(game.physi
s.ar
ade.moveToPointer,
game.physi
s.ar
ade, false, 200);
}
else { balls.setAll('body.velo
ity.x', 0); balls.setAll('body.velo
ity.y', 0); } }
Body S
ale
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_
olor_40x60.png',
40, 60);
}
var sprite; var sprite2;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
59
game.stage.ba
kgroundColor = '#124184';
// Here we're tweening the s
ale of the sprite, whi
h translates to the s
ale
of the Body as well.
// The
ollision will
arry on working even against the s
aled body.
sprite = game.add.sprite(200, 300, 'gameboy', 2);
sprite.an
hor.set(0.5); sprite.smoothed = false;
game.physi
s.enable(sprite, Phaser.Physi
s.ARCADE);
sprite.body.immovable = true;
sprite2 = game.add.sprite(600, 270, 'gameboy', 3);
game.physi
s.enable(sprite2, Phaser.Physi
s.ARCADE);
game.add.tween(sprite.s
ale).to( { x: 3, y: 3 }, 2000, Phaser.Easing.Linear.None,
true, 0, 1000, true);
}
fun
tion update() {
sprite2.body.velo
ity.x = -200;
game.physi
s.ar
ade.
ollide(sprite, sprite2);
}
fun
tion render() {
// game.debug.body(sprite);
// game.debug.body(sprite2);
}
Dire
t Body Movement
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('atari', 'assets/sprites/atari130xe.png'); game.load.image('mushroom',
'assets/sprites/mushroom2.png');
60
}
var sprite1; var sprite2;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#2d2d2d';
sprite1 = game.add.sprite(300, 50, 'atari'); sprite2 = game.add.sprite(400,
450, 'mushroom');
game.physi
s.ar
ade.enable([ sprite1, sprite2 ℄, Phaser.Physi
s.ARCADE);
game.add.tween(sprite1.body).to( { y: 400 }, 3000, Phaser.Easing.Linear.None,
true);
}
fun
tion update() {
game.physi
s.ar
ade.overlap(sprite1, sprite2, overlapHandler, null, this);
}
fun
tion overlapHandler (obj1, obj2) {
game.stage.ba
kgroundColor = '#992d2d';
obj2.kill();
}
fun
tion render() {
game.debug.body(sprite1); game.debug.body(sprite2);
}
Multi Angle to Pointer
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update });
fun
tion preload() { game.load.image('arrow', 'assets/sprites/longarrow.png');
}
var sprite1; var sprite2; var sprite3; var sprite4;
61
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#363636';
sprite1 = game.add.sprite(150, 150, 'arrow'); sprite1.an
hor.setTo(0.1, 0.5);
sprite2 = game.add.sprite(200, 500, 'arrow'); sprite2.an
hor.setTo(0.1, 0.5);
sprite3 = game.add.sprite(400, 200, 'arrow'); sprite3.an
hor.setTo(0.1, 0.5);
sprite4 = game.add.sprite(600, 400, 'arrow'); sprite4.an
hor.setTo(0.1, 0.5);
}
fun
tion update() {
// This will update the sprite.rotation so that it points to the
urrently
a
tive pointer // On a Desktop that is the mouse, on mobile the most re
ent
nger press.
sprite1.rotation = game.physi
s.ar
ade.angleToPointer(sprite1); sprite2.rotation
= game.physi
s.ar
ade.angleToPointer(sprite2); sprite3.rotation= game.physi
s.ar
ade.angleToPointer(sprite3);
sprite4.rotation = game.physi
s.ar
ade.angleToPointer(sprite4);
}
Multiball
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('atari', 'assets/sprites/atari130xe.png'); game.load.spritesheet('bullets',
'assets/sprites/balls.png', 17, 17);
}
var atari; var balls; var
ursors;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#2d2d2d';
62
balls = game.add.group();
balls.
reateMultiple(250, 'bullets', 0, false);
atari = game.add.sprite(300, 450, 'atari');
game.physi
s.ar
ade.gravity.y = 400;
// Enable physi
s on everything added to the world so far (the true parame-
ter makes it re
urse down into
hildren) game.physi
s.ar
ade.enable(game.world,
true);
atari.body.allowGravity = 0; atari.body.immovable = true;
ursors = game.input.keyboard.
reateCursorKeys();
game.time.events.loop(150, re, this);
game.add.text(16, 16, 'Left / Right to move', { font: '18px Arial', ll:
'# ' });
}
fun
tion re() {
var ball = balls.getFirstExists(false);
if (ball) { ball.frame = game.rnd.integerInRange(0,6); ball.exists = true;
ball.reset(game.world.randomX, 0);
ball.body.boun
e.y = 0.8; }
}
fun
tion re e
t(a, ball) {
if (ball.y > (atari.y + 5)) { return true; } else { ball.body.velo
ity.x =
atari.body.velo
ity.x; ball.body.velo
ity.y *= -(ball.body.boun
e.y);
return false; }
}
fun
tion update() {
game.physi
s.ar
ade.
ollide(atari, balls, null, re e
t, this);
atari.body.velo
ity.x = 0;
if (
ursors.left.isDown) { atari.body.velo
ity.x = -200; } else if (
ursors.right.isDown)
{ atari.body.velo
ity.x = 200; }
balls.forEa
hAlive(
he
kBounds, this);
}
fun
tion
he
kBounds(ball) {
if (ball.y > 600) { ball.kill(); }
}
fun
tion render() {
}
Platform Tight dijalankan menggunakan kursor pada keyboard
63
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.spritesheet('dude', 'assets/games/starstru
k/dude.png', 32, 48);
game.load.image('ba
kground', 'assets/games/starstru
k/ba
kground2.png');
}
var player; var fa
ing = 'left'; var jumpTimer = 0; var
ursors; var jump-
Button; var bg;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
bg = game.add.tileSprite(0, 0, 800, 600, 'ba
kground');
game.physi
s.ar
ade.gravity.y = 300;
player = game.add.sprite(32, 320, 'dude'); game.physi
s.enable(player, Phaser.Physi
s.ARCADE);
player.body.
ollideWorldBounds= true; player.body.gravity.y= 1000; player.body.maxVelo
ity.y
= 500; player.body.setSize(20, 32, 5, 16);
player.animations.add('left', [0, 1, 2, 3℄, 10, true); player.animations.add('turn',
[4℄, 20, true); player.animations.add('right', [5, 6, 7, 8℄, 10, true);
ursors = game.input.keyboard.
reateCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}
fun
tion update() {
// game.physi
s.ar
ade.
ollide(player, layer);
player.body.velo
ity.x = 0;
if (
ursors.left.isDown) { player.body.velo
ity.x = -150;
if (fa
ing != 'left') { player.animations.play('left'); fa
ing = 'left'; } } else if
(
ursors.right.isDown) { player.body.velo
ity.x = 150;
if (fa
ing != 'right') { player.animations.play('right'); fa
ing = 'right'; } }
else { if (fa
ing != 'idle') { player.animations.stop();
64
if (fa
ing == 'left') { player.frame = 0; } else { player.frame = 5; }
fa
ing = 'idle'; } } if (jumpButton.isDown && player.body.onFloor() &&
game.time.now > jumpTimer) { player.body.velo
ity.y = -500; jumpTimer =
game.time.now + 750; }
}
fun
tion render () {
// game.debug.text(game.time.physi
sElapsed, 32, 32); // game.debug.body(player);
game.debug.bodyInfo(player, 16, 24);
}
Ship Trail memainkannya dengan
ara mengklik mouse
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('
hunk', 'assets/sprites/
hunk.png'); game.load.image('arrow',
'assets/sprites/asteroids_ship.png');
}
var sprite; var bmd;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
// Cli
k on the left or right of the game to shoot the spa
e ship in that
dire
tion
game.stage.ba
kgroundColor = '#124184';
bmd = game.add.bitmapData(800, 600); bmd.
ontext. llStyle = '# ';
var bg = game.add.sprite(0, 0, bmd);
game.physi
s.ar
ade.gravity.y = 100;
sprite = game.add.sprite(32, 450, 'arrow'); sprite.an
hor.set(0.5);
65
game.physi
s.enable(sprite, Phaser.Physi
s.ARCADE);
sprite.body.
ollideWorldBounds = true; sprite.body.boun
e.set(0.8);
game.input.onDown.add(laun
h, this);
}
fun
tion laun
h() {
if (game.input.x < sprite.x) { sprite.body.velo
ity.setTo(-200, -200); } else {
sprite.body.velo
ity.setTo(200, -200); }
}
fun
tion update() {
sprite.rotation = sprite.body.angle;
bmd.
ontext. llRe
t(sprite.x, sprite.y, 2, 2);
bmd.dirty = true;
}
fun
tion render() {
game.debug.bodyInfo(sprite, 32, 32);
}
Shoot the point memainkan dengan
ara mengikuti arah mouse yang sednga
digunakan
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('arrow', 'assets/sprites/arrow.png'); game.load.image('bullet',
'assets/sprites/purple_ball.png'); }
var sprite; var bullets;
var reRate = 100; var nextFire = 0;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
66
game.stage.ba
kgroundColor = '#313131';
bullets = game.add.group(); bullets.enableBody = true; bullets.physi
sBodyType
= Phaser.Physi
s.ARCADE;
bullets.
reateMultiple(50, 'bullet'); bullets.setAll('
he
kWorldBounds', true);
bullets.setAll('outOfBoundsKill', true); sprite = game.add.sprite(400, 300, 'ar-
row'); sprite.an
hor.set(0.5);
game.physi
s.enable(sprite, Phaser.Physi
s.ARCADE);
sprite.body.allowRotation = false;
}
fun
tion update() {
sprite.rotation = game.physi
s.ar
ade.angleToPointer(sprite);
if (game.input.a
tivePointer.isDown) { re(); }
}
fun
tion re() {
if (game.time.now > nextFire && bullets.
ountDead() > 0) { nextFire =
game.time.now + reRate;
var bullet = bullets.getFirstDead();
bullet.reset(sprite.x - 8, sprite.y - 8);
game.physi
s.ar
ade.moveToPointer(bullet, 300); }
}
fun
tion render() {
game.debug.text('A
tive Bullets: ' + bullets.
ountLiving() + ' / ' + bul-
lets.total, 32, 32); game.debug.spriteInfo(sprite, 32, 450);
}
Sort Dire
tion Verti
al menjalankan obje
t dengan menggunakan navigasi
keyboard
67
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
preload: preload,
reate:
reate, update: update });
fun
tion preload() {
game.load.image('phaser', 'assets/sprites/phaser-dude.png'); game.load.spritesheet('veggies',
'assets/sprites/fruitnveg32wh37.png', 32, 32);
}
var sprite; var group; var
ursors;
fun
tion
reate() {
game.world.setBounds(0, 0, 800, 3000); game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#2d2d2d';
sprite = game.add.sprite(400, 2900, 'phaser');
// game.physi
s.ar
ade.sortDire
tion= Phaser.Physi
s.Ar
ade.TOP_BOTTOM;
game.physi
s.ar
ade.sortDire
tion = Phaser.Physi
s.Ar
ade.BOTTOM_TOP;
game.physi
s.ar
ade.enable(sprite); group = game.add.physi
sGroup(Phaser.Physi
s.ARCADE);
for (var i = 0; i < 500; i++) { var
= group.
reate(game.rnd.integerInRange(64,
800-64), game.rnd.integerInRange(100, 2900), 'veggies', game.rnd.integerInRange(0,
35));
.name = 'veg' + i;
.body.immovable = true; }
for (var i = 0; i < 20; i++) { // Here we'll
reate some
hillis whi
h
the player
an pi
k-up. They are still part of the same Group. var
=
group.
reate(game.rnd.integerInRange(64, 800-64), game.rnd.integerInRange(0,
2000), 'veggies', 17);
.body.immovable = true; }
game.
amera.follow(sprite);
ursors = game.input.keyboard.
reateCursorKeys();
}
fun
tion update() {
game.physi
s.ar
ade.
ollide(sprite, group,
ollisionHandler, null, this);
sprite.body.velo
ity.x = 0; sprite.body.velo
ity.y = 0;
if (
ursors.left.isDown) { sprite.body.velo
ity.x = -200; } else if (
ursors.right.isDown)
{ sprite.body.velo
ity.x = 200; }
if (
ursors.up.isDown) { sprite.body.velo
ity.y = -200; } else if (
ursors.down.isDown)
{ sprite.body.velo
ity.y = 200; }
}
fun
tion
ollisionHandler (player, veg) {
// If the player
ollides with the
hillis then they get eaten :) // The
hilli
frame ID is 17
if (veg.frame === 17) { veg.kill(); }
}
68
Snake
// Snake by Patri
k OReilly and Ri
hard Davey // Twitter: pato_reilly
Web: http://patri
ko.byethost9.
om
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update,render : render });
fun
tion preload() {
game.load.image('ball','assets/sprites/shinyball.png');
}
var snakeHead; //head of snake sprite var snakeSe
tion = new Array();
//array of sprites that make the snake body se
tions var snakePath = new
Array(); //arrary of positions(points) that have to be stored for the path the
se
tions follow var numSnakeSe
tions = 30; //number of snake body se
tions
var snakeSpa
er = 6; //parameter that sets the spa
ing between se
tions
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.world.setBounds(0, 0, 800, 600);
ursors = game.input.keyboard.
reateCursorKeys();
snakeHead = game.add.sprite(400, 300, 'ball'); snakeHead.an
hor.setTo(0.5,
0.5);
69
game.physi
s.enable(snakeHead, Phaser.Physi
s.ARCADE); // Init snake-
Se
tion array for (var i = 1; i <= numSnakeSe
tions-1; i++) { snakeSe
tion[i℄
= game.add.sprite(400, 300, 'ball'); snakeSe
tion[i℄.an
hor.setTo(0.5, 0.5); } //
Init snakePath array for (var i = 0; i <= numSnakeSe
tions * snakeSpa
er;
i++) { snakePath[i℄ = new Phaser.Point(400, 300); }
}
fun
tion update() {
snakeHead.body.velo
ity.setTo(0, 0); snakeHead.body.angularVelo
ity = 0;
if (
ursors.up.isDown) { snakeHead.body.velo
ity.
opyFrom(game.physi
s.ar
ade.velo
ityFromAngle(snakeHead.angle,
300));
// Everytime the snake head moves, insert the new lo
ation at the start of
the array, // and kno
k the last position o the end
var part = snakePath.pop();
part.setTo(snakeHead.x, snakeHead.y);
snakePath.unshift(part);
for (var i = 1; i <= numSnakeSe
tions - 1; i++) { snakeSe
tion[i℄.x =
(snakePath[i * snakeSpa
er℄).x; snakeSe
tion[i℄.y = (snakePath[i * snakeSpa
er℄).y;
} }
if (
ursors.left.isDown) { snakeHead.body.angularVelo
ity = -300; } else if
(
ursors.right.isDown) { snakeHead.body.angularVelo
ity = 300; }
}
fun
tion render() {
game.debug.spriteInfo(snakeHead, 32, 32);
}
70
One way
ollision
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_
olor_40x60.png',
40, 60); game.load.image('atari', 'assets/sprites/atari130xe.png');
}
var sprite; var sprite2; var sprite3;
fun
tion
reate() {
game.physi
s.startSystem(Phaser.Physi
s.ARCADE);
game.stage.ba
kgroundColor = '#124184';
// In this example the little Gameboy sprite
an pass through the top/bottom
of the Atari sprite // Be
ause it's set to ignore
ollisions on its top/bottom fa
es.
sprite = game.add.sprite(300, 200, 'atari'); sprite.name = 'atari'; game.physi
s.enable(sprite,
Phaser.Physi
s.ARCADE); sprite.body.
ollideWorldBounds= true; sprite.body.
he
kCollision.up
= false; sprite.body.
he
kCollision.down = false; sprite.body.immovable = true;
sprite2 = game.add.sprite(350, 400, 'gameboy', 2); sprite2.name = 'game-
boy';
game.physi
s.enable(sprite2, Phaser.Physi
s.ARCADE); sprite2.body.
ollideWorldBounds
= true; sprite2.body.boun
e.setTo(1, 1);
sprite3 = game.add.sprite(0, 210, 'gameboy', 4);
game.physi
s.enable(sprite3, Phaser.Physi
s.ARCADE);
sprite3.name = 'gameboy2'; sprite3.body.
ollideWorldBounds = true; sprite3.body.boun
e.setTo(1,
1);
sprite2.body.velo
ity.y = -200; sprite3.body.velo
ity.x = 200;
71
}
fun
tion update() {
game.physi
s.ar
ade.
ollide(sprite, sprite2); game.physi
s.ar
ade.
ollide(sprite,
sprite3);
}
fun
tion render() {
game.debug.bodyInfo(sprite, 16, 24);
// game.debug.body(sprite); // game.debug.body(sprite2);
}
Laun
her Follow World
// mods by Patri
k OReilly // twitter: pato_reilly
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example',
{ preload: preload,
reate:
reate, update: update, render: render });
fun
tion preload() {
game.load.image('ba
kground','assets/mis
/star eld.jpg'); game.load.image('player','assets/sprites/phaser-
dude.png'); game.load.image('analog', 'assets/tests/fusia.png'); game.load.image('arrow',
'assets/sprites/longarrow2.png'); }
72
var myTween; var player; var
ursors; var arrow; var
at
hFlag = false; var
laun
hVelo
ity = 0; var laun
hed;
fun
tion
reate() { game.world.setBounds(0, 0, 5000, 600); game.add.tileSprite(0,
0, 5000, 600, 'ba
kground'); var graphi
s = game.add.graphi
s(0,0); graph-
i
s.beginFill(0x049e0
); graphi
s.drawRe
t(395, 400, 10, 250); analog = game.add.sprite(400,
400, 'analog'); analog.width = 8; analog.rotation = 220; analog.alpha = 0;
analog.an
hor.setTo(0.5, 0.0); arrow = game.add.sprite(400, 400, 'arrow'); ar-
row.an
hor.setTo(0.1, 0.5); arrow.alpha = 0;
player = game.add.sprite(150, 320, 'player'); player.an
hor.setTo(0.5, 0.5);
game.physi
s.enable(player, Phaser.Physi
s.ARCADE);
player.body.
ollideWorldBounds= true; player.body.boun
e.set(0.9); player.body.drag.set(20,
0);
// Enable input. player.inputEnabled = true; player.input.start(0, true);
player.events.onInputDown.add(set); player.events.onInputUp.add(laun
h); //
this tween is to make the
amera return to left side of world when done laun
hing
// so it is not used until then myTween = game.add.tween(player).to({x: 150},
5000, Phaser.Easing.Linear.None); myTween.onComplete.add(reappear, this);
game.
amera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); }
fun
tion reappear() { laun
hed = false; player.alpha = 1; }
fun
tion set(player,pointer) {
//disallow laun
hing until reset if (!laun
hed) {
at
hFlag = true; game.
amera.follow(null);
player.body.moves= false; player.body.gravity.set(0); player.body.velo
ity.set(0);
} }
fun
tion laun
h() { if (
at
hFlag) {
at
hFlag = false; laun
hed = true;
game.
amera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); arrow.alpha
= 0; analog.alpha = 0; Xve
tor = (arrow.x - player.x) * 3; Yve
tor = (arrow.y
- player.y) * 3; player.body.moves = true; player.body.gravity.setTo(0, 180);
player.body.velo
ity.setTo(Xve
tor, Yve
tor); } }
fun
tion update() {
arrow.rotation= game.physi
s.ar
ade.angleBetween(arrow, player); // Tra
k
the player sprite to the mouse if (
at
hFlag) { distan
e = game.physi
s.ar
ade.distan
eToPointer(arrow);
theta = game.physi
s.ar
ade.angleToPointer(arrow); // Govern the distan
e the
sprite is dragged away from laun
h post if (distan
e > 300) { distan
e = 300;
adja
entX = Math.
os(theta) * distan
e; oppositeY = Math.sin(theta) * dis-
tan
e; player.x = 400 + adja
entX; player.y = 400 + oppositeY; analog.height
= distan
e; } else { player.x = game.input.a
tivePointer.worldX; player.y =
game.input.a
tivePointer.worldY; analog.height = distan
e; } arrow.alpha = 1;
analog.alpha = 0.5; analog.rotation = arrow.rotation - Math.PI/2; laun
hVelo
-
ity = analog.height; } //
he
k sprite motion and if done, return
amera to left
side of world var tweening = myTween.isRunning;
if (!tweening && laun
hed && (player.x >= game.world.width-20 || player.body.deltaX()
== 0)) { player.body.velo
ity.setTo(0, 0); player.alpha = 0; player.body.moves
= false; player.x = 150; player.y = 320; myTween.start(); }
}
fun
tion render() {
73
game.debug.text("Drag the sprite and release to laun
h", 32, 32, 'rgb(0,255,0)');
game.debug.
ameraInfo(game.
amera, 32, 64); game.debug.spriteCoords(player,
32, 150); game.debug.text("Laun
h Velo
ity: " + parseInt(laun
hVelo
ity), 550,
32, 'rgb(0,255,0)');
}
Bab 5
Kesimpulan
Ar
ade adalah sistem sika real digunakan dengan Phaser dan menyediakan
sistem sika dasar yang memungkinkan untuk tabrakan, per
epatan, ke
epatan
dan sebagainya. Jika Anda sudah menggunakan Phaser, maka kemungkinan
Anda akan terbiasa dengan sistem sika Ar
ade. Phaser memiliki 3 sistem sika
yang tersedia salah satunya adalah ar
ade physi
h. Bila menggunakan sistem
Ar
ade Fisika, yang HitBox untuk sprite akan selalu menjadi Lon
at persegi
panjang sederhana. dalam beberapa game Ar
ade Physi
biasanya adalah game
yang membutuhkan dasar- dasar sika dalam proses pembuatannya. dalam
hal ini, kalian dapat menggunakan Ar
ade Physi
h dalam pembuatan game
yang memerlukan skill seperti pada skill diatas.Meskipun telah banyak hasil
yang lebih memuaskan dibandingkan dengan menggunakan ar
ade physi
tetapi
perkembangannya ar
ade physi
masih sangat diminati para pembuat indus-
tri game untuk membuat game lebih hidup atau lebih baik dari segi tampilan
dan hasilnya. selain itu dalam menggunakan ar
ade physi
h dalam pembuatan
suatu game kita dapat berkreasi dengan apa yang kita inginkan menggunakan
javas
ript sederhana yang tersedia di dalam platform platform open sour
e pada
internet. untuk menggunakan Ar
ade Physi
inipun
ukup mudah. kita dapat
mengaplikasikannya dengan software phaser yang telah dibahas sebelumnya.
Phaser adalah open sour
e kerangka kerja HTML5 permainan
epat, gratis
dan menyenangkan. Ini menggunakan membangun kebiasaan Pixi.js untuk We-
bGL dan Canvas rendering di desktop dan browser web mobile. Permainan
dapat dikompilasi untuk iOS, Android dan aplikasi desktop melalui alat pi-
hak ke-3 seperti Co
oon, Cordova dan Ele
tron.Seiring dengan komunitas open
sour
e yang fantastis Phaser se
ara aktif dikembangkan dan dikelola oleh Pho-
ton Badai Terbatas .
Sebagai hasil dari dukungan yang
epat dan pengembang ramah API Phaser
saat ini salah satu yang paling membintangi kerangka permainan di GitHub.Ribuan
pengembang di seluruh dunia menggunakannya. Dari indies dan lembaga digital
multi-nasional untuk sekolah-sekolah dan universitas. Setiap men
iptakan per-
mainan yang luar biasa mereka sendiri.Kerangka Phaser menyediakan Anda den-
gan satu set alat yang akan memper
epat pembangunan dan membantu menan-
gani tugas-tugas generik yang dibutuhkan untuk menyelesaikan permainan, se-
hingga Anda dapat fokus pada ide permainan itu sendiri.
Beberapa software resmi memiliki Panduan Memulai yang men
akup semua
yang Anda butuhkan untuk mulai mengembangkan permainan dengan Phaser.
74
Dari menyiapkan web server, untuk memilih sebuah IDE dan
oding game per-
tama Anda. Silakan mulai di sini tidak peduli apa dev game-pengalaman Anda,
sebelum menyelam ke API.
Single sumber daya Phaser terbesar adalah situs web Phaser . Memiliki
ratusan tutorial terdaftar dan yang segar ditambahkan setiap minggu. Terus
datang kembali untuk melihat apa yang baru!
Menggunakan Phaser dengan naskah? Periksa seri besar ini Permainan Dari
S
rat
h tutorial.
Game tidak hanya sebagai sarana hiburan semata, kita sebagai pembuat
dapat membuat game edukasi yang dapat meningkatkan saraf otak anak atau
pun motorik anak dan membantu anak dalam menyelesaikan dan bertanggung
jawab dalam game yang sedang ia mainkan. unsur unsur dalam pembuatan
game tersebut tidaklah boleh tertinggal agar suatu game dapat bermanfaat
tidak hanya sekedar hiburan dan menghilangkan kepenatan.
Saran
dalam pembuatan makalah ini penulis sadar masih banyak sekali kekurangan
dalam hal informasi mengenai Ar
ade Physi
tersebut, makalah ini dapat terus
ditambahkan
ontoh-
ontoh pembuatan game menggunakan Ar
ade pHysi
dan
tidak hanya memakai satu software untuk menjalankannya. penulis berharap
buku ini dapat bermanfaat untuk orang sekitar dan informasi yang disampaikan
sampai kepada pemba
a.
Terima kasih,
75
76
