RSS

FlashCS5[AS3]—Game Hom Pim Pa

25 Mar

Halo🙂

Postingan kali ini terinspirasi dari game Grand Chase yang dimainkan adik saya. Beberapa minggu yang lalu ada semacam event Hom Pim Pa di game itu di mana kalau kamu menang setelah beberapa langkah kamu bisa maju melawan bos berikutnya.

Game Hom Pim Pa di postingan ini memiliki 3 orang ‘musuh’ yang harus dikalahkan dengan cara hom pim pa sebanyak 5 kali pada setiap musuh. Saya membuat agar kalah atau seri tidak dihitung, sehingga player bisa mencoba terus sampai mendapatkan 5 kali kemenangan dan berganti musuh [atau dalam kasus musuh terakhir menyelesaikan permainan]

Software yang di gunakan :

Flash CS5 dan Flash Develop

AS [ActionScript] yang digunakan :

AS 3.0

Preview hasil jadi :

Prev1

Tampilan awal saat masuk ke dalam game Hom Pim Pa. Kumimaru yang ada di gambar itu adalah karakter original yang saya buat sendiri, rencananya dalam setiap game yang saya buat Kumimaru akan ada di dalamnya. Jadi Anda akan sering-sering melihat Kumimaru nantinya🙂 [saya akan berusaha agar postingan berikutnya tidak terlalu lama jeda waktunya🙂 ]

Prev2

Tampilan saat memilih salah satu pilihan yang ada [batu,gunting atau kertas]. Saat itu juga akan muncul pilihan apakah menang/kalah/seri tergantung dari apa yang dikeluarkan oleh lawan. Saya membuat agar button tidak bisa di klik saat dalam kondisi di atas, jadi nantinya pemain harus mengklik tulisan menang/kalah/seri untuk bermain kembali.

Prev3

Tampilan saat sudah menang 5 kali aka musuh pertama sudah dikalahkan. Akan muncul kotak pemberitahuan [sekaligus untuk memberi semangat kepada pemain-karena bahkan sebagai orang yang membuat ini saya juga cukup kesulitan menyelesaikannya, silakan Anda coba sendiri game ini apakah mudah/susah/biasa saja menurut Anda?] Kotak ini harus di klik supaya bisa menghilang dan pemain bisa meneruskan permainan

Prev4

Tampilan kalau sudah memang sepuluh kali. Penjelasan sama seperti di atas. Karena saya cuma membuat 3 musuh maka ‘C’ adalah musuh terakhir🙂

Prev5

Tampilan setelah musuh terakhir berhasil dikalahkan. Karena ini hanya game, jadi mungkin saja menyelamatkan dunia dengan hom pi pa🙂

Flash dari postingan ini bisa di lihat dan dimainkan di sini

  • Buat dokumen baru dengan memilih pilihan AS3

1

  • Pertama –tama atur ukuran stage menjadi 800×600 dan ubah bg menjadi warna hijau [atau warna lain yang Anda suka🙂 ]

2

  • Buat BG yang diinginkan, saya membuat 2 kotak dengan ukuran 300×300 kemudian membuat persegi panjang dengan ukuran  780×150 dengan tulisan A–>B–>C dan kemudian saya atur posisinya seperti di gambar. Text saya buat dengan menggunakan text Tool. Silakan tambahkan text kalau mau, kalau tidak juga tidak apa-apa. Sebelumnya perhatikan dulu gambar berikut ini :

3

Salah satu ciri utama AS3 adalah tidak ada apa-apa di frame, semua komponen disimpan di library dan akan dipanggil dengan code. Oleh sebab itu pertama-tama Anda harus membuat BG yang akan digunakan secara manual kemudian memisahkan BG tersebut sesuai dengan fungsinya [yang perlu diklik/yang ada interaksinya jadikan Button, BG yang tidak bergerak/tidak perlu diklik jadikan saja Movie Clip, seperti itu]. Gambar berikut adalah BG yang saya buat

4

