AECADE PHYSICS

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

Violin Plot : Grouped Violin Plots With Split Violins

Kata Pengantar

February 2, 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 kompetensi hard

skill dan softskill. Kompetensi Hardskill merupakan penguasaan dan penggu-

naan ilmu pengetehuan dan teknologi. sedangkan kompetensi Softskill meru-

pakan kemampuan mengatur dirinya sendiri dan orang lain. dalam dunia kerja,

sebuah profesi dituntut memiliki hard skill yang berbeda-beda. Softskill meru-

pakan kompetensi yang seharusnya dimiliki oleh semua orang, apapun pro-

fesinya. 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 den-

gan tugas mata kuliah Softskill dan akan mengangkat sebuah tema yaitu

Violing Plot - Gruped violinplots with split violins . 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 sepenuhnya bahwa di dalam buku ini terdapat kekurangan dan

jauh dari kata sempurna. oleh sebab itu, kami berharap adanya kritik, saran

dan usulan demi memperbaiki buku yang telah kami buat di masa yang akan

datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang mem-

bangun.

Kami juga mengu

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 Gu-

nadarma 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.

3

Depok, Januari 2016

Penyusun

Bab I

Pendahuluan

Violing Plot (Hintze dan Nelson, 1998) adalah metode meren

anakan data

numerik. Ini adalah sebuah box plot dengan diputar kepadatan kernel petak

disetiap sisinya.

Metode peren

anaan data numerik sudah sejak lama dikembangkan. Akan

tetapi, pada perkembangannya aplikasi metode tersebut dalam hal untuk menye-

lesaikan suatu permasalahan masih sangatlah jarang. Hal ini menyebabkan

karena alat bantu operasi perhitungan matematik seperti komputer masih san-

gatlah kurang. Semakin pesatnya perkembangan komputer, metode numerik

menjadi metode yang dipakai untuk menganalisa dan menyelesaikan masalah-

masalah yang terjadi di segala bidang ilmu. Akurasi perhitungan dari per-

masalahan se

ara matematis sangat bergantung pada asumsi-asumsi yang diberikan.

Masalah -masalah yang dapat diselesaikan oleh metode ini tidak hanya masalah

sederhana yang dapat diselesaikan se

ara analitik tetapi masalah kompleks pun

dapat diselesaikan oleh metode numerik tersebut. Pada Metode Numerik ini

sebuah permasalahan yang diformulasikan se

ara matematis merupakan suatu

pendekatan.

Violin Plot mirip dengan Box Plot, ke

uali bahwa mereka juga menunjukan

kepadatan probablitas dari data pada nilai yang berbeda ( dalam kasus yang

paling sederhana dapat menjadi sebuah Histogram ). Biasanya Violin Plot

akan men

akup penanda untuk median dari data yang tersedia dan kotak yang

akan menunjukkan kisaran interkuartilnya, seperti dalam plot kotak standart.

Overlay pada Box Plot ini adalah estimasi densitas kernel. Violoin Plot yang

tersedia sebagai ekstensi untuk sejumlah paket perangkat lunak, termasuk R

melalui vioplot, wvioplot,

aroline, UsingR, Library ggplot2, dan sebagainya.

Violin Plot juga

ukup mirip dengan sebuah gra k lobak yang digunakan di

dalam STATA.

Sebuah Violin Plot menunjukkan distribusi menggunakan lebar plot, yang

simetris pada porosnya. dalam R, vioplot () adalah perintah, yang akan di-

gunakan untuk membuat sebuah violin plot. sebuah Violin Plot memainkan

peran yang sama sebagai box dan whisker plot. ini menunjukan distribusi data

kuantitatif di beberapa tingkat satu (atau lebih) variabel kategori seperti itu

yang terdistribusi dapat dibandingkan. disebut sebagai Violin Plot karena gam-

bar gra k tersebut tampak seperti sebuah biola dengan lekukan lekukan yg

dibentuknya. Pada Violin Plot dapat menjadi sebuah

ara yang efektif dan

menarik untuk menampilkan beberapa distribusi data sekaligus atau berguan

untuk membandingkan distribusi, namun perlu diingat bahwa prosedur estimasi

4

dipengaruhi oleh ukuran sampel, dan Violin plot untuk sampel yang relatif ke-

il mungkin terlihat menyesatkan yang sangat halus. Violin Plots banyak yg

menggunakan menggunakan sebuah aplikasi R ataupun ggplots. Pada penggu-

naanya Violin Plots adalah gabungan dari dua plot yang berkesinambungan.

dan menghasilkan median dari suatu data numerik.

Bab II

Konsep Violing Plot - Gruped violinplots with split violins

Violin Plot adalah metode meren

anakan data numerik. ini adalah box plot

dengan diputar kepadatan kernel petak di seiap sisi. Violin Plot mirip dengan

box plot, ke

ulai bahwa mereka juga menunjukan probabilitasnya dari data pada

nilai yang berbeda (dalam kasus yang paling sederhana ini bisa menjadi sebuah

Histogram). Biasanya Plot Biola akan men

akup penanda untuk median dari

data dan kotak yang menunjukkan kisaran interkuartil, seperti dalam plot kotak

standar. Overlay pada Box Plot ini adalah Estimasi densitas kernel.

Violoin Plot yang tersedia sebagai ekstensi untuk sejumlah paket perangkat

lunak, termasuk R melalui vioplot, wvioplot,

aroline, UsingR, perpustakaan

ggplot2, stata melalui vioplot add in, dan phython serta matlab. Contoh gam-

bar dibawah ini adalah untuk menyelesaikan suatu permasalahan ilmiah pada

publikasi ilmiah di PLOS Pathogens.

5

Pada dasarnya, Gruped Violin Plot with Split Violin adalah sebuah Violin

Plot dengan penggabungan beberapa Violin Plot dengan menggunakan sebuah

split violin. dalam hal lain, yaitu menggabungkan beberapa masalah anali-

tik yang memiliki data akurat untuk menghasilkan suatu kesimpulan dengan

mengkombine kedua data tersebut menggunakan split violins. apa itu split vi-

olins? Split Violins adalah teknik pada Violin Plot untuk membagi- bagi atau

memisahkan suatu kepadatan pada sebuah data masalah yang akan dikerjakan.

Berikut adalah

ontoh gambar sebuah Gruped Violin Plot with split violin.

pada gambar Violin Plots - gruped violin plots with split violin diatas memakai

6

sebuah software phyton untuk membuatnya. dan untuk membuatnya menjadi

seperti gambar berikut menggunakan sour

e kode yaitu :

import seaborn as sns

sns.set(style= whitegrid , palette= pastel ,

olor_

odes=True)

#load the example tips dataset

tips = sns.load_dataset( tips )

# Draw a nested violinplot and split the violinsfor easier

omparison

sns.violinplot(x= day , y= total_bill , hue= sex , data=tips, split=True,

inner= quart , palette={ Male : b , female : y })

sns.despine(left=True)

Violin Plots di ggplot Jika pada

ontoh diatas menggunakan phyton,

kali ini software yang akan digunakan adalah paket ggplot2 di R. Siapa pun yg

menggunakannya mungkin akrab dengan geom_violin yang men

iptakan plot

biola. pemikiran tentang violin plot sebagai jalan lain dari densitas (yang pada

dasarnya sebuah histogram) . violin plot akan terlihat seperti ini

library ( ggplot2 ) ggplot (mt

ars, aes (x = fa

tor (

yl ), y=mpg , ll =fabtor

(

yl ))) + geom_violin ()

pada violin plot ini adalah sebuah teknik yang sangat berguna, karena ter-

lihat menunjukan bentuk distribusi dan memungkinkan mereka dengan mudah

memperkirakan modus dan jangkauan. Jika anda juga membutuhkan median

dan rentang interkuartil, itu sederhana untuk menampilkan mereka dengan over-

7

lay box plot (Violin Plot biasanya dibuat dengan

ara seperti ini).berikut adalah

beberapa

ontoh perbedaan antara beberapa plot

• Violin Plot (Plot Biola) dengan bar gra k

Violin Plot tidak terlalu populer dikalangan psikologi sastra, setidaknya diantara

kalangan visi/kognisi. sebaliknya, gra k batang lebih umum dan menyingkirkan

semua informasi yang tersedia di dalam Violin Plot.

library ( dplyr ) mt

arsSummary <- mt

ars %>% group_by (

yl ) %>%

summarize ( mpg_mean = mean ( mpg ), mpg_se = sqrt ( var (mpg) /

length (mpg)))

ggplot ( mt

arsSummary , aes ( x = fa

tor (

yl), y = mpg_mean,

ll = fa

tor (

yl))) + geom_bar (stat = identity )

Gra k batang menyoroti statistik tunggal memilih analis. Dalam Psikologi

dan bidang lainnya), peneliti menggunakan gra k batang untuk memvisualisas-

ikan mean dari data, dan biasanya men

akup bar kesalahan untuk menunjukan

kesalahan standar (atau interval keper

ayaan lain).

Namun, ketika akan melihat

aranya gra k batang, mereka akan menemukan

kesulitan menilai nilai-nilai yang tepat di dalam bar (yaitu dibawah rata - rata

) lebih mungkin dibandingkan sebagai nilai berjarak sama dari sebuah mean,

tetapi tetap diluar bar. Bias ini tidak mempengaruhi Violin Plot karena wilayah

di dalam Violin Plot berisi semua data yang diamati.

Mean dan Standart error adalah statistik yang hanya berguna bila seseorang

menganggap bahwa data yang biasa di distribusikan; gra k batang tidak mem-

8

bantu anda memeriksa asumsi tersebut. Untuk studi dalam kasus yang ke

il,

akan lebih efektif jika hanya meren

anakan setiap pengamatan tunggal.

• Violin Plot (Plot Biola) dan Density Plot

sebuah plot biola menunjukan kepadatan distribusi menggunakan lebar plot,

yang simestris pada porosnya, sementara plot kepadatan tradisional menggu-

nakan ketinggian dari dasar umum. Memungkinkan lebih mudah untuk diperki-

rakan perbedaan relatif dalam Density Plot, meskipun begitu yag terpenting

adalah Density Plot (atau histogram) siap menampilkan perkiraan kepadatan

(density), sedangkan Violin plot biasanya tidak hadir tersebut.

9

pada dasarnya, setiap plot memiliki setiap

ara masing masing untuk menampilkan

sebuah data dari suatu masalah analitik yg tersedia. jika pada gra s R, paket

vioplot dapat membuat Violin plot tanpa menggunakan ggplot2. seabornmun

ul

untuk membawa Violin Plot yg kuat untuk phyton.

ontoh kasus pada Violin Plot (Plot Biola) yaitu, ketika suatu data dikelom-

pokkan berdasarkan faktor dengan dua tingkat (misalnya laki-laki dan perem-

puan ). Anda dapat membagi dalam setengah Violin plot untuk melihat perbe-

daan antara kelompok 1 dan 2. dengan N = 1000.

ini akan memberi kita suatu perbandingan kasar distribusi masing masing

kelompok, dengan vioplot2() Violin plot akan dibuat. algoritmanya adalah

10

ini adalah tampilan hasil sour

e kode diatas

11

Violinplot.seaborn menggambarkan sebuah estimasi kepadatan boxplot

dan kernel.

pada violin plot, tidak seperti yg terdapat di boxplot, dimana semua kom-

ponen ren

ana sesuai dengan datapoints yang sebenarnya,plot biola memiliki

estimasi densitas kernel dari distribusi yang mendasariya. Hal ini dapat men-

jadi

ara yang efektif dan menarik untuk menampilkan beberapa distribusi data

seklaigus, namun perlu diingat bahwa prosedur estimasi dipengaruhi oleh uku-

ran sampel, dan Violin untuk sampel yang relatif ke

il mungkin terlihat mem-

bingungkan.

input data dapat dikirim dalam berbagai format, termasuk :

• Vektor data dipresentasikan sebagai daftar, array numpy, atau benda

panda series lulus langsung ke x y dan / atau hue parameter.

• Sebuah bentuk panjang Dataframe, dalam hal ini x y dan hue variabel

akan menentukan bagaimana data diplot.

• A wide-bentuk Dataframe, sehingga setiap kolom numerik akan di plot.

• Apapun yang diterima oleh plt.boxplot (misalnya array 2d atau daftar

vektor)

Dalam kebanyakan kasus memungkinkan untuk menggunakan sebuah numpy

atau phyton objek, tetapi pada objek panda lebih disukai karena nama-nama

12

yang terkait akan digunakan untuk membubuhi keterangan sumbu. selain itu,

dapat menggunakan sejumlah jenis katagori untuk variabel pengelompokan un-

tuk mengontrol urutan elemen plot.

13

Pengembalian :

14

Axes matplotlib: kapak

mengembalikan objek Axes dengan boxplot ke atasnya.

Ma

am-ma

am

ontoh plot dan kegunaannya:

Sebuah plot adalah teknik gra s untuk mewakili satu set data, biasanya sebagai

gra k yang menunjukkan hubungan antara dua variabel atau lebih. Plot dapat

ditarik dengan tangan atau oleh plotter mekanik atau elektronik. Gra k adalah

representasi visual dari hubungan antara variabel, sangat berguna bagi manusia

yang dapat dengan

epat memperoleh pemahaman yang tidak akan datang dari

daftar nilai. Gra k juga dapat digunakan untuk memba

a dari nilai variabel

yang tidak diketahui diplot sebagai fungsi dari satu dikenal. Gra k fungsi yang

digunakan dalam matematika, ilmu pengetahuan, teknik, teknologi, keuangan,

dan daerah lainnya.

Ikhtisar Plot memainkan peran penting dalam statistik dan analisis data.

Prosedur di sini dapat se

ara luas dibagi menjadi dua bagian: kuantitatif dan

gra s. Teknik kuantitatif adalah serangkaian prosedur statistik yang meng-

hasilkan keluaran numerik atau tabular. Contoh teknik kuantitatif meliputi

:

• uji hipotesa

• analisis varians

• estimasi titik dan interval keper

ayaan

• regresi kuadrat terke

il dan yang sejenis teknik semua berharga dan utama

dalamhal analisis klasik.

banyak juga terdapat alat statistik yang umumnya disebut teknik sebuah gra s.

yang diantaranya :

• plot pen

ar

• histogram

• kotak plot

• blok plot

• violin plot

• plot residual

• plot probabilitas

15

1.1 Jenis-jenis plot

• Countour Plot : sebuah plot dua dimensi yang menunjukan kurva satu

dimensi, yang disebut garis kontur yang kuantitasnya q diplot adalah kon-

stan. Opsional, nilai-nilai di plot dapat warna-kode

• Dalitz plot : ini adalah sebuah penyebaran yang sering digunakan dalam

sika partikel untuk mewakili frekuensi relatif dari berbagai (kinematik

yang berbeda)sopan santun dmana produk-produk dari peluruhan tiga-

tubuh tertentu mungkin bergerak terpisah

16

• Biplot: ini adalah jenis gra k yang digunakan dalam statistik. sebuah

biplot memungkinkan informasi pada kedua sampel dan variabel matriks

data yang akan ditampilkan se

ara gra s. sampel ditampilkan sebagai

poin sementara variabel ditampilkan baik sebagai vektor, sumu linier atau

non linier lintasan. Dalam kasus ini, poin tingkay variabel katagori da-

pat digunakan untuk mewakili variabel katagoris. sebuah biplot uum

menampilkan informasi pada kedua variabel kontinyu dan katagoris.

17

• Bland-Altman Plot: dalam kimia analitik dan biostatik plot ini adalah

metode data plotting yang digunakan dalam menganalisis perjanjian an-

tara dua tes yang berbeda. hal ini idntik dengan turkey rata-perbedaan

plot, yang masih dikenal dalam bigdang lain, tetapi dipopulerkan dalam

statistik medis oleh Bland and Altman.

18

• Arrhenius plot : plotini menampilkan logaritma dari tingkat yang (ln

(k), Ordinat axis) di plot terhadap suhu terbalik (1/ T, absis). Arhenius

plot sering digunakan untukmenganalisa pengaruh suhu terhadap tingkat

reaksi kimia.

• Dot plot (bioinformatika): sebuah titik plot metode grafs yang memu-

ngkinkan perbandingan dua sekuens biologis dan mengidenti kasi daerah

kemiripan antara mereka. Ini adalah suatu jenis plot kekambuhan.

sebuah DNA dot plot faktor transkrip zin

nger manusia(GenBank ID NM_002383),menunjukan

kemiripan-diri daerah. diagonal utama merupakan keselarasan urutan dengan

dirinya sendiri; gra s o dagonal utama merupakan pola yang sama atau beru-

lang dalam urutan.

19

• Dot plot (statistik): Sebuah titik gra s yang menunjukan kekuatan bukti

dalam studi ilmiah kuantitatif. ini dikembangkan untuk digunakan dalam

penelitian medis sebagai sarana gra s mewakili meta-analisis dari hasil

uji

oba terkontrol se

ara a

ak. Dalam dua periode terakhir, teknik meta-

analisis serupa telah diterapkan dalam studi observasional (epidemiologi

misal lingkungan) dan plot hutan sering digunakan dalam menyajikan

hasil penelitian tersebu juga.

• Saluran plot: ini adalah plot yang berguna untuk menge

ek keberadaan

bias publikasi di meta-analisis. Plot

orong, diperkenalkan oleh

ahaya

dan pillemner pada tahun 1994 dan dibahas se

ara rin

i oleh Egger dan

rekannya, yang emiliki tambahan berarti guna untuk meta-analisis. se-

buah plot

orong adalah sebar efek pengobatan terhadap ukuran ukuran

studi. hal ini digunakan terutama sebagai alat bantu visula untuk mende-

teksi Bias atau heterogenesis sistematis.

20

• Galbraith plot: dalam, statistik plot inijuga dikenal dengan Galbraith

petak radial atau hanya petak radial saja, adalah salah satu

ara menampilkan

beberapa perkiraan jumlah yang sama yang memiliki kesalahan standar

yang berbeda dengan hal ini dapat digunakan untuk memerikas hetero-

genitas. dala meta-analisis disebut sebagai alternatif atau suplemen untuk

plot hutan.

ontohnya ; untuk mengetahui dan mewakili kinetika enzim

• Plot Probabilitas : adalah teknik gra s yang digunakan untuk menilai

apakah suatu kumoulan data mengikuti distribusi tertentu seperti normal

atau weibull, dan untuk visual memperkirakkan lokasi dan skala param-

eter dari distribusi yang dipilih. Data diplot terhadap distribusi teoritis

sedemikian rupa bahwa poin harus membentuk sekitar garis lurus. Peny-

impangan dari garis lurus ini menunjukan keberangkatan dari distribuso

yang ditentukan.

21

• Nyquist Plot: Plot digunakan dalam kontrol dan pemrosesan sinyal otoma-

tis untuk menilai stabilitas sistem dengan umpan balik. Hal ini diwakili

oleh gra k dalam koordinat polar dimana keuntungan dan fase respon

frekuensi diplot. Plot ini jumlah fasor menunjukkan fase sebagai sudut

dan besarnya sebagai jarak dari titik asal.

• plot Spaghetti adalah metode melihat data untuk memvisualisasikan ke-

mungkinan arus melalui sistem. Arus digambarkan dengan

ara ini mun

ul

seperti mie, maka

oining istilah ini Metode statistik pertama kali digu-

nakan untuk mela

ak routing melalui pabrik. Visualisasi aliran dengan

ara ini dapat mengurangi ine siensi dalam aliran sistem.

22

• Plot Forest: adalah tampilan gra s yang menunjukkan kekuatan bukti

dalam studi ilmiah kuantitatif. Ini dikembangkan untuk digunakan dalam

penelitian medis sebagai sarana gra s mewakili meta-analisis dari hasil

uji

oba terkontrol se

ara a

ak. Dalam dua puluh tahun terakhir, teknik

meta-analisis serupa telah diterapkan dalam studi observasional (epidemi-

ologi misalnya lingkungan) dan plot hutan sering digunakan dalam menya-

jikan hasil penelitian tersebut juga

Plot

ontoh hutan lima odds ratio (kotak, sebanding dengan bobot yang

digunakan dalam meta-analisis), dengan ukuran ringkasan (garis tengah berlian)

dan interval keper

ayaan terkait (tips lateral diamond), dan garis vertikal yang

solid tidak berpengaruh. Nama ( ksi) studi ditunjukkan di sebelah kiri, rasio

odds dan interval keper

ayaan di sebelah kanan.

• Plot Star: Sebuah metode gra s menampilkan data multivariat. Setiap

bintang mewakili pengamatan tunggal. Biasanya, bintang plot yang di-

23

hasilkan dalam format multi-plot dengan banyak bintang pada setiap ha-

laman dan setiap bintang mewakili satu pengamatan.

• Permukaan Plot: Dalam jenis gra k, permukaan diplot untuk

o

ok satu

set kembar tiga data (X, Y, Z), di mana Z jika diperoleh dengan fungsi

yang akan diplot Z = f (X, Y). Biasanya, himpunan X dan Y nilai-nilai

yang sama spasi. Opsional, nilai-nilai diplot dapat warna-kode.

• Plot Ternary Sebuah plot terner, gra k terner, segitiga plot, alur simplex,

atau de Finetti diagram adalah plot bary

entri

pada tiga variabel yang

jumlah untuk konstan. Ini gra s menggambarkan rasio dari tiga variabel

sebagai posisi dalam sebuah segitiga sama sisi. Hal ini digunakan dalam

petrologi, mineralogi, metalurgi, dan ilmu-ilmu sik lainnya untuk menun-

jukkan komposisi sistem terdiri dari tiga spesies. Dalam genetika populasi,

