Membangun Permainan Breakout yang Luar Biasa di Flash

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Di Tutorial Premium ini, kita akan membuat permainan Breakout; "Brick Breaker" dari awal menggunakan Flash dan AS3.

Langkah 1: Ringkasan Singkat

Menggunakan alat gambar Flash kita akan membuat antarmuka grafis yang terlihat bagus yang akan didukung oleh beberapa kelas ActionScript 3.

Pengguna akan dapat bermain melalui serangkaian level, Anda dapat dengan mudah menambahkan sebanyak mungkin level yang Anda inginkan!

Langkah 2: Pengaturan Dokumen Flash

Buka Flash dan buat dokumen lebar 320 piksel, tinggi 480 piksel. Setel Frame rate ke 24fps.

Langkah 3: Antarmuka

Antarmuka yang berwarna-warni dan tampak bagus akan ditampilkan. Ini akan berisi beberapa bentuk, tombol, bitmap, dan banyak lagi.

Mari langsung masuk ke pembuatan GUI ini.

Langkah 4: Layar Utama

Ini adalah Layar Utama atau tampilan, ini akan menjadi gambar pertama yang muncul di permainan kita.

Langkah 5: Latar Belakang

Buat persegi panjang 320x480 dan isi dengan gradien radial ini: #3A9826, #102A07.

Kita akan memberikan sedikit lebih detail dengan menambahkan filter Photoshop, jika Anda tidak memiliki Photoshop Anda dapat mencoba untuk menambahkan efek yang bagus menggunakan Flash Tools.

Buka gambar di Photoshop dan pergi ke Filters > Texture > Patchwork, gunakan pengaturan berikut:

Anda akan berakhir dengan sesuatu seperti ini:

Latar belakang ini akan berada di panggung serta indikator tongkat, bola dan teks. Konversikan latar belakang ke MovieClip dan beri nama bg.

Langkah 6: Judul

Pilih Text Tool (T), pilih font yang cocok dan tulis judul permainan Anda. Saya menggunakan format ini: Akashi, 55pt, #FFCC33.

Pilih TextField dan gunakan panel Filter untuk menambahkan Drop Shadow:

Duplicate teks (Cmd + D) dan gerakkan 3px ke atas untuk memberikan beberapa emboss.

Konversikan grafis ke MovieClip dan beri nama MenuScreen, ingat untuk menandai kotak Export for ActionScript. Anda dapat menghapus ini dari panggung ketika selesai, karena akan dipanggil menggunakan AS3.

Langkah 7: Tongkat

Gunakan Rectangle Primitive Tool (R) untuk membuat persegi panjang bulat 57x11.5px, ubah radius sudut menjadi 10 dan gunakan gradien ini: #4E4E4E, #BABABA, #B0B3BA.

Tambahkan beberapa garis detail dengan Rectangle Tool, gunakan gaya Anda sendiri!

Anda juga dapat menambahkan beberapa warna ke tongkat Anda, inilah hasil akhir saya, warna yang digunakan adalah: #CC0000.

Konversikan grafis ke MovieClip dan beri nama paddle.

Langkah 8: Bola

Untuk membuat bola, pilih Oval Tool (O) dan gunakan untuk membuat lingkaran 12x12px, #CCCCCC.

Duplicate lingkaran (Cmd + D) ubah ukurannya menjadi 10x10px dan isi dengan gradien radial ini: #95D4FF, #0099FF.

Terakhir, potong lingkaran kedua menjadi dua dan gunakan Selection Tool (V) untuk membuat kurva di bagian bawah. Ubah warnanya menjadi gradien linier putih dengan alfa 60, 10.

Konversikan grafis ke MovieClip dan beri nama ball.

Langkah 9: Bata

Bata kita akan sangat sederhana.

Gunakan alat Rectangle untuk membuat persegi panjang 38x18px dan menerapkan gradien berikutnya: #CC0000, #8E0000, #FF5656.

Konversi persegi panjang ke MovieClip dan menerapkan filter shadow yang digunakan dalam teks judul untuk memberikan tampilan yang lebih bagus.

Konversikan kembali grafis ke MovieClip dan beri nama Brick, ingat untuk menandai kotak Export for ActionScript.

Langkah 10: Layar About

Layar About akan menunjukkan kredit, tahun dan hak cipta dari permainan.

Ini akan sangat mudah karena Anda sudah memiliki semua elemen yang di di dalamnya.

Konversikan grafis ke MovieClip dan beri nama AboutScreen, ingat untuk menandai kotak Export for ActionScript.

Langkah 11: Layar Permainan

Ini adalah layar permainan, itu akan berada di panggung dari awal dan itu akan berisi indikator tongkat, bola, latar belakang dan teks. (Kita akan menambahkan batu bata menggunakan kode.)

Nama instance cukup mudah dan cukup jelas: paddle, ball, bg, scoreTF, livesTF, dan levelTF.

Langkah 12: Menyematkan Font

Untuk menggunakan font kustom secara dinamis, kita perlu menyematkannya dalam aplikasi.

Pilih dynamic textfield dan klik tombol Embed... di Properties Panel.

Pilih/tambahkan semua karakter yang diperlukan dan klik OK.

Langkah 13: Layar Alert

Layar ini akan muncul ketika permainan telah diputuskan; apakah Anda menang, kalah atau Anda mencapai game over (memenangkan semua level atau kehilangan semua nyawa).

Dua Dynamic TextFields digunakan dalam tampilan ini, mereka akan menampilkan status permainan saat ini ditambah pesan singkat. TextFields bernama titleTF dan msgTF.

Konversikan grafis ke MovieClip dan tandai kotak Export for ActionScript, setel nama kelas ke AlertScreen.

Ini mengakhiri bagian grafis, biarkan ActionScript dimulai!

Langkah 14: Tween Nano

Kita akan menggunakan mesin tween yang berbeda dari default yang disertakan dalam flash, ini akan meningkatkan kinerja dan lebih mudah digunakan.

Anda dapat mengunduh Tween Nano dari situs resminya.

Langkah 15: Kelas ActionScript Baru

Buat kelas ActionScript 3.0 baru (Cmd + N) dan simpan sebagai Main.as di folder kelas Anda.

Langkah 16: Struktur Kelas

Buat struktur kelas dasar Anda untuk memulai menulis kode Anda.

 
package  
{ 
  import flash.display.Sprite; 
	 
	public class Main extends Sprite 
	{ 
		public function Main():void 
		{ 
			// constructor code 
		} 
	} 
}

Langkah 17: Kelas yang Diperlukan

Ini adalah kelas yang perlu kita impor agar kelas kita berfungsi, direktif import membuat kelas dan paket yang ditentukan secara eksternal tersedia untuk kode Anda.

 
import flash.display.Sprite; 
import flash.ui.Mouse; 
import flash.events.MouseEvent; 
import flash.events.KeyboardEvent; 
import flash.events.Event; 
import com.greensock.TweenNano; 
import com.greensock.easing.Circ;

Langkah 18: Variabel dan Konstanta

Ini adalah variabel dan konstanta yang akan kita gunakan, baca komentar di kode untuk menemukan lebih banyak tentang mereka.

 
private const BRICK_W:int = 39; //brick's width 
private const BRICK_H:int = 19; //brick's height 
private const OFFSET:int = 6; //An offset used to center the bricks 
private const W_LEN:int = 8; //the length of the levels, only 8 horizontal bricks should be created on stage 
private const SCORE_CONST:int = 100; //the amount to add to the score when a brick is hit 
private var bricks:Vector.<Sprite> = new Vector.<Sprite>(); //stores all the bricks 
private var xSpeed:int = 5;  
private var ySpeed:int = -5; 
private var xDir:int = 1; //x direction 
private var yDir:int = 1; 
private var gameEvent:String = ''; //stores events like win, lose, gameover 
private var currentLevel:int = 0; 
private var menuScreen:MenuScreen; //an instance of the menu screen 
private var aboutScreen:AboutScreen; 
private var alertScreen:AlertScreen; 
private var lives:int = 3; 
private var levels:Array = []; //stores the levels

Langkah 19: Tingkatan

Semua level kita akan disimpan dalam array multidimensional.

Ini adalah array yang mengandung array; Anda dapat menuliskannya dalam satu baris, tetapi jika Anda menyelaraskannya, Anda benar-benar dapat melihat bentuk yang akan diambil oleh tingkatan tersebut.

 
private const LEVEL_1:Array = [[0,0,0,0,0,0,0,0], 
                               [0,0,0,0,0,0,0,0], 
                               [0,0,0,1,1,0,0,0], 
                               [0,0,0,1,1,0,0,0], 
                               [0,1,1,1,1,1,1,0], 
                               [0,1,1,1,1,1,1,0], 
                               [0,0,0,1,1,0,0,0], 
                               [0,0,0,1,1,0,0,0], 
                               [0,0,0,0,0,0,0,0],]; //this forms a + sign! 
		 
private const LEVEL_2:Array = [[0,0,0,0,0,0,0,0], 
                               [0,0,0,1,1,0,0,0], 
                               [0,0,1,0,0,1,0,0], 
                               [0,0,0,0,0,1,0,0], 
                               [0,0,0,0,1,0,0,0], 
                               [0,0,0,1,0,0,0,0], 
                               [0,0,1,0,0,0,0,0], 
                               [0,0,1,1,1,1,0,0],]; //this forms a number 2!

Dalam tingkatan ini, 1s mewakili ruang di panggung di mana batu bata akan ditempatkan, dan 0s hanya ruang kosong. Tingkatan ini nantinya akan dibaca oleh fungsi yang akan menempatkan batu bata di atas panggung. Anda dapat menambahkan sebanyak mungkin level yang Anda inginkan menggunakan kelas ini!

Langkah 20: Kode Constructor

Constructor adalah fungsi yang berjalan ketika sebuah objek dibuat dari kelas; kode ini adalah yang pertama kali dieksekusi ketika Anda membuat sebuah instance dari suatu objek (atau berjalan ketika pemuatan permainan, dalam kasus kelas dokumen).

Ini memanggil fungsi yang diperlukan untuk memulai permainan. Periksa fungsi-fungsi ini dalam langkah-langkah berikut.

 
public final function Main():void 
{ 
	/* Add Levels */ 
			 
	levels.push(LEVEL_1, LEVEL_2); //we add the levels to the array in order to know how many they are 
			 
	/* Menu Screen, Buttons Listeners */ 
 
	menuScreen = new MenuScreen(); 
	addChild(menuScreen); 
			 
	menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); 
	menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); 
}

Langkah 21: Tampilan Animasi Layar Menu & About

Baris berikutnya menangani tombol Menu Screen dan tween tampilan Menu atau About tergantung pada tombol yang ditekan.

 
private final function tweenMS(e:MouseEvent):void 
{ 
	if(e.target.name == 'startB') //if start button is clicked 
	{ 
		TweenNano.to(menuScreen, 0.3, {y: -menuScreen.height, ease: Circ, onComplete: init}); //tween menu screen 
	} 
	else //if about button is clicked 
	{ 
		aboutScreen = new AboutScreen();//add about screen 
		addChild(aboutScreen); 
			 
		TweenNano.from(aboutScreen, 0.3, {x: stage.stageWidth, ease: Circ}); //tween about screen 
			 
		aboutScreen.addEventListener(MouseEvent.MOUSE_UP, hideAbout); //add a mouse listener to remove it 
	} 
} 
 
/* Removes About view */ 
 
private final function hideAbout(e:MouseEvent):void 
{ 
	TweenNano.to(aboutScreen, 0.3, {x:stage.stageWidth, ease:Circ, onComplete:function rmv():void{ 
	    aboutScreen.removeEventListener(MouseEvent.MOUSE_UP, hideAbout); 
		removeChild(aboutScreen); 
	}}); 
}

Langkah 22: Fungsi Init

Fungsi ini melakukan operasi yang diperlukan untuk memulai permainan, bacalah komentar di kode untuk mengetahui lebih banyak tentangnya.

 
private final function init():void 
{ 
	/* Destroy Menu Screen */ 
			 
	menuScreen.startB.removeEventListener(MouseEvent.MOUSE_UP, tweenMS); 
	menuScreen.aboutB.removeEventListener(MouseEvent.MOUSE_UP, tweenMS); 
	removeChild(menuScreen); 
	menuScreen = null; 
			 
	/* Hide Cursor */ 
			 
	Mouse.hide(); 
			 
	/* Build Level Bricks */ 
			 
	buildLevel(LEVEL_1); 
			 
	/* Start Listener */ 
			 
	bg.addEventListener(MouseEvent.MOUSE_UP, startGame); 
}

Langkah 23: Memindahkan Tongkat

Tongkat akan dikendalikan oleh Mouse, itu akan mengikuti posisi x mouse.

 
private final function movePaddle(e:MouseEvent):void 
{ 
	/* Follow Mouse */ 
			 
	paddle.x = mouseX; 
}

Langkah 24: Tabrakan Perbatasan Tongkat

Untuk menghentikan tongkat agar tidak meninggalkan panggung, kita membuat batas tak terlihat di sisi layar.

 
{ 
	/* Follow Mouse */ 
			 
	paddle.x = mouseX; 
			 
	/* Borders */ 
			 
	if((paddle.x - paddle.width / 2) < 0) 
	{ 
		paddle.x = paddle.width / 2; 
	} 
	else if((paddle.x + paddle.width / 2) > stage.stageWidth) 
	{ 
		paddle.x = stage.stageWidth - paddle.width / 2; 
	} 
}

Langkah 25: Membangun Fungsi Tingkatan

Tingkatan akan dibangun oleh fungsi ini.

Ia menggunakan parameter untuk mendapatkan tingkatan untuk membangun, menghitung ukurannya dan menjalankan perulangan for bersarang, dengan satu perulangan untuk tinggi dan satu untuk lebar. Selanjutnya, ia menciptakan instance Brick baru yang ditempatkan sesuai lebar, tingginya, dan angka yang sesuai dengan i dan j.

Terakhir, batu bata ditambahkan ke vektor bricks untuk mengaksesnya di luar fungsi ini.

 
private final function buildLevel(level:Array):void 
{ 
	/* Level length, height */ 
			 
	var len:int = level.length; 
			 
	for(var i:int = 0; i < len; i++) 
	{ 
		for(var j:int = 0; j < W_LEN; j++) 
		{ 
			if(level[i][j] == 1) 
			{ 
				var brick:Brick = new Brick(); 
						 
				brick.x = OFFSET + (BRICK_W * j); 
				brick.y = BRICK_H * i; 
				addChild(brick); 
						 
				bricks.push(brick); 
			} 
		} 
	} 
}

Langkah 26: Listener Permainan

Fungsi ini menambah atau menghapus mouse dan memasukkan listener frame. Ini menggunakan parameter untuk menentukan apakah listener harus ditambahkan atau dihapus: default adalah add.

 
private final function gameListeners(action:String = 'add'):void 
{ 
	if(action == 'add') 
	{ 
		stage.addEventListener(MouseEvent.MOUSE_MOVE, movePaddle); 
		stage.addEventListener(Event.ENTER_FRAME, update); 
	} 
	else 
	{ 
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, movePaddle); 
		stage.removeEventListener(Event.ENTER_FRAME, update); 
	} 
}

Langkah 27: Fungsi Memulai Permainan

Kode berikutnya memanggil fungsi gameListeners() untuk memulai permainan.

 
private final function startGame(e:KeyboardEvent):void 
{ 
	bg.removeEventListener(MouseEvent.MOUSE_UP, startGame); 
	gameListeners(); 
}

Langkah 28: Pergerakan Bola

Kecepatan bola ditentukan oleh variabel xSpeed dan ySpeed, ketika fungsi update dijalankan, bola mulai bergerak menggunakan nilai-nilai ini setiap frame.

 
private final function update(e:Event):void 
{ 
	/* Ball Movement */ 
			 
	ball.x += xSpeed; 
	ball.y += ySpeed;

Langkah 29: Tabrakan Dinding

Kode ini memeriksa tabrakan antara bola dan dinding.

 
	/* Wall Collision */ 
			 
	if(ball.x < 0){ball.x = ball.x + 3;xSpeed = -xSpeed;};//Left 
	if((ball.x + ball.width) > stage.stageWidth){ball.x = ball.x - 3;xSpeed = -xSpeed;};//Right 
	if(ball.y < 0){ySpeed = -ySpeed;};//Up

Langkah 30: Event Permainan Kalah

Sebuah pernyataan if digunakan untuk memeriksa ketika tongkat tidak mengenai bola. Jika demikian, pemain kehilangan nyawa.

 
if(ball.y + ball.height > paddle.y + paddle.height){alert('You Lose', 'Play Again ›');gameEvent = 'lose';lives--;livesTF.text = String(lives);};//down/lose

Langkah 31: Tabrakan Tongkat-Bola

Ketika bola menyentuh tongkat, ySpeed diatur ke negatif untuk membuat bola naik. Kita juga memeriksa sisi mana dari bola yang dipukul untuk memilih sisi di mana ia akan bergerak selanjutnya.

 
	/* Paddle Collision, check the which side of the paddle the ball hits*/ 
			 
	if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) < paddle.x) 
	{ 
		ySpeed = -5; 
		xSpeed = -5; //left 
	} 
	else if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) >= paddle.x) 
	{ 
		ySpeed = -5; 
		xSpeed = 5; //right 
	}

Langkah 32: Tabrakan Bata

Kita menggunakan for dan hitTest untuk memeriksa tabrakan batu bata, ketika bola menyentuh batu bata, teknik yang sama yang digunakan dalam tongkat digunakan untuk menentukan sisi yang akan diikuti bola.

 
	/* Bricks Collision */ 
			 
	for(var i:int = 0; i < bricks.length; i++) 
	{ 
		if(ball.hitTestObject(bricks[i])) 
		{ 
			/* Check the which side of the brick the ball hits, left, right */  
             
            if((ball.x + ball.width / 2) < (bricks[i].x + bricks[i].width / 2))  
            {  
                xSpeed = -5; 
            }  
            else if((ball.x + ball.width / 2) >= (bricks[i].x + bricks[i].width / 2))  
            {  
                xSpeed = 5; 
            }

Langkah 33: Mengubah Arah Bola & Hapus Bata

Kode berikut mengubah arah Y bola dan menghilangkan bata dari panggung dan vektor.

 
	/* Change ball y direction */ 
					 
	ySpeed = -ySpeed; 
					 
	removeChild(bricks[i]); 
	bricks.splice(i, 1);

Jika Anda suka, Anda bisa mengubah logika ini sehingga kecepatan y bola hanya berbalik jika menyentuh bagian atas atau bawah batu bata, dan bukan ketika menyentuh sisinya. Cobalah dan lihat apa yang Anda pikirkan.

Langkah 34: Tambahkan Skor dan Periksa Kemenangan

Setiap hit bata akan menambah 100 ke skor, skor akan diambil dari konstanta score dan ditambahkan ke skor saat ini menggunakan fungsi int dan String. Kode ini juga memeriksa apakah tidak ada lagi batu bata di Vector dan menampilkan peringatan jika demikian.

 
	/* Score++ */ 
					 
			scoreTF.text = String(int(scoreTF.text) + SCORE_CONST); 
		} 
	} 
 
	/* Check if all bricks are destroyed */ 
			 
	if(bricks.length < 1) 
	{ 
		alert('You Win!', 'Next Level ›'); 
		gameEvent = 'win'; 
	} 
}

Langkah 35: Layar Alert

Layar Alert menampilkan informasi pemain tentang status permainan, hal ini ditunjukkan saat event permainan tercapai, seperti kehilangan nyawa atau menyelesaikan level.

Dua parameter digunakan dalam fungsi ini:

t: Judul peringatan
m: Pesan singkat

 
private final function alert(t:String, m:String):void 
{ 
	gameListeners('remove'); 
			 
	Mouse.show(); 
			 
	alertScreen = new AlertScreen(); 
	addChild(alertScreen); 
			 
	TweenNano.from(alertScreen.box, 0.3, {scaleX: 0.5, scaleY:0.5, ease:Circ}); 
			 
	alertScreen.box.titleTF.text = t; 
	alertScreen.box.msgTF.text = m; 
			 
	alertScreen.box.boxB.addEventListener(MouseEvent.MOUSE_UP, restart); 
}

Langkah 36: Fungsi Restart

Fungsi selanjutnya memeriksa status permainan (menang, kalah, selesai) dan melakukan tindakan sesuai dengan itu.

 
private final function restart(e:MouseEvent):void 
{ 
	if(gameEvent == 'win' && levels.length > currentLevel+1) //if level is clear but more levels are left 
	{ 
		currentLevel++; 
		changeLevel(levels[currentLevel]);//next level 
		levelTF.text = 'Level ' + String(currentLevel + 1); 
	} 
	else if(gameEvent == 'win' && levels.length <= currentLevel+1) //if level is clear and no more levels are available 
	{ 
		alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); 
		removeChild(alertScreen); 
		alertScreen = null; 
				 
		alert('Game Over', 'Congratulations!'); 
		gameEvent = 'finished'; 
	} 
	else if(gameEvent == 'lose' && lives > 0) //if level failed but lives > 0 
	{ 
		changeLevel(levels[currentLevel]);//same level 
	} 
	else if(gameEvent == 'lose' && lives <= 0) //if level failed and no more lives left 
	{ 
		alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); 
		removeChild(alertScreen); 
		alertScreen = null; 
				 
		alert('Game Over', 'Try Again!'); 
		gameEvent = 'finished'; 
	} 
	else if(gameEvent == 'finished') //reached when no more lives or levels are available 
	{ 
		/* Add menu screen */ 
				 
		menuScreen = new MenuScreen(); 
		addChild(menuScreen); 
				 
		menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); 
		menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); 
				 
		TweenNano.from(menuScreen, 0.3, {y: -menuScreen.height, ease: Circ}); 
				 
		/* Reset vars */ 
				 
		currentLevel = 0; 
		lives = 3; 
		livesTF.text = String(lives); 
		scoreTF.text = '0'; 
		levelTF.text = 'Level ' + String(currentLevel + 1); 
		xSpeed = 5; 
		ySpeed = -5; 
				 
		clearLevel(); 
	} 
}

Langkah 38: Ubah Tingkatan

Fungsi ini berubah ke tingkatan yang ditulis dalam parameter.

 
private final function changeLevel(level:Array):void 
{ 
	/* Clear */ 
			 
	clearLevel(); 
	 
	/* Redraw Bricks */ 
			 
	buildLevel(level); 
			 
	/* Start */ 
			 
	Mouse.hide(); 
			 
	bg.addEventListener(MouseEvent.MOUSE_UP, startGame); 
}

Langkah 39: Hapus Tingkatan

Sebuah fungsi untuk membersihkan sisa bata dan peringatan dari panggung. Ini juga akan mengatur ulang posisi dari tongkat dan bola.

 
private final function clearLevel():void 
{ 
	/* Remove Alert Screen */ 
				 
	alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); 
	removeChild(alertScreen); 
	alertScreen = null; 
				 
	/* Clear Level Bricks */ 
			 
	var bricksLen:int = bricks.length; 
			 
	for(var i:int = 0; i < bricksLen; i++) 
	{ 
		removeChild(bricks[i]); 
	} 
			 
	bricks.length = 0; 
				 
	/* Reset Ball and Paddle position */ 
			 
	ball.x = (stage.stageWidth / 2) - (ball.width / 2); 
	ball.y = (paddle.y - paddle.height) - (ball.height / 2) -2; 
			 
	paddle.x = stage.stageWidth / 2; 
}

Langkah 40: Menetapkan Kelas Main

Kita akan menggunakan Document Class dalam tutorial ini, jika Anda tidak tahu cara menggunakannya atau sedikit bingung, silakan baca QuickTip ini.

Kesimpulan

Hasil akhirnya adalah permainan yang dapat disesuaikan dan menghibur, coba tambahkan grafik dan level kustom Anda!

Saya harap Anda menyukai tutorial Premium Active ini, terima kasih telah membaca!