Install Circle Chain on your iPhone for free and get the source code!! 645 downloads to go - last updated: April 21, 2012

Develop a Flash game like Wish Upon a Star

November 29, 2011 • Actionscript 3, Flash, Game design by Emanuele Feronato • 9 Comments

Yesterday I got a couple of badges playing at Wish Upon a Star, and I found the game simple and fun, as well as perfect for a brief tutorial for beginners.

Let’s see what I developed at the moment in this little prototype:

* player moves left and right with slippy controls (like in the original game until you buy grippy control)
* stars fall down at every second
* stars disappear when they leave the bottom of the state
* player can collect stars by touching their center
* stars explode with a particle effect (powered by Flint Particles) when collected

This is the main class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

package {
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	public class Main extends Sprite {
		// falling stars per second
		private var starsPerSecond:Number=5;
		// vector which will contain all stars
		private var starVector:Vector.<Star>=new Vector.<Star>();
		// player DisplayObject and properties
		private var player:Player=new Player();
		private var playerSpeed:Number=0;
		private var playerThrust:Number=0.5;
		private var playerMaxSpeed:Number=3;
		private var playerFriction:Number=0.98;
		// game timer
		private var timer:Timer=new Timer(1000);
		public function Main() {
			// add background
			var bg:Background=new Background();
			addChild(bg);
			// add the player
			addChild(player);
			// start the timer
			timer.start();
			// listeners
			timer.addEventListener(TimerEvent.TIMER, tick);
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyPressed);
		}
		private function tick(e:TimerEvent):void {
			// every second, add some stars and put them on stage and in starVector vector
			for (var i:Number=0; i<starsPerSecond; i++) {
				var star:Star=new Star();
				addChild(star);
				starVector.push(star);
			}
		}
		private function keyPressed(e:KeyboardEvent):void {
			// set player speed according to key pressed
			if (e.keyCode==37) {
				playerSpeed-=playerThrust;
			}
			if (e.keyCode==39) {
				playerSpeed+=playerThrust;
			}
			if (playerSpeed>playerMaxSpeed) {
				playerSpeed=playerMaxSpeed;
			}
			if (playerSpeed<-playerMaxSpeed) {
				playerSpeed=- playerMaxSpeed;
			}
		}
		private function update(e:Event):void {
			for (var i:Number=0; i<starVector.length; i++) {
				// update star position and rotation
				starVector[i].y+=starVector[i].ySpeed;
				starVector[i].rotation+=starVector[i].ySpeed;
				starVector[i].ySpeed+=0.015;
				// remove stars when off the bottom of the stage
				if (starVector[i].y>490) {
					removeChild(starVector[i]);
					starVector.splice(i,1);
					if (i>0) {
						i--;
					}
				}
				// remove stars when their CENTER hit the player
				if (player.hitTestPoint(starVector[i].x,starVector[i].y,true)) {
					var starExplosion:StarExplosion=new StarExplosion(starVector[i]);
					addChild(starExplosion);
					removeChild(starVector[i]);
					starVector.splice(i,1);
					if (i>0) {
						i--;
					}
				}
			}
			// adjust player posiiton
			player.x+=playerSpeed;
			playerSpeed*=playerFriction;
		}
	}
}

This is Star class, only used to randomly place stars and assign them a random speed:

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.Sprite;
	public class Star extends Sprite {
		public var ySpeed:Number;
		public function Star() {
			x=Math.random()*600+20;
			y=-10+Math.random()*-240;
			ySpeed=0.9+Math.random()*0.2;
		}
	}
}

This is Player class,only used to place the player:

1
2
3
4
5
6
7
8
9

package {
	import flash.display.Sprite;
	public class Player extends Sprite {
		public function Player() {
			x=320;
			y=465;
		}
	}
}

And this is StarExplosion class, used for the particle effect:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package {
	import flash.display.Sprite;
	import flash.geom.Point;
	import org.flintparticles.common.counters.*;
	import org.flintparticles.common.actions.*;
	import org.flintparticles.common.displayObjects.RadialDot;
	import org.flintparticles.common.initializers.*;
	import org.flintparticles.twoD.actions.*;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.renderers.*;
	import org.flintparticles.twoD.zones.*;
	public class StarExplosion extends Sprite {
		public function StarExplosion(s:Star) {
			x=s.x;
			y=s.y;
			var emitter:Emitter2D = new Emitter2D();
			emitter.counter=new Blast(50);
			emitter.addInitializer(new ImageClass(Star));
			emitter.addInitializer(new Velocity(new DiscZone(new Point(0,0),70,40)));
			emitter.addInitializer(new ScaleImageInit(0.2,0.4));
			emitter.addInitializer(new Lifetime(1,1.5));
			emitter.addInitializer(new AlphaInit(0.2,0.7));
			emitter.addAction(new Move());
			emitter.addAction(new Age());
			emitter.addAction(new Accelerate(0,100));
			emitter.addAction(new RandomDrift(20,2));
			var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
			renderer.addEmitter(emitter);
			addChild(renderer);
			emitter.start();
		}
	}
}

This is the result:

Move the player with LEFT and RIGHT arrow keys.

Download the source code. Next time, player jump and animation, and something more.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (23 votes, average: 3.39 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

  1. YILDIRAY

    on November 30, 2011 at 12:11 am

    Another nice tutorial. Thanks Emanuele…

  2. CuriousGaming

    on November 30, 2011 at 9:40 am

    Did you know most of Wish Upon a Star is open source?

    http://pastebin.com/aYMS0S5s

    Keep up the good work.
    Tom

  3. player_03

    on December 2, 2011 at 12:57 am

    I glanced at your player class and concluded you don’t have a good grasp of what classes should be used for. It ought to take input and handle movement, at the very least.

    It had been pointed out that you’re relying on the keyboard auto-repeat function. Sure enough, acceleration follows the “one press, pause, more presses” pattern, and if you press ANY other key while holding the movement key, you stop moving.
    From this, I deduced that either you didn’t know how to handle input, or you just didn’t care. Neither option helps your case, given your stated goal is to teach people.

    Then I moved to a different tab for a while, and when I came back, the game was absolutely full of stars and starting to lag. I looked back at your code, and sure enough, you’re using a Timer to place the stars.
    Don’t you know better? Or aren’t you aware that the framerate drops to 2 fps when the SWF is offscreen, but Timers keep going?

    I used to assume that you made good tutorials and wrote good code, based on the fact that lots of people link to you. Apparently those weren’t safe assumptions.

    Ok, maybe you were in a hurry when you made this, and you spent more time on other tutorials, but that doesn’t help.
    The errors you made here were really basic; if you’d been familiar with good coding style, you could have avoided all three without spending any more time on the project. Plus, the code structure would have been easier to understand, meaning this would have been a better tutorial overall.

    I was going to conclude by saying that CuriousGaming’s code would make a better tutorial, but I checked and that’s not true. Instead, I’ll just say that I’m not planning on referring anyone to your blog any time soon.

    (Ok, time to stop being a jerk.)

  4. Cool Stuff with the Flash Platform – 12/1/2011 | Hire Flash Developers

    on December 2, 2011 at 2:23 am

    [...] becoming a fan of the game, Emanuele Feronato teaches you how to develop a Flash game like Wish Upon a Star using the Flint Particles particle [...]

  5. yzxwml

    on December 2, 2011 at 7:07 pm

    thank you

  6. Richard Wentz

    on December 3, 2011 at 5:40 pm

    Please disregard player_03′s non-constructive feedback. Clearly being a superior programmer, and having written so many tutorials player_03 no longer has need of the great work that you do, and how much help you have been to complete newbies who have ZERO working knowledge of programming but are taking baby steps by using your blog and the tutorials you write. Yes, it’s a run-on sentence, and yes, it’s sarcasm (in case player_03 couldn’t tell).

    You’re doing great work, keep it up, and thank you!

  7. Richard Wentz

    on December 3, 2011 at 5:42 pm

    btw, player_03, where is your tutorial blog? What are you contributing to others with less skill and expertise as you? Besides donor tissue, that is?

  8. ..jayson

    on December 5, 2011 at 5:52 am

    ..,nice game..

    //”i’ve learn..//

    but where will i run the code?

  9. player_03

    on December 6, 2011 at 9:59 pm

    Richard:
    Just because my feedback wasn’t positive doesn’t mean it wasn’t constructive. Yes, I complained, but my complaints were entirely valid and fairly important. The issues I mentioned would either annoy players (key repeat, Timers) or would make it hard to expand on this tutorial (poor code structure, lack of explanation).
    I stand by everything I said above. Feel free to debate the points I made, but don’t brush them off.

    As for how I contribute: I am a regular on the Kongregate programming forums. When I have time, I respond to users of all skill levels, carefully explaining how to implement features or why code isn’t working. I try to avoid just giving them the solution, instead explaining the problem well enough that they can solve it themselves. (For the record: this does work.)

    My goal, of course, is to help people reach the point that they can program games on their own, without relying on me, or Emanuele, or anyone else. This is why I put such heavy emphasis on understanding what’s going on.

    Yes, people can copy the code from a tutorial like this, but that doesn’t mean they understand what’s going on. And as it happens, this is one of the more common reasons for someone to post on Kongregate asking for help: they don’t understand the code they’ve got, so they don’t know how to go about expanding on it.

    One last thing: note that I did not once attack your character in this post. I addressed your arguments, but I did not insinuate anything about your programming skill, intelligence, or usefulness to humanity. I would appreciate the same from you, even if you don’t like me or agree with me.

< >