Home > Java, Slick2D > Tutorial Game Programming part 1

Tutorial Game Programming part 1


Mendesain Map

Keuntungan java untuk pengembangan game

  1. Platform Independence

    Java adalah suatu bahasa yang memungkinkan menjalankan game dalam banyak platform seperti Windows, Linux, Macintosh tanpa perlu melakukan kompilasi lagi.

  2. Object Oriented

    Java adalah bahasa yang didesain untuk mendukung pemrograman berorientasi objek. Hal ini sangat bermanfaat disebabkan konsep encapsulasi, polymorphisme dan inheritance sangat memudahkan dalam pengembangan game terutama yang berskala besar.

  3. Easy to Learn

    Mudah dipelajari dikarenakan Java tidak seperti C yang menggunakan Pointers, dan tidak mengharuskan programmer untuk menghapus class ketika sudah tidak digunakan karena sudah ada Garbage Collector.

Kekurangan java untuk pengembangan game

  1. Performance
  2. Lack of an accurate high – precision timer

    Perhitungan waktu adalah yang paling penting dalam game programming. Dikarenakan ini mengendalikan sebagaimana cepat game bisa dirender. Di java ini bisa menjadi masalah dikarenakan timer kurang akurat sehingga proses animasi menjadi kurang baik.

Jenis game yang sudah dikembangkan di Java

  1. Sports Game
  2. Puzzle Game/RPG
  3. Racing Games
  4. MMORPG
  5. Strategy Games
  6. Action/Adventure

 

Pada tahun ajaran ini mata kuliah teknologi game akan mengajak anda untuk mengembangkan sebuah game bergenre RPG. Game ini dipilih dikarenakan memiliki aspek yang cukup lengkap untuk menambah pengetahuan anda nantinya dalam pengembangan game. Aspek yang akan dibahas antara lain :

  1. Tile Engine
  2. Turn-Based Combat Engine
  3. External Game Data
  4. User Interface
  5. Saving and Loading

Tools yang dibutuhkan

  1. JDK 6ux (x berarti angka update, misal 21)
  2. Netbeans 6.x (misal 6.9.1)
  3. GIMP 2.6.x (misal 2.6.10)
  4. Bitmap masking
  5. Bitmap combine
  6. Slick2D Game Framework
  7. Tiled v0.7.2

     

Langkah langkah yang akan kita lalui dalam pengembangan game RPG dalam mata kuliah Teknologi Game ini adalah

  1. Menyusun Peta àGIMP,Bitmap Masking, Bitmap Combine, Tiled v0.7.2
  2. Menampilkan peta di game àNetbeans 6.x/Eclipse/Jdeveloper
  3. Menyusun Character dan BangunanàGIMP, Bitmap Masking, Bitmap Combine/CustomBitmapCombine
  4. Menyatukan peta, character dan bangunan dalam satu game àNetbeans 6.x/Eclipse/Jdeveloper
  5. Membuat kendali character (Gerakan, Collision) àNetbeans 6.x/Eclipse/Jdeveloper
  6. Membuat dialog antar karakter àGIMP,Netbeans 6.x/Eclipse/Jdeveloper
  7. Membuat Misi àNetbeans 6.x/Eclipse/Jdeveloper
  8. Combat Engine dan Items àGIMP,Bitmap Masking, Bitmap Combine,Netbeans 6.x/Eclipse/Jdeveloper
  9. Levelling àNetbeans 6.x/Eclipse/Jdeveloper
  10. User Interface àGIMP,Bitmap Masking, Bitmap Combine,Netbeans 6.x/Eclipse/Jdeveloper
  11. Saving and LoadingàNetbeans 6.x/Eclipse/Jdeveloper

 

Menyusun Peta

Tools yang dibutuhkan

  1. GIMP
  2. Bitmap Masking
  3. Bitmap Combine
  4. Tiled v0.7.2

Tiled v0.7.2

Tiled adalah dibuat dengan tujuan sebagai editor peta yang bersifat umum. Ini dibangun agar mudah digunakan, namun cukup fleksibel untuk bekerja dengan berbagai mesin permainan, seperti permainan RPG.

  1. Memulai project tiled, silahkan anda jalankan aplikas tiled.jar, kemudian anda pilih menu File àNew

  2. Maka akan muncul Dialog New Map berikut ini

    Atur agar width dan height dari Map Size menjadi 60, kemudian width dan height dari Tile Size manjadi 32, kemdian klik OK

    Map Size akan mempengaruhi ukuran dari peta, yaitu panjang dan lebar dari peta.

    Tile Size(ukuran petak) akan mempengaruhi petak yang menyusun peta.

     

     

  3. Maka anda akan mendapatkan tampilan seperti gambar berikut ini

    Selamat anda sudah mendapatkan peta pertama anda, sekarang silahkan anda simpan melalui menu File àSave

     

     

     

    Simpan dengan nama mission1, kemudian untuk Files of Type diganti menjadi Tiled Maps files lalu Save.

  4. Silahkan anda buka folder tempat anda menyimpan materi, disini folder saya bernama materi1, maka anda akan menemukan sebuah file dengan nama mission1.tmx

  5. Silahkan anda buat folder image didalam folder materi1, kemudian anda kopikan semua file image yang diberikan di awal materi ke dalam folder image.
  6. Gunakan menu Viewà Show Coordinate untuk melihat coordinat masing – masing petak
  7. Silahkan anda tambahkan TileSet dengan cara Tilesets àNew Tileset, maka akan muncul window seperti gambar berikut

     

     

