| flash game tutorial and flare3d games

Latest Blog



07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

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


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