Pembuatan Permainan Super Noseman

Transkripsi

1 Erico Darmawan Handoyo Jurusan S1 Teknik Informatika Fakultas Teknologi Informasi, Universitas Kristen Maranatha Jl. Prof. Drg. Suria Sumantri no. 65 Bandung Abstract Nowadays, gadget development moves rapidly. It is same with the development of digital games which usually have been installed on every gadget. One of game type which has been responded well by users is endless-running game, such as Temple Run or Flappy Bird. Super Noseman is a 2 dimensional endless-running game. It implemented several things like endless-running effect, parallax effect, and collision detection. The first version of Super Noseman has been published on Windows 8 Metro. The remake version will be published on Windows Phone 8. Keywords: Endless-running game, windows phone 8, parallax effect, collision detection 1. Pendahuluan Perkembangan dunia gadget kini berkembang dengan sangat pesat. Hampir setiap orang memiliki satu buah gadget seperti featured-phone, smartphone, atau tablet. Siring dengan maraknya perkembangan gadget, perkembangan permainan digital yang dapat di-install di dalamnya pun berkembang dengan pesat. Salah satu tipe permainan yang mendapatkan respon yang sangat baik adalah endless-running game seperti Temple Run ataupun Flappy Bird. Hal inilah yang melatarbelakangi pembuatan permainan Super Noseman ini yang bertipe 2D endless-running game. Dalam pembuatannya, permainan Super Noseman ini akan menerapkan beberapa hal seperti efek parallax, efek endlessrunning, dan deteksi tumbukan yang akan dibahas bagian 2. 93

2 Jurnal Informatika, Vol. 10 No. 1, Juni 2014: Landasan Teori dan Desain Permainan Super Noseman akan menerapkan beberapa hal seperti efek parallax, efek endless-running, dan deteksi tumbukan. Berikut ini adalah pembahasannya: 2.1 Parallax Effect Efek parallax adalah efek yang dilihat mata seseorang terhadap perpindahan atau besarnya sebuah benda yang yang disebabkan oleh perbedaan posisi benda tersebut. Hal ini dapat dirasakan dengan mudah. Sebuah benda akan terlihat jauh lebih kecil ketika posisi benda tersebut jauh dari posisi orang yang melihat. Ketika seseorang melintasi jalan dengan menggunakan sebuah mobil, maka perpindahan tiang listrik di pinggir jalan terasa jauh lebih cepat dibandingakan dengan gunung yang posisinya terletak lebih jauh daripada tiang listrik tersebut. Dengan menerapkan efek serupa dalam sebuah permainan bertipe scrolling, maka permainan tersebut akan terasa lebih hidup dan alami. Gambar 6. Contoh Sederhana dari Efek Parallax [4] Gambar 1 menunjukkan salah satu contoh sederhana dari parallax. Persepsi atau gambar yang diterima oleh mata seseorang pada posisi A akan berbeda dengan seseorang yang berada pada posisi B meskipun objek yang dilihat sebenarnya sama saja. [1] 2.2 Endless Running Game Permainan bertipe endless running adalah sebuah permainan yang secara konseptual tidak memiliki akhir permainan. Permainan tersebut akan terus berjalan hingga pemain mengalami kekalahan. Biasanya, tujuan dari permainan ini adalah mencapai nilai setinggi-tingginya. 94

