Membuat 'Flux': Game Flash Sederhana Dengan Mekanika Gravitasi

() translation by (you can also view the original English article)

Dalam tutorial ini, saya akan menjelaskan langkah-langkah utama dan alur kerja untuk membuat game survival ruang sederhana, berdasarkan mekanika gravitasi yang dijelaskan dalam tutorial sebelumnya. Game ini ditulis dalam AS3 menggunakan FlashDevelop.

Memainkan permainan

Gunakan tombol panah kiri dan kanan untuk manuver kapal Anda, atas dan bawah tombol panah untuk menambah atau mengurangi ukuran Medan magnet yang dihasilkan, dan spasi untuk reverse polaritas. Mengumpulkan kristal putih untuk meningkatkan pasokan bahan bakar Anda - tapi menghindari yang merah, karena mereka menggunakannya. Tidak memukul batu, atau itu permainan berakhir!

Dalam tutorial ini, kita tidak benar-benar membuat permainan lengkap ditampilkan di atas; kita akan hanya memulai di atasnya, dengan membuat versi yang sangat sederhana dengan grafis primitif dan hanya satu jenis objek. Namun, pada akhir, Anda harus belajar cukup mampu untuk menambahkan fitur-fitur lainnya Anda sendiri!

Permainan itu sendiri sangat sederhana dalam kondisi saat - Lihatlah kritik ini untuk tips tentang bagaimana Anda dapat mengambil itu dari demo sederhana untuk permainan lengkap!

Mari kita mulai!

Mengatur proyek AS3 baru di FlashDevelop, dan menetapkan ukurannya untuk 550x600px.


 package 
{
  [SWF(width = "550", height = "600")]
	
	public class Main extends Sprite
	{
	
	}
}

Langkah 1: Mengidentifikasi objek permainan

Ada enam objek dalam partikel yang Anda dapat mengidentifikasi dari permainan di atas:

Pasokan energi - diwakili oleh objek bentuk oval putih
Asteroid - diwakili oleh batu-seperti objek
Konsumen energi - diwakili oleh bintang merah yang dibatasi dengan lampu hijau.
Bintang - latar belakang
Kisaran indikator - diwakili oleh lingkaran putih
Kapal - pemain objek

Tentu saja Anda dapat menambahkan objek lain untuk membuat permainan lebih interaktif atau menambahkan fitur baru. Untuk tutorial ini kita akan hanya membuat

Langkah 2: Kelas energi

Dari benda-benda yang kita diidentifikasi, empat dari mereka benar-benar bekerja dalam cara yang sama: dengan jatuh dari atas ke bawah.

Mereka adalah:

Bintang-bintang
Pasokan energi
Konsumen energi
Asteroid

Dalam tutorial ini, kita hanya akan membuat objek "energi supply", dari empat di atas. Jadi mari kita mulai dengan menciptakan objek-objek ini dan membuat mereka jatuh, dengan posisi pemijahan acak dan kecepatan.

Mulailah dengan membuat kelas energi:


	package  
	{
		import flash.display.MovieClip;
		import flash.events.Event;

		public class Energy extends MovieClip
		{
			private var rSpeed:Number = 0;
			
			public function Energy(speed:Number)
			{		
				graphics.beginFill(0x321312);
				graphics.drawCircle(0, 0 , 8);
				
				rSpeed = speed;
			}
			
			// we will call this every frame
			public function move():void
			{
				this.y += rSpeed;
				//rotation speed is linked to moving speed
				this.rotation += rSpeed / 8;
			}
		}
	}

Langkah 3: Kelas GameScreen

Kelas ini akhirnya akan menguasai sebagian besar aspek-aspek permainan kami, termasuk gerakan pemain dan loop permainan.

Membuat kelas:


package  
{
	
	public class GameScreen extends MovieClip
	{

		public function GameScreen()
		{
		
		}
	}
}

Itu yang kita butuhkan untuk sekarang.

Langkah 4: Memperbarui kelas utama

Kita sekarang akan membuat sebuah instance dari GameScreen dalam utama:


package 
{
	import flash.display.Sprite;
	import flash.events.Event;

	[SWF(width = "550", height = "600")]
	 
	public class Main extends Sprite 
	{
		private var game:GameScreen;
		
		public function Main():void 
		{
			// don't display a yellow rectangle on the screen at startup
			stage.stageFocusRect = false;
			
			game = new GameScreen();
			addChild(game);
			
			// give keyboard focus to the game screen immediately
			stage.focus = game;
		}
	}
}

Mengapa repot-repot? Yah, dengan cara ini, itu akan lebih mudah untuk menambah layar tambahan kemudian jika kita ingin (seperti preloader, layar judul, Permainan atas layar...).

Langkah 5: Memperkenalkan kelas Manajer

Untuk menghindari GameScreen kelas menjadi terlalu berantakan, kita akan menggunakan kelas terpisah untuk mengelola setiap objek.

Masing-masing manajer kelas akan berisi semua fungsi yang berhubungan dengan, dan berinteraksi dengan, suatu obyek tertentu. Di sini adalah kelas EnergyManager:


package  
{
	import flash.display.MovieClip;
	
	public class EnergyManager
	{
		// this Vector will store all instances of the Energy class
		private var energyList:Vector.<Energy>	
		private var gameScreen:GameScreen;
		
		public function EnergyManager(gs:GameScreen) 
		{
			gameScreen = gs;
			energyList = new Vector.<Energy>;	
		}
	}
}

Perhatikan bahwa kita memerlukan referensi ke GameScreen untuk dilewatkan ke konstruktor, dan kami menyimpan referensi ini dalam variabel pribadi. Kami juga menyiapkan vektor untuk menyimpan referensi untuk semua benda energi.

Sejauh kelas berisi tidak ada fungsi lain; kami akan menambahkan mereka nanti.

Langkah 6: Menciptakan energi

Menambahkan di bawah fungsi untuk menciptakan energi, ini adalah hanya fungsi; kita akan memanggil fungsi kemudian dari GameScreen kelas:


	public function createEnergy(number:int):void	
	{
		var energy:Energy;
		for (var i:int = 0; i < number; i++) {		

			energy = new Energy(4);				
				
			gameScreen.addEnergyToScreen(energy);
				
			energyList.push(energy);				
	
			energy.x = Calculation.generateRandomValue(30, 520);		
			energy.y = Calculation.generateRandomValue( -150, -20); 
		}
	}

Kami membuat pasokan energi baru dengan kecepatan 4, menambahkannya ke daftar tampilan (melalui GameScreen), tambahkan ke vektor dari semua energi objek bahwa kami hanya dibuat, dan mengatur posisi titik acak dalam batas-batas tertentu.

Calculation.generateRandomValue (#, #) adalah fungsi statis kita tidak menulis belum, jadi mari kita melakukan itu sekarang. Membuat kelas baru yang disebut perhitungan dan menambahkan fungsi ini:


	public static function generateRandomValue(min:Number, max:Number):Number
	{
		var randomValue:Number = min + (Math.random() * (max - min));
			
		return randomValue;
	}

Fungsi ini akan menghasilkan angka acak antara dua nilai yang dilewatkan ke. Untuk informasi lebih lanjut tentang cara kerjanya, lihat tips cepat ini. Karena ini adalah fungsi statis, kita tidak perlu untuk menciptakan sebuah contoh perhitungan untuk menyebutnya.

Sekarang, apa adalah bahwa fungsi addEnergyToScreen()? Kami belum ditetapkan bahwa belum, jadi mari kita lakukan sekarang. Menambahkan ini ke GameScreen:


		public function addEnergyToScreen(energy:Energy):void
		{
			addChild(energy);
		}

Itu hanya menambah contoh berlalu energi ke dalam tampilan daftar. Mari kita juga membuat sebuah fungsi yang sesuai untuk menghapus objek tertentu energi dari layar:


		public function removeEnergyFromScreen(energy:Energy):void
		{
			if (energy.parent == this)
			{
				removeChild(energy);
			}
		}

Langkah 7: Pemijahan energi

Mari kita menetapkan timer yang mendefinisikan interval untuk setiap hal ikan bertelur. Kode ini berjalan dalam fungsi constructor GameScreen's:


energyM = new EnergyManager(this);	//remember to pass a reference to the game screen
								
var spawnTimer:Timer = new Timer(3000, 0);
spawnTimer.addEventListener(TimerEvent.TIMER, spawnEnergy);
spawnTimer.start();

Jadi, setiap tiga detik, timer akan memanggil spawnEnergy(). Mari kita menulis bahwa fungsi sekarang:


	private function spawnEnergy(e:TimerEvent):void
	{
		energyM.createEnergy(4);    // create 4 energies
	}

Langkah 8: Membuat pemain

Mari kita gunakan lingkaran lain, lebih besar untuk mewakili pemain. Merasa bebas untuk mengimpor gambar untuk digunakan sebagai gantinya:


public function Player() 
		{
			graphics.beginFill(0x7ebff1);
			graphics.drawCircle(0, 0, 20);

Tambahkan kode ini ke GameScreen untuk menambahkan pemain ke layar:

1
2	// in the variable definitions
3	public var player:Player;


// in the constructor function
player = new Player;
addChild(player);
player.x = 275;
player.y = 450;

Sejauh ini kita harus memiliki beberapa pasokan energi yang jatuh beberapa detik, dan pemain yang muncul di tengah layar:

Langkah 9: Bergerak pemain

Pada dasarnya ada dua cara untuk menerapkan gerakan:

Menggunakan Boolean (benar/salah) nilai - benar = bergerak, palsu = tidak bergerak. Bila tombol panah kanan ditekan, nilai untuk "bergerak tepat" akan berubah ke true. Di setiap bingkai update, "bergerak benar" benar, kita meningkatkan objek x-nilai.
Menggunakan langsung update setiap frame - ketika tombol panah kanan ditekan, objek disuruh untuk menggerakkan kanan segera, dengan meningkatkan nilai x.

Metode kedua tidak mengakibatkan halus gerakan ketika tombol ditekan terus-menerus, tetapi metode pertama tidak - sehingga kita akan gunakan metode pertama.

Ada tiga langkah sederhana untuk melakukan hal ini:

Buat dua variabel Boolean, satu untuk memindahkan tepat dan satu untuk memindahkan kiri.

1
2	private var moveRight:Boolean = false;
3	private var moveLeft:Boolean = false;

Beralih Boolean ketika tombol ditekan atau dirilis:


		addEventListener(Event.ENTER_FRAME, update);
		addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
		addEventListener(KeyboardEvent.KEY_UP, KeyUpHandler);
	}
		
	private function KeyDownHandler(e:KeyboardEvent):void
	{
		if (e.keyCode == Keyboard.RIGHT) {
			moveRight = true;
		}
		if (e.keyCode == Keyboard.LEFT) {
			moveLeft = true;
		}
		if (e.keyCode == Keyboard.SPACE) {
			if (isGravityPushing == true) {
				isGravityPushing = false;
			} else  {
				isGravityPushing = true;
			}
		}
	}
		
	private function KeyUpHandler(e:KeyboardEvent):void
	{
		if (e.keyCode == Keyboard.RIGHT) {
			moveRight = false;
		}
		if (e.keyCode == Keyboard.LEFT) {
			moveLeft = false;
		}
	}

Berdasarkan Boolean ini, benar-benar memindahkan pemain setiap bingkai:

Jangan lupa untuk terlebih dahulu membuat mendengarkan fungsi dari acara bingkai enter, "memperbarui":


//call this function every frame
private function update(e:Event):void
	if (moveRight == true) {
		player.x += 6;
	}
	if (moveLeft == true) {
		player.x -= 6;
	}

Mempertahankan pemain dalam batas-batas layar:


	if (player.x >= 525) {
		moveRight = false;
	}
	if (player.x <= 20) {
		moveLeft = false;
	}

Berikut adalah bagaimana semua itu terlihat, di tempat:


package
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.ui.Keyboard;
    import flash.utils.Timer;
    import flash.events.KeyboardEvent;
 
    public class GameScreen
    {
        public var player:Player;
 
        private var energyM:EnergyManager;
 
        private var moveRight:Boolean = false;
        private var moveLeft:Boolean = false;
        private var isGravityPushing:Boolean = true;
 
        private var returnedPower:int = 0;
 
        private var scoreText:Text;
        private var totalScore:int=0;
        private var score:Text;
 
        public function GameScreen()
        {
            scoreText = new Text("Score :");
            addChild(scoreText);
 
            energyM = new EnergyManager;
 
            var spawnTimer:Timer = new Timer(3000, 0);
            spawnTimer.addEventListener(TimerEvent.TIMER, spawnEnergy);
            spawnTimer.start();
 
            player = new Player;
            addChild(player);
            player.x = 275;
            player.y = 450;
 
            addEventListener(Event.ENTER_FRAME, update);
            addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
            addEventListener(KeyboardEvent.KEY_UP, KeyUpHandler);
        }

	private function KeyDownHandler(e:KeyboardEvent):void
	{
		if (e.keyCode == Keyboard.RIGHT) {
			moveRight = true;
		}
		if (e.keyCode == Keyboard.LEFT) {
			moveLeft = true;
		}
		if (e.keyCode == Keyboard.SPACE) {
			if (isGravityPushing == true) {
				isGravityPushing = false;
			}else if (isGravityPushing == false) {
				isGravityPushing = true;
			}
		}
	}
		
	private function KeyUpHandler(e:KeyboardEvent):void
	{
		if (e.keyCode == Keyboard.RIGHT) {
			moveRight = false;
		}
		if (e.keyCode == Keyboard.LEFT) {
			moveLeft = false;
		}
	}

	private function update(e:Event):void
	{
		if (player.x >= 525) {
			moveRight = false;
		}
		if (player.x <= 20) {
			moveLeft = false;
		}
		if (moveRight == true) {
			player.x += 6;
		}
		if (moveLeft == true) {
			player.x -= 6;
		}
	}
    }
}

