| flash game tutorial and flare3d games

Latest Blog



03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak

28.01.2017

E-Book Media Pembelajaran

E Book Gratis Membuat Media Pembelajaran Interaktif

15.12.2016

Membuat mouse trail

Membuat animasi ikan mengikuti kursor mouse

23.04.2016

Animasi Karakter Game RPG Flash

Membuat animasi karakter dalam game RPG Flash

23.04.2016

Aplikasi Peta Game RPG Flash

Mengaplikasikan Map Editor untuk peta game RPG Flash

23.04.2016

Membuat Peta Game RPG Flash

Membuat peta untuk game RPG Flash

23.04.2016

Mengerakkan Karakter Game RPG

Menambahkan karakter dalam game RPG Flash

23.04.2016

Membuat Game RPG

Membuat game RPG Flash actionscript 3 dengan teknik tiling

31.12.2015

Indonesia Soccer League

Sekilas tentang pengembangan game sepakbola dengan Flash

30.12.2015

Animasi tata surya

Tutorial membuat animasi tata surya dengan AS3 (Gerakan elips)


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Membuat Peta dalam Game RPG

Pendahuluan

Salah satu objek terpenting dalam game RPG adalah peta atau area permainan. Menurut pengalaman, bagi pemula membuat peta untuk game bertipe RPG merupakan kesulitan terbesar yang harus dilakukan jika ingin game yang dihasilkan dapat dikategorikan sebagai game RPG. Oleh sebab itu beberapa tool untuk mengembangkan game seperti RPG Maker, Game Maker, Construct, Unity dan sebagainya memiliki fitur level editor untuk membuat peta secara visual. Sayangnya flash tidak memiliki editor visual berbasis tile, sehingga banyak game flash bertipe RPG yang menggunakan teknik art base (menggerakkan gambar secara keseluruhan).

Dalam tutorial membuat game RPG yang saya tulis ini, digunakan teknik tiling, dimana gambar yang menyusun sebuah peta/area pemainan disusun dari potongan-potongan kecil yang diulang-ulang peletakkannya berdasarkan variabel bertipe Array. Pada tutorial sebelumnya dijelaskan bahwa metode ini bertujuan untuk menghemat memory sekaligus mengoptimalkan kecepatan game. Namun demikian menyusun peta cukup merepotkan karena penggunaan variabel bertipe array yang cukup kompleks.


