Build a game like Sproing with Flash

This tutorial is guest blogged by TechnoMono and I am happy I got the permission to post it on my blog. TechnoMono hosts more Flash and Gimp tutorials, so don’t forget to take a look to this blog.

We can define Sproing as a “throw a ball in some way” game, and the tutorial is very well explained. Let’s see it:

—————————

Sproing is a very simple and intuitive Flash game. It’s also rather addictive. The object of the game is to destroy green orbs by hitting them hard enough with a blue orb which is connected to the mouse via a spring force. You’ll have to play the game to see what I mean. In this tutorial I’m going to show you how to make the blue orb spring to the mouse. Obviously, I wont show you how to make the complete game. The demo below shows exactly what we’ll be making:

We’ll be making the demo with ActionScript 3.0, which means you’ll need Flash CS3, Flex Builder or the free Flex SDK. However, I’ll explain how to use the code specifically with Flash CS3. I assume you have at least a basic working knowledge of ActionScript 3.0. If you have experience with ActionScript 2.0, then you shouldn’t find it too difficult to follow through.

Before I begin explaining the code step-by-step, I’d like you to get the demo up and running yourself. The first step is to create a new Flash document, with which we’ll associate the program’s main class. Open up Flash and create a new document (File > New > ActionScript 3.0). Save this .fla file as ‘SproingDemo.fla’ (File > Save As). Bring up the Properties Panel (CTRL+F3), and under Document class, enter ‘SproingDemo’ (the name of the program’s main class). If a warning dialog appears (as shown in the image below), just click OK.

Sproing

Set the frame rate to 30fps, and leave the other document properties at their defaults.

Sproing

That’s all we need to do with the .fla file. Now we will create the main class. This is as simple as saving the class definition in a file called ‘SproingDemo.as’ (note the .as extension). Here’s the main class in it’s entirety:

Note: The program’s main class definition must be placed in a text file named after the main class, with a .as extension.

An additional class is used to represent the orb which is sprung to the mouse. Save this class in a file called ‘Orb.as’. Here it is:

You should now have three files: SproingDemo.fla, SproingDemo.as and Orb.as (all placed in the same directory). Open SproingDemo.fla and press CTRL+ENTER to see the demo in action (or Control > Test Movie). Assuming all went well, let’s begin exploring the code (if you encountered problems, make sure you followed the above instructions exactly).

The main class

We’ll be using several built-in classes in this program, so we must import them using the import directive:

In the demo, you’ll notice there are two orbs. The small orb is used to represent the position of the mouse. This orb is created as an instance of the Shape class, which is perfect for such a simple graphical object. I’ve given the large orb a class of it’s own: Orb, a subclass of Shape. Since the large orb is sprung to the mouse, we need to keep track of it’s velocity (it’s speed along the x and y axes). So to the Orb class, I have added two instance variables, vx and vy. Both of which are of type Number (there’ll need to hold fractional values).

The main class extends the Sprite class, so we need to import that. For animation, we’ll use the Event.ENTER_FRAME event, which is why we need the Event class. Finally, the Mouse class is used to hide the mouse pointer.

The main class declares five instance variables. orb1 and orb2 hold references to the small and large orb, respectively. lineCanvas holds a reference to a Shape object in which we’ll draw a line between the two orbs. spring is used to determine the strength of the spring force between the two orbs. The greater this value, the greater the force. To force the large orb to settle down, damping is applied to its velocity (you can think of damping as a kind of frictional force, which works against the spring force).

Following the five instance variables is the main class’s constructor, which simply invokes init().

init() takes care of initializing the program. It creates the small orb by assigning a Shape object to orb1, and then invokes drawing methods on the Graphics instance of the Shape object. The first two methods, lineStyle() and beginFill(), set the color of the orb’s stroke and fill, as well as the thickness of the stroke. Feel free to change the arguments passed to these methods to change the appearance of the small orb. The large orb is then created, by assigning an instance of the Orb class to orb2, passing in arguments to the set the orb’s appearance (I’ll explain the Orb class shortly).

The two orbs are connected visually by a line, which is drawn to lineCanvas. So a Shape object is assigned to lineCanvas.

Now that the three graphical elements of the program have been created, they are added to the display list so that they can be seen on screen.

The large orb needs to be below both the small orb and the connecting line, so it’s added first, followed by the small orb and then the connecting line (which appears on top).

enterFrameListener() registers with the main class instance to receive Event.ENTER_FRAME notifications, so that it is executed repeatedly, each time the screen is about to be updated. It is in this listener that we place the animation code.

Finally, the mouse pointer is hidden by invoking the hide() method of the Mouse class.

The enterFrameListener() method is the heart of the program. It is executed on every frame. First it sets the small orb’s position equal to the mouse’s position, as retrieved from the DisplayObject class’s instance variables, mouseX and mouseY. This causes the small orb to follow the mouse. Next, the large orb is moved a little closer to the small orb, as determined by a simple spring formula. The difference between the orbs positions along both axes is multiplied by spring. The resulting value is the amount by which the large orb should be accelerated towards the small orb on this frame. As the distance between the two orbs decreases, so does the acceleration. However, the large orb is moving at greatest speed when it has reached the small orb, which it passes, causing the spring force to pull it back towards the small orb. The acceleration along the x and y axes is applied by adding to vx and vy, respectively. Damping is achieved by applying damping to vx and vy, which reduces the orbs velocity on every frame. The large orb’s position is finally updated by adding vx and vy to the orb’s x and y properties, respectively.

Last but not least, drawLine() is invoked. It draws a line between the two orbs.

The Orb class

This class is very simple. It consists of just three instance variables. We’ve met both vx and vy. radius simply holds the orbs radius. Although radius is not used in this program, it can be convenient to have access to this property, such as when performing collision detection. The constructor has four parameters, all of which are optional (since default values are supplied). However, if you supply a value for a parameter, you must supply values for all preceding parameters. These parameters are used to set the orb’s radius, fill color, stroke thickness, and stroke color. The constructor sets radius equal to the parameter with the same name. The radius variable and radius parameter are disambiguated by using the this keyword (which refers to the current object). A circle is then drawn in the center of the Orb object using drawCircle().

Notice that radius, vx, and vy are defined using the internal access-control modifier: this is to make them accessible within the main class. That’s all there is to it.

I hope you’ve enjoyed working through this tutorial, and I’m sure you’ll take the program a lot further. If you have any questions, leave a comment.

—————————

That’s all. I included the source code as of the movie I made following this tutorial. Remember to visit TechnoMono because it’s a tutorial blog that you cannot miss.

  • Awesome tutorial! I really enjoyed it! :D

    You should try giving tutorials about creating games most people would like to create, such as a Stunt Dirt Bike type of game, where you control the balance of the bike as you run over obstacles. That would be awesome.

  • I’m glad AS 3 is starting to be covered.

  • Wow thanks for the link to Sproing! Sproing was written in AS2 (without proper classes), so this tutorial will be especially relevant for me developing Sproing 2 ;)

  • Jack Hopkins

    Hey, awesome tut,
    I made a game like this and put it on newgrounds
    (search ‘re-stretched’)

    Well done!

  • ben

    hmmmmmmmmm……… i wish i was making a game…

  • Hawdon

    …this might sound a little stuppid, but is flash CS3 and Flash 8 profesional the same thing? I have lash 8 and I cant get this to work…

  • EagleVision

    Nope. They are different…And CS3 has Actionscript 3.0, wich is the one he is using.

    I wish I had CS3, I have the same as you. Bye :)

    ~EagleVision

  • wobalisk

    I cant get it to work with flex at all I save sproingDemo.as and Orb.as and make an application called sproing.mxml which does :

    I compile it normally and then when I look at the .swf file I get… nothing just a blank application…

  • wobalisk

    I cant get it to work with flex at all I save sproingDemo.as and Orb.as and make an application called sproing.mxml which does :

    I compile it normally and then when I look at the .swf file I get… nothing just a blank application…

  • Pingback: Triqui’s Picks #11 : Emanuele Feronato - italian geek and PROgrammer()

  • Pingback: Ninja Robot Dinosaur » Blog Archive » AS3 Boot Camp – Learn to program Flash games in 30 days()

  • This ia also a good game

  • Dong Nguyen Quoc

    Hope you don’t mind if I move it into Construct 2 :)