Langkah 10: Memindahkan pasokan energi

Saat ini, pasokan energi pemijahan tetapi tidak bergerak. Kita akan menggunakan fungsi GameScreen.update() untuk membuat mereka bergerak, sejak beroperasi setiap bingkai.

Tambahkan kode ini ke GameScreen.update():

1
2	energyM.moveAll(); // will make every energy object move

Sekarang tentu saja kita perlu membuat EnergyManager.moveAll() fungsi, sehingga menambahkan ini ke EnergyManager.as:


		public function moveAll():void
		{
			for (var i:int = 0; i < energyList.length; i++) {
				var energyS:Energy = energyList[i];
				energyS.move();
			}
		}

Langkah 10: Deteksi tumbukan

Kita akan perlu untuk memeriksa tabrakan antara setiap objek energi dan pemain. (Jika Anda mengembangkan permainan lebih lanjut, Anda harus memeriksa ini untuk asteroid dan konsumen energi, tetapi tidak untuk bintang.)

Tempat terbaik untuk menangani pemeriksaan yang ada di dalam EnergyManager, dipicu setiap bingkai oleh GameScreen.

Satu hal yang perlu dipertimbangkan: tumbukan cek akan antara dua lingkaran, sehingga hitTestObject() tidak ideal. Sebaliknya, kita akan menggunakan metode yang dijelaskan dalam tutorial ini.

Kita dapat menulis fungsi sebagai berikut:


	public function checkCollision(p:Player):int
	{
		// energy transferred due to collision
		var energyTransfer:int = 0;
		
		for (var i:int = 0; i < energyList.length; i++) {
			var energyS:Energy = energyList[i];
			
			var newX:Number = p.x - energyS.x;
			var newY:Number = p.y - energyS.y;
				
			var distance:Number = Math.sqrt(newX * newX + newY * newY);
				
			if (distance <= 28) {
				gameScreen.removeEnergyFromScreen(energyS);
				energyList.splice(i, 1);
				// for this simple game, we'll always transfer 1 unit
				// but you could alter this based on speed of collision
				// or any other factor
				energyTransfer = 1;
			}
		}
		return energyTransfer;
	}

Garis 32: dicatat bahwa kita melewati dalam rujukan kepada pemain, sehingga kita dapat mengakses posisinya.
Jalur 38: Necro adalah singkatan energi Supply.
Line 40 & 41: menemukan perbedaan di x - dan y koordinat pemain dan pasokan energi yang kita saat ini memeriksa.
Baris 43: menghitung jarak antara objek melalui Pythagoras.
Baris 45: Periksa tabrakan; 28 adalah jumlah dari jari-jari dua objek (radius pemain adalah 20, energi radius adalah 8).
Line 46 & 47: menghapus pasokan energi dari layar dan vektor.
Jalur 51: Tambahkan maksimal satu unit energi per frame.

Anda bisa mengubah jalur 51 untuk energyTransfer + = 1, untuk memungkinkan pemain untuk menyerap lebih dari satu objek energi sekaligus. Terserah kepada Anda - mencobanya dan melihat bagaimana hal itu mempengaruhi permainan.

Langkah 11: Panggilan tabrakan deteksi rutin

Kita perlu memeriksa tabrakan setiap bingkai, jadi kita harus memanggil fungsi kami hanya menulis dari GameScreen.update().

Pertama, kita perlu membuat sebuah integer variabel untuk menyimpan nilai transfer energi dari fungsi deteksi tabrakan. Kita akan menggunakan nilai ini untuk meningkatkan energi kapal dan menambah Skor pemain.

1
2	private var returnedPower:int = 0;

1
2	returnedPower = energyM.checkCollision(player);

Langkah 12: Hukum Newton mengenai gravitasi

Sebelum kita pergi ke menciptakan Permainan montir untuk fungsi 'Push' dan 'Menarik' kapal, saya ingin memperkenalkan konsep fisika yang didasarkan montir.

Idenya adalah untuk menarik objek ke arah pemain dengan gaya. Hukum gravitasi Universal Newton memberikan kita formula matematika yang besar (dan sederhana) yang kita dapat menggunakan untuk ini, dimana angkatan ini tentu gaya gravitasi:

G adalah hanya beberapa, dan kita bisa mengaturnya untuk apa pun yang kita sukai. Demikian pula, kita dapat mengatur massa setiap objek dalam permainan untuk setiap nilai yang kita sukai. Gravitasi terjadi di jarak yang tak terbatas, tetapi dalam permainan kami, kita akan memiliki cut-off point (dilambangkan oleh lingkaran putih dalam demo dari awal tutorial).

Dua hal yang paling penting untuk dicatat tentang formula ini adalah:

Kekuatan tergantung di alun-alun jarak antara dua objek (jadi jika objek adalah dua kali lebih jauh, kekuatan yang satu-seperempat kuat).
Arah kekuatan adalah sepanjang garis langsung menghubungkan dua objek melalui ruang.

Langkah 13: Merevisi konsep-konsep matematika

Sebelum kita mulai pengkodean mekanika gamenya untuk fungsi 'Push' dan 'Menarik', mari kita menjadi jelas pada apa yang kita inginkan itu harus dilakukan:

Pada dasarnya, kita want A (pemain) untuk mengerahkan kekuatan tertentu pada B (kristal), dan memindahkan B menuju A berdasarkan bahwa gaya.

Kita harus merevisi beberapa konsep:

Flash hanya berfungsi di radian, bukan derajat.
Sistem koordinat Flash memiliki sumbu yang terbalik: turun berarti peningkatan y.
Kita bisa mendapatkan sudut garis yang menghubungkan A ke B menggunakan Math.atan2 (B.y - A.y, B.x - A.x).
Kita dapat menggunakan trigonometri untuk mengetahui berapa banyak kita perlu bergerak B sepanjang setiap sumbu, berdasarkan sudut ini dan Angkatan:
- B.x + = (Force*Math.cos(angle));
- B.y + = (Force*Math.sin(angle));
Kita dapat menggunakan teorema Pythagoras's untuk mengetahui jarak antara dua objek:

Untuk selengkapnya, lihat tutorial gravitasi dalam tindakan dan trigonometri untuk pengembang permainan Flash.

Langkah 14: Menerapkan mendorong dan menarik

Berdasarkan penjelasan sebelumnya, kita dapat datang dengan garis besar untuk kode kita yang menarik setiap kristal ke kapal:

Menemukan perbedaan di x dan y antara kapal dan kristal tertentu.
Menemukan sudut antara mereka, dalam radian.
Mencari jarak antara mereka, menggunakan Pythagoras.
Memeriksa apakah objek dalam bidang gravitasi kapal.
Jika demikian, menghitung gaya gravitasi, dan...
.. .apply Angkatan, mengubah x dan y nilai Crystal.

Contoh kode:


	public function gravityPull(p:Player): void
	{
		for (var i:int = 0; i < energyList.length; i++) {
			var energyS:Energy = energyList[i];
				
			var nX:Number = (p.x - energyS.x);
			var nY:Number = (p.y - energyS.y);
			
			var angle:Number = Math.atan2(nY, nX);
				
			var r:Number =  Math.sqrt(nX * nX + nY * nY);
				
			if (r <= 250) {
				var f:Number = (4 * 50 * 10) / (r * r); 				
				energyS.x += f * Math.cos(angle);
				energyS.y += f * Math.sin(angle);
			}
		}
	}

Line 53: mendapatkan referensi untuk pemain.
Line 55: kita loop melalui setiap objek energi.
Line 61: menemukan sudut antara kapal dan energi.
Line 63: menemukan jarak antara mereka, juga.
Line 65: memeriksa apakah energi dalam kapal Angkatan lapangan.
Jalur 67: menggunakan rumus:
- 4 = G, "terus-menerus gravitasi" Aku telah memilih.
- 50 = m1, massa kapal pemain.
- 10 = m2, massa objek energi.
Line 69: menerapkan gerakan.

Inilah timelapse menampilkan bagaimana ini terlihat:

Perhatikan bahwa energi bergerak cepat semakin dekat sampai ke kapal, berkat r-squared istilah.

Kita dapat menerapkan fungsi mendorong hanya dengan membuat kekuatan negatif:


	public function gravityPull(p:Player): void
	{
		for (var i:int = 0; i < energyList.length; i++) {
			var energyS:Energy = energyList[i];
				
			var nX:Number = (p.x - energyS.x);
			var nY:Number = (p.y - energyS.y);
			
			var angle:Number = Math.atan2(nY, nX);
				
			var r:Number =  Math.sqrt(nX * nX + nY * nY);
				
			if (r <= 250) {
				var f:Number = (4 * 50 * 10) / (r * r); 				
				energyS.x -= f * Math.cos(angle);
				energyS.y -= f * Math.sin(angle);
			}
		}
	}

Di sini objek bergerak lebih lambat karena mendapat lebih jauh dari pemain, karena kekuatan mendapat lebih lemah.

Langkah 15: Oleskan montir

Tentu saja bahwa Anda akan memerlukan fungsi ini akan dijalankan setiap bingkai oleh GameScreen - tetapi sebelum itu, kita perlu menggunakan Boolean fungsi untuk beralih antara dua fungsi:

1
2	private var isGravityPushing:Boolean = true; // hitting space toggles it

Kita akan menggunakan benar untuk 'Push' dan palsu untuk 'Tarik'.

Di dalam KeyDownHandler():


	if (e.keyCode == Keyboard.SPACE) {
		if (isGravityPushing == true) {
			isGravityPushing = false;
		} else if (isGravityPushing == false) {
			isGravityPushing = true;
		}
	}

Setelah itu, Anda akan memiliki untuk memeriksa setiap frame Boolean. Menambahkan ini ke update() akan membuat:


	if (isGravityPushing == true) {
		energyM.gravityPull(player);
	}
	if (isGravityPushing == false) {
		energyM.gravityPush(player);
	}

Langkah 16: modifikasi

Anda mungkin menemukan bahwa gerakan tidak terlihat begitu baik. Ini bisa menjadi karena kekuatan tidak cukup ideal, atau karena istilah r-squared.

Saya ingin mengubah formula seperti begitu:

1
2	var f:Number = (0.8 * 50 * 10) / r;

Seperti yang Anda lihat, saya sudah dikurangi nilai "G" untuk 0.8, dan mengubah Angkatan bergantung hanya pada jarak antara objek, daripada jarak kuadrat.

Mencobanya dan melihat jika Anda menikmati perubahan. Anda selalu dapat mengubahnya namun Anda suka.

Langkah 17: Kelas teks

Kita akan perlu untuk menunjukkan beberapa teks pada layar, untuk menunjukkan nilai dan kapal sisa kekuatan.

Untuk tujuan ini, kita akan membangun kelas baru, teks:


package  
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.events.Event;
	import flash.text.TextFormat;

	import flash.text.TextFormatAlign;

	public class Text extends MovieClip
	{
		public var _scoreText:TextField= new TextField();
		
		public function Text(string:String)
		{	
			var myScoreFormat:TextFormat = new TextFormat(); //Format changeable
			myScoreFormat.size = 24;		
			
			myScoreFormat.align = TextFormatAlign.LEFT;
			myScoreFormat.color = (0x131313);
			
			_scoreText.defaultTextFormat = myScoreFormat;
			
			_scoreText.text = string;
			
			addChild(_scoreText);
		}

		public function updateText(string:String)
		{
			_scoreText.text = string;
		}
	}
}

Sangat sederhana; Hal ini pada dasarnya sebuah movieklip dengan bidang teks di dalamnya.

Langkah 18: Menambahkan kekuatan untuk pemain

Untuk memberikan beberapa tantangan permainan, kami akan membuat kapal kekuatan terbiasa perlahan-lahan, sehingga pemain harus mengumpulkan energi objek untuk mengisi ulang.

Untuk membuat kapal kekuatan muncul di kapal itu sendiri, kita hanya dapat menambahkan contoh teks ke objek kapal tampilan daftar.

Menyatakan variabel ini dalam kelas kapal tersebut:

1
2	public var totalPower:Number = 100; // ship starts with this much power
3	private var powerText:Text;

Kita akan perlu untuk menjaga jumlah daya (baik disimpan dan ditampilkan) diperbarui setiap bingkai, sehingga menambahkan fungsi baru untuk pemain:

Pertama, dalam konstruktor:


			// add a new text object if it doesn't already exist
			if (!powerText) {
				powerText = new Text(String(int(totalPower))); 
				addChild(powerText);	
				powerText.x -= 20;			//Adjust position
				powerText.y -= 16;
			}

Dan kemudian...


	public function updatePower():void
		{
			// fps = 24, so this makes power decrease by 1/sec
			totalPower -= 1 / 24;		
			powerText.updateText(String(int(totalPower)));
		}

Kekuatan akan berkurang setiap bingkai oleh 1/24 unit, berarti itu akan mengurangi dengan satu unit penuh setiap detik.

Kita perlu membuat ini menjalankan setiap bingkai, jadi Tambahkan baris ini untuk GameScreen.update():

1
2	player.updatePower();

Langkah 19: Membuat energi meningkatkan daya

Ketika kapal bertabrakan dengan objek energi, kami menginginkannya untuk meningkatkan kekuatan.

Dalam GameScreen.update(), tambahkan baris yang disorot:

1
2	returnedPower = energyM.checkCollision(player);
3	player.totalPower += returnedPower;

Ingat Anda dapat mengubah berapa banyak daya dikembalikan dalam fungsi EnergyManager.checkCollision().

Langkah 20: Menyiapkan Skor

Sekali lagi, kita akan membutuhkan kelas teks. Saat ini, kami akan menampilkan "Nilai" dan kemudian nilai.

Di sini, kami akan memerlukan ketiga variabel lain:

Teks "Nilai".
Skor nilai teks.
Variabel untuk menyimpan nilai sebenarnya.

Menyatakan di kelas GameScreen ini:

1
2	private var scoreText:Text;
3	private var totalScore:int = 0;
4	private var score:Text;

Dalam konstruktor, tambahkan kode ini:


scoreText = new Text("Score :");
addChild(scoreText);

score = new Text(String(totalScore));
addChild(score);
score.x = scoreText.x + 100;   //Positioning it beside the "Score : " Text.
score.y += 2;

Sekarang, dalam fungsi update() akan membuat, menambahkan ini:

1
2	score.updateText(String(totalScore));

Thats it - kami telah membuat versi dasar dari permainan di atas!

Lihat (Anda mungkin perlu untuk reload halaman):

Fitur tambahan dan Polishing

Latar Ruang

Mungkin Anda juga ingin latar belakang dengan gambar tertanam dan bintang-bintang. Menambahkan ini ke kelas utama Anda:


[Embed(source = "/../lib/SpaceBackground.jpg")]	//embed
		private var backgroundImage:Class; //This line must come immediately after the embed

		private var bgImage:Bitmap = new backgroundImage();		
		private var numOfStars:int = 70;

Sekarang membuat kelas bintang:


package assets 
{
	import flash.display.MovieClip;
	import flash.events.Event;

	public class Star extends MovieClip
	{
		private var speed:Number;
		
		public function Star(alpha:Number, size:Number, speed1:Number) 
		{
			graphics.beginFill(0xCCCCCC);
			graphics.drawCircle(0, 0, size);
			
			speed = speed1;
		}
		
		// make sure you call this every frame
		private function moveDown():void
		{
			this.y += speed;
			
			if (this.y >= 600) {
				this.y = 0;
			}
		}
	}
}

Dalam konstruktor Main(), tambahkan ini membuat bintang-bintang:



for (var i:int = 0; i < numOfStars; i++) {
		createStars();
}

Berikut adalah sebenarnya createStars() fungsi:



private function createStars():void
{
	var star:Star = new Star(
		Math.random(), 
		Calculations.getRandomValue(1, 2), 
		Calculations.getRandomValue(2, 5)
	);  //random alpha, size and speed
			
	addChild(star);
			
	star.x = Calculations.getRandomValue(0, 550);
	star.y = Calculations.getRandomValue(0, 600);
}

Dengan alpha acak, ukuran, posisi, dan kecepatan, latar belakang pseudo-3D dapat dihasilkan.

Berbagai indikator

Berbagai indikator lingkaran dapat dilakukan hanya dengan membuat lingkaran lain dan menambahkannya ke daftar layar kapal, seperti bagaimana Anda menambahkan teks indikator kekuatan. Pastikan lingkaran berpusat pada kapal, dan memiliki radius sama dengan kapal push/pull jangkauan.

Tambahkan transparansi (alpha nilai) ke lingkaran dengan kode di bawah ini:

1
2	graphics.beginFill(0xCCCCCC, 0.1);

Mencoba menambahkan kontrol tambahan yang membuat rentang yang menambah atau mengurangi ketika panah atas dan bawah tombol ditekan.

Kesimpulan

Saya harap Anda menikmati tutorial ini! Harap meninggalkan komentar Anda.

Next: Membaca kritik ini untuk panduan mengambil fluks dari demo sederhana untuk permainan lengkap!