Tutorial requests. Actionscript 3 - Real bitmap paint.
Nov 02

Hello. It was some time since I wrote a tutorial, mostly because I am to lazy to write something. But now I decided to force me to write one. This tutorial will be about creating levels to the jet pack game and some other stuff. First of, you should have read the other tutorials, and they’re here:

But it isn’t necessary to read them, but it could be easier to follow this tutorial if you did.


The stuff thats going to be added now is;

  • Scores
  • Health
  • Levels

1. Scores

Adding scores is pretty easy, the only thing we need to do is to create a score MovieClip, and add some code.
But first of, we could create a text field that shows the score. Select the text tool, by pressing T or just clicking on the T symbol in flash, then just draw a text field to the upper corner of the stage. Adjust the properties of the text field so they look like this;

Now we have a fancy text field there. But still it can’t do nothing by itself. We need to add some code to the game.
First off, we need a variable that contains the value of the score, so add this line to the very beginning of the whole code;

?View Code ACTIONSCRIPT
var score:Number=new Number(0);

This creates a variable named score, and it may only contain a number, thats why the :Number is there. By declaring variables this way, you make your games slightly faster.

After this, we could add a function that updates the score text field.
A function is a block of code that could be run once by calling it, you’ll see how they work in this tutorial if you don’t really know what they are.

But, what you need to do is to add this:

?View Code ACTIONSCRIPT
function updateScore(){
	scoretxt.text="Score: "+score;
}

To the way bottom of all of the code.

This is just a simple function, and you can probably see what it does. It goes to the score text field, and accesses its text property, and then changes it to that text. But, if you try to run the game, you see that nothing has changed, yet. Thats because the function hasn’t been run.

To run this code, you need to call it as I wrote before.

?View Code ACTIONSCRIPT
updateScore();

If you add that row of code to the bottom of the whole code, and then run it, the score text field magically shows how many points you have :). Simple, simple.

Now we’ll add some coins or something else the jetpack guy could pick up. First off, draw that thing you want the jetpack man to pick up. I drew a great looking coin.

Then select the shape, right click on it, and click Convert to symbol…
The settings for it should look like this:

Lets add functionality to the coin now. If you have followed the previous tutorials, you should have a ground MC and man MC. If you don’t, you should go back to the other tutorials and follow them, or just download the sources if you’re lazy.

When you have those MC’s there, and the coin MC too, you should give the coin MC a instance name. Lets name it coin0, like this;

You do this by first selecting the coin movieclip, and then just look at the properties window for it.
While were on this, you can add some more coins, but, remember to name them coin1, coin2 and so on.
Oh, and to add these other coins, you can open the library, which should be located to the right of the screen, if it isn’t there just click window>Library. Then the library is there. Search for the coin in the library, and when you see it, just drag it from the library out to the stage.

When you’re with this, we’ll be adding some code to this. You need to open the code window were all the other code is, and then, we could create a neat function for checking if the jet pack man is colliding with one of the coins.
So, type in this after the other code:

?View Code ACTIONSCRIPT
var i:Number = new Number(0);
var dX:Number = new Number();
var dY:Number = new Number();
var len:Number = new Number();
function checkForCoins() {
	i = 0;
	while (_root["coin"+i] != undefined) {
		dX = _root["coin"+i]._x-fly._x;
		dY = _root["coin"+i]._y-(fly._y-fly._height/2);
		len = Math.sqrt(dX*dX+dY*dY);
		if (len<(fly._width/2+_root["coin"+i]._width/2)) {
			_root["coin"+i]._x = -1999;
			score++;
			updateScore();
		}
		i++;
	}
}

This code actually checks for collisions with the man and coins, completely without any hitTesting. Thats neat, isn’t it? :).
Oh, and to make this code work, you need to add this code:

?View Code ACTIONSCRIPT
	checkForCoins();

After this line:

?View Code ACTIONSCRIPT
fly.onEnterFrame = function() {

Now you have some coins you can pick up.


But if it doesn’t work, just download the source thats located at the bottom of this page.

2. Health

The second thing now is to add a health system or something like that.
I’m going to explain fast how to do this.
Draw a health bar next to the score text field. Select it, right click and Convert to symbol…
Then the properties for it should be like this:

Give it the instance name of healthbar.

Then, we could add spikes it could hurt itself on. Draw some spikes on the ground somewhere.

Select the spikes, and convert it into a MC.

Give it the instance name spikes.
Now we have spikes. Lets add a health variable and a health function.

Add these lines to the beginning of all the code;

?View Code ACTIONSCRIPT
var health:Number=new Number(100);
var maxhealth:Number=new Number(100);

Now we have a max health and health variable. Thats good:)

Well, lets add a function that updates the health bar. Add this to the end of all the code:

?View Code ACTIONSCRIPT
function updateHealth(){
	healthbar._xscale=health/maxhealth*100;
}

We need to see if the jet pack man is colliding with the spikes, so add this code into the onEnterFrame block, after checkForCoins();

?View Code ACTIONSCRIPT
if(spikes.hitTest(this._x,this._y,true)||spikes.hitTest(this._x-(this._width/2),this._y-(this._height/2),true)||spikes.hitTest(this._x+(this._width/2),this._y-(this._height/2),true)){
		health-=1;
		updateHealth();
	}

This piece of code just looks if the jet pack man is colliding with the spikes, and if it is, it takes away a bit of the health, and calls updateHealth();.
We could add a game over-screen to it too. While you are at the main stage, press F7, or click insert>Timeline>blank keyframe. Then the stage should be… blank. Whilst having the frame selected, open the properties window, and type in gameover into the frame name window:

After that, open the actions window there, and type in

?View Code ACTIONSCRIPT
stop();
btn.onRelease=function(){
gotoAndStop("game");
}

into it.
Now we need a play again button. Draw one:

Select it, right click, and then edit the settings so its like this:

Give it the instance name btn.

Now, on the main timeline, click on frame 1 to go back to the game. When you have the whole frame selected, open the properties window, and type in game into the instance name window:

Then, open up the code window again, and type in this on to the first row

?View Code ACTIONSCRIPT
stop();

And then, scroll down to the updateHealth-function. And into that, after

?View Code ACTIONSCRIPT
healthbar._xscale=health/maxhealth*100;

type in this

?View Code ACTIONSCRIPT
if(health<0){
gotoAndStop("gameover");
}

Now it has a simple life system too. Yay.

3. Levels
How could we add levels?
I will fix this soon.

Source for Jetpack game Part 3 - levels not working.
There’s the source ayways.

Share this:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BarraPunto
  • co.mments
  • Fleck
  • Furl
  • feedmelinks
  • Live
  • Spurl
  • StumbleUpon

written by torskmunken \\ tags: , , , , , , , ,

8 Responses to “Jetpack game - Part 3”

  1. brart Says:

    bad hittest, I hope you will fix that as first. Tip, use a hittest with 8 points, the corners and points between them.

    try to use a different graphic setting. U draw yourself, and it looks childish and un profesionel try making the look simpler.
    For example: Emanuele and his graphics looks better because they don’t have any advanced shape.

    How about making a OOP version to… I like OOP…. :P

    Please add more explanation because your doing something very basics without any comment or explanation.

    But not everything needs improvement, I like your writing style and there is a good number of pictures in it.

    Brart

  2. torskmunken Says:

    Ok. But this is just a thing, that I did… I myself don’t use hitTests at all anymore, and I use classes and as3. And I think I’m going to start to make tutorials about what I know about AS3 soon.

  3. Oliver Says:

    Download source for part 3 missing!

  4. Zuhair Says:

    Nice one mate! Nice to see that this site is still alive. I love it!

  5. Helliar Says:

    It doesnt work for me…

  6. kim Says:

    poo

  7. Penorkid Says:

    action script missing :’( now i get an F in my class </3

  8. Corey Says:

    how can u make it so when the guy moves out of the space it followes him so the guy is always in the middle?

    This is so fustrating!

Leave a Reply