Pembuatan Permainan Super Noseman

(1)

93

Jl. Prof. Drg. Suria Sumantri no. 65 Bandung

email: erico.dh@itmaranatha.org; khe.wan.xing@outlook.com

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 endless-running, dan deteksi tumbukan yang akan dibahas bagian 2.

(2)

Jurnal Informatika, Vol. 10 No. 1, Juni 2014: 93 - 103

94

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

(3)

95 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) {

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) {

(4)

96

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.

(5)

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

(6)

98

Gambar 8. SpriteSheet 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

(7)

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

(8)

100

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.

(9)

101 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 endless-running ini sangat diminati oleh banyak user terutama dari kalangan yang berusia 13 – 40 tahun.

(10)

102

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," 2012. [Online]. Available:

http://astrophysicsformulas.com/astronomy-formulas-astrophysics-formulas/what-is-parallax-definition-of-parallax/. [Accessed 20 5 2014].

[2] "2D Collision Detection," [Online]. Available: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection. [Accessed 20 5 2014]. [3] "Dictionary.com," [Online]. Available:

(11)

103 [4] "Parallax," [Online]. Available: http://astro.unl.edu/naap/distance/parallax.html.

[Accessed 20 5 2014].

[5] "Your Dictionary," [Online]. Available: http://www.yourdictionary.com/parallax. [Accessed 20 5 2014].