| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

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


tutorial membuat game RPG by wandah_w

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.
tutorial membuat game RPG by wandah_w
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.
tutorial membuat game RPG by wandah_w

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.
tutorial membuat game RPG by wandah_w




Untuk memahami teknik tiling dengan menggunakan flash, perhatikan dan ikuti tutorial berikut

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.


    tutorial membuat game RPG by wandah_w

  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


    tutorial membuat game RPG by wandah_w

  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.


    tutorial membuat game RPG by wandah_w

  5. Klik frame 1, kemudian buka panel Action (tekan F9) dan ketikan kode berikut :
  6. 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);
    

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

Get Adobe Flash player

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