Pada latihan sebelumnya (Pong part 1) kita telah berlatih membuat objek grafik (sprite) dan menampilkannya. Nah sekarang, mari kita lanjutkan latihan kita dengan mencoba untuk menggerakkannya. Oh ya, sebelum kita menggerakan sprite kita, kita latihan dulu memisahkan sprite kita yang terdiri dari 3 bagian, tapi masih menyatu.
Sebenernya simple aja. Parameter masukan untuk fungsi Draw pada object SpriteBatch tidak hanya texture, posisi, dan warna seperti yang telah kita pakai pada latihan sebelumnya. Tetapi kita juga bisa memasukan parameter source, yang berisi posisi dan dimensi dari gambar yang akan ditampilkan, relatif terhadap sumber gambar (source).
Contohnya aja langsung, biar ga bingung. Misal kita akan menampilkan bet pertama, dimana lokasi bet 1 pada source gambar kita adalah di koordinat (0,0) dengan dimensi 32x128 pixel. Oh ya, untuk mendefinisikan objek yang terdiri dari variable lokasi dan dimensi, kita menggunakan objek
Rectangle (x, y, width, height).
Untuk menggambar bet 1, kita akan menggunakan fungsi Draw dengan masukan parameter
texture, posisi, source, warna.
spriteBatch.Draw(spritesTexture, new Vector2(0, 0), new Rectangle(0, 0, 32, 128), Color.White);
Coba test pencet F5.
Maka gambar yang tampil hanya bet 1 yang berwarna biru.
Untuk menampilkan bet 2 yang berwarna merah, kita tinggal mengganti parameter source-nya saja. Karena bet 2 ada pada posisi koordinat (32,0) pada source kita, maka untuk menampilkan bet 2 kita bisa menggunakan koding berikut:
spriteBatch.Draw(spritesTexture, new Vector2(0, 0), new Rectangle(32, 0, 32, 128), Color.White);
Begitu pula untuk menggambar bola yang ada pada posisi (0,64), dengan dimensi 64x64 pixel.
spriteBatch.Draw(spritesTexture, new Vector2(0, 0), new Rectangle(64, 0, 64, 64), Color.White);
Sudah jelas kan?
Tapi tunggu dulu. Ukuran bola kita kayaknya terlalu gede deh. Ok, jangan khawatir. Untuk parameter lokasi pada fungsi Draw, biasanya kita menggunakan Vector2. Nah, selain menggunakan vector2, kita juga bisa menggunakan objek Rectangle seperti yang kita gunakan untuk mendefinisikan source.
Kita akan merubah dimensi bola kita menjadi 32x32 pixel saat menampilkannya di layar. So, koding untuk menampilkan bola akan kita ubah seperti berikut:
spriteBatch.Draw(spritesTexture, new Rectangle(0, 0, 32, 32), new Rectangle(0, 0, 64, 64), Color.White);
Coba kita test lagi dengan menekan F5. Maka bola kita akan ditampilkan dengan ukuran setengah dari ukuran semula.
Ok, kita lanjutkan dengan latihan menggerakan gambar. Kita mulai dengan menggerakan pad 1. Aku berencana untuk mengontrol pad 1 dengan mouse, dan pad 2 dengan keyboard.
Sebelumnya, mari kita menambahkan variable untuk menyimpan posisi bet.
float betLoc = 240.0f;
Mungkin ada yang bertanya, knapa kita ga pake Vector2, tapi cuma pake float? Soalnya posisi bet kita hanya bisa digerakkan naik turun, sehingga kita cukup menyimpan nilai koordinat y-nya saja.
Btw, kenapa kita inisialisasi pada posisi koordinat 240? Itu karena secara default, ukuran layar game kita adalah 800x480 pixel. Karena tingginya adalah 480, dan kita ingin menampilkan posisi bet kita tepat ditengah2, maka kita set posisi awalnya 240.
Sebenernya, kita bisa juga mengubah ukuran layar game kita. Tapi untuk sementara ini, kita gunakan saja nilai defaultnya.
Berikutnya, kita akan mengupdate posisi bet kita dengan posisi kursor mouse.
Tambahkan koding berikut pada prosedur
Update
MouseState mouse = Mouse.GetState();
betLoc = mouse.Y;
if (betLoc < 64.0f) betLoc = 64.0f;
if (betLoc > 416.0f) betLoc = 416.0f;
Disini kita batasi koordinat Y di rentang 64 s/d 416. Ini disebabkan karena bet kita mempunyai ukuran tinggi 128 pixel, dan kita akan set koordinat 0-nya diposisi tengah. Sehingga untuk menggambar bet pada posisi mentok atas, kita akan menggambar di koordinat y 0+64=64, dan mentok bawah di koordinat y 480-64=416.
Next, kita update pemanggilan fungsi Draw pada prosedur
Draw menjadi berikut:
spriteBatch.Draw(spritesTexture, new Vector2(0, betLoc-64), new Rectangle(0, 0, 32, 128), Color.White);
Sekarang coba pencet F5. Gerakan mouse keatas dan kebawah.
Jreng jreng..! Gambar bet akan ikut bergerak naik turun sesuai posisi mouse :)
Gampang kan?
Next, untuk bet 2, kita akan coba mengontrolnya dengan keyboard.
Untuk menghemat variable, kita akan mengubah variable betLoc kita menjadai array, agar bisa menampung posisi bet 1 dan bet 2 sekaligus. Bet 1 ditampung pada index 0, dan bet 2 ditampung pada index 1.
float[] betLoc = new float[] { 240.0f, 240.0f };
Sebelum kita lanjutkan, ubah dulu pemanggilan variable betLoc untuk bet 1 dengan betLoc[0].
Untuk menggunakan kontrol keyboard pada bet 2, kita tambahkan koding berikut pada prosedur Update.
KeyboardState kb = Keyboard.GetState();
if (kb.IsKeyDown(Keys.Up)) betLoc[1]-=8;
if (kb.IsKeyDown(Keys.Down)) betLoc[1]+=8;
if (betLoc[1] < 64.0f) betLoc[1] = 64.0f;
if (betLoc[1] > 416.0f) betLoc[1] = 416.0f;
Kalau kita lihat, tidak beda jauh dengan teknik menggunakan kontrol mouse. Hanya bedanya, disini update posisi bet menggunakan penambahan dan pengurangan variable, sedangkan pada kontrol mouse, kita langsung mengambil nilai koordinat Y dari posisi mouse.
Next, tambahan untuk prosedur Draw.
spriteBatch.Draw(spritesTexture, new Vector2(768, betLoc[1] - 64), new Rectangle(32, 0, 32, 128), Color.White);
Disini, posisi x dari bet 2 kita set di posisi 768, yang didapat dari 800-32 = 768.
Sekarang kita coba lagi pencet F5.
Gerakan mouse dan panah atas/bawah keyboard. Kamu bisa liat sendiri hasilnya :)
Sampai disini dulu yak latihan kita hari ini..kita lanjutin lagi di part 3, untuk membahas cara menggerakan bola-nya. Source code seutuhnya akan saya masukan di comment.
----
Update 13/1/2010
Btw, masih ada sedikit kekurangan dalam algoritma kontrol bet menggunakan keyboard.
Disini, kita mengupdate posisi bet dengan menambah/mengurangi dengan nilai 8 tiap kali.
Update itu terjadi tiap 1/60 detik sekali, karena secara default, fps kita diset 60 fps.
Nah masalahnya adalah, apabila kita menjalankan program pada komputer dengan spek yang kurang mendukung, sehingga tidak bisa mencapai 60 fps, maka kecepatan update posisi bet kita menjadi tidak stabil. Sehingga kita perlu mengalikannya dengan variable gameTime, agar kecepatan gerakan objek kita bisa tetap konstan.
Menurut buku yang aq baca sih gitu..:)
So, kita akan mengubah koding update posisi bet 2 menjadi :
if (kb.IsKeyDown(Keys.Up)) betLoc[1] -= (float)gameTime.ElapsedGameTime.Milliseconds * 0.5f;
if (kb.IsKeyDown(Keys.Down)) betLoc[1] += (float)gameTime.ElapsedGameTime.Milliseconds * 0.5f;
Sebenernya aq sendiri blm pernah nyoba di komputer yang lemot. Jadi belum tau effeknya. he.
