Buat Game Shooter Luar Angkasa di Flash Menggunakan AS3

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Ikuti langkah lurus ke depan Tutorial Premium ini untuk membuat sesi pemotretan yang menyenangkan dengan Flash dan AS3.

Langkah 1: Tinjauan Singkat

Menggunakan sprite yang dibuat sebelumnya dan Alat Flash, kami akan membuat antarmuka grafis yang terlihat bagus yang akan didukung oleh beberapa kelas ActionScript 3.

Pengguna akan dapat mengontrol pesawat ruang angkasa dan menembak beberapa musuh saat bepergian di angkasa.

Langkah 2: Pengaturan Dokumen Flash

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

Langkah 3: Antarmuka

Antarmuka kami akan terdiri dari beberapa sprite, bidang teks dan klip film.

Lanjutkan ke langkah selanjutnya dan kami akan melihat cara membuatnya.

Langkah 4: Latar Belakang

Latar belakang akan sangat sederhana, seperti bintang-bintang yang dihasilkan menggunakan ActionScript.

Buat persegi panjang 320x480 px dan isi dengan hitam. Anda bisa menambahkan sedikit gradien radial.

Gunakan Panel Align (Cmd + K) untuk memusatkannya di panggung.

Langkah 5: Sprite

Saya telah menggunakan perpustakaan sprite besar di demo tutorial ini, ini adalah bagian dari SpriteLib oleh Flying Yogi.

Langkah 6: Sprite MovieClips

Impor sprite ke stage (Cmd + R), konversikan ke MovieClips, dan sesuaikan frame untuk menampilkan animasi yang bagus.

Langkah 7: Skor TextField

Dynamic TextField akan diperlukan untuk menampilkan skor pertandingan. Gunakan Alat Teks (T) untuk membuatnya; beri nama scoreTF dan letakkan di sudut kiri bawah panggung.

Langkah 8: Font Tertanam

Untuk menggunakan font khusus dalam bidang teks dinamis, Anda harus menanamkannya dalam aplikasi Anda. Pilih textfield dan gunakan tombol Embed ... pada panel Properties untuk menambahkan karakter yang diperlukan.

Langkah 9: Lihat Peringatan

Tampilan Siaga akan ditampilkan ketika pengguna mencapai status game, (menang, kalah). Gunakan font yang Anda inginkan untuk membuat layar sederhana dengan dua textfield dinamis; nama mereka titleTF dan msgTF, mengubah kotak ke MovieClip dan mengatur nama kelasnya ke AlertView.

Langkah 10: Suara

Kami akan menggunakan Efek Suara untuk meningkatkan perasaan permainan, Anda dapat menemukan suara yang digunakan dalam contoh ini di Soungle.com menggunakan kata kunci space, explosion and laser.

Langkah 11: Tween Nano

Kami akan menggunakan mesin tween yang berbeda dari default yang disertakan dalam Flash, ini akan meningkatkan performace dan lebih mudah digunakan.

Anda dapat mengunduh Tween Nano dari situs resminya.

Langkah 12: Kelas ActionScript Baru

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

Langkah 13: Struktur Class

Buat struktur kelas dasar Anda untuk mulai menulis kode Anda.

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

Langkah 14: Class yang Diperlukan

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

 
 import flash.display.Sprite; 
 import flash.ui.Mouse; 
 import com.greensock.TweenNano; 
 import com.greensock.easing.Expo; 
 import flash.events.MouseEvent; 
 import flash.events.Event; 
 import flash.utils.Timer; 
 import flash.events.TimerEvent;

Langkah 15: Variabel

Ini adalah variabel yang akan kami gunakan, baca komentar di kode untuk mengetahui lebih banyak tentang mereka.

 
 private var stars:Sprite; // Will store the stars background 
 private var starsCopy:Sprite; //Another version of the stars background 
 private var ship:Ship; 
 private var bullets:Vector.<Sprite> = new Vector.<Sprite>(); //Will hold the bullets in stage 
 private var enemies:Array = new Array(); //Will hold the enemies in stage 
 private var timer:Timer = new Timer(500); //The time in which a new enemy will appear 
 private var alertView:AlertView; 
 private var lives:Vector.<Sprite>; //Will store the lives graphics 
 private var boss:Boss; 
 private var bossHealth:int = 20; 
 private var laserSound:Laser = new Laser(); 
 private var bossSound:UFO = new UFO(); 
 private var exSound:Explosion = new Explosion();

