Building on the avoiding game (Avoiding game Pt.2) at

Building on the avoiding game (Avoiding game Pt.2)

Published by Tazzydevil XIII on Jul 17th, 2007 in Flash, Games, Tutorials with 81 Comments

The avoiding game tutorial series:
Part 1 Part 2 Part 3 Part 4 Part 5 Part 5b

Welcome to the first part of the second parts of the Avoiding game tutorial (Blimey, that’s a mouthful!) This tutorial will expand on the game you will have already made and will include lives, boundaries, coin pickups for score, improving the hittest on enemies, a new method of timing and general little tweaks. I’m still prepared to write a third tutorial based around this, so if there’re any things you’d like to implement in your game just comment below and I’ll see what I can do :)

Here’s what I now have after these additions:

Addition 1: A Menu Screen

Menu screen

A menu screen will stop players from being launched straight into the game, and can offer helpful gameplay information and other links and logos. To add one, simply highlight all your frames so far, then drag them across one frame. This should add a blank keyframe at the start. Now you can design your menu, it should have a play button of course, and our tutorials on buttons are here, and here. Make sure that you have a stop(); action on this frame, and that you change the buttons from part one to reflect the new frame positions.

Addition 2: Improved hitTest

Bad hittest

Currently, the game sees this as a collision because of the blue boundary boxes. Now, there are very complicated ways to get round this, but I have a way to make it considerably more accurate, easily!

Hit area

What you need to do is go into your enemy, create a new layer and draw a box that fits just inside it. Then convert this box to a movie clip, and give it the instance name of ‘hit’. Now for some modifications to the enemy’s Actions.

.hit

Yep, all you need to change is this.hitTest to this.hit.hitTest and your game’s collisions will be greatly improved!

Addition 3: Lives

Setting the number of lives

First of all go to your frame’s actions, and add lives=3; replacing 3 with however many lives you want to give your player. Then you need to make an edit to your enemy’s actions:

Enemy's actions

Here’s the update in text format:

if (this.hit.hitTest(_root.player)) {
if (_root.lives>=1) {
this._x = random(300);
this._y = random(-50);
speed = random(5)+1;
_root.lives -= 1;
} else if (_root.lives<=0) {
_root.gotoAndStop(3);
}
}

And now your game has a life system! (Why not add a box on the main game screen to show how many are left)

Addition 4: Quick bug fix
(Was edited into part one, here just in case)

Goto your gameover frame, and add Mouse.Show(); after stop();

This was edited into the last tutorial, but not into the source file, so anyone working off of that will have an invisible cursor on the gameover frame.

Addition 5: Boundaries

Boundary actions

Quite a few commenters asked for this too, how to set boundaries where your player cannot move. These actions will stop your player from escaping the screen (On a 300×300 px stage, replace the x> with your stage width and y> with your stage height if necessary) Of course, these need not simply be for your stage boundaries, you could have a stats bar with a boundary to keep enemies going above or below it.

Simply add these to the player within the braces:

if (this._x>=300) {
this._x = 300;
} else if (this._x<=0) {
this._x = 0;
}
if (this._y>=300) {
this._y = 300;
} else if (this._y<=0) {
this._y = 0;
}

Addition 6: Coins and scorebox

Draw and convert your 'coin'

At this stage, making sure the registration point is the centre. Once this is done, return to your frame actions and add: score=0; to the list of variables.

Coin actions

Here are the actions required to make your coin work. It is randomly placed on it’s first load, then everytime the player collects a coin the coin will re-choose a position and give the player 1 point. The actions are:

onClipEvent (load) {
this._x = random(300);
this._y = random(300);
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.player)) {
_root.score += 1;
this._x = random(300);
this._y = random(300);
}
}

All that remains for you to do now is add a box to show score on your playing screen and your gameover screen and your coins are implemented!

Gameover box

Addition the 7th: New timing system! (woo)

Declare new interval within an onLoad statement. (On your player)

