Menggerakkan Object dengan Keyboard

Input utama dari sebuah game antara lain adalah dari keyboard, mouse, joystick, dan accelerometer. Dengan menggunakan input tersebut kita dapat menggendalikan sebuah objek dalam game. Dalam tutorial ini objek yang dikendalikan dengan keyboard adalah movieclip board_1.

Dalam pemrograman AS3, untuk mendapatkan respon dari keyboard kita perlu menambahkan sebuah Keyboard Event. Ada beberapa method dari Keyboard Event, akan tetapi kita cukup menggunakan KeyboardEvent.KEY_DOWN untuk mendeteksi ketika tombol keyboard ditekan dan KeyboardEvent.KEY_UP untuk mendeteksi kode tombol yang dilepas. Untuk lebih jelasnya perhatikan contoh berikut.

1. Pada langkah sebelumnya kita telah membuat movieclip ball bergerak secara terus menerus. Akan tetapi pada tutorial tersebut movieclip ball masih menembus papan pemain maupun papan musuh, dan kita masih belum dapat mengendalikan papan pemain.


2. Untuk menggerakkan papan pemain atau board_1 ke kanan dan ke kiri, kita membutuhkan variabel is_left dan variabel is_right yang bertipe Boolean. Dengan menggunakan KeyboardEvent kita dapat mengatur kedua nilai variabel tersebut menjadi true ketika ditekan dan false ketika dilepas. Deklarasi penambahan KeyboardEvent dapat kita tambahkan pada fungsi setup() sebagai berikut :



		...
		private var is_left:Boolean = false;
		private var is_right:Boolean = false;
		...




		private function setup():void {
			.....
			game.addEventListener(Event.ENTER_FRAME, game_loop);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
			stage.addEventListener(KeyboardEvent.KEY_UP, myKeyUp);
		}



3. Selanjutnya kita perlu membuat fungsi myKeyDown() dan myKeyUp() sebagai berikut :



		private function myKeyDown(e:KeyboardEvent):void {
			if (e.keyCode == 39) is_right = true;				
			if (e.keyCode == 37) is_left = true;
		}
		
		private function myKeyUp(e:KeyboardEvent):void {
			if (e.keyCode == 39) is_right = false;				
			if (e.keyCode == 37) is_left = false;
		}

4. Setelah keyboard sudah terdeteksi dengan adanya kedua fungsi diatas, langkah selanjutnya adalah memodifikasi fungsi game_loop agar movieclip board_1 dapat bergerak sesuai dengan input keyboard, yaitu dengan menambahkan kode menjadi:

		private function game_loop(e:Event):void {
			if (!is_goal){
				ball.x += speed_x;
				ball.y += speed_y;
				if (ball.y<30 || ball.y>770) speed_y*=-1;
				if (ball.x<30 || ball.x>450) speed_x*=-1;	
				
				if (board_1.x < 400 && is_right) board_1.x += 10;
				if (board_1.x > 80 && is_left) board_1.x -= 10;
			}
		}

5. Jalankan (ujicoba) aplikasi dengan menekan Ctrl+Enter apabila anda tidak menemui kendala, maka anda akan dapat mengendalikan board_1 ke kanan dan ke kiri, meskipun demikian bola masih menembus papan karena belum kita tambahkan deteksi untuk tabrakan antara bola dan papan.

Secara keseluruhan kode pada Main.as sampai dengan tutorial ini adalah sebagai berikut :

package 
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	/**
	 * ...
	 * @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;
		
		private var speed_x:Number = 0;
		private var speed_y:Number = 0;
		private var is_goal:Boolean = false;
		
		private var is_left:Boolean = false;
		private var is_right:Boolean = false;
				
		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);
			
			speed_x = Math.random() * 3+2;
			speed_y = -20 + Math.random() * 10;
			
			game.addEventListener(Event.ENTER_FRAME, game_loop);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
			stage.addEventListener(KeyboardEvent.KEY_UP, myKeyUp);
		}
		
		private function game_loop(e:Event):void {
			if (!is_goal){
				ball.x += speed_x;
				ball.y += speed_y;
				if (ball.y<30 || ball.y>770) speed_y*=-1;
				if (ball.x<30 || ball.x>450) speed_x*=-1;	
				
				if (board_1.x < 400 && is_right) board_1.x += 10;
				if (board_1.x > 80 && is_left) board_1.x -= 10;
			}
		}
		
		private function myKeyDown(e:KeyboardEvent):void {
			if (e.keyCode == 39) is_right = true;				
			if (e.keyCode == 37) is_left = true;
		}
		
		private function myKeyUp(e:KeyboardEvent):void {
			if (e.keyCode == 39) is_right = false;				
			if (e.keyCode == 37) is_left = false;
		}
	}
	
}

Selanjutnya

Pada tahapan berikutnya kita akan menggerakkan mendeteksi tabrakan antara papan pemain dengan bola Mendeteksi tabrakan antar objek dalam game

Share ( Ayo Berbagi )

Leave me a comment

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