3 (Erico Darmawan Handoyo) 2.3 Deteksi tumbukan 2 Dimensi [2] Deteksi tumbukan pada permainan 2 dimensi dilakukan dengan membuat bounding-box pada objek-objek yang akan mengalami tumbukan. Deteksi tumbukan sederhana dapat menggunakan bounding-box yang berbentuk kotak ataupun lingkaran. Note: rect1 x: 5, y: 5, width: 50, height: 50 rect2 x: 20, y: 10, width: 10, height: 10 if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) { // collision detected! } // filling in the values => if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) { // collision detected! } Algoritma 1. Contoh Implementasi dari Bounding-Box. [2] Algoritma Axis-Aligned Bounding Box bekerja dengan memastikan tidak adanya jarak Antara kedua buah box tersebut. Jika ada, maka kedua box tersebut tidak mengalami tumbukan tumbukan. circle1 radius: 20, x: 5, y: 5 circle2 radius: 12, x: 10, y: 5 var dx = circle1.x - circle2.x; var dy = circle1.y - circle2.y; var distance = Math.Sqrt(dx * dx + dy * dy); if (distance < circle1.radius + circle2.radius) { // collision detected! } Algoritma 2. Contoh Implementasi dari Axis-Aligned Bounding-Box. [2] 95

4 Jurnal Informatika, Vol. 10 No. 1, Juni 2014: Algoritma Circle Collision akan memeriksa apakah jarak antar 2 titik pusat lingkaran lebih besar dari pada jumlah kedua jari-jari. Jika ya, maka tidak terjadi tumbukan. Jika tidak maka telah terjadi tumbukan. 2.4 Desain Permainan Cara bermain permainan Super Noseman adalah menyelamatkan penduduk di dalam sebuah gedung dengan cara menangkapnya dan memukul para ninja yang terdapat dalam gedung tersebut. Super Noseman akan terus berlari hingga permainan berakhir. Permainan akan berakhir jika Super Noseman tidak berhasil menyelamatkan atau memukul ninja (terlewatkan) dengan jumlah tertentu. Nilai akan didapatkan tergantung dengan jumlah penduduk yang berhasil diselamatkan dan ninja yang berhasil dipukul. Tiap objek dalam permainan ini akan diletakkan pada 6 layer yang berbeda. Berikut ini adalah penjelasan dari keenam layer tersebut: 1. Layer 0: digunakan untuk meletakkan objek background yang terjauh, yaitu langit. 2. Layer 1: digunakan untuk meletakkan objek backround yang lebih dekat, yaitu objek gedung. 3. Layer 2: digunakan untuk meletakkan objek background yang lebih dekat dibandingkan dengan layer 1, yaitu objek gedung yang lebih besar (karena jaraknya lebih dekat). 4. Layer 3: digunakan untuk meletakkan objek background yang terdekat, yaitu objek jendela, tembok, dan lantai gedung. 5. Layer 4: digunakan untuk meletakkan objek tokoh permainan, yaitu Noseman, penduduk, dan ninja. 6. Layer 5: digunakan untuk meletakkan tombol-tombol yang digunakan untuk mengontrol Noseman. 96

5 (Erico Darmawan Handoyo) Gambar 7. Sketsa tampilan permainan Super Noseman Berikut ini adalah penjelasan dari sketsa tampilan permainan Super Noseman yang ditampilkan pada gambar 2: 1. Tombol untuk menangkap penduduk. 2. Letak karakter Super Noseman. 3. Background gedung yang akan terus bergerak ke arah kiri secara terus menerus sehingga akan menampilkan kesan bahwa Super Noseman bergerak ke arah kanan. 4. Bakckground bagian dalam gedung yang juga akan terus bergerak ke arah kiri. 5. Karakter penduduk atau ninja yang akan terus keluar dari arah kanan layar dengan durasi dan kecepatan tertentu. 6. Tombol untuk memukul ninja. 3. Implementasi Permainan Super Noseman Proses pertama yang dilakukan dalam implementasi permainan Super Noseman adalah pembuatan background dan sprite. Gambar 3 menunjukkan sprite sheet dari karakter Super Noseman. 97

6 Jurnal Informatika, Vol. 10 No. 1, Juni 2014: Gambar 8. Sprite Sheet Animasi Berjalan Karakter Noseman Sprite sheet dari animasi berjalan karakter Noseman memiliki 3 buah frame. Ketika Karakter Noseman mulai berjalan dari keadaan diam, maka animasi akan dilakukan mulai dari frame 0, frame 1, frame 2, frame 1, frame 2, frame 1, frame 2, dan seterusnya. Endless Running Effect Agar memiliki endless running effect, maka background pada permainan ini harus bergerak terus menerus ke arah kiri layar. Oleh karena itu, sisi kiri dan kanan background harus dapat digabung tanpa terlihat. Gambar 4, 5, dan 6 adalah gambar background yang diperlukan untuk menciptakan efek endless running pada permainan Super Noseman. Gambar 9. Gambar Background Gedung Terjauh Gambar 10. Gambar Background Gedung Terdekat 98

7 (Erico Darmawan Handoyo) Gambar 11. Gambar jendela dan lantai bagian dalam gedung Agar tercipta endless running effect, maka tiap background akan dibuat menjadi 2 buah objek background yang saling berhimpitan. Ketika objek background yang pertama bergeser hingga di luar layout, maka posisi kedua object background tersebut akan dipindahkan ke posisi awal. Dengan demikian, background akan terasa bergerak secara terus menerus tanpa henti. Gambar 7 menunjukkan bagaimana pembuatan endless running effect tersebut. Gambar 12. Proses Pembuatan Endless Running Effect 99

8 Jurnal Informatika, Vol. 10 No. 1, Juni 2014: Terdapat 2 buah objek background (nomor 1 dan 2). Pada posisi 1, objek yang pertama terletak di dalam layout (diberi tanda warna merah), sedangkan objek yang ke dua ada di sebelah kanan dari objek yang pertama (di luar layout). Kedua buah objek background akan digeser ke kiri (posisi 2) hingga suatu saat objek yang ke dua akan berada di dalam layout (posisi 3). Pada saat itulah posisi kedua objek background akan dikembalikan seperti semula yaitu posisi 1. Dari posisi 1, objek background akan terus digeser ke kiri sama seperti langkah sebelumnya. Efek Parallax Seperti yang telah dijelaskan pada bagian 2.4, efek parallax dapat ditimbulkan dengan cara memisahkan gambar background menjadi beberapa layer. Background langit akan menempati layer 0. Background gedung terjauh (gambar 4) akan menempati layer 1, background gedung terdekat (gambar 5) menempati layer 2, dan bagian dalam gedung (gambar 6) akan menempati layer 3. Gambar 13. Screenshot Permainan Super Noseman 100

9 (Erico Darmawan Handoyo) Gambar 14. Tampilan Awal Permainan Super Noseman Objek background pada tiap layer akan digeser ke arah kiri dengan metode yang telah dijelaskan untuk membuat endless running effect. Agar efek parallax dapat terlihat maka kecepatan pergeseran objek background harus dibedakan. Background yang lebih jauh (layer dengan nomor lebih kecil) harus memiliki kecepatan yang lebih lambat. Gambar 8 dan 9 adalah screenshot dari permainan Super Noseman yang telah diimplementasikan secara penuh. 4. Simpulan Melalui pembuatan permainan Super Noseman ini, dapat disimpulkan beberapa hal berikut: 1. Efek parallax dapat diciptakan dengan memisahkan tampilan sebuah permainan menjadi beberapa layer dan memberikan kecepatan yang berbeda pada tiap layer tersebut. 2. Background untuk permainan endless-running 2 dimensi hanya memerlukan 1 buah backround yang bagian kiri dan kanannya dapat digabungkan tanpa terlihat adanya sambungan. Hal ini akan menciptakan sebuah panorama yang terkesan sangat panjang dan tidak terbatas. 3. Seperti yang dapat dilihat pada gambar 10, permainan dengan jenis endlessrunning ini sangat diminati oleh banyak user terutama dari kalangan yang berusia tahun. 101

10 Jurnal Informatika, Vol. 10 No. 1, Juni 2014: Gambar 15. Laporan Distribusi Permainan Super Noseman Ide-ide yang dapat menjadi pertimbangan untuk mengembangkan permainan Super Noseman ini di masa yang akan datang adalah: 1. Penambahan gerakan-gerakan lain dan obstacle-obstacle lain selain ninja dan penduduk. 2. Gambar untuk background/layer terjauh diberikan efek blur agar dapat mensimulasikan efek perbedaan titik fokus mata. Daftar Pustaka [1] "What Is Parallax Definition of Parallax," [Online]. Available: [Accessed ]. [2] "2D Collision Detection," [Online]. Available: US/docs/Games/Techniques/2D_collision_detection. [Accessed ]. [3] "Dictionary.com," [Online]. Available: [Accessed ]. 102

11 (Erico Darmawan Handoyo) [4] "Parallax," [Online]. Available: [Accessed ]. [5] "Your Dictionary," [Online]. Available: [Accessed ]. [6] T. Schwarzl, 2D Game Collision Detection,