Clock function (They still do Actionsript all on one frame, it's tidier, but harder learn from.) (Main Frame)

Cleat the timing interval (Gameover frame)

And there you have it! Try out different combinations of additions on your game to see what you can create/

Source code: here.

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

-->

81 Responses to “Building on the avoiding game (Avoiding game Pt.2)”

Aaron Says:
July 18th, 2008 at 7:10 am
NICE.

Can’t wait to make some updates!

I’m starting from the ground up this time though, new concept, and a couple twists on certain things. I’ll post it when it’s done XD
Tazzydevil XIII Says:
July 18th, 2008 at 3:30 pm
Awesome!

I look forward to it!
How to make a simple Avoiding game | FrozenHaddock Says:
July 18th, 2008 at 3:35 pm
[...] How to make a simple Avoiding game Published by Tazzydevil XIII on Jun 4th, 2007 in Engines, Flash, Game Concepts, Games, Tutorials with 157 Comments Update: Part 2 released! [...]
Aaron Says:
July 20th, 2008 at 1:19 am
Ok. Couple questions. I have messed with it and messed with it and ALMOST got it to work.

1. I want the “coin” to move downwards like the enemies do too. I got it to do it and everything works, except when it goes of the screen it never comes back haha.

2. I think I know how to make a “life” coin. But I only want it to appear maybe once every 60 seconds or so. Would that be treated like how you make the levels change?
Tazzydevil XIII Says:
July 20th, 2008 at 1:29 am
For the coin thing, you should pretty much be able to lift the code off of the enemy:

onClipEvent (load) {
this._x = random(300);//sets the horizontal position randomly
this._y = random(-50);//sets the y position above the stage
speed = random(5)+1;//sets the speed randomly
}
onClipEvent (enterFrame) {
this._y += speed;//moves the enemy downwards
if (this.hitTest(_root.player)) {
_root.score+=1; //etc, etc.
this._x = random(300);//randomly set the x, y and speed again.
this._y = random(-50);
speed = random(5)+1;
}
if (this._y>=310) {//if the player reaches 10 pixels below the stage
this._x = random(300);//randomly set the x, y and speed again.
this._y = random(-50);
speed = random(5)+1;
}
}

As for appearing every 60 seconds or so, You -could- use this method of timing, or change:

if(this._y>=310){

To a reaaally high number… it’s a lot easier :)
Aaron Says:
July 20th, 2008 at 2:59 am
2 issues.

1. I can’t figure out how to get the ‘coin’ to NOT automatically re-spawn after pick up. (if it is missed the AS if(this._y>=1000){ works.)

2. If there ‘coin’ were to be stationary how would I go about re-spawn time?
Aaron Says:
July 20th, 2008 at 3:35 am
hahahaha

okok.

so i was messing around with the script and found some pretty funny things. I want my character to constantly be pulled backwards. Just slowly, or to where I can adjust it. I tried just dropping

this._y += speed;

but I can’t move forward, the player just disappears. any ideas?
Tazzydevil XIII Says:
July 20th, 2008 at 5:35 pm
To NOT respawn eh? Is that, not at all or for a while? Cause, for a while you could again just put it high above the screen with a large negative number for it’s new position.

Hmm, for a respawning coin I would do the following: (Oh, I am totally putting this in part 3 by the way)

Go into your coin movie clip, and insert a blank keyframe after your coin frame. (add a stop(); to your first frame) Then, add as many frames needed for the time to be suitable, (24fps, 24 frames = 1 second) then add another keyframe at the end. On THIS keyframe, add the following:

_y=random(-50);
_x=random(400);
speed=random(5);
gotoAndStop(1);

Then come out of your movieclip and go into the actions. Where it tests if it’s hit the player, remove the x/y/speed settings and simply put:

this.play();

This should have the appearance of the coin disappearing when actually it’s there, but the movie clip shows nothing. Once the clip reaches the end frame it’ll ‘reset’ the coin.

Now, I’m not 100% sure on the target paths of the stuff inside the movie clip, you might have to try _parent. or even give the coin an instance name and try _root.coin. Might work, just have a play around with it :)
Aaron Says:
July 22nd, 2008 at 8:05 am
Alright. I still can’t figure out how to make the coin appear every 60 seconds or so. See the thing is, it’s an extra life coin. And by the time you get to level two you have about 20 lives hahahaha. So i think rewarding a life every lvl would be a good addition. any ideas?
Tazzydevil XIII Says:
July 22nd, 2008 at 5:51 pm
I’d try an if statement inside the win statement on score to see if you get an extra life.

So like,

if(clock>=30){
if(score>=10){
lives+=1;
}
gotoAndStop(”nextlevel”);
}

That way the score coins play more of a part.
Aaron Says:
July 22nd, 2008 at 9:59 pm
maybe I should send it to you to show you how I have it set up.

The levels are on separate frames. And the code I have for switching is this :
onEnterFrame=function(){
if(score>=10){
gotoAndStop(3);

So obviously when you collect 10 ‘coins’ it will switch to level 2 and the difficulty will increase a bit. Not sure if this is the best way to do it but it works fine for me.

So I’ll try that code and see what happens. Might have to mess with it a bit.
Aaron Says:
July 22nd, 2008 at 11:41 pm
alright code works fine you gain a life every lvl.

can’t wait for an animation tutorial. I have been trying to do something with it but can never seem to get it to work right. any ideo on when part 3 might be posted?
Tazzydevil XIII Says:
July 22nd, 2008 at 11:46 pm
I’m going to be away for a week with intermittent PC use, so not for a while.

What’s your animation problem? I’m not great but I know the theory behind some techniques :)
Aaron Says:
July 23rd, 2008 at 1:38 am
Well, I made a shooter with death animation and tried to apply the same techniques to this current game. Basically a ‘death’ animation. A ‘coin’ animation. And a background animation…. Don’t I have to go into the MC and make a frame by frame type of thing, or tween it?
Tazzydevil XIII Says:
July 23rd, 2008 at 2:18 am
You should be able to yep, no problem.
Aaron Says:
July 23rd, 2008 at 8:45 am
I am just not sure which code to copy. The guy I learned from the code is all broken and stuff. I got it from frozen haddock.
Tazzydevil XIII Says:
July 23rd, 2008 at 9:04 am
What exactly is the problem?
Aaron Says:
July 23rd, 2008 at 11:38 pm
i just can’t apply it to my game. I am not sure if the code differs and it conflicts or if i’m not starting out right.

I edited it frame by frame for the ‘death sequence’ and in the first frame typed stop();

Then I added another frame and began the drawing and added this.death=1 or something like that( i forgot what it was) which is supposed to start the death sequence.

I’m not sure how to relate that to my player though so when it hits on of the enemies it goes to that sequence.
billy Says:
July 28th, 2008 at 7:54 pm
How could i have and enemy that moves upward instead of falling down when evr i try the enemy just spazes all over the screen.
Tazzydevil XIII Says:
July 28th, 2008 at 8:38 pm
I’m just adding this into pt. 3 of this tutorial series, It should be finished soon :)
Aaron Says:
August 3rd, 2008 at 6:51 pm
an news on part three?
Tazzydevil XIII Says:
August 3rd, 2008 at 8:58 pm
It’s a’coming :)