sering disebut diagram de Finetti. Dalam teori permainan, sering disebut

plot simpleks.

24

• Stemplot: stemplot (atau batang-dan-daun plot), dalam statistik, adalah

perangkat untuk menyajikan data kuantitatif dalam format gra s, mirip

dengan histogram, untuk membantu memvisualisasikan bentuk distribusi.

Mereka berevolusi dari karya Arthur Bowley di awal 1900-an, dan alat

yang berguna dalam analisis data eksplorasi. Inferensi seperti histogram,

stemplots mempertahankan data asli untuk setidaknya dua signi kan digit,

dan memasukkan data dalam rangka, sehingga meringankan langkah un-

tuk memesan berbasis statistik andnon-parametrik.

25

• Shmoo Plot: Dalam teknik listrik, plot shmoo adalah tampilan gra s dari

respon dari komponen atau sistem yang berbeda-beda atas berbagai kon-

disi dan masukan. Sering digunakan untuk mewakili hasil pengujian sis-

tem elektronik yang kompleks seperti komputer, Asi

s atau mikroprosesor.

Plot biasanya menunjukkan berbagai kondisi di mana perangkat yang diuji

akan beroperasi.

• QQ plot: Dalam statistik, plot QQ (Q singkatan kuantil) adalah metode

gra s untuk mendiagnosis perbedaan antara distribusi probabilitas dari

populasi statistik dari mana sampel a

ak telah diambil dan distribusi per-

bandingan. Sebuah

ontoh dari jenis perbedaan yang dapat diuji adalah

non-normalitas distribusi populasi.

26

• Violin Plot: plot violin adalah metode meren

anakan data numerik. Mereka

mirip dengan kotak plot, ke

uali bahwa mereka juga menunjukkan kepa-

datan probabilitas dari data pada nilai yang berbeda (dalam kasus yang

paling sederhana ini bisa menjadi histogram). Biasanya plot violin akan

men

akup penanda untuk median dari data dan kotak yang menunjukkan

kisaran interkuartil, seperti dalam plot kotak standar. Overlay pada kotak

plot ini adalah estimasi densitas kernel. Plot biola yang tersedia sebagai

ekstensi untuk sejumlah paket perangkat lunak, termasuk R melalui per-

pustakaan vioplot, dan Stata melalui vioplot add-in.

Contoh Jenis gra k dan menggunakan mereka bervariasi sangat luas. Be-

berapa

ontoh khas adalah :

• Sederhana gra k: kurva Pasokan dan permintaan, gra k sederhana yang

digunakan dalam ekonomi untuk berhubungan pasokan dan permintaan

harga. Gra k dapat digunakan bersama-sama untuk menentukan keseim-

bangan ekonomi (pada dasarnya, untuk meme

ahkan persamaan).

• koordinat Non-persegi panjang: di atas semua menggunakan koordinat

persegi panjang dua dimensi;

ontoh gra k menggunakan koordinat polar,

kadang-kadang dalam tiga dimensi, adalah pola gra k radiasi antena, yang

mewakili kekuatan terpan

ar ke segala arah dengan antena tipe tertentu.

• graph sederhana yang digunakan untuk memba

a nilai-nilai: distribusi

probabilitas normal atau Gaussian berbentuk lon

eng, dari mana, misal-

nya, kemungkinan ketinggian manusia berada di kisaran tertentu dapat

diturunkan, mengingat data untuk penduduk laki-laki dewasa.

27

• Gra k Sangat kompleks: gra k psy

hrometri

, berkaitan suhu, tekanan,

kelembaban, dan jumlah lainnya.

28

PERANGKAT LUNAK YANG MENDUKUNG

VIOLIN PLOT

BAB III

February 2, 2016

VIOLIN PLOT

Semua variasi boxplot dibahas sejauh mempertahankan dasar KOTAK struk-

tur, bagaimanapun, dan ini adalah salah satu keterbatasan ini tampilan data.

kesederhanaan visual mereka dapat menyembungikan banyak rin

ian penting

tentang bagaimana nilai-nilai data yang didistribusikan. Sebuah jauh lebih

eksibel perpanjangan boxpolt dasar Violin PLot dibangun dengan mengu-

nakan konsep boxplot dengan perkiraan kepadatan nonparamerik. Kedua Box-

plots dengan estimasi kepadatan nonparamerik dibahas dengan menjelajahi-

data, tetapi gagasan menempatkan mereka bersama-sama dalam tampilan tidak

data tunggal. Violin Plot dibahas delam hal ini adalah salah satu

ara untuk

men

apai kombinasi ini , dan dibangun dalam komponen-komponen yang sama.

Violin Plot didukung dalam R baik sebagai bagian dari paket gratis kisi dan

melalui add-on paket wvioplot.

1

sebelumnya telah membahas Old Faithful geyser frame data yang setia, ter-

masuk dalam paket dataset instalasi dasar R, sebagian kaerena memberikan re-

spon bagus,

ontoh nyata data dataset dengan mendistribusikan nilai. bahkan

ini frame data men

akup dua variabel, waktu tunggu antar letusan beruntun

dibahas terkahir kali, dan durasi setiap letusan dan ternyata bahwa kedua vari-

abel tersebuat menunjukan distribusi bimodal kuat. hal ini mengambarkan den-

gan jelas dalam empat plot yang ditunjukan diatas ada dua plot yang pen

ar

dari nilai-nilai yang diamati dari variabel itu sendiri sementara bagian bawah

dua plot merupakan perkiraan kepadatan nonparamerik dihasilkan melalului

perintah R, mengunakan pilihan default.

seperti dalam pembahasan dari database ini karakter bimodal dari variabel-

variabel ini adalah jelas terlihat dalam plot besar pen

ar dari data nilai sendiri.

terutama dalam data durasi yang menunjukan kesenjangan antara sekitar 2.5

dan 3.0 dimana hanmpit tidak ada point sama sekali. alasan utama untuk

mepertimbangkan

ontoh ini adalah bahwa bimodality merupakan salah satu

rin

ian distribusi berpotensi signi kan yang umumnya hilang dalam boxplots.

hal ini jelas digambarkan dibawah ini menyajikan sisis-by-side boxplots waktu

menunggu dibagi menjadi 20 disebelah kiri, dan durasi letusan disebelah kanan.

kedua plot ini menunjukan gambar yang signi kan :

sebagian perbandingan, dua tokoh yang menunjukan dibawah ini dihasilkan

dengan menggunakan paket vioplot, yang menghasilkan plot yang mungkin

dipandang sebagai boxplot yang KOTAK telah melengkung untuk men

er-

minkan distribusi perkiraan nilai selama rentang data yang diamati. plot ini

sebelah kiri menggunakan opsi default untuk biplot dan salah satu poin dari

ontoh ini adalah bahwa pilihan default ini tidak terlalu jauh dari informatif

dari pada boxplot dasar.

hal ini tentunya, tak satu pun dari plot kiri sama sekali sugestif bimodalyty.

2

tangan kanan Violin Plot mewakili yang sedikit sisesuaikan. yang dihasilkan

dengan menentukan dua pilihan. pertama, perhatikan bahwa viloin Plot default

pada sebelah kiri keduanya terpotong, menunjukan batas antara keras terke

il

dan terbesar nilai yang mun

ul dalam data. kliping adalah denfault, tetapi

menunjukan klip = F menimpa prilaku ini yang tidak khas untuk estimasi

kepadatan ninparametrik, bukanya tiba-tiba jatuh ke nol.

kedua, yang lebih penting perbedaan antar dua set violin plot ditampilkan

diatas sepasang angka yang pasangan kanan menentukan parameter bandwidth

yang berbeda untuk ini estimator densitas nonparamertrik. trade-o yang melekat

dalam memilih parameter dandwidth untuk estimitar densitas nonparametrik

: membuat bandwidth terllau ke

il menghasilkan varians tinggi berisik esti-

masi biasanya banyak yang :Palsu . salha satu point tertinggi dalam hal ini

adalah dalam kemampuan tambahan yang melekat pada violin plot ren

ana

relatif dalam boxplot sederhana dapat menyampaikan denfault rin

ian sangat

berguna untuk kita mungkin melewatinya, kita tidak dapat selalu mengenda-

likanpengaturan denfault untuk prosedur menunukan rin

ian ini. sumber dasar

kesulitan ini adlaah prosedur yang lebih komplo=eks seperti estimator densitas

non pramaertik.

0.1 R Software

Bahasa R merupakan versi terbuka (open-sour

e) dari bahasa pemrograman S

(Azola dan Harrel 2006). Bahasa R memiliki kemampuan yang tidak kalah den-

gan paket-paket program pengolahan data komersial bahkan dalam beberapa

hal kemampuannya lebih baik. Bahasa R mendapatkan sambutan baik dikalan-

gan statistikawan dan ilmuwan di seluruh dunia, sayangnya di indonesia sendiri

belum banyak yg mengenalnya. Buku ini memberikan pengetahuan tentang ba-

3

hasa R yg merupakan sebuah software stati

open sour

e yang berguna untuk

proses analisi data, khususnya dalam memanipulasi data dan visualisasi gra k.

Kemampuan tersebut yang dipilih karena merupakan hal yang paling penting

dalam operasi data/ statisti

.

1.1 Cara Kerja Bahasa R

Kentungan -keuntungan yang diperoleh bila menggunakan bahasa R untuk

pengolahan data dan statistik antara lain: R dapat diakses gratis dan dapat

dijalankan pada berbagai sistem operasi (WINDOWS, UNIX, MACINTOSH) ,

sintaksnya mudah dipelajari dan memiliki banyak fungsi -fungsi statistik yang

terpasang. Selain itu, beberapa kerugian yang di kemukakan juga oleh Verzani

(2002) yaitu tidak mendapatkan dukungan komersial. Azola dan Herrel (2006)

memberikan perbandingan rin

i atas kemampuan bahasa R terhadap sebuah

program komersial seperti SAS. S-Plus yang merupakan kloning dari bahasa

R memiliki antar muka yang lebih baik, tetapi pada prosesnya berjalan sedikit

lebih lambat dari bahasa R. bahasa R merupakan sebuah paket dan seklaigus

bahasa pemrograman tingkat tinggi (high level programming). R dapat digu-

nakan se

ara interaktif sehingga hasilsebuah perhitungannya segera dapat dili-

hat, etatpi apabila perhitungannya kompleks maka perintah - perintah R ditulis

lebih dahulu sebagai text editor , kemudian dipanggil dengan fungsi sour

e. R

yang termasuk program software opensour

e diran

ang sebagai voluntary oleh

ahli-ahli statistik dan pemrograman di seluruh dunia, sehingga perkembangan-

nya amatlah sangat

epat. Veri bahasa R ketika tulisan ini dibuat adalah 3.0.2

R dan dilengkapi dengan pa

kage (add-in) yang dapat memberikan kemampuan

tambahan, seperti

ontoh perhitungan teknik-teknik statistik yang

anggih, in-

terfa

e dan lain lain. Pa

kages ini juga dapat diakses se

ara gratis. dan se

ara

periodik akan mun

ul pa

kage - pa

kage terbaru yang lebih menarik dan da-

pat dipilih sesuai kebutuhan. semua pa

kage berikut dapat di peroleh se

ara

gratis di URL (http://

ran.r-proje

t.org/). Pada URL tersebut dapat dipilih

tiga alternatif instalasi software R, yaitu : instalasi menurut linux, windows,

dan Ma

OS X. Terdapat banyak GUI lain yang dapat diperoleh se

ara gratis

antara lain Remdr dan S

iViews. Remdr dikemas didalam pa

kage R. jika telah

memilih akan menggunakan alternatif salah satunya, maka akan keluar versi

terbaru software R yg telah siap didownload.

R dapat diakses se

ara gratis di URL (http://www.r-proje

t.org/). dalam

hal pemakaian, R termasuk software yg

ukup mudah untuk dipelajari,bahkan

melalui ashdisk USB saja software R sudah bisa digunakan. Berikut adalah

langkah-langkahnya.

0.1.1 Instalasi R windows di Hardisk :

1. Setelah mendownload le instalasi (sebagai

ontoh, le yang digunakan

dalam buku ini adalah R-3.0.2 -win.exe), maka terdapat le instalasi R

4

2. Double

li

k i

on le tersebut, hingga mun

ul pilihan bahasa seperti pada

Gambar 2. Pilih bahasa English lalu klik OK.

5

3. Selanjutnya akan mun

ul jendela setup seperti pada Gambar 3 dan pilih

Next. Lanjutkan pilihan ke Next lagi setelah mun

ul jendela berikutnya. Lalu-

akan mun

ul jendela dialog untuk memilih lokasi startup R seperti Gambar

4.

4. Selanjutnya akan mun

ul jendela yg terkait dengan informasi instalasi

software R seperti pada gambar lalu klik next

6

5. Pada kondisi default, pilih lokasi aplikasi R akan diletakkan di : C:\Program

Files\R\R-3.0.2. Jika setuju meletakkan aplikasi R ditempat tersebut pilih

Next. Selanjutnya akan mun

ul

ustom installation seperti Gambar 5. Setting

intalasi ini adalah default setting, sehingga tidak perlu melakukan perubahan

pada setting ini. Selanjutnya pilih Next. Selanjutnya pilih Next lagi jika tidak

ingin melakukan perubahan pada lokasi startup R. Atau klik Yes sebelum Next

jika nantinya ingin merubah lokasi startup R.

6. Bila proses instlasi berjalan dengan benar, maka aplikasi R dapat diakses

7

dengan meng klik i

on dari software R (pada desktop ataupun start menu).

Selanjutnya akan terbuka jendela pembuka program R seperti itu.

Berikutnya untuk mendownload library/pa

kage yang khusus untuk analisis

statistik dengan menggunakan R

ommander. Cara installnya dapat langsung

dari software R, dan instalasi yang diminta oleh software R adalah se

ara online.

Sebagai berikut :

1. Pilih pa

kages, lalu pilih install pa

kages. Selanjutnya akan mun

ul tampi-

lan pilihan wilayah / lokasi download.

2. Lalu akan mun

ul jendela tampilan pilihan pa

kages yang akan di install

Setelah itu pilih r

mdr dan plugin yang ingin di instalasi, lalu klik OK.

3. Setelah instalasi selesai, buka R

ommander. Caranya dengan memilih

menu pa

kages lalu pilih load pa

kages kemudian pilih r

mdr dan klik

OK.

4. lalu klik nish jika telah selesai mendownload.

0.1.2 instalalsi le R windows pada usb

bagi yang membutuhkan R agar dapat digunakan dimanapun berada, melakukan

instalasi di ashdisk dan USb akan sangat bermanfaat. berikut adalah

ontoh

petunjuk instalasi R di asdisk USB.

1.

opy le instalasi kedalam ashdisk UB. lalu double klik le instalasi

dalam ashdisk USB tersebut seperti langkah instalasi pada hard disk

(langkah 1 sampai dengan langkah 5).

2. pada langkah (sele

t destination lo

ation) klik browse dan arahkan lokasi

instalasi R / startup ke USB drive. Sebagai

ontoh lokasi instalasi pada

G:/R-2.8.1 jika lokasi ashdisk USb berada pada driver G. selanjutnya

klik next.

8

3. selanjutnya akan mun

ul jendela dialog sele

t

omponent klik semua

PDF manual online jika setidaknya kapasitas ashdisk USB berisi 1 gb.lalu

klik next.

4. selanjutnya,akan mun

ul jendela dialog startup options . Klik yes untuk

mempermudah lokasi startup R. lali klik next.

5. pada jendela selajutnya klik help style atau CHM style. pilih sele

t

start menu folder dan dont

reate a start menu folder , lalu klik next.

6. setelah mun

ul jendela dialog berisi sele

t additional taks tidak perlu

men

ontreng semua task. lalu klik next, dan proses instalasi akan dimulai.

tunggu sampai proses instalasi selesai dilakukan sampai selesai.

7. selanjutnya untuk membuat direktori pekerjaan drive USb untuk user.

buka My Computer dan arahkan pada drive USb untuk user. pilih le

-> new -> folder (atau dalam win Vista pilih organize -> new folder).

Beri nama folder tersebut, misalnya RFiles .

8. selanjutnya, buat short

ut R-Gui pada ashdisk USB lalu buka My

omputer dan arahkan pada lokasi di lokasi USb drive dimana short

ut

ingin diletakan. lalu di bagian kosong pada layar windows, klik kanan

dan pilih new -> short

ut. di pilihan Create Short

ut

ari dan pilih Gui

program yg terletak di subdirektori biin. sebagai

ontoh, jika menginstal

R di G:R-2.11.0 maka le di G:\R-2.11.0\bin\Rgui.exe lalu klik next dan

berikan nama pada short

ut tersebut lalu klik nish.

9. selanjutnya, pada short

ut baru tersebut klik kanan dan pilih properties

hingga keluar jendela dialog seperti pada gambar.

9

10. pada tab short

ut di pilih start in dan tuliskan alamat dimana direktori

pekerjaan berada seperti pada

ontoh.

uji proses instalasi dengan double klik pada le short

ut. jika telah terbuka

pada jendela pembuka program R seperti pada gambar 3.12 maka instalasi R

melalui USb telah sukses dilakukan. selanjutnya melalu R dapat dioperasikan

di

omputer manapun tanpa terlebih dahulu melakukan instalasi di hard disk

komputer.

berdasarkan pengalaman, untuk kelan

aran dan ke

epatan operasioanl. jika

ingin melakukan instalasi R pada ash disk sebaiknya disediakan Flashdisk den-

gan kapasitas besar dan harus tersisa min 1 GB.

0.1.3 Input data dalam R.

ada beberapa

ara untuk memasukan data yang diolah melalui R, yaitu :

• input data melalui jendela

onsole R

• input data melalui jendela

onsole R Comander

• impor data yang telah diinput dalam le database yang lain ( txt, dbf,

xls, mtp) melalui R

ommander

0.1.4 Skema kerja bahasa R

Setelah R terinstal pada komputer maka dapat diakses melalui short

ut atau

menu start. Prompt default > mengindikasikan bahwa R menunggu perin-

10

tah yang diberikan, baik berupa fungsi maupun objek lain. R merupakan su-

atu bahasa berorientasi objek, artinya bahwa variabel, data, fungsi, hasil dan

sebagainya, disimpan dalam memori aktif komputer dalam bentuk objek dan

mempunyai sebuah nama. Pengguna dapat mengenakan aksi terhadap objek-

objek tersebut melalui suatu operator (aritmatika, logika, dan perbandingan)

dan fungsi (fun

tions). Fungsi itu sendiri juga merupakan suatu objek. Pena-

maan terhadap objek bersifat

ase sensitive(membedakan huruf besar dan huruf

ke

il). Jadi X dan x merupakan objek yang berbeda.

Argumen suatu fungsi dalam R juga merupakan suatu objek ( data , for-

mula, expresi, dan sebagainya). Beberapa fungsi menyediakan nilai default dari

argumennya, nilai ini dapat diubah oleh penggunanya dengan options tertentu.

Beberapa fungsi tidak membutuhkan nilai argumen dalam menjalankan perin-

tahnya, hal ini dapat terjadi karena ada dua kemungkinan 1) semua argumennya

mempunyai nilai default (karenanya dapat diubah dengan options). Jadi dalam

mengeksekusi fungsi tersebut tidak perlu memasukkan nilai argumen, karena

fungsi akan menggunakan nilai default sebagai nilai argumen. 2) tidak ada

argumen yang dide nisikan sebelumnya pada fungsi tersebut.

Objek-objek R (termasuk fungsi) dikemas dalam bentuk add-ins yang oleh

R disebut denganpa

kage. Pada saat R dipanggil pertama kali, maka ada tujuh

pa

kage yang dipanggil dan disimpan dalam memori aktif. Perintah R untuk

melihat pa

kage apa saja yang sedang aktif adalah :

>sear

h()