Langkah 16: Kode Pembuat

Konstruktor adalah fungsi yang berjalan ketika sebuah objek dibuat dari kelas, kode ini adalah yang pertama untuk mengeksekusi ketika Anda membuat sebuah instance dari suatu objek atau berjalan menggunakan Class Dokumen.

Ini memanggil fungsi yang diperlukan untuk memulai permainan. Periksa fungsi-fungsi tersebut di langkah selanjutnya.

 
 public final function Main():void<br />{ 
 	buildStars(200); //This function starts the game creation 
 }

Langkah 17: Bangun Bintang

Metode buildStars() menggunakan Star MC di perpustakaan untuk membuat latar belakang dengan bintang yang ditempatkan secara acak. Dua sprite dibuat untuk tween keduanya dan mensimulasikan gerakan, menggunakan trik yang sama seperti dalam tutorial scrolling parallax ini.

 
 private final function buildStars(n:int):void 
 { 
 	stars = new Sprite(); 
 	 
 	for(var i:int = 0; i < n; i++) 
 	{ 
 		var star:Star = new Star(); 
 		 
 		star.alpha = Math.random() * 1; 
 		star.scaleX = Math.random() * 1; 
 		star.scaleY = star.scaleX; 
 		star.x = Math.floor(Math.random() * stage.stageWidth); 
 		star.y = Math.floor(Math.random() * stage.stageHeight-20); 
 		 
 		stars.addChild(star); 
 	} 
 	 
 	/* Create another stars sprite to make animation */ 
 	 
 	starsCopy = new Sprite(); 
 	 
 	for(var j:int = 0; j < n; j++) 
 	{ 
 		var star2:Star = new Star(); 
 		 
 		star2.alpha = Math.random() * 1 + 0.2; 
 		star2.scaleX = Math.random() * 1; 
 		star2.scaleY = star.scaleX; 
 		star2.x = Math.floor(Math.random() * stage.stageWidth); 
 		star2.y = Math.floor(Math.random() * stage.stageHeight-20); 
 		 
 		starsCopy.addChild(star2); 
 	} 
 	 
 	starsCopy.y = -stage.stageHeight; 
 	 
 	addChild(starsCopy); 
 	addChild(stars); 
 	addShip(); //Add ship (player) to stage 
 }

Langkah 18: Tambahkan Kapal

Fungsi ini membuat instance dari Ship MC di perpustakaan dan menempatkannya di atas panggung dengan animasi yang rapi.

 
 private final function addShip():void 
 { 
 	ship = new Ship(); 
 	ship.x = stage.stageWidth * 0.5; 
 	ship.y = stage.stageHeight + ship.height; 
 	 
 	addChild(ship); 
 	 
 	TweenNano.to(ship, 2, {y: (stage.stageHeight - ship.height) - 10, ease:Expo.easeOut, onComplete:listeners()}); 
 	 
 	addLives(); 
 }

Langkah 19: Tambahkan Kehidupan

Menggunakan kembali MC Kapal, tiga sprite kapal ditambahkan ke panggung sebagai indikator kehidupan. Kapal-kapal ditambahkan ke Vector untuk memeriksa game nanti di dalam game.

 
 private final function addLives():void 
 { 
 	lives = new Vector.<Sprite>(); 
 	  
 	for(var i:int = 0; i < 3; i++) 
 	{ 
 		var live:Ship = new Ship(); 
 		 
 		live.stop(); 
 		live.width = 16; 
 		live.height = 16; 
 		live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; 
 		live.y = stage.stageHeight - live.height * 0.7; 
 		 
 		addChild(live); 
 		 
 		lives.push(live); 
 	} 
 }

Langkah 20: Tambahkan Pendengar

Garis-garis ini akan menambahkan pendengar yang diperlukan ke panggung dan pengatur waktu; ini termasuk peristiwa Mouse, acara Pengatur Waktu, dan serta peristiwa EnterFrame yang akan memperbarui permainan setiap frame.

 
 private final function listeners(action:String = 'add'):void 
 { 
 	if(action == 'add') 
 	{ 
 		stage.addEventListener(MouseEvent.MOUSE_MOVE, moveShip); 
 		stage.addEventListener(MouseEvent.MOUSE_DOWN, shoot); 
 		timer.addEventListener(TimerEvent.TIMER, addEnemy); 
 	 
 		stage.addEventListener(Event.ENTER_FRAME, update); 
 		timer.start(); 
 	} 
 	else 
 	{ 
 		stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveShip); 
 		stage.removeEventListener(MouseEvent.MOUSE_DOWN, shoot); 
 		timer.removeEventListener(TimerEvent.TIMER, addEnemy); 
 	 
 		stage.removeEventListener(Event.ENTER_FRAME, update); 
 		timer.stop(); 
 	} 
 }

Langkah 21: Pindahkan Kapal

Kapal pemain akan dikontrol dengan mouse, fungsi berikutnya menangani itu:

 
 private final function moveShip(e:MouseEvent):void 
 { 
 	ship.x = mouseX; 
 }

Langkah 22: Shoot

Kapal kami akan dapat menembakkan peluru untuk menghancurkan dan melindungi diri dari musuh. Fungsi ini akan berjalan setiap kali pengguna mengklik stage dan akan menempatkan peluru di depan kapal yang nantinya akan dipindahkan oleh fungsi update(). Ini juga memainkan suara tembakan.

 
 private final function shoot(e:MouseEvent):void 
 { 
 	var bullet:Bullet = new Bullet(); 
 	 
 	bullet.x = ship.x; 
 	bullet.y = ship.y - (ship.height * 0.5); 
 	 
 	laserSound.play(); //Play sound 
 	 
 	bullets.push(bullet); 
 	 
 	addChild(bullet); 
 }

Langkah 23: Tambahkan Musuh

Itu bukan penembak tanpa sesuatu untuk ditembak. Musuh dibuat oleh fungsi berikutnya, Timer digunakan untuk membuat musuh setiap 500 milidetik (Anda dapat mengubah nilai tersebut dalam langkah variabel) yang kemudian dipindahkan oleh fungsi update().

 
 private final function addEnemy(e:TimerEvent):void 
 { 
 	var enemy:Enemy = new Enemy(); 
 	 
 	enemy.x = Math.floor(Math.random() * (stage.stageWidth - enemy.width)); 
 	enemy.y = -enemy.height; 
 	 
 	enemies.push(enemy); 
 	 
 	addChild(enemy); 
 }

Langkah 24: Tampilan Siaga

Tampilan Siaga menunjukkan informasi pemain tentang status gim, yang ditunjukkan saat acara game tercapai.

Dua parameter digunakan dalam fungsi ini:

t: Judul lansiran
m: Pesan singkat

 
 private final function alert(t:String, m:String):void 
 { 
 	listeners('remove'); 
 	 
 	/* Create and show alert */ 
 	 
 	alertView = new AlertView(); 
 	 
 	alertView.x = stage.stageWidth * 0.5; 
 	alertView.y = stage.stageHeight * 0.5; 
 	 
 	alertView.titleTF.text = t; 
 	alertView.msgTF.text = m; 
 	 
 	alertView.addEventListener(MouseEvent.MOUSE_UP, restart); 
 	 
 	addChild(alertView); 
 }

Langkah 25: Update

Fungsi update() dijalankan setiap frame, menangani semua gerakan permainan dan tabrakan. Ini adalah fungsi loop game untuk game ini. Lihatlah langkah selanjutnya untuk melihat perilakunya.

 
 private final function update(e:Event):void 
 { 
     //code 
 }

Langkah 26: Pindahkan Latar Belakang

Latar belakang dipindahkan setiap frame untuk mensimulasikan perjalanan ruang angkasa; ketika sprite bintang bawah mencapai batas tahap, ia dipindahkan kembali ke atas, membuat lingkaran.

 
 stars.y += 5; 
 starsCopy.y += 5; 
  
 if(stars.y >= stage.stageHeight - 20) 
 { 
 	stars.y = -stars.height; 
 } 
 else if(starsCopy.y >= stage.stageHeight - 20) 
 { 
 	starsCopy.y = -stars.height; 
 }

Langkah 27: Pindahkan Peluru

Baris kode berikutnya memeriksa apakah ada peluru di panggung; jika benar, peluru akan bergerak ke atas; ketika peluru tidak lagi terlihat, itu hancur.

 
 if(bullets.length != 0) 
 { 
 	for(var i:int = 0; i < bullets.length; i++) 
 	{ 
 		bullets[i].y -= 10; 
 		 
 		/* Destroy offstage bullets */ 
 		 
 		if(bullets[i].y < 0) 
 		{ 
 			removeChild(bullets[i]); 
 			bullets[i] = null; 
 			bullets.splice(i, 1); 
 		} 
 	} 
 }

Langkah 28: Boss

Kami akan menambahkan bos besar dan jahat ke dalam game. Ketika pengguna mencapai skor tertentu, bos akan muncul:

 
 if(int(scoreTF.text) == 500 && boss == null) 
 { 
 	boss = new Boss(); 
 	 
 	bossSound.play(); 
 	 
 	boss.x = stage.stageWidth * 0.5; 
 	boss.y = -boss.height; 
 	 
 	TweenNano.to(boss, 3, {y: 80}); 
 	 
 	addChild(boss); 
 }

Langkah 29: Pindahkan Musuh

Musuh juga dipindahkan setiap frame. Kode ini menemukan semua musuh di panggung menggunakan larik dan memindahkannya 5px ke bawah.

 
 if(enemies.length != 0) 
 { 
 	for(var j:int = 0; j < enemies.length; j++) 
 	{ 
 		/* Move enemies */ 
 		 
 		enemies[j].y += 5;

Langkah 30: Tabrakan Musuh-Kapal

Di sini kami memeriksa apakah musuh bertabrakan dengan kapal pemain; jika ya, serangkaian tindakan dilakukan dimulai dengan suara ledakan:

 
 /* if enemy hits player */ 
 	 
 if(enemies[j].hitTestObject(ship)) 
 { 
 	exSound.play();

Langkah 31: Hancurkan Musuh

Setelah memainkan suara, musuh dihapus dari panggung dan array, dan diatur ke nol untuk (pada akhirnya) menghapusnya dari memori.

 
 /* Remove enemy */ 
  
 removeChild(enemies[j]); 
 enemies[j] = null; 
 enemies.splice(j, 1);

Langkah 32: Hapus Live

Salah satu ikon penghitung kehidupan juga akan dihapus dengan cara yang sama seperti musuh.

 
 /* Remove Live */ 
  
 removeChild(lives[lives.length-1]); 
 lives[lives.length-1] = null; 
 lives.splice(lives.length-1, 1);

Langkah 33: Tes untuk Game Over

Kemudian kami memeriksa nomor kehidupan, jika pemain keluar dari kehidupan kami menggunakan metode peringatan untuk menampilkan peringatan yang menunjukkan permainan berakhir, jika masih ada hidup tersedia kapal animasi ke panggung.

 
 /* If no lives left, game over */ 
  
 if(lives.length == 0) 
 { 
 	alert('Game Over', 'Click to continue'); 
 } 
 else 
 { 
 	/* Tween Ship */ 
 	 
 	ship.y = stage.stageHeight + ship.height; 
 	TweenNano.to(ship, 2, {y: (stage.stageHeight - ship.height), ease:Expo.easeOut}); 
 }

Langkah 34: Memukul Boss

Kode berikut menangani tumbukan bos, itu menggunakan metode yang sama yang digunakan dalam tabrakan musuh-kapal. Di sini kita menggunakan variabel bossHealth untuk menentukan kapan bos dikalahkan.

 
 for(var k:int = 0; k < bullets.length; k++) 
 { 
 	/* Hit Boss */ 
 	 
 	if(boss != null && bullets[k].hitTestObject(boss)) 
 	{ 
 		exSound.play(); 
 		 
 		removeChild(bullets[k]); 
 		bullets[k] = null; 
 		bullets.splice(k, 1); 
 		 
 		bossHealth--; 
 		scoreTF.text = String(int(scoreTF.text) + 50); 
 	} 
 	 
 	if(bossHealth <= 0 && boss != null) 
 	{ 
 		removeChild(boss); 
 		boss = null; 
 		alert('You Won', 'Click to continue'); 
 	}

Langkah 35: Tabrakan Peluru-musuh

Kode deteksi tabrakan lainnya. Peluru dalam array diuji untuk bertabrakan dengan musuh; saat ini terjadi, keduanya dihapus dari panggung dan lariknya.

 
 /* if bullet hits enemy */ 
  
 if(bullets.length != 0 && enemies[j] != null && bullets[k].hitTestObject(enemies[j])) 
 { 
 	exSound.play(); //Play sound 
 	 
 	removeChild(enemies[j]); 
 	enemies[j] = null; 
 	enemies.splice(j, 1); 
  
 	removeChild(bullets[k]); 
 	bullets[k] = null; 
 	bullets.splice(k, 1); 
 	 
 	scoreTF.text = String(int(scoreTF.text) + 50); //Add score to the textfield in stage 
 }

Langkah 36: Restart Function

Fungsi restart function() dipanggil oleh fungsi alert(), ia menangani operasi yang diperlukan untuk mereset permainan dan memulai ulang.

 
 private final function restart(e:MouseEvent):void 
 { 
     //code 
 }

Langkah 37: Hapus Sprite

Bagian pertama dari fungsi restart() menangani sprite, baris kode selanjutnya menghapus semua gambar dari stage.

 
 /* Remove Graphics */ 
  
 removeChild(ship); 
 ship = null; 
  
 for(var i:int = 0; i < bullets.length; i++) 
 { 
 	removeChild(bullets[i]); 
 	bullets[i] = null; 
 } 
  
 bullets.length = 0; 
  
 for(var j:int = 0; j < enemies.length; j++) 
 { 
 	removeChild(enemies[j]); 
 	enemies[j] = null; 
 } 
  
 enemies.length = 0; 
  
 for(var k:int = 0; k < lives.length; k++) 
 { 
 	removeChild(lives[k]); 
 	lives[k] = null; 
 } 
  
 lives.length = 0; 
  
 removeChild(stars); 
 stars = null; 
 removeChild(starsCopy); 
 starsCopy = null; 
  
 if(boss != null) 
 { 
 	removeChild(boss); 
 	boss = null; 
 }

Langkah 38: Hapus Siaga

Bagian selanjutnya dari restart() menghapus Tampilan Waspada dari panggung:

 
 /* Remove Alert */ 
  
 removeChild(alertView); 
 alertView = null;

Langkah 39: Atur Ulang Skor/Kesehatan Boss

Di bagian selanjutnya dari restart(), skor dan variabel kesehatan bos disetel ulang:

 
 /* Reset Score */ 
  
 scoreTF.text = '0'; 
  
 /* Reset Boss Health */ 
  
 bossHealth = 50;

Langkah 40: Metode Restart Panggilan

Akhirnya, pada akhir restart(), kita memanggil metode yang memulai semuanya:

 
 /* Restart */ 
  
 buildStars(200);

Langkah 41: Kelas Dokumen

Tambahkan nama kelas ke bidang Class di bagian Publikasikan panel Properti untuk mengaitkan FLA dengan kelas dokumen Utama.

Kesimpulan

Anda telah belajar cara membuat gim Space Shooter dengan semua fitur dasarnya, cobalah untuk memperluasnya menggunakan apa yang sudah Anda ketahui!

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