Afief Yona Ramadhana

Ini lanjutan dari tutorial sebelumnya. Jadi, kalau ada yang baru membaca, ikuti tutorialnya dari http://code.afief.net/?p=104 🙂

Oke, di bagian kedua ini, kita akan membuat tampilan awal game, dan arena pada game. Pada bagian pertama kita sudah membuat project berisi file Main.as yang apabila dijalankan maka akan menghasilkan 1 error, yaitu “D:\x_periment\coba\MiniGame\src\Main.as(12): col: 20 Error: Access of undefined property Pembukaan.”

Error tersebut terjadi karena kita belum membuat class yang diisikan pada InitialState pada fungsi super(). Untuk membuatnya, klik kanan pada folder src pada Project Panel, pilih Add > New Class.

Akan muncul jendela New ActionScript Class. Pada kolom ‘Name’, masukkan nama class sesuai dengan yang ada pada fungsi super(), yaitu ‘Pembukaan’. Lalu klik OK. Maka di dalam folder src akan bertambah file ‘Pembukaan.as’.

File tersebut akan secara otomatis terbuka. Tambahkan ‘import org.flixel.*;‘ di atas ‘public class pembukaan’, lalu ubah ‘public class pembukaan’ menjadi ‘public class pembukaan extends FlxState. Sehingga baris-baris kode nya menjadi seperti di bawah ini.

package { import org.flixel.*; public class Pembukaan extends FlxState { public function Pembukaan() { } } }

1 2 3 4 5 6 7 8 9 10

package { import org.flixel.*; public class Pembukaan extends FlxState { public function Pembukaan() { } } }

Sekarang cobalah tekan F5, jika tidak ada error, maka akan tampil jendela flash kita yang berwarna hitam total.

‘FlxState‘ dalam baris kode tersebut berarti bahwa class yang kita buat merupakan bagian dari game yang kita buat. Di dalam FlxState, keberadaan konstruktor tidak terlalu penting, ada satu fungsi yang dapat digunakan untuk mengantikan konstruktor, dan kita akan coba untuk menggunakannya.

ubah ‘public function Pembukaan()‘ menjadi

override public function create():void

perintah ‘override’ digunakan untuk mengubah sebuah fungsi yang sudah dibuat pada ‘flxState’. Fungsi create bertipe ‘void’ yang berarti bahwa fungsi ini tidak mengembalikan nilai dan hanya berupa prosedur saja. Fungsi ini akan dijalankan setelah class di load.

Perbedaan dari konstruktor dengan fungsi create ini yaitu bahwa konstruktor akan dijalankan ketika class sedang di load, sedangkan fungsi create ini akan dijalankan ketika class sudah di load. Kedua fungsi ini bisa dimasukkan dalam satu class, dan konstruktor lah yang akan dijalankan pertama kali.

Selanjutnya kita akan membuat sebuah teks ke dalam pembukaan game kita dengan menggunakan FlxText. Pada fungsi create yang kita buat, masukkan baris kode berikut ini.

var teks:FlxText; teks = new FlxText(100, 100, 400, "UfoGelo"); teks.size = 80; add(teks); teks = new FlxText(175, 350, 400, "klik untuk mulai"); teks.size = 20; add(teks);

1 2 3 4 5 6 7 8

var teks:FlxText; teks = new FlxText(100, 100, 400, "UfoGelo"); teks.size = 80; add(teks);   teks = new FlxText(175, 350, 400, "klik untuk mulai"); teks.size = 20; add(teks);

Pada baris kode pertama, kita membuat variabel baru bernama teks dengan tipe ‘FlxText’. Lalu pada baris kedua

teks = new FlxText(100, 100, 400, "UfoGelo");

1	teks = new FlxText(100, 100, 400, "UfoGelo");

kita membuat teks yang baru dengan variabel teks yang telah kita buat sebelumnya. Angka 100 yang pertama menunjukkan posisi x (horisontal) dari teks yang kita buat, dan 100 selanjutnya menunjukkan posisi y (vertikal). Angka 400 menunjukkan panjang teks yang akan kita buat, atau ibaratnya merupakan panjang teks box nya. Lalu selanjutnya teks yang akan kita masukkan.

Pada baris selanjutnya

teks.size = 80;

1	teks.size = 80;

menunjukkan ukuran dari teks yang dibuat. Nilai ukuran ini hampir sama apabila kita mengatur ukuran huruf di aplikasi penglah kata.

Dan pada baris

add(teks);

1	add(teks);

kita memasukkan variabel teks yang telah kita atur ke dalam stage. Kita tahu bahwa pada Actionscript biasa, fungsi untuk memasukkan objek ke dalam stage adalah ‘addChild()’, sedangkan fungsi untuk memasukkan objek ke dalam stage game kita yang dibuat dengan flixel yaitu ‘add()’. Fungsi addChild akan error apabila digunakan pada game yang akan kita buat.

Namun kita bisa menggunakan ‘addChild’ untuk memasukkan objek-objek yang bertipe standar dari actionscript seperti Sprite, MovieClips, dll, dengan perintah

FlxG.stage.addChild(objek);

1	FlxG.stage.addChild(objek);

Pada baris-baris kode selanjutnya digunakan untuk membuat teks ‘klik untuk mulai’ dengan perintah-perintah yang sama dan dengan variabel yang sama pula.

Apabila dijalankan (F5), tampilan game yang akan kita buat menjadi seperti ini

Selanjutnya kita akan membuat state untuk arena dari game kita. Tambahkan class baru dengan cara yang sama seperti di atas, lalu beri nama Arena.

Buat baris-baris kode pada class Arena seperti baris-baris kode pada class Pembukaan.

package { import org.flixel.* public class Arena extends FlxState { override public function create():void { } } }

1 2 3 4 5 6 7 8 9 10

package { import org.flixel.* public class Arena extends FlxState { override public function create():void { } } }

Kemudian kita kembali lagi ke class Pembukaan. Pada class Pembukaan kita akan menambahkan perintah agar ketika di klik, maka game akan berpindah state dari Pembukaan ke Arena.

Sebelum menambahkan fungsi klik tersebut, kita tambahkan fungsi update sperti pada baris-baris kode berikut

override public function update():void { super.update(); }

1 2 3 4

override public function update():void {   super.update(); }

fungsi ‘super.update()’ pada baris ketiga di atas digunakan untuk mengupdate fungsi utama dari update tersebut. Karena seperti yang sudah dijelaskan, fungsi update yang telah kita buat itu sebenarnya merupakan fungsi turunan dari fungsi yang telah ada secara default dengan kita menggunakan perintah override.

Fungsi update ini akan dijalankan sebanyak framerate dari game yang kita buat setiap detiknya. Jadi apabila framerate game kiat 50, maka fungsi update akan dijalankan sebanyak 50 kali dalam 1 detiknya. wow 🙂

Diatas perintah ‘super.update()’ kita akan tambahkan baris-baris kode untuk mendeteksi apakah tombol mouse telah di klik atau tidak. Tambahkan baris-baris kode berikut

if (FlxG.mouse.justPressed()) { FlxG.switchState(new Arena); }

1 2 3

if (FlxG.mouse.justPressed()) { FlxG.switchState(new Arena); }

Nah, sekarang apabila dijalankan (tekan F5), kemudian di klik, maka tampilannya akan menjadi kosong, tampilan kosong itu sebenarnya adalah tampilan Arena yang belum kita berikan objek.

Nah, bagian kedua sampai disini dulu, tunggu bagian ketiga dari tutorial ini. see you.. 🙂

Oh, iya, untuk source code dari tutorial part1 dan part2 dapat di download di http://code.afief.net/repo/MiniGame.rar