[1℄ .GlobalEnv pa

kage: stats pa

kage:graphi

s

[4℄ pa

kage:grDevi

es Pa

kage:utils pa

kage:datasets

[7℄ pa

kage:methods Autoloads pa

kage:base

Fungsi sear

h() adalah

ontoh fungsi R tanpa argumen. Hasil eksekusi dari

fungsisear

h() ini disajikan di bawahnya. Jadi setiap nama objek yang diketik

pada

onsole (GUI) R akan ditelusuri ke ".GlobalEnv", "pa

kage:stats", "pa

k-

age:graphi

s", ..., "pa

kage:base". Pesan error akan mun

ul apabila nama objek

yang diketik pada

onsole tidak dikenal.

Untuk memperoleh bantuan digunakan fungsi help, sedangkan untuk meli-

hat argumen-argumen apa saja yang dibutuhkan oleh fungsi help, digunakan

perintah (fungsi) args.

11

Terlihat disini bahwa, fungsi help mempunyai 9 argumen yaitu topi

, of-

ine, pa

kage, . . . , pager. Argumen o ine, pa

kage dan lib.lo

berturut-turut

mempunyai nilai default FALSE, NULL dan NULL. Argumen verbose mem-

punyai nilai default berupa fungsigetOption yang diberi nilai verbose . Oleh

karena args merupakan suatu fungsi, maka untuk melihat argumen apa saja

yang tersedia bagi args adalah

>args(args)

funstion (name)

Terlihat bahwa fungsi args hanya membutuhkan satu arugmen, yaitu name

tanpa nilai default. Perintah args(help) memberikan hasil yang sama den-

gan args(name=help). Jadi nilai argumen suatu fungsi dapat ditulis langsung

tanpa didahului oleh nama argumennya, tetapi apabila ada lebih dari satu ar-

gumen pada suatu fungsi, maka urutan penulisan nilainya perlu diperhatikan.

Penulisan nilai argumen dengan nama argumen didepannya, dapat dilakukan

tanpa memperhatikan urutannya.

fungsi-fungsi terpasang bulit in apa saja yang telah disediakan oleh pa

kage

base, dan dapat dilihat dengan menggunakan fungsi help sebagai berikut.

>help(pa

kage='base')

Hasilnya, sebuah windows yang mendaftarakan semua objek dan fungsinya

terpasang yg disediakan oleh pa

kage base.

Semua aksi pada R dilakukan dengan memanipulasi objek yang tersimpan

pada memori aktif komputer: tanpa menggunakan le temporary. Pengguna

mengeksekusi fungsi, yang mana nilai argumen akan menentukan hasilnya (da-

12

pat juga berupa suatu gra k). Hasil eksekusi ini diperagakan se

ara langsung

pada layar, disimpan pada sebuah objek yang dapat diberi nama tertentu, atau

ditulis pada disk (khusunya gra k). Oleh karena hasil itu sendiri merupakan

sebuah objek, maka objek ini dapat merupakan nilai argumen (data) bagi fungsi

lain untuk selanjutnya dieksekusi.

0.1.5 R Bekerja dengan Data

R bekerja berdasarkan jenis struktur datanya. Struktur data paling sederhana

adalah ve

tor. Vektor dibuat dengan fungsi

, hasilnya disimpan dalam suatu

objek. Berikut ini adalah teladan tipe vektor numerik.

>x < -

(10, 4.5, 6, 7, 2.3, 7.1 )

objek x menyimpan nilai numerik 10, 4.5, 6, 7, 2.3, dan 7.1. perintah untuk

menampilkan isi dari objek x adalah .

>x

[1℄ 10.0 4.5 6.0 7.0 2.3 7.1

perintah untuk memperoleh nilai objek x pada urutan yang ketiga adalah

>x[3℄ #digunakan kurung siku untuk menga

u pada subs

ript.

[1℄ 6

perintah berikut memberikan vektor logika (TRUE and FALSE) untuk nilai-

nilai objek yang lebih besar dari 6.

>x.lebih.dari.6 <- x>6

>x.lebih.dari.6

[1℄ TRUE FALSE FALSE TRUE FALSE TRUE

objek x.lebih.dari.6 merupakan objek bertipe logi

al. Nilai-Nilia objek x yang

lebih besar dari 6 diakses dengan perintah sebagai berikut.

> x[x.lebih.dari.6℄

[1℄ 10.0 7.0 7.1

objek x dapat dikonversikan menjadi bertipe integer yaitu dengan perintah

sebagai berikut :

>y <- as.

hara

ter(x) #objek x dikonversikan ke tipe karakter

>y

[1℄ 10 4.5 6 7 2.3 7.1

Rata-rata, median, ragam, dan simpangan baku dari data yang tersimpan

pada peubah objek (x), diperoleh dengan menggunakan fungsi-fungsi berikut :

• >mean(x)

[1℄ 6.15

• >var(x)

[1℄ 6.803

• sd(x)

13

[1℄ 2.608256

Ringkasan statistik untuk data yang disimpan pada objek x, dieksekusi den-

gan fungsi summary berikut.

> ringkas <- summary(x)

> #hasil fungsi summary disimpan pada objek ringkas

>ringkas

Min. 1st Qu. Median Mean 3rd Qu. Max.

2.3004.875 6.500 6.150 7.075 10.000

• Interaksi R dengan format data berbeda

Fungsi read.table digunakan untuk memba

a data dalam format as

ii(txt, dat).

Fungsi ini tersedia pada pa

kage base. perintah ntuk memanggil le CANCR.txt

adalah sebagai berikut.

>kanker<-read.table( le='CANCER.txt', header= TRUE)

>kanker

File CANCER.txt disumsikan tersedia pada direktory default. Perubahan

working direktory dapat dilakukan melalui menu Change dir. . . atau dengan

perintah setwd. fungsi le.

hoose() dapat digunakan sebagai nilai dari argumen

le, untuk memilih le yang dikehendaki, sehingga ditulis sebagai berikut:

>kanker<-read.table( le.

hoose(), header=TRUE)

Fungsi R untuk menyimpan suatu objek dalam format as

ii adalah write.table,

yaitu sebagai berikut :

>write.table(kanker, le= Kanker.txt )

Perintah ini akan menyimoan objek kanker ke dalam le Kanker.txt pada

direktori default yang terdapat di harddisk atau USB.

R dapat memba

a le data dengan format xls (spreadsheet ex

el), dengan

perintah read.xls. Fungsi ini tersedia pada pa

kage xlsReadWrite, yang dapat

di download gratis pada http://

ran.r-proje

t.org.. Jadi untuk dapat meng-

gunakan fungsi read.xls, pa

kagexlsReadWrite harus terlebih dahulu diinstal,

kemudian diaktifkan dengan perintah sebagai berikut:

>library(xlsReadWrite)

Apabila le A

idents.xls ( le A

idents.xls harus ada dalam direktori de-

fault, bila tidak ubah dengan menu File|Change dir . . . ) ingin dipanggil dan

disimpan pada objek k

lk, maka perintah-nya adalah

> k

lk <-read.xls( le='A

idents.xls')

>k

lk

[1℄ data frame

Terlihat bahwa objek k

lk (berklas data frame ) memliki dua variabel Week

dan Number of A

idents dengan 52 pengamatan. Nilai-nilai dari variabel Num-

ber of A

idents dapat diakses dengan

ara sebagai berikut:

14

Angka 2 dalam tanda kurung siku menunjukkan bahwa variabel Number of

A

idents ada pada urutan ke 2. Oleh karena nama variabel Number of A

i-

dents tidak sesuai dengan tata

ara penamaan dalam R (spasi tidak diperke-

nankan), maka nama variabel data frame k

lk diganti dengan perintah :

Sehingga sekarang variabel Week dan Number.of.A

idents dapat dipanggil

langsung sebagai suatu objek R dengan terlebih dahulu mengenakannya dengan

fungsi atta

h (angka-angka [1℄, [15℄, [29℄, dan [43℄ menunjukkan nomor-nomor

urut data yang ada disebelah kanannya)

15

Demikian pula nilai-nilai variabel week dipanggil dengan

ara sebagai berikut

;

16

Format data lain seperti mtp (minitab), spss (SPSS), dbf (DBF le), systat,

SAS dapat diba

a oleh R. Perintah untuk memba

a format data tersebut ada

pada pa

kage foreign .

• Pembangkitan Data

Sekuens bilangan bulat misalnya dari 1 sampa 30 dibangkitkan dengan

ara

sebagai berikut :

>x<- -1:30

Hasilnya adalah sebuah vektor x yang berisi 30 elemen, berupa sekuens bi-

langan bulat dari 1 sampai 30. fugsi sequen

e berikut ini dapat membangkitkan

sequens bilangan rill sebagai berikut:

> seq(1, 5, 0.5)

[1℄ 1.0 1.5 2.0 2.5 3.0 3.5 4.0 4.5 5.0

Bilangan pertama pada argumen fungsi seq menunjukkan nilai awal dari

sekuens, sedangkan bilangan keduanya merupakan nilai akhir sekuens, dan bi-

langan terakhir menunjukkan angka penambahannya (in

rement). Bentuk lengkap

dan argumen fungsi seq adalah sebagai berikut:

17

Argumen times memberikan berapa kali suatu bilangan diulang. Perintah

berikut mengulang sekuens 1 sampai 4 sebayak 2 kali (sebagaimana halnya den-

gan fungsi-fungsi lain vektor sekuens dapat disimpan dalam suatu objek sebagai

berikut: x <- rep(2, 20), nama argumen tidak perlu ditulis dan argumen kedua

adalah times)

> rep(1:4, 2)

[1℄ 1 2 3 4 1 2 3 4

Argumen ea

h dibawah ini menbulanb setiap elemen dalam sequen

e se-

banyak dua kali:

>rep(1:4, ea

h =2)

0.2 VIOLIN PLOT GGPLOT2

ggplot2 violin plot adalah memudahkan untuk menggunakan fungsi - fungsi

untuk meren

anakan dan menyesuikan dengan mudah violin plot mengunakan

ggplot2 dan sotfware R. fungsi ggplot2.violinplot adalah lebih mudah dari paket

ggplot2 R. Violin Plot mirip dengan kotak Plot . ke

uali bahwa mereka juga

menunjukan kepadatan probabilitas kernel dari data yang menunjukan kiasaran

interkuartil, seperti dalam plot kotak standar(wiki).

ggplot2.violin adalah fungsi untuk memudahkan kostum untuk meren

anakan

dan menyesuaikan dengan mudah plot plot violin mengunakan ggplot2 dan soft-

ware R. fungsi dari ggplot2.violin itu sendiri adalah memudahkan paket ggplot

R. s

ript R tersedia dalam bagian berikutnya untuk menginstal paket.

violin plot mirip dengan kotak plot, ke

uali bahwa mereka juga menun-

jukan kepadatan probabilitas kernel dari data nilai pada nilai yang berbeda-

beda.Biasanya Plot biola akan men

akup penanda untuk median dari data kotak

menunjukan kisaran interkuartil, seperti dalam plot kotak standar(wiki).

18

19

• Basi

Violin Plot

#violin plot dari vektor numerik tunggal

ggplot2.violinplot(data=numVektor)

#Violin dasar Plot dari vektor LEN

ggplot2.violinplot(data=df,XName = 'dosisi',yName= LEN )

#Mengubah Orientasi :Horizontal Violin petak

ggplot2.violinplot(data=df,XName = 'dosisi',Yname = LEN , orientasi =

'horizontal')

#Set Trim untuk PALSU. Jika TRUE Maka (Denfault), memangkas ekor

#Violin dengan bebrbagai data.

#Jika SALAH, tidak memangkas ekor.

ggplot2.violinplot(data = df, XNAMe ='dosis', YName = 'len', trim =

FALSE).

20

21

• Violin Plot dengan Rata-rata dan titik.

setiap titik mewakili satu observasi dan titik berarti sesuai dengan nilai rata-rata

dari pengamatan dikelompok itu sendiri.

#Violin Plot denagn rata-rata titik.

ggplot2.violinplot(data = df, XName = 'dosis', YName = 'Len', addMean

= True,

meanPointShaoe = 23, Meanpointsize = 3, meanpointWarna = 'Hitam',

dotsize= 1, dotPosition

='

enter').

#Violin Plot dengan titik bergoyang

#jitter:derajat di arah x

ggplot2.violinplot(data = df, XName = 'dosis', YName = 'len', addDot =

TRUE, dotSize =1,7,

dotPostion= Jitter , Jitter = 0,2).

22

23

• Mengubah Biola petak jenis garis dan titik bentuk

1. Bentuk titik yang berbeda dan jenis garis dapat digunakan dalam plot. Se-

ara Denfault, ggplot2 mengunakan jenis garis padat dan bentuk lingkaran.

Bentuk tiitk yang bebreda di R dijelaskan disini.

#Mengubah warna Violin Plot alur

erita dan jenis garis

ggplot2.violin plot (data = df, XName = 'Tidak', YName = 'Len', warna

= merah', line type = Bertitik ).

24

• Main title dan judul plot.

1. Main Title Font : Vektor dengan panjang 3 menunjukan masing-masing

ukuran, gaya ( Miring , berani , bold.ita

li

) dan warna sumbu x dan y

judul. Nilai denfault adalah : mainTitleFont =

(14, bearni , hitam ).

2. xShowTitle : yShowTitle jika TRUE, sumbu x dan y judul akan dita-

mpilkan. Set nilai ke FALSE untuk menyembunyikan label sumbu.Nilai

default adalah BENAR.

3. xtitle , ytitle : x lebel dan sumbu y. Nilai default adalah NULL.

4. Xs

ale, y S

ale sumbu x dan y sisik. Kemungkinan nilai

( tidak ada ,

log 2 , log 10 ). mis: yS

ale - log2 . Nilai default adalah BENAR.

5. xtitleFront, yTitleFront : vektor panjang 3 menunjukan masing-masing

ukuran , gaya dan warna x dan y judul sumbu. nilai yang mungkin un-

25

tuk gaya : polos , miring , berani , bld.itali

. warna dapat ditetapkan

sebagai kode hexsadesimal.

6. xlim batas y lim : untuk sumbu x dan y. Nilai default adalah NULL.

7. xShowTi

klabelFront, yShowTi

kLabelFont : vektor panjang 3 yang me-

nunujukan masing- masing ukuran, gaya dan warna sumbu y dan x pada

label ti

k front.

8. xTi

kLabelRotation, yTi

kLabelRotation : rotasi sumbu x dan y label

sumbu ti

k. nilai default nya adalah 0.

9. hideAxisTi

k : jika TRUE , y dan x kutu sumbu tersembunyi. Nilai

defaultnya adalah SALAH.

10. AxisLine : vektor dengan panjang 3 menunjukan masing- masing ukuran ,

jenis garis dan warna garis sumbu. nilai defaultnya adalah

(0,5 , solid',

# e5e5e5 ).

3. Viloin Plot dalam Python :

• lter data dengan jendela kaiser-Bessl di python :

• Regresi linier dan berjalan dalan Python :

26

• Mengelompokan dengan Python :

4. VIOLIN PLOT DENGAN MATLAB :

• Diagram Taylor diMATLAB :

27

• EOF dekomposisi dalam MATLAB :

• Matrix Kinerja di MATLAB DAN PYTHON :

1. MATLAB :

28

2. PYTHON :

5. Violin Plot dengan Matplotlib

Salah satu hal yang sangat penting dari mattplotib untuk waktu yang sangat

lama adalah implementasi ren

ana Violin. Banyak waktu, tidak pernah men-

emukan waktu. disini saya menemukan tulisan sese orang tentang Violin Plot

dengan Matplotip. Baru saja menambahkan Fill_between fungsi.

29

Violin Plot sangat mirip dengan Box dan whiskers Plot, Namun mereka

menawarkan pandangan yang lebih rin

i dari variabilitas daraset ini. ini ser-

ing dengan ide yang baik untuk menggabungkan mereka pada plot yang sama

.seperti dibawah ini.

30

Langkah selanjutnya sekarang adalah untuk membersihkan kontribusi plot

ini untuk Matplotib, tapi sebelumnya tidak tahu apakah ini akan diterima untuk

matloplot menambah S

ipy sebagai depensi. Tapi karena kembali melaksanakan

- estimasi densitas kernel untuk plot yang sederhana akan berlebihan.

31

BAB 4

CONTOH KASUS VIOLIN PLOTS DENGAN

SOFTWARE R

February 2, 2016

ontoh kasus penggunaan atau pemanfaatan violin plots atau plot biola.

sebuah plot biola adalah metode meren

anakan data numerik. ini adalah

plot kotak dengan seputar kepadatan kernel plot pada setiap sisi.

biola plot mirip dengan kotak plot, ke

uali bahwa mereka juga menun-

jukkan kepadatan probabilitas diri data pada nilai yang berbeda (dalam kasus

yang sederhana bisa menjadi histogram). biasanya plot biola akan menn

akup

penanda untuk median dari data kotak yang menunjukan kisaran interkuatil,

seperti dalam plot kotak standar. overlay pada kotak ploy ini adalah estimasi

densitas kernel.

plot biola yang tersrdia sebagi ekstensi untuk sejumlah paket perangkat lu-

nak, termasuk R dan ggplot2. plot biola juga

ukup mirip dengan gra k yang

digunajkan dalam STATA.

R tutorial ini menjelaskan

ara membuat plot biola menggunakan R perangkat

lunak dan paket ggplot2.

plot biola mirip dengan kotak plot, ke

uali bahwa mereka juga menunjukan

kepadatan probabilitas kernel dari data pada nilai yang berbeda. biasanya plot

biola akan men

akup penanda untuk median dari data dan kotak yang menjun-

jukan kisaran interkuartil, seperti dalam plot kotak standar.

1

fungsi geom_violin() digunakan

untuk menghasilkan plot biola.

2

DASAR DARI PLOT BIOLA

perpustakaan (ggplot2)

# biola petak dasar

p<-ggplot(ToothGrowth, aes (x= dose, y=len))+geom_violin()

p

# putar plot biola

p+

oord_ ip()

#set trim argumen ke FALSE

ggplot(ToothGrowth, aes(x=dose, y=len)+geom_violin(trim=FALSE)

3

ARGUMEN

x

#data vektor

vektor data tambahan

jarak

faktor untuk menghitung atau nilai yang berdekatan rendah atas

h

ketinggisn untuk rstimator densitas, jika menghilangkan seperti

yang dijelaskna dalam sm. density, h akan ditetapkan ke sebuah optial

ylim

batas y

nama

satu labek, atau vektor label untuk data harus sesuai dengan jum-

lah data yang diberikan

ol, perbatasan, lty, LWD

4

parameter gra s untuk biola di teruskan ke garis pligon

re

t Col,

olMed, phMed

parameter gra s untuk mengontrol tampilan kotak

Siapa saja yang menggunakan pekt ggplot2 di R adalah mungkin

akrab dengan geom_violin, yang men

iptakan plot biola. yang terli-

hat seperti berikut :

Library (ggplot2)

ggplot(mt

ars, aes(x = fa

tor(

yl), y=mpg, ll = fa

tor(

yl))) +

geom_violin()

5

perangkat lunak ini sekilas menunjukan pemirsa bentuk distribusi

dan memungkinkan mereka dengan mudah memperkirakan modus

dan jangkauan. Jika anda juga membutuhkan median dan rentang

interkuartil, itu sederhana untuk menampilkan dengan overlay kotak

plot(plot biola biasanya di buat dengan

ara ini) :

ggplot(mt

ars, aes(x= fa

toe(

yl), y = mpg))+

geom_violin(aes ( ll = fa

tor (

yl))) +

geom_boxplot (width = 0.2)

6

PLOT BIOLA DENGAN GRAFIK

BAR

Lebih umum untuk melihat gra k batang dibandingkan dengan plot

biola. yang informasinya akan sama dengan plt biola seperti berikut

aranya:

Library (dplyr)

mt

arssummary <- my

ars %>%

group_by(

yl) %>%

summarize (mpg_mean = mean(mpg),

mpg_se = sqrt (var (var(mpg) / length (mpg)))

ggplot (mt

arsSummary, aes (x = fa

tor (

yl, y= mpg_mean, ll

= fa

tor (

yl))) +

7

geom_bar(stat= identity )

Gra k batang menyoroti statistik tunggal memilih analisis. Dalam

psikologi ( dan bidang lainnya), peneliti menggunakan gra k batang

untuk memvisualisasikan mean dari data, dan biasanya men

akup

bar kesalahan untuk menunjukan kesalahan standar ( atau interval

keper

ayaan lain).

Namun, ketika kita melihat grafk batang,

ara mereka keliru me-

nilai nilai-nilai yang jatuh di dalam bar (yaitu dibawah rata-rata)

sebagai lebih mungkin dibandingkan nilai berjarak sama dari mean

tetapi di luar bar.

Bios ini tidak mempengaruhi plot biola karena wilayah di dalam

biola berisi seua data yang diamati. Mean dan standard error adalah

8

statistik hanya berguna bila ita menganggap bahwa data biasanya

didistribusikan.

Gra k batang tidak membantu kita memeriksa asumsi seperti itu.

Untuk studi ukuran sampel yang terke

il, itu lebih efektif untuk

hanyameren

anakan setiap pengamatan tunggal.Sampai Bergmann

dieksplorasi pendekatan ini dalam posting yang men

akup kode R.

Jika itu penting untuk menampilkan mean dan standard error,

nilai-nilai ini dapat dilakukan overlay pada visualisasi apapun.

Library(gridExtra)

plotBaras <- ggplot (mt

arsSummary, aes(x = fa

tor(

yl), y =

mpg_mean,

geom_bar (aes ( ll = fa

tor(

yl)), stat = identity ) +

geom_errorbar(aes(y = mpg_mean, ymin = mpg__mean-mpg_se,

ymax = mpg_

olorn= bla

k , width = 0.4) + ylon( 0,35) + theme(legend.position

= none ) + ggtitle ( Bar Grapfh)

plotPoints <- ggplot (mt

ars, aes9 x= fa

tor(

yl), y= mpg,

olor

= fa

tor(

yl)))+

geom_point( aes( y= mpg,

olor = fa

tor(

yl)),

position = position_jitter(width = 0.25, height = 0.0, alpha =0.6)

+

geom+point(aes(y= mpg_mean),

olor = bla

k , size =2, data =

mt

arsSummary) +

geom_errorbar(aes(y = mpg_mean, ymin = mpg+mean-mpg_se,

ymax = mpg_mean + mpg_se),

olor = bla

k , width = 0.2, data = mt

arSummary)+ ylim(0.35)

+theme(legend.posisition = none )+(ggtitle ( every observation)

plotViolins <- ggplot (mt

ars, aes( x= fa

tor(

yl), y= mpg, ll=

fa

tor(

yl)))+

geom_violin(aes(y = mpg, ll = fa

tor(

yl))) +

9

geom_point(aes (y = mpg_mean),

olor - bla

k , size =2, data

=mt

arsSummary) +

geom_errorbar( aes ( y = mpg_mean, ymin = mpg_mean-mpg_se,

ymax = mpg_mean+mpg_se),

olor = bla

k , width = 0.2, data = mt

arSummary) + ylim(0,35)

+ theme(legend.posisition = none) + ggtitle ( Violin plot )

grid.arrange (plotBars, plotPoints, plotViolins, n

ol =3)

10

PLOT BIOLA DNGAN PLOT

KEPADATAN

Sebuah plot biola menunjukan kepadatan distribusi menggunakan

lebar plot, yang simetris pada porosnya, sementara plot kepadatan

tradisional menggunakan ketinggian dari dasar umum. Mungkin lebih

mudah untuk memperkirakan perbedaan relatif dalam plot kepaatan,

meskipun kita tidak tahu apakah ada penelitiannya.

Lebih penting lagi, plot kepadatan (atau histogram)siap menampilkan

perkiraan kepadatan, sedangkan plot biola biasanya tidak hadir dalam

keadaan tersebut.

ggplot(mt

ars, aes (x= mpg, ll = fa

tor(

yl))) +

11

geom_density (alpha = 0.6)

MENGGUNAKAN PLOT BIOLA

Mengapa jika kita ke gra s basis R sepertinya paket plot biola dapat

membuat plot biola tanpa menggunakan ggplot2?

Seaborn mun

ul untuk membawa plot biola yang sangat kuat un-

tuk python. Psikolog harus menggunakan plot biola lebih sering.

Mereka ideal untuk menampilkan data non-normal, yang sering kita

jumpai ketika melihat kinerja peserta tunggal. Lebih penting lagi,

penelitian sebelum psikolog telah menunukan bahwa banyak men-

galami kesulitan mena sirkan gra k batang, dan plot biola menya-

jikan alternatifnya.

12

Membuat S

atter Diagram

GarisTrend Linear

Se

uler Trend adalah rata-rata perubahan dalam jangka waktu

yang panjang. Apabila menunjukan gejala kenaikan pada diagram

maka trend yng memiliki rata-rata pertambahakn yang positif. Tetapi

bila menunjukan gejala penurunan pada diagram maka trend dimiliki

menunjukan rata-rata penurunan atau negatif.

Studi Kasus

Data yang digunakan adalah data jumlah pengunjung objek wisata Kebun Raya

Cibodas dari bulan Januari 2005 hingga Desember 2009. Data selengkapnya

dapat dilihat pada Tabel 4.1 di bawah ini.

TABEL 4.1 Data Jumlah Pengunjung Umum (Domestik Dan Asing) Di Ob-

jek Wisata Kebun Raya Cibodas Periode Januari 2005 Desember 2009

Untuk menganalisis data deret berkala di atas, harus dilihat apakah ada

unsur trend, siklus, dan musimannya. Untuk mengetahui data tersebut memiliki

unsur trend, siklus dan musiman dapat dilihat pada gra k plot data, fak dan

fakp berikut ini.

Gambar 4.1 Plot data pengunjung objek wisata kebun raya Cibodas

Dari plot data pada gambar 4.1 dapat dikatakan bahwa data tersebut memi-

liki unsur trend. Selanjutnya untuk lebih jelasnya dapat dilihat pada gra k fak

dan fakp berikut.

Gambar 4.2 Gra k fak Data Pengunjung

Gambar 4.3 Gra k fakp Data Pengunjung

Dari plot fak dan fakp pada gambar 4.2 dan 4.3 di atas dapat diketahui

bahwa data tersebut membentuk trend, karena dari gra k fak terlihat menurun

se

ara lambat dan gra k fakpnya terlihat sebuah nilai fakp mendekati 1 yaitu

0,8 dan yang lainnya tidak berbeda se

ara signi kan dengan 0. Dari gambar

4.1 terlihat bahwa data memiliki unsur siklus karena pola data terulang setelah

rentang waktu yang

ukup panjang. Sementara di gambar 4.2 dan 4.3 terlihat

bahwa data memiliki pola musiman karena fak dan fakp terulang setiap satu

periode musim. Setelah melihat plot data pengunjung pada gambar 4.1 dan

gra k fak dan fakp pada gambar 4.2 dan 4.3 telah diketahui data memiliki un-

sur trend, musiman dan siklus maka data tersebut dapat diolah dengan meng-

gunakan metode dekomposisi. Langkah langkah yang harus dilakukan untuk

meramalkan data pengunjung objek wisata Kebun Raya Cibodas dengan meng-

gunakan metode dekomposisi adalah menyusun data kuartalan masing masing

tahun, membuat s

ater diagram garis trend linear, menghitung besarnya ni-

lai trend dan yang terakhir menghitung indeks musiman. Untuk memudahkan

perhitungan, penulis menggunakan software Mi

rosoft Ex

el dan SPSS 16

13

4.2 Menyusun Data Kuartalan Masing Masing Tahun

Banyaknya jumlah pengunjung umum di objek wisata dari tahun 2005 - 2009

tiap kuartal (tiga bulanan yaitu mulai : Januari Februari Maret; April

Mei Juni; Juli Agustus September; Oktober Nopember - Desember),

disajikan pada Tabel 4.2.

Tabel 4.2 Data Kuartalan Jumlah Pengunjung Umum

4.3 Membuat S

atter Diagram Garis Trend Linear

Trend (se

uler trend) adalah rata rata perubahan (tiap tahun) dalam jangka

panjang. Apabila menunjukkan gejala kenaikan maka trend yang dimiliki rata rata

pertambahan (trend positif), tetapi apabila menunjukkan gejala semakin berku-

rang maka trend yang dimiliki menunjukkan rata rata penurunan (trend negatif).

Ada beberapa metode yang biasa digunakan untuk membuat trend yaitu metode

trend linear least square, metode trend parabolik dan metode trend eksponen-

sial. Penggunaan metode tersebut disesuaikan dengan kebutuhan dan sifat data

yang dimiliki. Gra k 4.1 menunjukkan bahwa perubahan dari data tersebut

mempunyai pola normal atau letaknya mendekati garis lurus, maka trend

o

ok

digunakan. Berdasarkan data tersebut dibuat s

atter diagram dan ditambahkan

garis trend, sehingga dapat dilihat bagaimana kenormalan dari garis trend, pola

dan ke

enderungan naik atau turun, setelah itu baru dilakukan peramalan den-

gan metode dekomposisi.

Gra k 4.4 Uji normalitas jumlah pengunjung umum

Hipotesis yang digunakan untuk menguji normalitas suatu data adalah se-

bagai berikut Ho = data berdistribusi normal H1 = data tidak berdistribusi

normal Kriteria pengujian: Terima Ho jika nilai signi kan

Tabel 4.3

Uji Normalitas Jumlah Pengunjung Umum

Tests of Normality

a. Lilliefors Signi

an

e Corre

tion

*. This is a lower bound of the true signi

an

e. Nilai signi kan pada

tabel Shapiro Wilk dari tahun 2005 sampai tahun 2009 semuanya 0,05 jadi

diterima Ho yang artinya variabel Y (banyaknya jumlah pengunjung umum)

adalah normal

Tabel 4.4

Uji linearitas jumlah pengunjung umum

ANOVAb

a. Predi

tors: (Constant), THN2009, THN2006, THN2005, THN2008, THN2007

b. Dependent Variable: BULAN

4.4 Menghitung Besarnya Nilai Trend

Langkah langkah untuk menghitung besarnya nilai trend adalah sebagai

berikut: 1) Susunlah data sesuai dengan urutan tahunnya dan letakkan nilai

X sesuai dengan tahunnya. Dalam hal ini nilai X = 0, diberikan kepada data

di tahun 2007 karena data ganjil.

Tabel 4.5

Menghitung Nilai Kuadrat Terke

il Trend

Dari Data Jumlah Pengunjung Umum

14

ˆ Hitung nilai XY dan X2, kemudian

arilah jumlah Y, jumlah XY, dan

jumlah X2,

arilah nilai a dan b dengan menggunakan rumus sebagai

berikut :

ˆ Masukkan nilai a dan b pada persamaan linear. Dari langkah 2 diperoleh

persamaan trend sebagai berikut Y

= 91689.8 + 3376.7X

ˆ Setelah didapat persamaan trend maka dapat di

ari nilai trend tiap tiap

tahun dengan melakukan subtitusi nilai X pada persamaan trend.

ˆ Peramalan pada tahun yang akan datang, dilakukan subtitusi nilai X pada

tahun yang bersangkutan.

Nilai ramalan untuk tahun 2010 adalah:

Y

= 91689.8 + 3376.7(3) = 101819.9

ˆ Mengubah bentuk persamaan trend rata rata dari persamaan trend tahu-

nan apabila akan dibuat menjadi persamaan trend rata rata tiap bulan

dilakukan dengan

ara a dibagi 12 dan b dibagi 12, apabila akan dijadikan

trend rata rata tiap kuartal baik a maupun b masing masing dibagi 4,

kemudian substitusikan nilai X pada tahun yang bersangkutan sehingga

diperoleh nilai trend yang merupakan trend rata rata kuartalan adalah

:

Sehingga nilai trend rata rata untuk masing masing tahun adalah : 2005 :

22922.45 + 844.175(-2) = 21234.1

2006 : 22922.45 + 844.175(-1) = 22078.275

2007 : 22922.45 + 844.175(0) = 22922.45

2008 : 22922.45 + 844.175(1) = 23766.625

2009 : 22922.45 + 844.175(2) = 24610.8

ˆ Mengubah persamaan trend rata rata tiap kuartal menjadi trend bu-

lanan dan kuartalan. Trend bulanan adalah trend dari bulan satu ke

bulan berikutnya, menunjukkan perkiraan kenaikkan atau perubahan se-

tiap bulannya. Jadi, bukan dari tahun satu ke tahun berikutnya tetapi

dari bulan satu ke bulan berikutnya. Sedangkan trend kuartalan adalah

trend yang menunjukkan perubahan dari kuartal ke kuartal. Kalau akan

merubah persamaan trend tahunan yang satuan X satu tahun menjadi

trend bulanan maka a dibagi 12 dan b dibagi 12² sehingga kalau akan

dirubah menjadi trend kuartalan maka a dibagi 4 dan b dibagi 4² maka

persamaan trend berubah menjadi:

Tabel ini digunakan untuk menentukan nilai trend, dimana X = 0, diberikan di

data tahun 2007 pada kuartal II atau kuartal III

15

Penentuan nilai trend kuartalan seperti diatas perhitungan bukannya sulit

melainkan karena nilai X yang disubtitusikan pe

ahan bukan bilangan bulat,

untuk mempermudah originnya dapat diubah ke bilangan bulat menjadi kuar-

tal yang terdekat (kuartal II atau kuartal III). Jika originnya dirubah menjadi

kuartal II tahun 2007 maka a nya diganti dengan nilai trend pada kuartal II

sebesar 22816.93, sedangkan b nya tetap. Sehingga persamaan trendnya men-

jadi:

Y= 22816.93 + 211.04X

Tabel ini digunakan untuk menentukan trend, setelah originnya dirubah , X

= 0 diberikan di data tahun 2007 pada kuartal II

16

4.5 Menghitung Indeks Musiman Tertentu

Seperti yang telah dijelaskan pada bab III bahwa metode untuk menghi-

tung indeks musim dapat digunakan beberapa metode yaitu metode rata- rata

sederhana, metode presentase terhadap trend, dan metode presentase terhadap

rata-rata bergerak. Metode yang digunakan adalah metode rata-rata seder-

hana. Langkah langkah men

ari indeks musim dengan menggunakan metode

rata rata sederhana adalah sebagai berikut: Tabel 4.8

Data untuk Men

ari Indeks Musim

1. Menyusun data tiap kuartal untuk masing masing tahun.

2. Men

ari rata-rata tiap kuartil pada tahun 2005 sampai dengan 2009

3. Karena rata rata mengandung trend maka hilangkan pengaruh trend terse-

but (mengurangi kolom rata rata dengan b kumulatif) yang diambil dari

17

persamaan trend kuartalan sehingga mendapatkan sisanya yang diisi pada

kolom berikutnya

4. Men

ari rata rata dari kolom sisa yaitu (90411.56 : 4) = 22602.89.

5. Menyatakan angka angka pada kolom sisa sebagai presentase dari rata

ratanya, sehingga diperoleh indeks musim sebagai berkut:

Dari persamaan trend yang telah dirubah originnya yaitu

Y= 22816.93 + 211.04X

Maka diperoleh nilai trend untuk tahun 2010 adalah sebagai berikut

Kuartal I : Y

= 22816.93 + 211.04(11) = 25138.37

Kuartal II : Y= 22816.9 + 211.04(12) = 25349.41

Kuartal III : Y= 22816.93 + 211.04(13) = 25560.45

Kuartal IV : Y

= 22816.93 + 211.04(14) = 25771.49

Dengan memakai indeks musim seperti yang ter

antum pada tabel 4.8 diatas,

maka diperoleh ramalan jumlah pengunjung umum objek wisata Kebun Raya

Cibodas untuk tahun 2010 (tiap kuartal) sebagai berikut:

Jadi disini dapat terlihat jelas bahwa ramalan jumlah pengunjung umum di

objek wisata Kebun Raya Cibodas terbanyak terjadi pada kuartal IV. Jumlah

pengunjung umum di objek wisata Kebun Raya Cibodas tahun 2010 sekitar

101.828 orang, mengalami kenaikan dibandingkan pada tahun 2009 sebanyak

97.227 orang pengunjung.

18

BAB V

February 2, 2016

KESIMPULAN

Plot biola Violing Plot (Hintze dan Nelson, 1998) adalah metode peren

anaan

data numerik. Biasanya plot biola akan men

akup penanda untuk median dari

data dan kotak menunjukkan kisaran interkuartil, seperti dalam plot kotak stan-

dar.Overlay pada Box Plot ini adalah estimasi densitas kernel.Violin Plot juga

ukup mirip dengan sebuah gra k lobak yang digunakan di dalam STATA.

Plot biola tersedia sebagai ekstensi untuk sejumlah paket perangkat lunak

termasuk R melalui plot biola vioplot, wvioplot,

aroline, UsingR, Library gg-

plot2, dan sebagainyadan perpustakaan ggplot2. Grouped Violin plot with spit

violin adalah sebuah plot biola dengan gabungan beberapa plot biola dengan

menggunakan sebuah split biola.

Sebuah Violin Plot menunjukkan distribusi menggunakan lebar plot, yang

simetris pada porosnya. dalam R, vioplot () adalah perintah, yang akan digu-

nakan untuk membuat sebuah violin plot. sebuah Violin Plot memainkan peran

yang sama sebagai box dan whisker plot. ini menunjukan distribusi data kuan-

titatif di beberapa tingkat satu (atau lebih) variabel kategori seperti itu yang

terdistribusi dapat dibandingkan. disebut sebagai Violin Plot karena gambar

gra k tersebut tampak seperti sebuah biola dengan lekukan lekukan yg diben-

tuknya.

Pada dasarnya, Gruped Violin Plot with Split Violin adalah sebuah Violin

Plot dengan penggabungan beberapa Violin Plot dengan menggunakan sebuah

split violin. dalam hal lain, yaitu menggabungkan beberapa masalah anali-

tik yang memiliki data akurat untuk menghasilkan suatu kesimpulan dengan

mengkombine kedua data tersebut menggunakan split violins. apa itu split vi-

olins? Split Violins adalah teknik pada Violin Plot untuk membagi- bagi atau

memisahkan suatu kepadatan pada sebuah data masalah yang akan dikerjakan.

Berikut adalah

ontoh gambar sebuah Gruped Violin Plot with split violin.

Semua variasi boxplot dibahas sejauh mempertahankan dasar KOTAK struk-

tur, bagaimanapun, dan ini adalah salah satu keterbatasan ini tampilan data.

kesederhanaan visual mereka dapat menyembungikan banyak rin

ian penting

tentang bagaimana nilai-nilai data yang didistribusikan. Sebuah jauh lebih

eksibel perpanjangan boxpolt dasar Violin PLot dibangun dengan mengu-

1

nakan konsep boxplot dengan perkiraan kepadatan nonparamerik. Kedua Box-

plots dengan estimasi kepadatan nonparamerik dibahas dengan menjelajahi-

data, tetapi gagasan menempatkan mereka bersama-sama dalam tampilan tidak

data tunggal. Violin Plot dibahas delam hal ini adalah salah satu

ara untuk

men

apai kombinasi ini , dan dibangun dalam komponen-komponen yang sama.

Violin Plot didukung dalam R baik sebagai bagian dari paket gratis kisi dan

melalui add-on paket wvioplot.

Perangkat lunak dari plot biola yang sering digunakan adalah R software.

Bahasa R merupakan versi terbuka (open-sour

e) dari bahasa pemrograman S

(Azola dan Harrel 2006). Bahasa R memiliki kemampuan yang tidak kalah den-

gan paket-paket program pengolahan data komersial bahkan dalam beberapa

hal kemampuannya lebih baik. Bahasa R mendapatkan sambutan baik dikalan-

gan statistikawan dan ilmuwan di seluruh dunia, sayangnya di indonesia sendiri

belum banyak yg mengenalnya. Buku ini memberikan pengetahuan tentang ba-

hasa R yg merupakan sebuah software stati

open sour

e yang berguna untuk

proses analisi data, khususnya dalam memanipulasi data dan visualisasi gra k.

Kemampuan tersebut yang dipilih karena merupakan hal yang paling penting

dalam operasi data/ statisti

.

Software R pun mudah didapatkan dengan se

ara gratis, walaupun pemi-

nat analis belum banyak yang memakai software ini di Indonesia karena belum

banyaknya analis yang mempelajari software ini ataupun karena tidak ada

ketersediaannya dalam bahasa lain selain bahasa Inggris. Selanjutnya perpus-

takaan ggplot2 karena mempermudah untuk menggunakan fungsi-fungsi untuk

meren

anakan dan menyesuaikan plot biola dengan mudah. Violin Plot juga di-

gunakan dalam phyton dengan

ara yang telah diterngakan pada bab sebelum-

nya. Matlab pun dapat dipergunakan untuk membuat Violin Plot menggunakan

diagram diagram yang tersedia. satu lagi yang dapat membuat sebuah violin

plot(plot biola ) adalah Matplotlib. masing masing software dan aplikasi mem-

punyai kelebihan dan kekurangan pada saat pengaplikasiannya. tetpai untuk

di indonesia hingga saat ini, software R masih sangat diminati oleh kalangan

pemakai violin plot.

SARAN

Untuk para ilmuan atau analisis dan perguruan tinggi untuk memperkenalkan

plot biola atau (Violin Plot) ini kepada masyarakan sekitar di Indonesia dengan

perangkat lunak R dan perpustakaan ggplot untuk mempermudah peren

anaan

data numerik, hingga bukan saja hanya perangkat lunak yang seperti biasa

dipakai dengan versi yang sudah umum dengan versi bajakan seperti SPSS,SAS

dan sebagainya.

2

Daftar Pustaka

• www.r-bloggers.

om/example-8-11-violin-plots/

• www.r-bloggers.

om/split-violin-plots/

• www.sthda.

om/english/wiki/ggplot2-violin-plot-easy-fun

tion-for-data-visualization-

using-ggplot2-and-r-software

• stanford.edu/~mwaskom/software/seaborn/generated/seaborn.violinplot.html

• https://books.google.

o.id/books?id=-vyu9AaJPY8C&pg=PA19&lpg=PA19&dq=

ara+instalasi+software+R+di+harddisk&sour

• https://en.wikipedia.org/wiki/Violin_plot

• http://do

s.ggplot2.org/0.9.3/geom_violin.html

• http://www.inside-r.org/pa

kages/

ran/vioplot/do

s/vioplot

• http://julismail.sta .telkomuniversity.a

.id/tutorial-lyx/. [10 Januari 2016℄

• Pujiati, Suhermin Ari. (2010). Visualisasi Data dengan R Graphi

.[16

Januari 2016℄

• Yudistira, Anom. (2008). Manipulasi Data dan Gra k Menggunakan

Bahasa R. http://bahasa-r.blogspot.

o.id/2008/12/manipulasi-data-dan-

gra k-menggunakan.html.[16 Januari 2016℄

3

4

MOM

1 18 Januari 2016

Tempat : Universitas Gunadarma

Pembi

araan :

- Capaian : Membahas tentang bab pertama mengenai apa yang dimaksud

Violin Plot

- Ren

ana selanjutnya mengenai bagaimana Implementasi untuk bab 2 ten-

tang Violin Plot

- Pertemuan berikutnya tanggal 1

2 22 Januari 2016

Tempat : Kosan Dian Rusdianti

Pembi

araan : Membahas tentang bab kedua dan ketiga dari Violin Plot

hingga konsepnya yang akan di bahas oleh deanti dan dian.

Pertemuan berikutnya tanggal 28 Januari 2016

3 28 Januari 2016

Tempat: via WhatsApp

Pembi

araan : Membahas tentang software yang mendukung konsep violin

plot gruped violinplot with split violin.

Ren

ana pertemuan selanjutnya membahas bab 4 & 5

Pertemeuan selanjutnya tanggal 1 Februari 2016

4 1 Februari 2016

Tempat : Via Whatsapp & univ Gunadarma

mengumpulkan semua tugas yang telah diberikan kepada masing masing

anggota pada pertemuan yg telah ditentukan. dan menjadikannya kedalam

satu kesatuan.

1

JABATAN	NAMA	JOB DESCRIPTION	WORKFLOW
Wakil Ketua	Abigail Gabriela	T3	tulisan bab 4, bab 5, Daftar pustaka
Anggota	Deanti Pratami	T1	Tulisan untuk, kata pengantar bab 1 dan bab 2
Anggota	Dian Rusdianti	T2	Tulisan bab 3, penulisan perangkat lunak yang mendukung perangkat lunak tersebut
Ketua	Satrio Nugroho	T0	Tugas persiapan , dokumen disertakan dalam format ODF atau HTML (jangan Doc atau Xls)