var map:Array = [[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
		 [1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1],
		 [1,1,0,1,1,1,1,0,1,1,0,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,0,0,0,0,1,1,1,0,1,1,1,1,0,1,1],
		 [1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
		 [1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
		 [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];

Sebagai contoh dalam kode di atas, untuk membuat area 20 tile x 10 tile dibutuhkan kode yang cukup banyak dan rumit. Kode tersebut hanya untuk menentukan area yang dapat dilewati dan area yang tertutup, dan belum dilengkapi dengan jenis grafik yang akan dipakai dalam potongan tile. Pada tahun 2002 ketika belajar Flash, sebagai pemula saya membuat peta secara manual, menggunakan bantuan kertas grafik dan menuliskan kode satu demi satu (contoh kasus desain peta game Sim Taxi). Seiring dengan pengalaman dalam mengembangkan game, saya membuat editor level untuk mempermudah proses kerja saya.


tutorial membuat peta game RPG by wandah_w

Map Editor Berbasis Bitmap TileSet

Untuk mempermudah pembuatan level/peta/area untuk game berbasis tile, saya membuat sebuah editor visual berbasis tileset bitmap. Berbeda dengan 3 level editor yang saya buat di tahun-tahun sebelumnya yang menggunakan pengaturan file berdasarkan frame sebuah movieclip, editor ini saya buat berdasarkan teknik tileset. Artinya dalam membangun sebuah peta digunakan 1 buah file bitmap sebagai acuan. Pengunaan tileset sangat umum ditemui dalam pembuatan game RPG seperti dalam aplikasi RPG Maker. Secara default map editor yang saya buat memiliki tileset yang saya peroleh dari situs opengameart.org, yang selanjutnya dapat diatur sesuai dengan kebutuhan developer.


tutorial membuat peta game RPG by wandah_w

Map editor yang saya buat, masih dalam tahap pengembangan. Namun demikian aplikasi ini sudah dapat dipergunakan untuk membangun sebuah level permainan. Adapun fitur-fitur yang terdapat dalam aplikasi ini antara lain :

  1. Mendukung file tileset dengan ukuran 512x512 pixel (versi selanjutnya akan ditingkatkan)
  2. Mendukung 2 layer
  3. Mendukung bitmap dengan transparansi
  4. Pengkodean menggunakan array 2 Dimensi dengan format (0: tile type, 1:graphic layer 1, 2:graphic layer 2, 3:properties)
  5. save dan load dalam format text, sekaligus copy paste kode peta



Map Editor Interface


tutorial membuat peta game RPG by wandah_w

Untuk mengoperasikan aplikasi tersebut, ikuti langkah-langkah berikut:

  1. Buka aplikasi pada link berikut

  2. Secara default ukuran peta adalah 10x10 tile, masing-masing tile memiliki ukuran 32 pixel dan menggunakan tileset default

  3. Klik tombol New untuk memulai membuat peta

  4. tutorial membuat peta game RPG by wandah_w
  5. Untuk merubah Tileset klik tombol browse dan pilih tileset bertipe JPG/PNG dengan ukuran 512x512 pixel
  6. lalu klik tombol OK
    tutorial membuat peta game RPG by wandah_w
  7. Fitur editor peta yang pertama adalah mode Click dan mode brush. Pilih tile aktif, kemudian klik editor untuk menambahkan tile. Anda dapat menggerakkan area editor dengan tombol keyboard ASDW atau dengan Space+Drag

  8. tutorial membuat peta game RPG by wandah_w
  9. Secara default, layer aktif adalah Layer 1 yang merupakan layer dengan posisi di bawah. Mode Layer 1 ini efektif jika digunakan untuk menambahkan tile background seperti jalan, rumput, dan sebagainya

  10. tutorial membuat peta game RPG by wandah_w
  11. Sedangkan Layer 2 yang merupakan layer dengan posisi di atas efektif jika digunakan untuk menambahkan objek-objek dengan background transparan seperti batu, rumput, pintu, dan item-item lainnya

  12. tutorial membuat peta game RPG by wandah_w
  13. Setelah peta selesai dibuat / dalam proges, anda dapat menyimpannya dengan menekan tombol Save. Gunakan ekstensi file txt untuk mempermudah proses editing selanjutnya, misal berikan nama peta_1.txt. Pada versi awal, aplikasi ini belum memiliki fitur Undo, sehingga save akan cukup membantu

  14. tutorial membuat peta game RPG by wandah_w
  15. Secara default, ketika anda mengedit peta, anda sedang berada pada mode Edit All Layer, sehingga perubahan tidak hanya terjadi pada grafis saja, tetapi juga pada mode tile (walkable atau wall). Secara default tipe tile adalah walkable, namun demikian setelah anda selesai dengan proses editing grafis, anda dapat memilih tombol walk layer untuk melakukan editing mode tile

  16. tutorial membuat peta game RPG by wandah_w
  17. Klik Tile Mode : Wall, untuk membuat area yang tidak dapat diakses oleh karakter. Dengan mode walk layer anda dapat melakukan editing tanpa merubah grafis yang ada. tutorial membuat peta game RPG by wandah_w
  18. Klik tombol Trace Map, untuk menampilkan kode array yang dihasilkan oleh aplikasi. Anda juga dapat menekan tombol copy, untuk menyalin hasil output ke clipboard, yang selanjutnya akan dipakai dalam proses pemrograman game RPG selanjutnya. tutorial membuat peta game RPG by wandah_w

Selanjutnya


Tahapan selanjutnya adalah mengaplikasikan kode peta dalam game RPG Flash


Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon