Tip Cepat: Tampilan Skor Sederhana untuk Permainan Flash

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

Hampir semua permainan di luar sana menggunakan sistem penilaian untuk membantu pemain melihat kemajuan mereka. Sangat penting untuk menunjukkan skor pemain dengan cara yang jelas dan menyenangkan. Di Tip Cepat ini kita akan belajar cara melakukan hal itu!

Perkenalan

Klik tombol untuk menambahkan 20.000 poin ke skor Anda:

Di Tip Cepat ini kita akan belajar cara membuat tampilan skor. Untuk meningkatkan kualitas tampilan kita, kita akan melakukan dua hal:

Menambahkan koma ke skor kita, jadi terbaca 1.600.000 bukannya 1600000. Hal ini memudahkan pemain untuk mengetahui seberapa besar skornya.
Membuat transisi skor kita di antara nilai-nilai, alih-alih langsung mengubahnya. Ini memberi pemain rasa pencapaian, karena dia benar-benar melihat skornya tumbuh.

Pada akhirnya kita akan memiliki kelas yang sangat sederhana dan berguna, yang dapat Anda gunakan dengan mudah dalam proyek Anda.

Kelas ini hanya akan berfokus dengan menampilkan skor, bukan dengan menghitungnya.

Langkah 1: Menciptakan Kelas Kita

Pertama, mari kita ciptakan kelas kita; saya menamakannya ScoreDisplay:

package
{
  import flash.display.Sprite;
	
	public class ScoreDisplay extends Sprite
	{
		public function ScoreDisplay()
		{
			
		}
	}
}

Langkah 2: Menambahkan Variabel Skor Kita

Mari perlahan menambahkan beberapa variabel:

package
{
	import flash.display.Sprite;
	
	public class ScoreDisplay extends Sprite
	{
		//the score which is being shown, whilst it is increasing
		public var currentScore:uint;
		
		//the player's score
		private var score:uint;
		
		
		public function ScoreDisplay()
		{
			
		}
	}
}

Kita akan menunjukkan skor kita di TextField. Jika Anda ingin menggunakan Symbol saat bekerja dengan ScoreDisplay, Anda tidak perlu membuat field teks dengan kode. Namun, jika Anda tidak ingin menggunakan Symbol, Anda harus memanggil createScoreField().

Ingatlah bahwa jika Anda ingin menggunakan Symbol Anda sendiri, Anda harus memberikan field teks di dalam simbol itu nama instance dari currentScoreField.

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	
	public class ScoreDisplay extends Sprite
	{
		//the text field which will show currentScore
		public var currentScoreField:TextField;
		
		//the score which is being shown, whilst it is increasing
		public var currentScore:uint;
		
		//the player's score
		private var score:uint;
		
		public function ScoreDisplay()
		{
			
		}
		
		//if the developer won't link this class to a symbol, this method must be called
		public function createScoreField():void
		{
			currentScoreField = new TextField();
			addChild(currentScoreField);
		}
	}
}

Langkah 3: Mengubah dan Mengatur Skor Kita

Sekarang mari kita mulai berpikir apa yang akan kita lakukan di kelas ScoreDisplay kita. Kita ingin dapat mengatur skor, serta mengurangi dari skor pemain. Jadi mari kita buat metode-metode itu!

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	
	public class ScoreDisplay extends Sprite
	{
		//the text field which will show currentScore
		public var currentScoreField:TextField;
		
		//the player's score
		private var score:uint;
		
		//the score which is being shown, whilst it is increasing
		private var currentScore:uint;
		
		public function ScoreDisplay()
		{
			
		}
		
		//if the developer won't link this class to a symbol, this method must be called
		public function createScoreField():void
		{
			currentScoreField = new TextField();
			addChild(currentScoreField);
		}
		
		public function setScore(_value:uint):void
		{
			score = _value;	
		}
		
		public function changeScore(_change:uint):void
		{
			score += _change;
		}
	}
}

Langkah 4: Menampilkan Skor Kita

Sejauh ini sangat bagus, kita sekarang dapat mengatur dan mengubah nilai skor. Tapi bagaimana kita akan menampilkan ini? Meskipun sepertinya tidak terlalu berguna, kita akan menggunakan listener event frame. Jangan khawatir itu masuk akal!

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	
	public class ScoreDisplay extends Sprite
	{
		//the text field which will show currentScore
		public var currentScoreField:TextField;
		
		//the player's score
		private var score:uint;
		
		//the score which is being shown, whilst it is increasing
		private var currentScore:uint;
		
		public function ScoreDisplay()
		{
			addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
		}
		
		//if the developer won't link this class to a symbol, this method must be called
		public function createScoreField():void
		{
			currentScoreField = new TextField();
			addChild(currentScoreField);
		}
		
		public function setScore(_value:uint):void
		{
			score = _value;	
		}
		
		public function changeScore(_change:uint):void
		{
			score += _change;
		}
		
		private function showScore(event:Event):void
		{
			currentScoreField.text = String(score);
		}
	}
}

Langkah 5: Sebagian Kelas yang Sudah Selesai

Jika kita ingin menggunakan kelas kita dalam sebuah proyek, itu akan terlihat seperti ini. Tampaknya berfungsi dengan benar - skornya berubah - tetapi kita belum selesai. Ingat apa yang ingin kita lakukan?

Menambahkan koma ke skor kita, jadi terbaca 1.600.000 bukannya 1600000.
Membuat transisi skor kita di antara nilai-nilai, alih-alih langsung mengubahnya.

Langkah 6: Menambahkan Koma

Mari kita mulai dengan tujuan pertama, menambahkan koma.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	
	public class ScoreDisplay extends Sprite
	{
		//the text field which will show currentScore
		public var currentScoreField:TextField;
		
		//the player's score
		private var score:uint;
		
		//the score which is being shown, whilst it is increasing
		private var currentScore:uint;
		
		public function ScoreDisplay()
		{
			addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
		}
		
		//if the developer won't link this class to a symbol, this method must be called
		public function createScoreField():void
		{
			currentScoreField = new TextField();
			addChild(currentScoreField);
		}
		
		public function setScore(_value:uint):void
		{
			score = _value;	
		}
		
		public function changeScore(_change:uint):void
		{
			score += _change;
		}
		
		private function showScore(event:Event):void
		{
			currentScoreField.text = addCommas(score);
		}
		
		private function addCommas(_score:uint):String
		{
			//a string, which will have the score with commas
			var scoreString:String = new String();
			
			//the amount of characters our score (without commas) has
			var scoreLength:uint = _score.toString().length;
			scoreString = "";
			
			//add the commas to the string
			for (var i:uint=0; i<scoreLength; i++) { 
				if ((scoreLength-i)%3 == 0 && i != 0) {
					scoreString += ",";
				}
				scoreString += _score.toString().charAt(i);
			}
			
			return scoreString;
		}
	}
}

Langkah 7: Transisi Antar Skor

Sekarang mari kita kerjakan tujuan kedua kita; transisi di antara nilai-nilai skor, alih-alih berubah ke nilai baru dengan segera.

Untuk ini kita bisa menggunakan kemampuan luar biasa dari kelas Tween. Sering kali kita berpikir tentang kelas Tween untuk memindahkan objek tampilan, tetapi Anda dapat menggunakannya untuk mengubah nilai numerik apa pun, termasuk skor kita.

package
{
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	
	public class ScoreDisplay extends Sprite
	{
		//the amount of time (in ms) which is needed to transition from one score value to another one
		private static const TRANSITION_LENGTH:uint = 500;
		
		//the score which is being shown, whilst it is increasing
		public var currentScore:uint;
		
		//the player's score
		private var score:uint;
		
		//the text field which will show currentScore
		private var currentScoreField:TextField;
		
		//this will tween the current score's value
		private var currentScoreTween:Tween;
		
		public function ScoreDisplay()
		{
			addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
		}
		
		//if the developer won't link this class to a symbol, this method must be called
		public function createScoreField():void
		{
			currentScoreField = new TextField();
			addChild(currentScoreField);
		}
		
		public function setScore(_value:uint):void
		{
			score = _value;	
			
			tweenCurrentScore();
		}
		
		public function changeScore(_change:uint):void
		{
			score += _change;
			
			tweenCurrentScore();
		}
		
		private function showScore(event:Event):void
		{
			currentScoreField.text = addCommas(currentScore);
		}
		
		private function tweenCurrentScore():void
		{
			currentScoreTween = new Tween(this, "currentScore", None.easeNone, currentScore, TRANSITION_LENGTH, true);
		}
		
		private function addCommas(_score:uint):String
		{
			//a string, which will have the score with commas
			var scoreString:String = new String();
			
			//the amount of characters our score (without commas) has
			var scoreLength:uint = _score.toString().length;
			scoreString = "";
			
			//add the commas to the string
			for (var i:uint=0; i<scoreLength; i++) { 
				if ((scoreLength-i)%3 == 0 && i != 0) {
					scoreString += ",";
				}
				scoreString += _score.toString().charAt(i);
			}
			
			return scoreString;
		}
	}
}

Kita sudah selesai!

Dan itu dia! Anda dapat memperluas kelas ini dan mungkin menambahkan beberapa suara atau "grafis mewah". Saya harap Anda memiliki waktu yang tepat dan belajar sesuatu, cheers!