Sekarang, kita pecah dulu gambar di atas sesuai dengan fungsinya. Batu, Gunting dan Kertas akan diklik oleh pemain maka kita jadikan mereka bertiga sebagai button.

5

Ubah kotak dengan tulisan Batu menjadi symbol Button dengan nama batu, centang pilihan Export for ActionScript –penting jangan sampai lupa atau button tidak akan bisa dipanggil dengan AS-, kemudian pilih OK.

6

Ubah kotak dengan tulisan Gunting menjadi symbol Button dengan nama gunting, centang pilihan Export for ActionScript –penting jangan sampai lupa atau button tidak akan bisa dipanggil dengan AS-, kemudian pilih OK.

7

Ubah kotak dengan tulisan Kertas menjadi symbol Button dengan nama kertas, centang pilihan Export for ActionScript –penting jangan sampai lupa atau button tidak akan bisa dipanggil dengan AS-, kemudian pilih OK.

  • Struktur game di postingan ini adalah nama musuh pada kotak di sebelah kanan akan berubah sesuai dengan urutan musuh yang kita lawan. Oleh sebab itu nama musuh [dalam hal ini A B C, kalau bisa gambar silakan pakai gambar musuh original Anda🙂 ] akan kita ubah menjadi Movie Clip dan gambar musuh yang kita lawan kita taruh semua di dalam frame MC tersebut. Silakan lihat gambar di bawah supaya lebih jelas

8

Pertama-tama ubah dulu gambar musuh pertama menjadi symbol Movie Clip dengan nama nama_musuh, jangan lupa centang pilihan Export for ActionScript. Kemudian double klik MC yang baru dibuat tersebut. Buat frame sebanyak jumlah musuh [dalam postingan ini 3] dan taruh gambar musuh tersebut sesuai dengan urutan kemunculan mereka [musuh pertama di frame 1, musuh kedua di frame 2 dan seterusnya].

9

Frame 1 berisi gambar  musuh pertama

10

Frame 2 berisi gambar  musuh kedua

11

Frame 3 berisi gambar  musuh ketiga

  1. Karena sisa BG tidak perlu diklik/tidak ada sesuatu yang khusus kita akan mengubah sisa BG ini menjadi sebuah Movie Clip dengan nama BG [yang bisa dipanggil dengan code di AS3 hanya symbol MC dan Button, oleh karena itu pilihan Graphic tidak akan pernah kita gunakan di AS3]. Sebelumnya, hapus dulu 3 buah button dan MC nama_musuh dari stage. PERHATIAN : harap menyimpan dulu koordinat [x y] 4 buah item tersebut sebelum dihapus, bisa saja ditulis dulu di kertas baru dihapus.

12

Ubah BG static di atas menjadi symbol Movie Clip dengan nama BG, jangan lupa centang pilihan Export for ActionScript

  • Hapus BG tersebut dari stage [jangan lupa menyimpan koordinat x y nya]
  • Selanjutnya kita akan membuat kotak berisi batu,gunting,kertas yang akan muncul saat pemain mengklik pilihan yang ada. Kotak ini adalah Movie Cip yang di dalamnya terdiri dari 3 frame sama seperti MC nama_musuh, alasan kenapa dibuat dalam bentuk Movie Clip bukan dalam 3 symbol terpisah seperti 3 button yang sudah ada supaya tidak banyak symbol di dalam library dan juga karena lebih praktis.

13

MC ini bernama suit dengan frame pertama berisi batu, frame ke 2 berisi gunting dan frame ke 3 berisi kertas. Jangan lupa untuk menghapus MC ini dari stage setelah selesai dibuat.

  • Selanjutnya kita akan membuat tulisan yang berisi menang,seri atau kalah. Sama seperti di atas, tulisan ini merupakan symbol MC dengan nama pengumuman yang terdiri atas 3 frame.

14

Frame 1 berisi tulisan kalah, frame 2 berisi tulisan menang dan frame 3 berisi tulisan seri

  • Supaya pemain tahu kalau musuh sudah berganti [karena mungkin pemain akan meng-klik dengan cepat tanpa menghitung menang atau kalah, sehingga kita perlu menambahkan fungsi ini] maka akan kita tampilkan suatu pemberitahuan setiap kali ganti musuh. Karena musuh ada 3, maka kita akan membuat 2 pemberitahuan dan sekaligus juga 1 pemberitahuan bahwa pemain sudah mengalahkan musuh terakhir.

