Quick Tip: A Simple Score Display for Flash Games

Almost all games out there use a scoring system to help players see their progress. It is essential to show the player’s score in a clear and fun way. In this Quick Tip we're going to learn how to do just that!

Introduction

Click the button to add 20,000 points to your score:

In this Quick Tip we’re going to learn how to create a score display. To improve the quality of our display, we're going to do two things:

Add commas to our score, so it reads 1,600,000 instead of 1600000. This makes it easier for the player to figure out how big his or her score is.
Make our score transition between values, instead of changing immediately. This gives the player a sense of achievement, because he or she actually sees his score grow.

In the end we’ll have a very simple and useful class, which you can easily use within any of your projects.

This class will only concern itself with displaying the score, not with calculating it.

Step 1: Creating Our Class

First off let’s create our class; I’ve named it ScoreDisplay:


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

Step 2: Adding Our Score Variables

Let’s slowly add some variables:


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()
		{
			
		}
	}
}

We’re going to show our score in a TextField. If you’d like to use a Symbol when working with ScoreDisplay, you won’t need to create the text field by code. However, if you don’t want to use a Symbol, you’ll need to call createScoreField().

Do remember that if you want to use your own Symbol, you must give the text field inside that symbol the instance name of 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);
		}
	}
}

Step 3: Changing and Setting Our Score

Now let’s start thinking what we’d like to do with our ScoreDisplay class. We’d like to be able to set a score, as well as add or subtract from the player’s score. So let’s create those methods!


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;
		}
	}
}

Step 4: Displaying Our Score

So far so good, we can now set and change the score’s value. But how will we display this? Even though it might not yet seem very useful, we’ll be using an enter frame event listener. Don’t worry it will make sense!


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);
		}
	}
}

Step 5: Our Partly Finished Class

If we’d like to use our class in a project, it would look like this. Seems to work right - the score changes - but we aren't done. Remember what we wanted to do?

Add commas to our score, so it reads 1,600,000 instead of 1600000.
Make our score transition between values, instead of changing immediately.

Step 6: Adding Commas

Let’s start with the first goal, adding commas.


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;
		}
	}
}

Step 7: Transitioning Between Scores

Now let’s work on our second goal; transitioning between score values, instead of changing to the new value immediately.

For this we can use the awesome capabilities of the Tween class. Most times we think of the Tween class for moving display objects, but you can use it to change any numerical value, including our score.


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;
		}
	}
}

We're Done!

And that’s it! You could extends this class and maybe add some sounds or “fancy graphics”. I hope you had a great time and learnt something, cheers!

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.text.TextField;
6
7	public class ScoreDisplay extends Sprite
8	{
9	//the text field which will show currentScore
10	public var currentScoreField:TextField;
11
12	//the score which is being shown, whilst it is increasing
13	public var currentScore:uint;
14
15	//the player's score
16	private var score:uint;
17
18	public function ScoreDisplay()
19	{
20
21	}
22
23	//if the developer won't link this class to a symbol, this method must be called
24	public function createScoreField():void
25	{
26	currentScoreField = new TextField();
27	addChild(currentScoreField);
28	}
29	}
30	}

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.text.TextField;
6
7	public class ScoreDisplay extends Sprite
8	{
9	//the text field which will show currentScore
10	public var currentScoreField:TextField;
11
12	//the player's score
13	private var score:uint;
14
15	//the score which is being shown, whilst it is increasing
16	private var currentScore:uint;
17
18	public function ScoreDisplay()
19	{
20
21	}
22
23	//if the developer won't link this class to a symbol, this method must be called
24	public function createScoreField():void
25	{
26	currentScoreField = new TextField();
27	addChild(currentScoreField);
28	}
29
30	public function setScore(_value:uint):void
31	{
32	score = _value;
33	}
34
35	public function changeScore(_change:uint):void
36	{
37	score += _change;
38	}
39	}
40	}

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.events.Event;
6	import flash.text.TextField;
7
8	public class ScoreDisplay extends Sprite
9	{
10	//the text field which will show currentScore
11	public var currentScoreField:TextField;
12
13	//the player's score
14	private var score:uint;
15
16	//the score which is being shown, whilst it is increasing
17	private var currentScore:uint;
18
19	public function ScoreDisplay()
20	{
21	addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
22	}
23
24	//if the developer won't link this class to a symbol, this method must be called
25	public function createScoreField():void
26	{
27	currentScoreField = new TextField();
28	addChild(currentScoreField);
29	}
30
31	public function setScore(_value:uint):void
32	{
33	score = _value;
34	}
35
36	public function changeScore(_change:uint):void
37	{
38	score += _change;
39	}
40
41	private function showScore(event:Event):void
42	{
43	currentScoreField.text = String(score);
44	}
45	}
46	}

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.events.Event;
6	import flash.text.TextField;
7
8	public class ScoreDisplay extends Sprite
9	{
10	//the text field which will show currentScore
11	public var currentScoreField:TextField;
12
13	//the player's score
14	private var score:uint;
15
16	//the score which is being shown, whilst it is increasing
17	private var currentScore:uint;
18
19	public function ScoreDisplay()
20	{
21	addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
22	}
23
24	//if the developer won't link this class to a symbol, this method must be called
25	public function createScoreField():void
26	{
27	currentScoreField = new TextField();
28	addChild(currentScoreField);
29	}
30
31	public function setScore(_value:uint):void
32	{
33	score = _value;
34	}
35
36	public function changeScore(_change:uint):void
37	{
38	score += _change;
39	}
40
41	private function showScore(event:Event):void
42	{
43	currentScoreField.text = addCommas(score);
44	}
45
46	private function addCommas(_score:uint):String
47	{
48	//a string, which will have the score with commas
49	var scoreString:String = new String();
50
51	//the amount of characters our score (without commas) has
52	var scoreLength:uint = _score.toString().length;
53	scoreString = "";
54
55	//add the commas to the string
56	for (var i:uint=0; i<scoreLength; i++) {
57	if ((scoreLength-i)%3 == 0 && i != 0) {
58	scoreString += ",";
59	}
60	scoreString += _score.toString().charAt(i);
61	}
62
63	return scoreString;
64	}
65	}
66	}

1
2	package
3	{
4	import fl.transitions.Tween;
5	import fl.transitions.easing.*;
6
7	import flash.display.Sprite;
8	import flash.events.Event;
9	import flash.text.TextField;
10
11	public class ScoreDisplay extends Sprite
12	{
13	//the amount of time (in ms) which is needed to transition from one score value to another one
14	private static const TRANSITION_LENGTH:uint = 500;
15
16	//the score which is being shown, whilst it is increasing
17	public var currentScore:uint;
18
19	//the player's score
20	private var score:uint;
21
22	//the text field which will show currentScore
23	private var currentScoreField:TextField;
24
25	//this will tween the current score's value
26	private var currentScoreTween:Tween;
27
28	public function ScoreDisplay()
29	{
30	addEventListener(Event.ENTER_FRAME, showScore, false, 0, true);
31	}
32
33	//if the developer won't link this class to a symbol, this method must be called
34	public function createScoreField():void
35	{
36	currentScoreField = new TextField();
37	addChild(currentScoreField);
38	}
39
40	public function setScore(_value:uint):void
41	{
42	score = _value;
43
44	tweenCurrentScore();
45	}
46
47	public function changeScore(_change:uint):void
48	{
49	score += _change;
50
51	tweenCurrentScore();
52	}
53
54	private function showScore(event:Event):void
55	{
56	currentScoreField.text = addCommas(currentScore);
57	}
58
59	private function tweenCurrentScore():void
60	{
61	currentScoreTween = new Tween(this, "currentScore", None.easeNone, currentScore, TRANSITION_LENGTH, true);
62	}
63
64	private function addCommas(_score:uint):String
65	{
66	//a string, which will have the score with commas
67	var scoreString:String = new String();
68
69	//the amount of characters our score (without commas) has
70	var scoreLength:uint = _score.toString().length;
71	scoreString = "";
72
73	//add the commas to the string
74	for (var i:uint=0; i<scoreLength; i++) {
75	if ((scoreLength-i)%3 == 0 && i != 0) {
76	scoreString += ",";
77	}
78	scoreString += _score.toString().charAt(i);
79	}
80
81	return scoreString;
82	}
83	}
84	}