Menambahkan Bitmap ke Stage dengan AS3

Pendahuluan

Proses pembuatan game akan lebih mudah dilakukan secara bertahap. Setiap anda menuliskan beberapa baris kode atau fungsi, akan lebih baik untuk dicoba terlebih dahulu agar segala bentuk kesalahan dapat terdeteksi sejak awal. Berdasarkan pengalaman, tahapan awal yang biasa dilakukan dalam proses pembuatan game adalah dengan menambahkan asset visual ke layar.

EMBED bitmap dan menambahkannya ke layar

Game yang akan kita buat akan lebih praktis jika semua asset dimasukkan menjadi satu ke dalam aplikasi. Hal tersebut diistilahkan dengan EMBED. Untuk mengembed asset visual yang telah kita buat sebelumnya, dan menambahkan asset visual tersebut ke layar, perhatikan langkah berikut :

1. Pada langkah sebelumnya kita membuka file Main.as pada panel Code Editor. Pada dasarnya Flash Develop telah menyusun class utama sesuai dengan jenis project yang kita buat, sehingga kita tinggal melanjutkan kode yang sudah ada. Pada baris ke 22 dimana terdapat kode >// entry point, disitulah kita nanti akan memulai penulisan fungsi utama.



2. Untuk memulai mengembed asset visual game, ekspansi folder bin dan akan anda dapati file-file asset visual yang telah anda copy sebelumnya (lihat langkah 6 tutorial sebelumnya).
   
   Agar file yang diembed dapat dikenali oleh kode, maka file tersebut nantinya harus diberikan identitas berupa variabel. Pada pemrograman AS3 deklarasi var dapat dilakukan didalam deklarasi class utama (secara sederhana dapat dijelaskan sebagai berikut : mulailah dari baris 12 untuk menuliskan variabel).
   
   Klik baris 12, kemudian klik kanan file arena.jpg pada folder bin kemudian pilih menu Generate Embed Code



3. Setelah kode embed muncul, selanjutnya pada panel code editor anda tekan Enter lalu anda definisikan nama variabel dari file tersebut dengan cara menuliskan kode baris 13 sbb :



		[Embed(source = "../bin/arena.jpg")]
		private var arena_bmp:Class;
		
		public function Main():void 



4. Dengan mendefinisikan file arena.jpg menjadi sebuah variabel arena_bmp bertipe Class, maka selanjutnya kita dapat "memanggilnya" dan menambahkannya ke layar.
5. Dalam membuat game 2D berdasarkan pengalaman saya, saya suka membuat sebuah container atau movieclip kosong, kemudian saya masukkan semua objek ke dalam container tersebut. Hal ini akan memudahkan saya untuk mengelola asset pada tahapan selanjutnya, seperti ketika mengatur ulang, atau menghapusnya dari layar.
   
   Untuk membuat container tersebut, saya membuat sebuah variabel baru bertipe Movieclip. Tuliskan kode berikut (sesuai dengan no baris nya)

		[Embed(source = "../bin/arena.jpg")]
		private var arena_bmp:Class;
		
		private var game:MovieClip;
		
		public function Main():void 

6. Selanjutnya kita akan membuat fungsi untuk menambahkan gambar arena ke layar, yaitu fungsi setup(). Kemudian fungsi setup() dipanggil saat aplikasi pertama kali berjalan, yaitu tepat dibawah baris : // entry point.
   
   Secara lengkap kode pada file Main.as sampai dengan tahapan ini adalah sebagai berikut :

package 
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author Wandah
	 */
	public class Main extends Sprite 
	{
		[Embed(source = "../bin/arena.jpg")]
		private var arena_bmp:Class;
		
		private var game:MovieClip;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			setup();
		}
		
		private function setup():void {
			game = new MovieClip();
			addChild(game);
			var arena:Bitmap = new arena_bmp();
			game.addChild(arena);
		}
	}
	
}

7. Jalankan (ujicoba) aplikasi dengan menekan Ctrl+Enter apabila anda tidak menemui kendala, maka gambar arena akan muncul dilayar. Hal ini dikarenakan gambar tersebut telah ditambahkan menggunakan kode addChild.
   
   Pada awalnya movieclip game dibuat dan ditambahkan ke layar, kemudian pada baris 35 file arena.jpg yang telah didefinisikan sebagai variabel arena_bmp ditambahkan ke dalam movieclip game