I’ve got variable adjustment of numbers of enemies, and directions of enemies so far, anything else you want to see?
Aaron Says:
August 3rd, 2008 at 10:42 pm
For the variable are you talking about something like for(i=1;i<=5;i++)?

Direction of enemies would be pretty cool. Maybe make a way to shoot (which i have been trying to figure out for some time now.)

Death animations…i dunno. I maybe can think of more later.

Would you mind taking a look at what I have made and maybe showing me how to get a few things to work?
Tazzydevil XIII Says:
August 3rd, 2008 at 11:25 pm
Yeah, you’ll have like a variable at the start of the frame like enemyNum=5;

Then the for loop, then you can add to enemyNum to increase the difficulty :)

Death animations, I can have a looksie.

And sure, send me an email at alternateaccount [at] frozenhaddock.co.uk
Aaron Says:
August 4th, 2008 at 3:10 am
alright i sent the file. I tried using a cross hair style of shooting but i couldn’t get it to work…..
Tazzydevil XIII Says:
August 4th, 2008 at 2:19 pm
Blimey, you added a lot! Nice work building on it yourself :)

If you check your email, I’ve sent an fla with a fixed first level and what did to get it working :)
Jmax Says:
August 4th, 2008 at 8:05 pm
Ok this is great but I have a few problems. I can send you the file by the way if you need it, but when I add the improved hitTest, my character does not die when he hits the enemy? This also stops me using the lives thing correctly. But I have the coins and I love em. Please tell me you know whats wrong :D
Jmax Says:
August 4th, 2008 at 8:12 pm
Oh yeah. And I know this is kind of a stupid question, but how do you make levels?
Jmax Says:
August 4th, 2008 at 8:12 pm
And add music? Sorry. As soon as I clicked “Submit Comment” I remembered this.
Aaron Says:
August 4th, 2008 at 10:43 pm
Awesome. I have it to where when you hit the enemy it disappears and resets. Still struggling with the death animation. Do I have to attach it to the “hit” in stead of the enemy?
Aaron Says:
August 4th, 2008 at 10:59 pm
Since you have sent that back to me I have added SEVERAL new elements in the game play. The only thing I am missing before “showing it” is some sort of animation…like a transition in the background when changing lvls. And a hittest animation. since you still have the file could we do like an instant message thing for a step by step?
Tazzydevil XIII Says:
August 4th, 2008 at 11:05 pm
Sure, I only use Skype though :S

If you have it, point it t’ward tdxiiifrozenhaddock :)
Aaron Says:
August 4th, 2008 at 11:59 pm
alright there is a problem I am having. I forgot you used skype.

after the game over screen when you hit menu or again…. the cursor burns itself to the frame and therefore won’t allow to ‘kill’ the enemies. could you look at that? I tried several things.
Tazzydevil XIII Says:
August 5th, 2008 at 2:31 am
That, I don’t have a clue.

I’ve tried some things to no avail, I’ll try some more tomorrow afternoon when I get back.

Meanwhile, Skype’s not all that scary you know!
Jmax Says:
August 5th, 2008 at 10:54 am
Tazzydevil XII You didn’t answer me lol XD
Tazzydevil XIII Says:
August 5th, 2008 at 4:46 pm
Woops, sorry!!

Of course I’ll take a look if you send it to me, as for levels and sounds, they’ll be covered in the 3rd/4th part. Or, you could take to the forums and ask the others who’re developing this sorta game too :)
Jmax Says:
August 5th, 2008 at 5:16 pm
Right I’ve sent it.
Tazzydevil XIII Says:
August 6th, 2008 at 12:15 am
And I’ve fixed it :)

Good luck with your game!
Aaron Says:
August 6th, 2008 at 7:52 am
I fixed the cursor problem.

On the game over screen I had to use mouse.show and in the AS for the cursor deleted this.swapDepths(9999); not QUITE sure what that even was for but it works like a charm now.

Also I have some basic animations on all the sprites. Some level transitioning, which I still can’t figure out how to apply the tween teqnuqie to a game. I just do animations frame by frame, ugh.

Can’t wait to post this. Kudos to Tazzy for all the help. Couldn’t have done it withoutcha. :)
Jmax Says:
August 6th, 2008 at 4:15 pm
Thanks Tazzydevil. I’m making it better with a menu and such. Including better graphics! Thanks so much for what you have done :D
Tazzydevil XIII Says:
August 6th, 2008 at 6:13 pm
:)

Jus’ remember to post your games on the forum, and email them me, I could do a ‘What you can do with an avoiding game’ post!
Jmax Says:
August 6th, 2008 at 9:40 pm
Will do. I’ve pretty much finished the graphics part. Just need to… ‘tweak’ it a bit.
Aaron Says:
August 8th, 2008 at 4:43 am
game has been posted on the forum!!

