Cara Buat Game Flashnya

01Okt07

Sudah pernah coba main game Tux yang makan-makanin biskuit? (klo belum tau baca dulu tulisan yang ini) Nah, karena gamenya sederhana ini mudah untuk dipelajari… dan karena Saya lagi baik maka Saya beritahu Anda yang penasaran, berikut ini langkah-langkah pembuatannya:

#1 Persiapan

Buat 3 buah layer untuk memudahkan pembuatan. layer 1 untuk diberikan label frame, layer 2 untuk diisi actionscript, layer 3 tempat kita nanti menyimpan movieclip dan sebagainya. Ingat baik-baik untuk menyimpan pada tempatnya (layer label untuk nyimpen label, klo nulis ActionScript di layer eksyenskrip, dan selain itu semua simpan aja di layer symbols). Sebenernya boleh aja sih disatuin semua di 1 layer… tapi fren, percayalah ini juga demi kerapihan program kita… untuk amannya, layer selain symbols dilock/hide aja.

Sementara itu untuk panjang framenya adalah bebas tapi untuk gampangnya kita buat saja jadi 3 yaitu frame awal untuk tampilan menu, frame berikutnya untuk permainan, dan berikutnya lagi untuk tampilan game over. Jangan lupa untuk tiap frame berikan label ‘menu’, ’permainan’, ‘gameover’ nanti pindah framenya tinggal gotoAndStop(“nama label”); Lihat gambar berikut…

Pada game ini untuk memudahkan dalam pengertian maka setiap Saya menulis actionscript di depan tiap objek Saya berikan id untuk mengenali objek apakah itu…

objek dengan awalan mc_ adalah movieclip

objek dengan awalan btn_ adalah tombol (button)

objek dengan awalan so_ adalah SharedObject

#2 Bagian Menu

Untuk tampilan menu awalnya buatlah judul game yang besar-besar…!!! buat juga tombol main dengan nama instance (lihat properties button) ‘btn_main’ (ini tombol untuk melanjutkan permainan) dan tombol keluar dengan nama instance ‘btn_keluar’ (ini tombol untuk keluar).

Kemudian buat juga sebuah dynamic text dengan nama var ‘topsekorer’ (ini disediakan untuk menampilkan top scorer). Adapun untuk bisa menyimpan dan membaca data skor pada flash di komputer kita, kita perlu menggunakan fasilitas SharedObject (baca artikel Saya sebelumnya). misalkan nanti kita simpan 2 buah data di SO tersebut yaitu namaSO.data.nama untuk menyimpan nama dan namaSO.data.skor untuk menyimpan skor.

Setelah semua itu selesai berikan actionscript di frame 1 sebagai berikut:

stop(); //supaya ngga jalan kemana2

var so_skor:SharedObject = SharedObject.getLocal("catatanSkor","/"); //untuk baca dan simpan data skor
var jmlTopSkorer:Number = 5; //jumlah top skorer yg ditampilkan
text_topSkorer.text = "" ; //tampilan skor di dynamic text

/*	****************************************
	pada SharedObject so_skor ada beberapa data yang disimpan yaitu:
	- topSkor dari 1 sampai 6 (so_skor.data.topSkor1, so_skor.data.topSkor2, so_skor.data.topSkor3,...dst)
	- namaTopSkorer dari 1 sampai 6 (sama seperti diatas, sebenarnya yg dipakai cuman 5 skor, yang ke-6 untuk temp aja 
	- input nama terakhir (supaya otomatis terisi ketika game over)
 	****************************************	*/

if( so_skor.data.topSkor1 == undefined) //fungsi ini cuma dipakai pertama kali untuk reset skor
{
	for(i=1; i<=jmlTopSkorer; i++){
		so_skor.data["topSkor"+i]=1500/i;
		so_skor.data["namaTopSkorer"+i]="Faisalman";
	}
}

	/**************************************************************
	// untuk menampilkan top skor di dynamic text yg ada di stage :
	***************************************************************/

for (i = 1; i <= jmlTopSkorer; i++) {
	text_topSkorer.text = text_topSkorer.text + "\\n" + eval("so_skor.data.namaTopSkorer"+i) + " " + eval("so_skor.data.topSkor"+i);
}

	/*	****************************************
		// perintah ketika tombol main ditekan :
		****************************************	*/

btn_main.onPress = function(){
	gotoAndStop("permainan");
	} 

	/*	****************************************
		//perintah ketika tombol keluar ditekan :
		****************************************	*/

btn_keluar.onPress = function(){
	fscommand("quit",true);
	}

/*	**************************************************

	//kalau mau ada tombol utk reset skor :

	btn_reset.onPress = function(){
		so_skor.clear();
	}		

******************************************************	*/

#3 Bagian Permainan

Sesudah selesai membuat menu awal selanjutnya kita buat bagian permainan, seperti yang kita tahu inilah sebenarnya inti dari program yang sedang kita buat. Baiklah langsung saja siapkan tokoh-tokohnya: Tux si pinguin, makanan favoritnya (tulang ikan), dan bom. Anda bisa buat sendiri atau pakai yang sudah Saya buat saja (hasil tracing) seperti di bawah ini…

Alasan mengapa gambarnya Saya jadikan vektor adalah supaya pada saat bermain nanti eksekusinya jauh lebih ringan dibanding jika memakai begitu saja gambar bitmap hasil import (tidak percaya silahkan coba sendiri bedanya). lihat saja hasil .swf-nya saudara-saudara… game ini besarnya hanya 8 kilobyte jika dimainkan langsung dengan flash (lihat di bawah).

.

.

By the way anyway busway (halah), jangan lupa masing-masing objek itu dijadikan movieclip (klik kanan objek > convert to symbol … atau klik objek menu>modify>convert to symbol) beri nama apapunlah misalkan pinguin, ikan, atau bom. kemudian beri nama instance (lihat properties movieclip) ‘mc_tux’ pada si pinguin, ‘mc_ikan_1’ pada si tulang ikan, dan ‘mc_bom_1’ pada bom.

Kemudian bagian terpenting dari yang penting di game ini adalah rangkaian actionscript berikut (ingat untuk menyimpannya di layer eksyenskrip)

.

.

.

.

.

.

.

.

jreng jreng jreng!!!

artikel ini belum selesai, bersambung ah… biar pada penasaran. insyaAllah nanti diterusin lagi nulisnya kalau ada waktu senggang, akhir-akhir ini masih sangat sibuk

===========================================

UPDATE 16 Oktober 2007

skrip untuk disimpan di frame ‘permainan’:

stop(); //supaya ngga jalan kemana2

var vLevel:Number = 0; //current level dari game (pertama kali level 0)
var vSkor:Number = 0; //jumlah skor
var vNyawa:Number = 5; //jumlah nyawa dari pinguin
var vJumlahLevel:Number = 8; //jumlah level dari game ini
var vSkorIkan:Number = 10; //skor kalau dapet ikan
var vSkorBom:Number = -25; //skor kalau kena bom
var vSkorMinUtkNaikStage:Number = 250; //setiap dapat 250 poin, naik ke level berikutnya

	/*	*******************************************************************
		// fungsi untuk menggerakkan pinguin dengan keyboard :
		// (onEnterFrame menjadikan fungsi ini dipanggil sesuai jumlah fps)
		*******************************************************************	*/

mc_tux.onEnterFrame = function() {
	vtPosisiX = this._x;
	vtPosisiY = this._y;

	if (Key.isDown(Key.UP)){
		this._y -= 15;
	}
	if (Key.isDown(Key.DOWN)){
		this._y += 15;
	}
	if (Key.isDown(Key.LEFT)){
		this._x -= 15;
	}
	if (Key.isDown(Key.RIGHT)){
		this._x += 15;
	}
	if (this._x<0 || this._x > (Stage.width - this._width)){
		this._x = vtPosisiX;
	}
	if (this._y<0 || this._y > (Stage.height - this._height)){
		this._y = vtPosisiY;
	}
}

	/*	**************************************************************************
		// fungsi-fungsi berikut inilah yang mengkolaborasikan semua objek disini :
		// (karena bingung menempatkannya, jadi saya urutkan saja sesuai abjad)
		**************************************************************************	*/

//fungsi yg dipanggil pada saat game over
fGameOver = function() {
	for (i = 1; i < (vJumlahLevel + 2); i++) {
		removeMovieClip(eval("mc_ikan"+i));
		removeMovieClip(eval("mc_bom"+i))
		removeMovieClip(eval("mc_bom"+i+"meledak"));
	}
	gotoAndStop("gameover");
}

//ini untuk mendeteksi adanya tabrakan pinguin dengan ikan atau bom
fDeteksiKejadian = function(vtNamaBaru, vtPoin, vtBelumKena) {	

		/****************************************
		 fungsi dalam if ini hanya akan dijalankan
		 kalau ikan atau bom tsb menabrak pinguin
		 dan juga objek tsb harus visible :
		*****************************************/

	if(vtNamaBaru.hitTest(mc_tux) && vtNamaBaru.vtBelumKena) {
		vSkor += vtPoin;					

		if(vSkor == (vSkorMinUtkNaikStage * vLevel)){
			fNaikStage();
			fTampilanLevel("Level "+vLevel);
		} else {
			fTampilanLevel("");
		}

			/************************
			 membuat efek ledakan :
			************************/

		if(vtPoin!=vSkorIkan){
			vNyawa-=1;
			duplicateMovieClip(mc_duarr,eval(vtNamaBaru+"meledak"),this.getNextHighestDepth());
			setProperty(eval(vtNamaBaru+"meledak"),_x,getProperty(mc_tux,_x));
			setProperty(eval(vtNamaBaru+"meledak"),_y,getProperty(mc_tux,_y));
		} else {
			removeMovieClip(eval(vtNamaBaru+"meledak"));
		}		

		vtNamaBaru.vtBelumKena = false;
		vtNamaBaru._visible = false;
	}
}

//setiap kali pindah level, movieclip ikan dan bom akan diduplikasi
fKloning = function(vtNama_mc, vtBanyak, vtPoin) {
	for (i=1; i<vtBanyak; i++) {
		var vtNamaBaru:String = vtNama_mc+i;
		duplicateMovieClip(vtNama_mc, vtNamaBaru, this.getNextHighestDepth());
		setProperty(vtNamaBaru, _x, random(Stage.width));
		setProperty(vtNamaBaru, _y, Stage.height);
		fNaikTurun(vtNamaBaru,5+random(5*vLevel),vtPoin);
	}
	removeMovieClip(eval(vtNama_mc+(vtBanyak)));
}

//klo naik level...
fNaikStage = function() {
	vLevel += 1;
	fKloning("mc_ikan",(vJumlahLevel-vLevel),vSkorIkan);
	fKloning("mc_bom",(vLevel+1),vSkorBom);
}

//fungsi untuk menggerakkan hujan ikan2 dan bom2
fNaikTurun = function(vtNamaBaru, vtKecepatan, vtPoin) {
	var vtBelumKena:Boolean = true;
	eval(vtNamaBaru).onEnterFrame = function(){
	//fungsi ini dipanggil setiap enterFrame
		if((vLevel > vJumlahLevel) || (vNyawa < 1)) {
			fGameOver();
		}
		setProperty(this, _y, getProperty(this, _y) + vtKecepatan);
		fDeteksiKejadian(eval(vtNamaBaru),vtPoin,vtBelumKena);	

		if (this._y > (Stage.height+60))	{
			setProperty(this, _y, (random(Stage.height))-(Stage.height));
			setProperty(this, _x, random(Stage.width));
			this.vtBelumKena = true;
			this._visible = true;
		}
	}
}

//untuk tampilan level di stage
fTampilanLevel = function(vtString) {
	txt_level.text=vtString;
}

fNaikStage(); //fungsi ini dipanggil sekali untuk naik ke level 1 (inisialisasi level = 0)

skrip untuk disimpan di frame ‘game over’:

stop(); //supaya ngga jalan kemana2

var vInputNamaTerakhir:String = so_skor.data.namaTerakhir;
var vJuaraKe:Number = 6;
var j:Number = jmlTopSkorer; // variabel jmlTopSkorer dideklarasi di frame 1 

// fungsi ini dijalankan jika tombol OK ditekan :
btn_ok.onPress=function()
{
	//bandingkan dengan skor hasil dg skor yg ada (untuk menentukan peringkat)
	for(i=5; i>=1; i--)	{
		if(vSkor > eval("so_skor.data.topSkor"+i)){
			vJuaraKe = i
		}
	}			

	//fungsi while ini hanya dijalankan jika skor hasil lebih besar dari skor yg ada
	while (vJuaraKe <= j) {
		so_skor.data["topSkor"+j] = so_skor.data["topSkor"+(j-1)];
		so_skor.data["namaTopSkorer"+j] = so_skor.data["namaTopSkorer"+(j-1)];
		j-=1;
	}
	so_skor.data["topSkor"+vJuaraKe] = vSkor;
	so_skor.data["namaTopSkorer"+vJuaraKe] = text_namaSkorer.text;

	so_skor.data.namaTerakhir = text_namaSkorer.text; //simpan nama pemain
	so_skor.flush(); //tulis data ke so_skor
}

Peringatan : ActionScript diatas hanya buatan Saya saja sehingga wajar klo terlihat berantakan dan belepotan , jadi silahkan perbaiki dan improvisasikan dengan kreasi sendiri… (klo script di wordpress ini beda dengan script di file .fla-nya, maka script di file .fla-nya yang benar karena paling akhir diupdate). Source .fla-nya sendiri ini bisa diunduh di http://tinyurl.com/F4154LMAN-game-cupu-source, untuk yang udah jadinya lihat di http://faisalman.wordpress.com/2007/08/02/ayo-buat-game-sendiri/

Filed under: ActionScript 2.0, Flash, Game, Template, Tutorial   |  49 Comments