8. Untuk menambahkan board_1.png, lakukan cara yang sama, yaitu dengan meletakkan kursor di baris 16 (tepat dibawah deklarasi variabel file arena.jpg), kemudian klik kanan file board_1.png kemudian pilih Generate Embed Code.
   
   Definisikan nama variabel dari file tersebut sebagai board_1_bmp.
   
   Selanjutnya pada fungsi setup() tambahkan kode menjadi sebagai berikut:

		
package 
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author Wandah
	 */
	public class Main extends Sprite 
	{
		[Embed(source = "../bin/arena.jpg")]
		private var arena_bmp:Class;
		[Embed(source = "../bin/board_1.png")]
		private var board_1_bmp:Class;
		
		private var board_1:MovieClip;
		
		private var game:MovieClip;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			setup();
		}
		
		private function setup():void {
			game = new MovieClip();
			addChild(game);
			var arena:Bitmap = new arena_bmp();
			game.addChild(arena);
			
			board_1 = new MovieClip();
			var board_bmp:Bitmap = new board_1_bmp();
			board_bmp.x = -63;
			board_bmp.y = -11;
			board_1.addChild(board_bmp);
			board_1.x = 240;
			board_1.y = 650;
			game.addChild(board_1);
		}
	}
	
}		



9. Berbeda dengan arena.jpg yang merupakan background dan bersifat statis, board_1.png nantinya merupakan object yang dinamis atau dapat bergerak. Sehingga board_1.png perlu untuk dimasukkan ke dalam movieclip tersendiri yaitu movieclip board_1 (didefinisikan di baris ke 17 dan ditambahkan ke dalam movieclip game pada baris 42-49).
   
   Pengaturan posisi movieclip board_1 (baris 47-48) diatur berdasarkan sumbu kordinat layar (dimulai dari 0,0 atau pojok kiri atas layar)
10. Dengan cara yang sama, lakukan proses embed untuk board_2.png dan ball_bmp, sehingga keseluruhan kode menjadi sebagai berikut :



package 
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author Wandah
	 */
	public class Main extends Sprite 
	{
		[Embed(source = "../bin/arena.jpg")]
		private var arena_bmp:Class;
		[Embed(source = "../bin/board_1.png")]
		private var board_1_bmp:Class;
		[Embed(source = "../bin/board_2.png")]
		private var board_2_bmp:Class;
		[Embed(source = "../bin/ball_bmp.png")]
		private var ball_bmp:Class;
		
		private var board_1:MovieClip;
		private var board_2:MovieClip;
		private var ball:MovieClip;
		
		private var game:MovieClip;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			setup();
		}
		
		private function setup():void {
			game = new MovieClip();
			addChild(game);
			var arena:Bitmap = new arena_bmp();
			game.addChild(arena);
			
			board_1 = new MovieClip();
			var board_bmp:Bitmap = new board_1_bmp();
			board_bmp.x = -63;
			board_bmp.y = -11;
			board_1.addChild(board_bmp);
			board_1.x = 240;
			board_1.y = 650;
			game.addChild(board_1);
			
			board_2 = new MovieClip();
			board_bmp = new board_2_bmp();
			board_bmp.x = -63;
			board_bmp.y = -11;
			board_2.addChild(board_bmp);
			board_2.x = 240;
			board_2.y = 150;
			game.addChild(board_2);
			
			ball = new MovieClip();
			var ball_bitmap:Bitmap = new ball_bmp();
			ball_bitmap.x = -28;
			ball_bitmap.y = -28;
			ball.addChild(ball_bitmap);
			ball.x = 240;
			ball.y = 400;
			game.addChild(ball);
			
		}
	}
	
}



11. Jalankan (ujicoba) aplikasi dengan menekan Ctrl+Enter apabila anda tidak menemui kendala, maka gambar seluruh asset dan posisinya masing-masing akan muncul dilayar

Selanjutnya

Pada tahapan berikutnya kita akan menggerakkan objek dalam game Mengerakkan Objek Game

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon