Pong (part 1) Persiapan

Habis baca thread di kaskus, katanya kalau mau belajar game programming, jangan langsung memasang target yang tinggi2, seperti 3D ala Doom, Quake, dkk. Tapi mulailah dengan project yang sederhana dulu. Cukup yang 2D saja.

Okelah kalo begitu.
Untuk latihan kedua kita, saya putuskan untuk membuat game Pong!
Salah satu game tertua di dunia game komputer. Pong dibuat oleh Allan Alcorn, enginer di Atari, sebagai latihan pada tahun 1972.

Pong adalah game 2D yang mensimulasikan tenis meja. Pemain harus menjaga bola agar tidak keluar dengan sebuah paddle (bat tenis) yang bisa digerakkan naik turun untuk memukul balik bola ke lawan.

Ok, segitu aja sedikit intronya tentang pong.
Kita mulai saja latihan kedua kita dengan membuat project baru, beri nama Pong, atau sesuai selera anda.

Sebelum kita lanjutkan, kita buat dulu entitas / content grafik yang akan kita pakai. Untuk membuat game pong, kita butuh dua buah bet/paddle dan sebuah bola. Berikut aku buatkan layout untuk objek-objek yang kita butuhkan.

Kita akan membuat dua buah paddle dengan ukuran masing 32 x 128 pixel, dan sebuah bola dengan ukuran 64 x 64 pixel. Kamu boleh saja membuat dengan ukuran yang lain, akan tetapi, koding programnya menyesuaikan ukuran gambar yang anda buat tentunya..:)
Berikut contoh gambar yang telah aku buat (sederhana banget yak!) :

Kamu tentu boleh berkreasi dengan gambar yang lain tentunya. Silahkan gunakan program pengolah gambar kesukaan kamu seperti Photoshop dan kawan2. Aku sendiri memakai program Paint.NET yang gratisan..he. Paint.NET bisa di download di www.getpaint.net

Next, mari kita tambahkan content grafik kita dan tampilkan gambarnya.
Pertama kita buat dulu folder gfx pada group Content, agar kita bisa memisahkan antara content grafik dan content suara. Caranya, klik kanan pada Content --> Add --> New Folder. Isi nama folder baru kita dengan gfx.

Kedua, tambahkan gambar yang telah kita buat kedalam project kita, dibawah folder gfx. Caranya, klik kanan folder gfx --> Add --> Existing Item...
Pilih content gambar yang telah kita buat, klik Add.
Agar koding kita seragam, rubah Nama Asset dengan nama 'sprites'. Nama Asset dapat dirubah melalui jendela properties. Jika jendela properties belum muncul, kita bisa memunculkannya dengan mudah dengan cara klik kanan pada salah satu content kita, kemudian klik Properties. Secara default, nama asset adalah sesuai dengan nama filenya. Jika nama file kamu  'sprites.png', maka otomatis nama asset-nya adalah 'sprites'

Btw, kalau kita lihat terjemahan dari kata 'sprite' lewat google translate, artinya adalah bidadari. Tapi bukan itu yang kita maksud tentunya. Dalam dunia game programming, sprite adalah objek grafik 2D yang akan kita pakai dalam scene kita. Sebagai contoh dalam game yang sedang kita buat, sprite-nya adalah gambar bet dan bola.

Ok, lanjut deh.
Sekarang kita coba tampilkan content grafik yang sudah kita tambahkan tadi.
Kita awali dengan membuat variable untuk content grafik kita. Kita tambahkan coding berikut pada area pendeklarasian variable

Texture2D spritesTexture;

Karena objek kita adalah 2D, maka kita menggunakan Texture2D.
Selanjutnya, load content kita dengan menambahkan coding berikut pada prosedur LoadContent

spritesTexture = Content.Load<Texture2D>(@"gfx/sprites");

Berikutnya, kita coba test tampilkan content grafik kita, apakah sudah bisa diload dengan benar, dengan menambahkan koding berikut pada prosedur Draw

spriteBatch.Begin();

spriteBatch.Draw(spritesTexture, new Vector2(0, 0), Color.White);

spriteBatch.End();

Disini kita menggunakan fungsi Draw untuk menampilkan content kita, dengan parameter masukan texture (gambar), lokasi, warna.  Sebenarnya, masih banyak parameter lain yang dapat kita gunakan untuk masukan fungsi Draw ini. Tapi sementara kita pake parameter yang paling sederhana dahulu.

Coba kita pencet F5 untuk test program kita.
Jika hasilnya adalah seperti berikut, berarti content kita telah berhasil diload dan ditampilkan dengan benar.

Btw, aku pingin background-nya item aja. Biar tampak sangar dan kuno..hehe..
Rubah koding berikut pada prosedur Draw

GraphicsDevice.Clear(Color.CornflowerBlue);

menjadi

GraphicsDevice.Clear(Color.Black);

Sekarang coba tekan F5 lagi. Jadi item kan bg-nya? :)
Btw lagi, kalo ada yang bingung dimana posisi nulis kodingnya, bisa lihat pada latihan sebelumnya (Hello World), karena disana lebih dijelaskan dimana posisi koding yang kita tambahkan.

Ok, sampai disini dulu latihan kita kali ini. Ntar kita lanjutin di part 2. Udah capek nih..hehe
Oh ya, kalo ada komentar, pertanyaan, usul, atau kritik, silahkan tulis aja di comment yak..