it’s still not finished. but i wanted to see what some people though. I will be changing the style of shooting for sure.
lloyd Diggins Says:
August 25th, 2008 at 8:48 pm
Hi, just curious as to the smilies…i’ve created my own images instead of the smilies…The enemy is a fireball….is there a way i can animate the fireball???? I can create two or three image of the fireball and have the flame change a couple times….just dont know if i can create it to make it appear animated???
egdcltd Says:
August 27th, 2008 at 2:47 pm
By adding key frames to the enemy movieclip, and using a different image for each keyframe, the enemy will show those images in succession. The rapidity of the image changes will be determined by the number of blank frames between the keyframes.
help plz Says:
September 4th, 2008 at 12:45 am
how do you make the score box?
help plz Says:
September 4th, 2008 at 12:51 am
how does the source code work?
Mushyrulez Says:
September 4th, 2008 at 1:36 am
go to part 1…
Avoiding Game pt.5 at Says:
September 16th, 2008 at 6:55 pm
[...] I have gradually shown you how to create an avoid and collect game. Make sure to read parts 1, 2, 3 and 4 before reading this, it’ll all make much more sense that [...]
Nakeman Says:
September 25th, 2008 at 3:04 pm
I need guide for making walls. Haven’t find working guide yet.
Tazzydevil XIII Says:
September 25th, 2008 at 5:23 pm
The method outlined in the post above should work, if it’s not I’d check your values.
AS3: Avoiding game part 3 at Says:
October 10th, 2008 at 7:00 pm
[...] with No Comments That’s right, part three of MichaelJWilliams’s AS3 translation of the avoiding game tutorial series has been released (I have to say, I like your style Michael, Once an upgrade [...]
Adding more to the avoiding game (Avoiding game Pt 4) at Says:
October 10th, 2008 at 7:20 pm
[...] Sep 6th, 2007 in Flash, Games, Tutorials with 5 Comments The avoiding game tutorial series: Part 1 Part 2 Part 3 Part 4 Part 5 Part [...]
Advancing the avoiding game (Avoiding game Pt.3) at Says:
October 10th, 2008 at 7:21 pm
[...] 18th, 2007 in Flash, Games, Tutorials with 16 Comments The avoiding game tutorial series: Part 1 Part 2 Part 3 Part 4 Part 5 Part [...]
Bob Says:
November 8th, 2008 at 5:28 pm
hey, I’m having trouble- when I make the menu, the hittest with the smiley face and skull never works! A little help here?
Thanks
PS- this is my first post
PoisonSky Says:
November 8th, 2008 at 5:42 pm
Can I just ask 4 your help one more time (for now anyway)? How do you make another type of enemy which always comes from below and travels upwards (I am very very new to flash)?
Ben Says:
November 9th, 2008 at 6:49 pm
Is there a way for me to make other items (EG…Silver skull) that will give you two points?
Tazzydevil XIII Says:
November 9th, 2008 at 8:08 pm
@PoisonSky

You can do that from what I’ve given here, cut and chop some stuff away ;)

@Ben

I’m not sure what you mean by your first post, but for your second you could simply copy the current golden skull, and change the actions a teeny tiny bit :)
Will Says:
November 11th, 2008 at 6:54 pm
I cannot download the sorce code for this section:
The following link does not work:

http://frozenhaddock.co.uk/tutfiles/avoidingamept2.fla
Tazzydevil XIII Says:
November 11th, 2008 at 7:55 pm
Eep, it should be avoidinggamept2.fla

ingGame XD

I’ll fix it :)
PoisonSky Says:
November 12th, 2008 at 7:23 pm
So er, how do you add a thingy to show how many lives are left? Go to the var input box and type “enemy”? Or do you type “lives”? Or something completely different?
Tazzydevil XIII Says:
November 12th, 2008 at 10:50 pm
A var input box with lives should do fine :)
Will Says:
November 17th, 2008 at 4:53 am
I tried to build my own project based on the concepts that I learned in this tutorial. However, I cannot get the “improved hit test” to work, the hit detection failed. I appreciate if somebody can take a look at my code:

http://www.ece.ubc.ca/~williamm/circle2.zip
Tazzydevil XIII Says:
November 17th, 2008 at 4:59 pm
Ahh, I see what you’ve done :)

First off, you’ve given each enemy a ‘hit’ area, instead of just giving the player one. This is perfectly acceptable, but does make things a little long winded ;)

The problem that’s stopping your hittest from working, is whilst you’ve placed a hit movieclip within your enemies, and named it, you haven’t given it the appropriate instance name it requires, ‘hit’. To fix this, just enter an enemy, select the hit movieclip and open the properties bar. Locate the ‘Instance name’ box and enter ‘hit’ exactly as it appears within the quotes, leaving the quotes out :)

Good luck!
Sally Says:
November 18th, 2008 at 5:30 pm
Tazzydevil: You ROCK. This was the best flash tutorial I’ve ever studied. I learned a lot and everything worked. Thank you so much!
Will Says:
November 19th, 2008 at 6:28 am
Thanks for the help. It will take me some time to figure this out myself!! Much appreciated.
Tazzydevil XIII Says:
November 19th, 2008 at 8:10 pm
Wow, thanks!

:)
PoisonSky Says:
November 21st, 2008 at 7:19 pm
About the hittest - will it work with multiple enemies?
PoisonSky Says:
November 21st, 2008 at 7:20 pm
(Sorry about the typo)

I mean will it work if you draw several boxes?
Tazzydevil XIII Says:
November 21st, 2008 at 8:53 pm
It’ll only work with multiple boxes if you name them hit1, hit2 etc, and test against all of them :)

You can use a for loop to handily run through several to test against though, so make sure to check out the script which runs through enemy actions once they’re duplicated :) That should help you :)
PoisonSky Says:
November 21st, 2008 at 10:46 pm
Um OK but I am still actually very new to flash and ActionScript - so do you have any idea what that might be?
Inferno123 Says:
December 3rd, 2008 at 7:41 pm
…how can you make it so that getting a score of 10 will increase your lives by one?…
………and then reset the score to 0 to start again……
PoisonSky Says:
December 4th, 2008 at 11:17 am
if (score>=10){
score = 0
lives = lives + 1
}

or something along those lines anyway :P
T-z Says:
December 17th, 2008 at 4:16 pm
is there any way to improve the hit test on the player like you can with the enemy?
Tazzydevil XIII Says:
December 17th, 2008 at 5:54 pm
If you just do the same thing with ‘hit2′ and this.hit2.hittest(enemy.hit);

That should do it! :)
Jay the master of the universe only you mortals just dont know it yet Says:
December 21st, 2008 at 9:56 pm
TazzyDevil, I made a simple one called, SPIKE, and i have use all of ur guides up to the point when you stop using pictures, seeing as i completely cant understand code. I have a plan for a good avoider, which is still sort of simple, and is based on the one I’ve already made. It has a safe zone where u lose points, and enemies come from bottom and top only. the closer u get to bottom or top ur points go up. will also have bones coins and power ups that either slow down time or give u another life. would this be possible? If you can post an email or summit where i could send you the plans/the one I’ve already made, please do! The only things I’ve made on flash are an animation series called O-Zone. Long message. Stopping now. Sorry.. :S
Gardengnomes Says:
January 4th, 2009 at 5:30 am
hey i dont get the better hit test thing.. makes no sense :( culdu help ? :) thanks
Tazzydevil XIII Says:
January 4th, 2009 at 11:18 am
Sure :)

Flash goes by the bounding box to judge whether two movie clips have hit each other. Therefore, a lot of the time things will not -look- as if they are in contact, but Flash will return that they are, and act accordingly.

This method of making the hittest better is a little crude, but it works :)

Basically, you need to go inside the movie clip you’re testing that has boundary box issues (In this case, the player) and create a smaller, rectangular movie clip that will fit as closely inside it as possible to use as the more accurate ‘Boundary Box’

So giving this smaller rectangular movie clip the instance name ‘hit’, and changing player.hitTest(otherMovieClip) to player.hit.hitTest(otherMovieClip) will check the rectangle instead of the player’s actual boundary box.

Hope I helped :)
Gardengnomes Says:
January 4th, 2009 at 3:54 pm
i changed it to hit.hitTest but the player wont die :(
Gardengnomes Says:
January 4th, 2009 at 8:58 pm
could u check out my game for me?
Tazzydevil XIII Says:
January 5th, 2009 at 8:01 am
I’m sure I can do if you send it over alternateaccount[AT]frozenhaddock.co.uk :)