Afief Yona Ramadhana

Sampai di bagian ketiga tutorial membiat MiniFlashGame dengan Flixel. Kalau kalian baru membaca tutorial ini, maka sebaiknya membacanya dari bagian pertama, kemudian bagian kedua.

Dibagian ketiga ini kita akan membuat latar game dan pemain. Bersiaplah. Buka project yang telah dikerjakan pada bagian pertama dan bagian kedua.

Kita akan membuat latar game terlebih dahulu. Latar game yang akan kita gunakan berupa gambar statis. Siapkan gambar yang akan kita gunakan untuk latar. Atur ukurannya sehingga pas dengan ukuran game kita. Dalam hal ini game yang sedang kita buat berukuran 550×400 px. Format gambar bisa .jpg, atau bisa juga .png.

Gambar yang saya gunakan dalam membuat game ini

Apabila ingin menggunakan gambar latar seperti saya, bisa diunduh disini.

Masukkan file gambar kita ke dalam folder “src”.

Buka class Arena yang telah kita buat pada tutorial bagian sebelumnya. lalu tambahkan kode berikut di dalam class.

[Embed(source="bg.png")]private static var imgBg:Class;

Baris kode di atas berfungsi untuk memasukkan file “bg.png” yang merupakan file gambar latar ke dalam flash yang kita buat. Namun, file gambar tersebut tidak langsung ditayangkan sebagai background. File gambar tersebut akan disimpan dalam variabel yang bertipe Class.

Maka untuk meletakkannya sebagai background, kita perlu membuat variabel yang bertipe FlxSprite yang nantinya variabel itu akan memuat Class Gambar dan menampilkannya di stage. Masukkkan kedua baris berikut ke dalam fungsi “create” pada class Arena.

var _bg:FlxSprite = new FlxSprite(0, 0, imgBg);
add(_bg);

Sekarang apabila kita Test Project (F5) maka tampilan arena game kita menjadi berlatar gambar yang kita masukkan.

Sekarang kita akan membuat pemain. Sama seperti gambar latar, kita perlu menyiapkan gambar untuk pemain yang akan kita gunakan. Pemain di dalam game ini tidak berbentuk orang, melainkan berbentuk seperti meriam yang nantinya akan menembak setiap alien dari bawah.

Di dalam membuat gambar untuk keperluan game, kita benar-benar harus memperhatikan masalah ukuran dimensi game kita, agar nantinya gambar yang dimasukkan tidak terlalu besar atau kecil. Untuk pemain, saya menggunakan ukuran 48×48 px.

Pemain dalam game ini akan beranimasi ketika menembakkan peluru. Maka kita perlu membuat gambar sequence dimana dalam satu file gambar terdapat gambar yang berbeda-beda. File gambar yang saya gunakan yaitu

Di dalam file gambar saya tersebut, terdapat 4 buah gambar. Gambar tersebut terindeks mulai dari 0. Jadi, gambar pertama mempunyai indeks 0, kemudian kedua mempunyai indeks 1, dst.

Simpan gambar pemain ke dalam folder “src”.

Buat class baru pada project kita dengan nama “Pemain”. Maka di dalam folder “src” akan bertambah file “Pemain.as”.

Seperti pada class sebelumnya, kita akan mengimport library flixel dan meng’extends‘ class kita dengan tipe FlxSprite. Ketikkan baris-baris kode berikut ini kedalam class Pemain.as.

package
{
	import org.flixel.*;

	public class Pemain extends FlxSprite
	{
		[Embed(source = "pemain.png")]protected var imgPemain:Class;

		public function Pemain()
		{
			loadGraphic(imgPemain, true, false, 48, 48);
			addAnimation("nembak", [1, 2, 3, 0], 15,false);
			addAnimation("diam", [0]);
		}

		override public function update():void {
			angle = FlxU.getAngle(getMidpoint(_point), FlxG.mouse.getWorldPosition());
			super.update();
		}

	}

}

Saya akan menjelaskan setiap baris kode yang belum dijelaskan pada tutorial bagian sebelumnya.

loadGraphic(imgPemain, true, false, 48, 48);

fungsi ‘loadGraphic’ diatas digunakan untuk mengambil class gambar ‘imgPemain‘ dan menggunakannya sebagai gambar class Pemain. Parameter Animated bernilai true yang artinya bahwa gambar yang dimasukkan merupakan gambar sequence yang nantinya dapat dianimasikan. Sedangkan Reverse bernilai false yang berarti gambar ini tidak akan di flip atau dibalik.

Selanjutnya baris

addAnimation("nembak", [1, 2, 3, 0], 15,false);
addAnimation("diam", [0]);

untuk memberikan animasi pada class Pemain kita. Setiap gerakan mempunyai nama dan  framae yang akan di putar. Pada baris pertama, kita membuat animasi dengan nama “nembak” yang apabila di aktifkan maka pemain akan berganti gambar dari gambar indeks ke 1, 2, 3, lalu kembali ke 0 sehingga Pemain akan terlihat bergerak menembak.

Angka 15 tersebut merupakan nilai dari parameter framerate. Sedangkan false merupakan nilai untuk parameter Looped sehingga animasi tersebut tidak akan mengulang dari awal, melainkan berhenti pada indeks gambar ke-0.

Pada baris kedua, kita membuat animasi dengan nama “diam” yang berisi 1 frame, yaitu 0. Sehingga pemain tidak akan terlihat bergerak melainkan hanya diam karna gambar yang ditampilkan hanya gambar pada indeks ke-0.

Pada fungsi update terdapat baris

angle = FlxU.getAngle(getMidpoint(_point), FlxG.mouse.getWorldPosition());

yang berfungsi agar pemain berotasi mengikuti arah kemana mouse bergerak. Property angle berfungsi untuk mengatur rotasi sudut pada class Pemain yang kemudian property tersebut diisi dengan nilai dari sudut yang dihasilkan melalui fungsi FlxU.getAngle.

Fungsi FlxU.getAngle akan menghasilkan sudut dari 2 titik yang dimasukkan, yaitu titik tengah Pemain, dan titik posisi mouse.

Setelah membuat class Pemain, kita kembali ke class Arena. Buat sebuah variabel baru dengan tipe Pemain. Pendeklarasian variabel berada di dalam Class arena di atas fungsi create().

protected var _pemain:Pemain;

Lalu di dalam fungsi create, kita buat sebuah pemain baru dan meletakkannya ke dalam stage.

_pemain = new Pemain();
_pemain.x = FlxG.width / 2 - _pemain.width;
_pemain.y = FlxG.height - _pemain.height/2;
add(_pemain);

Nah, sekarang cobalah Test Project (F5). Maka pada tampilan arena, akan terdapat pemain yang berputar mengikuti arah mouse.

Sampai disini tutorial bagian ketiga. Pada tutorial bagian ke empat akan membuat pemain dapat menembakkan peluru. 🙂

Download Source Tutorial Bagian ketiga. (pada bagian ketiga, source hanya berupa file-file pada folder “src” tanpa library dari Flixel.