15

Pemberitahuan saat musuh pertama sudah kalah [dari A–>B]. Symbol yang dibuat adalah MC dengan nama papan_satu

16

Pemberitahuan saat musuh pertama sudah kalah [dari B–>C]. Symbol yang dibuat adalah MC dengan nama papan_dua

17

Pemberitahuan saat musuh terakhir sudah kalah. Symbol yang dibuat adalah MC dengan nama Last

  • Semua symbol yang kita perlukan sudah selesai dibuat, sekarang klik tab Properties, isi class Definition dengan nama HomPimPa dan simpan fla dengan nama Hom Pim Pa.

18

Kanan : library berisi symbol-symbol yang sudah dibuat. Symbol 3 adalah gambar Kumimaru, karena saya import ke dalam Flash maka secara otomatis dibuat menjadi graphic oleh Flash🙂

  • Buka Flash Develop atau pilih menu File–> New–>ActionScript File. Ketikkan code dibawah ini :

19

  • Tenang saja, cuma 200 baris kok🙂
  • Bercanda, silakan copy-paste code dibawah ini, save dengan nama HomPimPa, pastikan posisi HomPimPa.as dan Hom Pim Pa.fla dalam satu tempat, kemudian tekan Ctrl+Enter.

package

{

import flash.display.MovieClip;

import flash.display.SimpleButton;

import flash.text.*;

import flash.events.*;

import flash.utils.Timer;

public class HomPimPa extends MovieClip

{

public var latar:BG = new BG();

public var player:suit = new suit();

public var enemy:suit = new suit();

public var buttonBatu:batu = new batu();

public var buttonGunting:gunting = new gunting();

public var buttonKertas:kertas = new kertas();

public var k:Number = new Number();

public var jumlahmenang:Number = new Number();

public var nilai:Number = new Number();

public var nama_lawan:nama_musuh = new nama_musuh();

public var kms:pengumuman = new pengumuman();

public var satu:papan_satu = new papan_satu();

public var dua:papan_dua = new papan_dua();

public function HomPimPa()

{

latar.x = 400.9;

latar.y = 305.2;

addChild(latar);

nama_lawan.x = 634.8;

nama_lawan.y = 167.3;

addChild(nama_lawan);

nama_lawan.gotoAndStop(1);

nilai = 0;

buttonBatu.x = 64.3

buttonBatu.y = 375.7;

addChild(buttonBatu);

buttonBatu.addEventListener(MouseEvent.CLICK, klikBatu);

buttonGunting.x = 167.9;

buttonGunting.y = 375.7;

addChild(buttonGunting);

buttonGunting.addEventListener(MouseEvent.CLICK, klikGunting);

buttonKertas.x = 272.9;

buttonKertas.y = 375.7;

addChild(buttonKertas);

buttonKertas.addEventListener(MouseEvent.CLICK, klikKertas);

}

public function klikBatu(event:MouseEvent)

{

nilai = 1;

showdown();

}

public function klikGunting(event:MouseEvent)

{

nilai = 2;

showdown();

}

public function klikKertas(event:MouseEvent)

{

nilai = 3;

showdown();

}

function randomRange(minNum:Number, maxNum:Number):Number

{

return (Math.floor(Math.random() * (maxNum – minNum + 1)) + minNum);

}

public function showdown()

{

player.x = 294.6;

player.y = 212.9;

addChild(player);

if(nilai == 1)

{

player.gotoAndStop(1);

}

else if(nilai == 2)

{

player.gotoAndStop(2);

}

else

{

player.gotoAndStop(3);

}

enemy.x = 503.6

enemy.y = 212.9

addChild(enemy);

k = randomRange(1, 3);

if (k == 1 )

{

enemy.gotoAndStop(1);

}

else if (k == 2)

{

enemy.gotoAndStop(2);

}

else

{

enemy.gotoAndStop(3);

}

CekKalahMenang(nilai, k);

}

public function TidakBisaDiklik()

{

buttonBatu.mouseEnabled = false;

buttonGunting.mouseEnabled = false;

buttonKertas.mouseEnabled = false;

}

public function CekKalahMenang(kamu:Number, lawan:Number)

{

TidakBisaDiklik();

kms.x = 400;

kms.y = 100;

addChild(kms);

kms.buttonMode = true;

if (kamu == lawan)

{

kms.gotoAndStop(3);

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

else

{

if (kamu == 1 && lawan == 2 || kamu == 2 && lawan == 3 || kamu == 3 && lawan == 1)

{

kms.gotoAndStop(2);

jumlahmenang++;

if (jumlahmenang < 5) { kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);}

if (jumlahmenang == 5) { nama_lawan.gotoAndStop(2);  kms.buttonMode = false; Musuh_Pertama(); }

if (jumlahmenang == 10) { nama_lawan.gotoAndStop(3); kms.buttonMode = false; Musuh_Kedua();}

if (jumlahmenang == 15) { LastBoss(); }

}

else

{

kms.gotoAndStop(1)

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

}

}

public function Musuh_Pertama()

{

TidakBisaDiklik();

satu.x = 400;

satu.y = 375;

addChild(satu);

satu.addEventListener(MouseEvent.CLICK, MMusuh_Pertama);

}

public function MMusuh_Pertama(event:MouseEvent)

{

removeChild(satu);

kms.buttonMode = true;

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

public function Musuh_Kedua()

{

TidakBisaDiklik();

dua.x = 400;

dua.y = 375;

addChild(dua);

dua.addEventListener(MouseEvent.CLICK, MMusuh_Kedua);

}

public function MMusuh_Kedua(event:MouseEvent)

{

removeChild(dua);

kms.buttonMode = true;

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

public function SupayaBisaMainLagi(event:MouseEvent)

{

nilai = 0;

removeChild(player);

removeChild(enemy);

removeChild(kms);

buttonBatu.mouseEnabled = true;

buttonGunting.mouseEnabled = true;

buttonKertas.mouseEnabled = true;

}

public function LastBoss()

{

var jago:Last = new Last();

jago.x = 400; jago.y = 375;

addChild(jago);

}

}

}

  • Semisal terjadi kesalahan silakan di cek ulang symbol-symbol yang ada pada fla, apakah nama tidak sama atau Properties yang belum dicentang.

Waktunya penjelasan code :

package

{

import flash.display.MovieClip;

import flash.display.SimpleButton;

import flash.text.*;

import flash.events.*;

import flash.utils.Timer;

Class-class yang dibutuhkan dalam game Hom Pim Pa

      public class HomPimPa extends MovieClip

{

Nama kelas yang kita buat, nama kelas harus sama dengan nama file savean

            public var latar:BG = new BG();

public var player:suit = new suit();

public var enemy:suit = new suit();

public var buttonBatu:batu = new batu();

public var buttonGunting:gunting = new gunting();

public var buttonKertas:kertas = new kertas();

public var k:Number = new Number();

public var jumlahmenang:Number = new Number();

public var nilai:Number = new Number();

public var nama_lawan:nama_musuh = new nama_musuh();

public var kms:pengumuman = new pengumuman();

public var satu:papan_satu = new papan_satu();

public var dua:papan_dua = new papan_dua();

Membuat variabel-variabel dari symbol-symbol di library Hom Pim Pa.fla yang akan digunakan. Contoh variabel latar dari class BG, variabel player dan enemy dari class suit dst. Variabel k, jumlah menang dan nilai adalah variabel dengan tipe Number.

            public function HomPimPa()

Konstruktor dari kelas HomPimpa (nama konstruktor selalu sama dengan nama class)

            {

latar.x = 400.9;

latar.y = 305.2;

addChild(latar);

Menentukan koordinat latar(BG) pada stage. Ini alasan saya meminta Anda untuk mencatat posisi x y symbol-symbol yang Anda buat sebelum menghapusnya dari stage. [Silakan ubah koordinat di code ini dengan koordinat yang sudah Anda catat J ] Mungkin cara ini terlihat merepotkan, tapi dengan mengatur posisi dan semacamnya melalui AS kita bisa memperkecil ukuran file Flash J Code addChild berfungsi untuk menambahkan latar ke dalam stage. Jangan pernah lupa menambahkan code ini atau item yang Anda inginkan tidak akan tampil di stage.

                  nama_lawan.x = 634.8;

nama_lawan.y = 167.3;

addChild(nama_lawan);

nama_lawan.gotoAndStop(1);

Sama seperti keterangan di atas, namun perhatikan code gotoAndStop. Code ini berfungsi untuk menghentikan nama_lawan sehingga yang akan tampil hanyalah huruf A dulu.

                  nilai = 0;

Mengisi variabel nilai dengan 0

                  buttonBatu.x = 64.3

buttonBatu.y = 375.7;

addChild(buttonBatu);

buttonBatu.addEventListener(MouseEvent.CLICK, klikBatu);

buttonGunting.x = 167.9;

buttonGunting.y = 375.7;

addChild(buttonGunting);

buttonGunting.addEventListener(MouseEvent.CLICK, klikGunting);

buttonKertas.x = 272.9;

buttonKertas.y = 375.7;

addChild(buttonKertas);

buttonKertas.addEventListener(MouseEvent.CLICK, klikKertas);

Mengatur koordinat 3 button Batu, Gunting dan Kertas kemudian menambahkan eventListener supaya ‘sesuatu’ terjadi saat button di klik. Setiap button memiliki fungsi yang berbeda dengan button lainnya. Bisa saja kita set sama fungsinya, itu semua tergantung dengan apa yang kita inginkan terjadi saat suatu button diklik.

            }

public function klikBatu(event:MouseEvent)

{

nilai = 1;

showdown();

}

public function klikGunting(event:MouseEvent)

{

nilai = 2;

showdown();

}

public function klikKertas(event:MouseEvent)

{

nilai = 3;

showdown();

}

Fungsi-fungsi di atas adalah fungsi yang terjadi saat salah satu dari 3 button yang ada di klik. Sekilas fungsi ini terlihat sama, yaitu mengisi nilai variabel nilai. Perbedaannya terlihat pada isi nilainya. Sekarang saya ingin Anda untuk mengingat kembali isi frame 1, 2 dan 3 pada symbol suit yang sudah dibuat. Nilai yang kita isikan ini menyesuaikan antara isi frame dengan button yang di klik. Jadi, frame dengan isi Kertas misalnya adalah frame nomor 3, maka saat button Kertas di klik nilai akan diisi dengan 3 dst.

            function randomRange(minNum:Number, maxNum:Number):Number

{

return (Math.floor(Math.random() * (maxNum – minNum + 1)) + minNum);

}

Fungsi untuk mencari nilai acak antara 2 bilangan tertentu yang diinputkan dengan menggunakan fungsi Math.random

            public function showdown()

{

player.x = 294.6;

player.y = 212.9;

addChild(player);

if(nilai == 1)

{

player.gotoAndStop(1);

}

else if(nilai == 2)

{

player.gotoAndStop(2);

}

else

{

player.gotoAndStop(3);

}

Menambahkan pilihan yang sudah dipilih pemain dengan koordinat tertentu. Fungsi if digunakan untuk menentukan frame nomor berapa dari symbol player (class suit) yang harus ditampilkan.

                  enemy.x = 503.6

enemy.y = 212.9

addChild(enemy);

k = randomRange(1, 3);

Mengisi nilai k dengan angka acak dari 1 sampai 3 (karena hanya ada 3 musuh, kalau nanti Anda menambah musuh sesuaikan di code ini🙂 )

                  if (k == 1 )

{

enemy.gotoAndStop(1);

}

else if (k == 2)

{

enemy.gotoAndStop(2);

}

else

{

enemy.gotoAndStop(3);

}

CekKalahMenang(nilai, k);

Menampilkan frame dari lawan sesuai dengan nomor acak yang terpilih. Kemudian dilakukan pengecekan kalah atau menang dengan memasukkan variabel nilai dan k ke dalam fungsi CekKalahMenang.

            }

public function TidakBisaDiklik()

{

buttonBatu.mouseEnabled = false;

buttonGunting.mouseEnabled = false;

buttonKertas.mouseEnabled = false;

}

Fungsi untuk membuat button tidak bisa diklik

public function CekKalahMenang(kamu:Number, lawan:Number)

{

TidakBisaDiklik();

kms.x = 400;

kms.y = 100;

addChild(kms);

kms.buttonMode = true;

if (kamu == lawan)

{

kms.gotoAndStop(3);

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

else

{

if (kamu == 1 && lawan == 2 || kamu == 2 && lawan == 3 || kamu == 3 && lawan == 1)

{

kms.gotoAndStop(2);

jumlahmenang++;

if (jumlahmenang < 5) { kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);}

if (jumlahmenang == 5) { nama_lawan.gotoAndStop(2);  kms.buttonMode = false; Musuh_Pertama(); }

if (jumlahmenang == 10) { nama_lawan.gotoAndStop(3); kms.buttonMode = false; Musuh_Kedua();}

if (jumlahmenang == 15) { LastBoss(); }

}

else

{

kms.gotoAndStop(1)

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

}

}

Membuat button tidak bisa diklik kemudian menampilkan tulisan apakah sesuai dengan kondisi menang, kalah atau seri. Sebagai contoh kondisi dimana kamu==lawan berarti yang dikeluarkan sama maka kondisinya adalah seri. Jumlah menang hanya ditambah nilainya dalam kondisi kita menang, setiap kali menang dengan kelipatan 5 (karena syaratnya 5 kali menang) akan terjadi kondisi tertentu sesuai dengan jumlah menangnya. Sebagai contoh fungsi di bawah adalah

            public function Musuh_Pertama()

{

TidakBisaDiklik();

satu.x = 400;

satu.y = 375;

addChild(satu);

satu.addEventListener(MouseEvent.CLICK, MMusuh_Pertama);

}

public function MMusuh_Pertama(event:MouseEvent)

{

removeChild(satu);

kms.buttonMode = true;

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

fungsi yang akan dipanggil saat kita mengalahkan musuh pertama dan menampilkan tulisan pengumuman bahwa musuh pertama sudah kalah yang akan hilang saat kita klik.

            public function Musuh_Kedua()

{

TidakBisaDiklik();

dua.x = 400;

dua.y = 375;

addChild(dua);

dua.addEventListener(MouseEvent.CLICK, MMusuh_Kedua);

}

public function MMusuh_Kedua(event:MouseEvent)

{

removeChild(dua);

kms.buttonMode = true;

kms.addEventListener(MouseEvent.CLICK, SupayaBisaMainLagi);

}

fungsi yang akan dipanggil saat kita mengalahkan musuh kedua dan menampilkan tulisan pengumuman bahwa musuh kedua sudah kalah yang akan hilang saat kita klik.

            public function SupayaBisaMainLagi(event:MouseEvent)

{

nilai = 0;

removeChild(player);

removeChild(enemy);

removeChild(kms);

buttonBatu.mouseEnabled = true;

buttonGunting.mouseEnabled = true;

buttonKertas.mouseEnabled = true;

}

Membuat supaya button bisa diklik kembali dan mereset nilai ke 0, serta menghilangkan tampilan permainan sebelumnya

            public function LastBoss()

{

var jago:Last = new Last();

jago.x = 400; jago.y = 375;

addChild(jago);

}

}

}

Menampilkan tulisan saat semua musuh sudah kalah.

Fla dari postingan ini bisa di dl di

FLASHCS5

Terima kasih sudah mampir dan membaca blog saya ^_^

 
Tinggalkan komentar

Ditulis oleh pada Maret 25, 2013 in Flash

 

Tag: , , , ,

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: