BIKIN GAMES

Cara Buat Game Flashnya

02 april 2011

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:

view source

print?

01	stop(); //supaya ngga jalan kemana2

02

03	var so_skor:SharedObject = SharedObject.getLocal("catatanSkor","/"); //untuk baca dan simpan data skor

04	var jmlTopSkorer:Number = 5; //jumlah top skorer yg ditampilkan

05	text_topSkorer.text = "" ; //tampilan skor di dynamic text

06

07	/*  ****************************************

08	pada SharedObject so_skor ada beberapa data yang disimpan yaitu:

09	- topSkor dari 1 sampai 6 (so_skor.data.topSkor1, so_skor.data.topSkor2, so_skor.data.topSkor3,...dst)

10	- namaTopSkorer dari 1 sampai 6 (sama seperti diatas, sebenarnya yg dipakai cuman 5 skor, yang ke-6 untuk temp aja <img src="http://s2.wp.com/wp-includes/images/smilies/icon_smile.gif?m=1221152276g" alt=":)" class="wp-smiley">

11	- input nama terakhir (supaya otomatis terisi ketika game over)

12	****************************************    */

13

14	if( so_skor.data.topSkor1 == undefined) //fungsi ini cuma dipakai pertama kali untuk reset skor

15

{

16	for(i=1; i<=jmlTopSkorer; i++){

17	so_skor.data["topSkor"+i]=1500/i;

18	so_skor.data["namaTopSkorer"+i]="Faisalman";

19

}

20

}

21

22	/**************************************************************

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

24	***************************************************************/

25

26	for (i = 1; i <= jmlTopSkorer; i++) {

27	text_topSkorer.text = text_topSkorer.text + "\\n" + eval("so_skor.data.namaTopSkorer"+i) + " " + eval("so_skor.data.topSkor"+i);

28

}

29

30	/*  ****************************************

31	// perintah ketika tombol main ditekan :

32	****************************************    */

33

34	btn_main.onPress = function(){

35	gotoAndStop("permainan");

36

}

37

38	/*  ****************************************

39	//perintah ketika tombol keluar ditekan :

40	****************************************    */

41

42	btn_keluar.onPress = function(){

43	fscommand("quit",true);

44

}

45

46	/*  **************************************************

47

48	//kalau mau ada tombol utk reset skor :

49

50	btn_reset.onPress = function(){

51	so_skor.clear();

52

}

53

54	******************************************************  */

#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’:

view source

print?

001	stop(); //supaya ngga jalan kemana2

002

003	var vLevel:Number = 0; //current level dari game (pertama kali level 0)

004	var vSkor:Number = 0; //jumlah skor

005	var vNyawa:Number = 5; //jumlah nyawa dari pinguin

006	var vJumlahLevel:Number = 8; //jumlah level dari game ini

007	var vSkorIkan:Number = 10; //skor kalau dapet ikan

008	var vSkorBom:Number = -25; //skor kalau kena bom

009	var vSkorMinUtkNaikStage:Number = 250; //setiap dapat 250 poin, naik ke level berikutnya

010

011	/*  *******************************************************************

012	// fungsi untuk menggerakkan pinguin dengan keyboard :

013	// (onEnterFrame menjadikan fungsi ini dipanggil sesuai jumlah fps)

014	******************************************************************* */

015

016	mc_tux.onEnterFrame = function() {

017	vtPosisiX = this._x;

018	vtPosisiY = this._y;

019

020	if (Key.isDown(Key.UP)){

021	this._y -= 15;

022

}

023	if (Key.isDown(Key.DOWN)){

024	this._y += 15;

025

}

026	if (Key.isDown(Key.LEFT)){

027	this._x -= 15;

028

}

029	if (Key.isDown(Key.RIGHT)){

030	this._x += 15;

031

}

032	if (this._x<0 || this._x > (Stage.width - this._width)){

033	this._x = vtPosisiX;

034

}

035	if (this._y<0 || this._y > (Stage.height - this._height)){

036	this._y = vtPosisiY;

037

}

038

}

039

040	/*  **************************************************************************

041	// fungsi-fungsi berikut inilah yang mengkolaborasikan semua objek disini :

042	// (karena bingung menempatkannya, jadi saya urutkan saja sesuai abjad)

043	**************************************************************************  */

044

045	//fungsi yg dipanggil pada saat game over

046	fGameOver = function() {

047	for (i = 1; i < (vJumlahLevel + 2); i++) {

048	removeMovieClip(eval("mc_ikan"+i));

049	removeMovieClip(eval("mc_bom"+i))

050	removeMovieClip(eval("mc_bom"+i+"meledak"));

051

}

052	gotoAndStop("gameover");

053

}

054

055	//ini untuk mendeteksi adanya tabrakan pinguin dengan ikan atau bom

056	fDeteksiKejadian = function(vtNamaBaru, vtPoin, vtBelumKena) {

057

058	/****************************************

059	fungsi dalam if ini hanya akan dijalankan

060	kalau ikan atau bom tsb menabrak pinguin

061	dan juga objek tsb harus visible :

062	*****************************************/

063

064	if(vtNamaBaru.hitTest(mc_tux) && vtNamaBaru.vtBelumKena) {

065	vSkor += vtPoin;

066

067	if(vSkor == (vSkorMinUtkNaikStage * vLevel)){

068	fNaikStage();

069	fTampilanLevel("Level "+vLevel);

070

} else {

071	fTampilanLevel("");

072

}

073

074	/************************

075	membuat efek ledakan :

076	************************/

077

078	if(vtPoin!=vSkorIkan){

079	vNyawa-=1;

080	duplicateMovieClip(mc_duarr,eval(vtNamaBaru+"meledak"),this.getNextHighestDepth());

081	setProperty(eval(vtNamaBaru+"meledak"),_x,getProperty(mc_tux,_x));

082	setProperty(eval(vtNamaBaru+"meledak"),_y,getProperty(mc_tux,_y));

083

} else {

084	removeMovieClip(eval(vtNamaBaru+"meledak"));

085

}

086

087	vtNamaBaru.vtBelumKena = false;

088	vtNamaBaru._visible = false;

089

}

090

}

091

092	//setiap kali pindah level, movieclip ikan dan bom akan diduplikasi

093	fKloning = function(vtNama_mc, vtBanyak, vtPoin) {

094	for (i=1; i<vtBanyak; i++) {

095	var vtNamaBaru:String = vtNama_mc+i;

096	duplicateMovieClip(vtNama_mc, vtNamaBaru, this.getNextHighestDepth());

097	setProperty(vtNamaBaru, _x, random(Stage.width));

098	setProperty(vtNamaBaru, _y, Stage.height);

099	fNaikTurun(vtNamaBaru,5+random(5*vLevel),vtPoin);

100

}

101	removeMovieClip(eval(vtNama_mc+(vtBanyak)));

102

}

103

104	//klo naik level...

105	fNaikStage = function() {

106	vLevel += 1;

107	fKloning("mc_ikan",(vJumlahLevel-vLevel),vSkorIkan);

108	fKloning("mc_bom",(vLevel+1),vSkorBom);

109

}

110

111	//fungsi untuk menggerakkan hujan ikan2 dan bom2

112	fNaikTurun = function(vtNamaBaru, vtKecepatan, vtPoin) {

113	var vtBelumKena:Boolean = true;

114	eval(vtNamaBaru).onEnterFrame = function(){

115	//fungsi ini dipanggil setiap enterFrame

116	if((vLevel > vJumlahLevel) || (vNyawa < 1)) {

117	fGameOver();

118

}

119	setProperty(this, _y, getProperty(this, _y) + vtKecepatan);

120	fDeteksiKejadian(eval(vtNamaBaru),vtPoin,vtBelumKena);

121

122	if (this._y > (Stage.height+60)) {

123	setProperty(this, _y, (random(Stage.height))-(Stage.height));

124	setProperty(this, _x, random(Stage.width));

125	this.vtBelumKena = true;

126	this._visible = true;

127

}

128

}

129

}

130

131	//untuk tampilan level di stage

132	fTampilanLevel = function(vtString) {

133	txt_level.text=vtString;

134

}

135

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

skrip untuk disimpan di frame ‘game over’:

view source

print?

01	stop(); //supaya ngga jalan kemana2

02

03	var vInputNamaTerakhir:String = so_skor.data.namaTerakhir;

04	var vJuaraKe:Number = 6;

05	var j:Number = jmlTopSkorer; // variabel jmlTopSkorer dideklarasi di frame 1

06

07	// fungsi ini dijalankan jika tombol OK ditekan :

08	btn_ok.onPress=function()

09

{

10	//bandingkan dengan skor hasil dg skor yg ada (untuk menentukan peringkat)

11	for(i=5; i>=1; i--)  {

12	if(vSkor > eval("so_skor.data.topSkor"+i)){

13	vJuaraKe = i

14

}

15

}

16

17	//fungsi while ini hanya dijalankan jika skor hasil lebih besar dari skor yg ada

18	while (vJuaraKe <= j) {

19	so_skor.data["topSkor"+j] = so_skor.data["topSkor"+(j-1)];

20	so_skor.data["namaTopSkorer"+j] = so_skor.data["namaTopSkorer"+(j-1)];

21

j-=1;

22

}

23	so_skor.data["topSkor"+vJuaraKe] = vSkor;

24	so_skor.data["namaTopSkorer"+vJuaraKe] = text_namaSkorer.text;

25

26	so_skor.data.namaTerakhir = text_namaSkorer.text; //simpan nama pemain

27	so_skor.flush(); //tulis data ke so_skor

28

}

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-