Atur agar :

  1. Tileset name àLand
  2. Tile height à32
  3. Beri tanda check pada Reference tileset image
  4. Pilih tombol browse disamping Tile Image untuk memilih gambar dengan nama

    InqXPMT-MedievalTown-000-000.png

    1. Pastikan tampilan window New Tileset anda seperti gambar berikut

       

      Lalu tekan OK

    2. Silahkan anda cari icon panah atas di pojok kiri bawah

       

      Silahkan anda klik ikon yang dibulati seperti gambar berikut

    3. Maka akan tampak Tilesets berikut

      Selamat anda sudah sukses memasukkan tileset

    4. Oke sekarang kita coba untuk merubah warna hitam pada map anda menjadi warna hijau yang dihasilkan dari rumput.
    5. Silahkan anda pilih Fill dengan klik kiri

    6. Silahkan anda ambil tile berwarna hijau di tile palette land, tile hijau ini terletak di pojok kiri atas.

       

       

       

       

       

       

       

       

       

       

    7. Kemudian anda klik kiri di tempat atau layer pada peta yang berwarna hitam, maka layer 0 dari map anda akan tampak seperti gambar berikut

       

      Jangan lupa disimpan ya J

    8. Sekarang anda sudah membuat dasaran dari peta anda, selanjutnya silahkan anda tambahkan 1 buat tileset baru dengan cara Tilesets à New TileSet
    9. Samakan text pada window yang muncul dengan gambar berikut, untuk gambar silahkan anda pilih InqXPMT-MedievalTown-000-131.png, beri nama Land2, Tile height beri nilai 32, Referense tileset image beri tanda check lalu klik OK

    10. Maka anda akan mendapatkan Land2 muncul pada Tileset anda. Selamat anda sudah cukup jauh saat ini.

       

    11. Gunakan CTRL dan Minus untuk Zoom Out

    12. Terlebih dahulu silahkan anda pilih Paint

    13. Silahkan anda pilih Tab Land2 pada Tile Palette, kemudian anda pilih gambar tanah (yang dilingkari)

    14. Kemudian silahkan anda gambarkan jalan dan area yang akan digunakan untuk desa, mengikuti contoh berikut (tidak harus sama persis)

    15. Silahkan anda pilih menu Edit à Brush untuk mengubah ukuran dari paint agar lebih besar dan memudahkan anda ketika menggambar area untuk desa. Pilih yang ditandai lingkaran

      Lalu silahkan anda klik OK

       

       

       

    16. Tambahkan area desa seperti gambar berikut (Tidak harus sama persis)

    17. Sekarang tambahkan 1 buah layer lagi, layer ini berguna untuk mengatur susunan atau Z Order dari gambar anda, pada software ini, semaking atas posisi Layer maka akan berada diatas layer yang dibawahnya. Contoh :

      Layer 1    

       

       

       

       

      Layer 2

       

       

       

      Layer 2 + Layer 1 (Diamsumsukan bahwa layer di kanan posisinya lebih atas dari layer di kiri)

       

       

       

       

      Cara menambahkan layer

      Layer à Add Layer

      Maka di sebelah kanan akan terdapat 2 Layer seperti gambar berikut

    18. Silahkan anda beri ubah nama layer dari Layer 0 àGrass Layer dan Layer 1 menjadi Horizontal Border.

    19. Kemudian anda beri tanda check untuk kolom lock pada Grass Layer

    20. Apabila jalan anda dirasa kurang tebal, silahkan lepaskan lock dari Grass Layer kemudian anda pertebal agar seperti gambar berikut

      Apabila dirasa sudah cukup maka silahkan anda lock lagi Grass Layer, kemudian anda fokuskan pemilihan layer pada Horizontal Layer

    21. Tambahkan gambar dengan nama InqXPMT-MedievalTown-000-132.png kedalam map anda dan beri nama menjadi Land3

       

    22. Silahkan pilih Paint

      Kemudian pilih gambar yang dilingkari

    23. Susun agar seperti gambar berikut

      Silahkan anda kerjakan dengan telaten untuk semua bagian horizontal

       

    24. Silahkan tambahkan 1 buah layer lagi

      Layer àAdd Layer kemudian beri nama menjadi Vectical layer

      Silahkan anda locked Grass Layer dan Horizontal Layer, kemudian fokus ke Vertical Layer

    25. Silahkan anda pilih pada Land3 gambar yang dilingkari untuk membuat garis tepi yang vertical

    26. Kemudian susun pada tepi dari jalan atau tanah yang berupa horizontal seperti gambar berikut

      Silahkan anda kerjakan dengan telaten untuk semua bagian vertical

       

       

       

       

    27. Silahkan anda tambahkan 1 buah layer lagi bernama tree layer

      Layer àAdd Layer kemudian beri nama menjadi Tree Layer

      Silahkan anda locak Grass Layer, Horizontal Layer dan Vertical Layer kemudian fokuskan ke Tree Layer

    28. Tambahkan gambar dengan nama InqXPMT-MedievalTown-000-114.png, InqXPMT-MedievalTown-000-116.png kedalam map anda dan beri nama menjadi Tree1 dan Tree2.

      Atur agar tileHeight menjadi 128

      Untuk Tree1

      Untuk Tree2

       

       

       

       

       

       

       

      Sehingga Tab dengan nama Tree1 tampak seperti berikut

      Sehingga Tab dengan nama Tree2 tampak seperti berikut

       

    29. Sekarang silahkan anda pilih Paint
    30. Silahkan anda pilih Tree1 kemudian pilih dengan cara drag gambar ke 1 dan 2 dari kanan

    31. Kemudian tempatkan seperti gambar

    32. Silahkan anda pilih lagi dengan cara drag potongan gambar ke 3 dan 4 dari kanan

    33. Tempatkan seperti gambar berikut

    34. Silahkan anda pilih lagi gambar di Tree1 dengan cara drag potongan gambar ke 5 dan 6 dari kanan

    35. Tempatkan seperti gambar berikut

       

       

       

       

       

    36. Teruskan secara telaten sampai mirip seperti gambar berikut

    37. Tambahkan gambar dengan nama InqXPMT-MedievalTown-000-115.png kedalam map anda dan beri nama menjadi Tree3

      Atur agar tileHeight menjadi 96

    38. Maka anda akan mendapat tab dengan nama Tree3 seperti gambar berikut

    39. Silahkan anda gunakan untuk menggambar pohon agar hasilnya seperti gambar berikut

       

       

    40. Sekarang silahkan anda tambahkan tileset dengan mengambil gambar InqXPMT-MedievalTown-000-119.png dan InqXPMT-MedievalTown-000-124.png dengan nama Leaf1 dan Leaf2

      Leaf1

      Leaf2

       

       

       

       

       

       

       

       

       

       

       

       

       

       

    41. Maka anda akan mendapatkan 2 buah tab yaitu Leaf1 dan Leaf2

      Tab untuk Leaf1

      Tab untuk Leaf2

    42. Tambahkan 1 buah layer lagi dengan nama Leaf Layer

      Silahkan anda lock untuk Tree Layer, Vertical Layer, Horizontal Layer dan Grass Layer kemudian fokus ke Leaf Layer

    43. Silahkan anda buat sesuai selera anda untuk menempatkan daun pada pohon, salah satu contohnya seperti ini

    44. Maka hasilnya akan seperti ini

       

       

       

       

       

       

       

       

       

       

       

    45. Silahkan anda tambahkan blue camp dengan image InqXPMT-MedievalTown-000-146.png dan red camp dengan image InqXPMT-MedievalTown-000-147.png.

      Blue Camp

      Red Camp

    46. Maka pada Tile Palette ditemukan

      Blue Camp

      Red Camp

    47. Tambahkah 1 buah layer lagi dengan nama Building Layer

      Silahkan anda lock untuk Leaf Layer, Tree Layer, Vertical layer, Horizontal Layer dan Grass Layer, kemudian anda fokuskan pada Building Layer

    48. Silahkan anda buat susunan kemah seperti gambar berikut

    49. Silahkan anda ubah urutan layer menjadi seperti berikut

       

    50. Tambahkan 1 buah tileset kumpulan rumah, beri nama house, ambil dari gambar

      building1.png

       

       

       

       

       

    51. Maka akan muncul Tab house seperti gambar berikut

    52. Atur agar rumah susunannya seperti gambar berikut

    53. Selamat anda sudah berhasil sampai tahap ini, sip. Selanjutnya silahkan tambahkan 1 buah tileset untuk castle dengan mengambil gambar dari castle.png

      Maka anda akan mendapatkan gambar berikut di TileSet

       

       

       

       

       

       

       

       

       

       

       

       

    54. Hasil akhir dari peta anda dapat dilihat seperti ini


 

Categories: Java, Slick2D
  1. keykaka
    June 25, 2012 at 12:18 am

    mau tanya, file imagenya ada dimana ya? belum ketemu.
    makasih.

  2. yuiamy
    December 15, 2012 at 7:49 am

    kodongan e mana ya , trus gimana cara jalaninnya ? mohon pencerahan e ya

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: