Membuat Game RPG dengan Flash Actionscript 3

Pendahuluan

Dalam berbagai forum, banyak sekali seorang pemula menanyakan cara membuat game RPG (Role Playing Game). Hal tersebut wajar dilakukan oleh pemula, karena game bertipe RPG merupakan salah satu genre yang menarik untuk dimainkan, dan sangat umum ditemui. Berkebalikan dengan hal tersebut, membuat game RPG jauh lebih sulit daripada membuat game jenis lain. Faktanya, aplikasi seperti RPG Maker mempermudah seseorang dalam membuat game RPG, namun demikian membuat game RPG dari 0 merupakan sesuatu yang cukup kompleks untuk dilakukan. Banyaknya permintaan untuk membuat game RPG dengan Flash Action Script 3, mendorong saya untuk membuat tutorial dasar tentang pembuatan game RPG. Adapun hasil akhir dari tutorial ini adalah sebagai berikut

Konsep Tiling Games

Dalam tutorial ini saya mengunakan teknik tiling, teknik yang sering digunakan dalam pembuatan game RPG. Sebelum memulai membuat game RPG, saya akan menjelaskan tentang konsep tiling games. Teknik tiling merupakan teknik pengulangan yang dilakukan dalam pembentukan level permainan, dapat dilakukan dengan metode Array dan bertujuan untuk menghemat penggunaan memory. Teknik tiling sudah dipergunakan sejak awal pengembangan game. Sebagai contoh pada game Super Mario (Copyright Nintendo 1985) dimana pada saat tersebut optimalisasi memory sangat dibutuhkan karena keterbatasan hardware, maka perlu dibuat sebuah metode dalam menampilkan gambar dan level. Dalam menghemat memory untuk grafis dan leveling, metode yang dilakukan adalah dengan mengulang grafik yang sama dan menyusun level berdasarkan sebuah data bertipe Array.

Pada gambar di atas, beberapa grafik diulang beberapa kali untuk menghasilkan sebuah level. Dengan cara ini akan diperoleh beberapa keuntungan antara lain :

1. ukuran file akan menjadi kecil
2. memory untuk pengolahan grafis menjadi lebih kecil (ringan)
3. pembuatan/penyusunan level dapat dilakukan dengan editor khusus

Dalam pembuatan game RPG, pada umumnya teknik tiling juga digunakan sehingga muncul istilah tile set. Pada aplikasi RPG maker misalnya, penyusunan arena dan peletakan karakter menggunakan teknik array dengan visual editor yang ditujukan untuk mempermudah penggunanya.


Dalam membuat game RPG dengan Flash, berdasarkan pengalaman saya, penggunaan teknik tiling sangatlah efektif. Sebagai contoh dalam game Ace Gangster baik versi 2D maupun versi 3D, penggembangan level dapat dengan mudah dilakukan. Selain itu ukuran file yang dihasilkan juga relatif kecil.

Mengenal Array dan teknik tiling

Untuk memulai proses pembuatan game RPG dengan Flash, perhatikan langkah-langkah sebagai berikut :

1. Buka aplikasi Adobe Flash CS3 ++ kemudian klik menu File>New, Pilih Actionscript 3.0 dan klik OK. Ubah FPS menjadi 30 untuk mendapatkan kecepatan game yang baik.
   
2. Dengan menggunakan Rectangle Tool buatlah sebuah kotak (outline saja) berukuran 32 x 32 pixel, kemudian seleksi kotak tersebut dan convert menjadi Movieclip dengan nama tiles, pastikan titik registrasi berada di pojok kiri atas dan pada mode advance, opsi Export for Actionscript tercentang. Lalu klik OK.
   
   • Ukuran 32x32 pixel merupakan ukuran standart untuk tileset (pada umumnya mengunakan ukuran berbasis 2x, misal 32x32, 64x64 dan seterusnya).
   • Opsi Export for Actionscript dimaksudkan untuk memberikan linkage pada symbol sehingga symbol tersebut dapat diakses oleh actionscript.
   
   
   
   
   
3. Doubleclick Movieclip tiles tersebut, untuk mengeditnya. Klik kanan frame 2, kemudian pilih Insert Keyframe. Selanjutnya ubah warna fill kotak tersebut menjadi warna solid. Kemudian keluar dari mode edit (tekan Ctrl+E) lalu hapus Movieclip tiles tersebut dari layar.
   
   • Perbedaan warna digunakan sebagai indikator antara area yang dapat diakses dan area yang tidak dapat diakses
   • Movieclip yang dihapus dari layar, masih dapat diakses dari panel Library
   
   
   
   
   
4. Selanjutnya, dengan menggunakan Oval Tool buatlah sebuah lingkaran berukuran lebih kecil dari 32 x 32 pixel, kemudian seleksi kotak tersebut dan convert menjadi Movieclip dengan nama char, pastikan titik registrasi berada di tengah dan pada mode advance, opsi Export for Actionscript tercentang. Lalu klik OK.
   
   
   
   
   
5. Klik frame 1, kemudian buka panel Action (tekan F9) dan ketikan kode berikut :
   

import flash.display.MovieClip;
import flash.events.Event;

var map:Array = [[1,1,1,1,1,1,1,1,1,1],
		 [1,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,1,0,0,0,1],
		 [1,0,0,0,0,1,0,0,0,1],
		 [1,1,0,1,1,1,1,0,1,1],
		 [1,0,0,0,0,0,0,0,0,1],
		 [1,0,0,0,0,0,0,0,0,1],
		 [1,0,0,0,1,0,0,0,0,1],
		 [1,0,0,0,1,0,0,0,0,1],
		 [1,1,1,1,1,1,1,1,1,1]];
			 
var game:MovieClip;
var peta:MovieClip;
var karakter:MovieClip;
var tile_w:Number = 32;
var karakter_w:Number = 20;
var karakter_h:Number = 20;
var karakter_speed:Number = 5;


function buat_level(level_map:Array, c_x:Number, c_y:Number):void{
	game = new MovieClip();
	addChild(game);
	peta = new MovieClip();
	game.addChild(peta);
	for (var i:Number = 0; i < level_map.length;i++){
		for (var j:Number = 0; j < level_map[0].length;j++){
			var tile_map:tiles = new tiles();
			tile_map.gotoAndStop(level_map[j][i]+1);
			tile_map.x = i*tile_w;
			tile_map.y = j*tile_w;
			peta.addChild(tile_map);
		}
	}	
	karakter = new char();
	karakter.x = c_x*tile_w+tile_w/2;
	karakter.y = c_y*tile_w+tile_w/2;
	game.addChild(karakter);
}

buat_level(map, 3, 7);



6. Jalankan aplikasi dengan menekan tombol Ctrl+Enter, dan akan dihasilkan output sebagai berikut :
   

Penjelasan Kode

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

Konsep tiling yang harus kita pahami pertama kali adalah penggunaan variabel bertipe Array 2 dimensi. Pada variabel map tersebut terdapat 2 nilai yaitu 0 yang merupakan area yang dapat diakses oleh karakter, atau disebut sebagai walkable area, dan 1 yang merupakan area yang tidak dapat diakses atau disebut sebagai wall atau unwalkable area.

function buat_level(level_map:Array, c_x:Number, c_y:Number):void{
	game = new MovieClip();
	addChild(game);
	peta = new MovieClip();
	game.addChild(peta);
	for (var i:Number = 0; i < level_map.length;i++){
		for (var j:Number = 0; j < level_map[0].length;j++){
			var tile_map:tiles = new tiles();
			tile_map.gotoAndStop(level_map[j][i]+1);
			tile_map.x = i*tile_w;
			tile_map.y = j*tile_w;
			peta.addChild(tile_map);
		}
	}

Untuk membangun peta atau level, digunakan operasi berulang for. Untuk mempermudah proses pengaturan dan penggeseran posisi peta, masing-masing elemen tile dimasukkan ke dalam movieclip peta. Dengan cara ini masing-masing elemen berada dalam satu movieclip, sehingga akses mudah dilakukan.

Selanjutnya

Tahapan selanjutnya adalah menggerakkan karakter dalam sistem tiling.

Share ( Ayo Berbagi )

Leave me a comment

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