AS3 Flash game creation tutorial – part 5: gameplay
Once introduced the score in AS3 Flash game creation tutorial – part 4: score, it’s time to create some gameplay.
The idea is to create a game like Collectabubble, just a bit more polished and with some more features.
The first thing to introduce is the rotating bar, a movieclip called bar with bar.as class.
This is the code of bar.as
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 | package {
import flash.display.Sprite;
import flash.events.Event;
public class bar extends Sprite {
// variables used in this class
private var point_x:int;
private var point_y:int;
// precision is the number of points I am going to calculate
// on hero's circumference
private var precision:int = 36;
// calculating once for all 2*PI
private var twopi: Number = Math.PI*2;
// bar rotation speed
public var rotspeed = 0.2;
// main function
public function bar() {
// checking for collisions at every frame
this.x = 250;
this.y = 250;
addEventListener(Event.ENTER_FRAME, check_collisions);
}
private function check_collisions(e:Event) {
rotation += rotspeed;
for (var i=0; i<precision; i++) {
// checking for collisions between the hero and the bar
point_x = as3circle(root).circle_hero.x + 25 * Math.cos(twopi*i/precision);
point_y = as3circle(root).circle_hero.y - 25 * Math.sin(twopi*i/precision);
if (this.hitTestPoint(point_x, point_y, true)) {
// in case of collision, reset the hero, subtract 2 points to the score and slow down the bar
as3circle(root).circle_hero.init();
as3circle(root).add_score(-2);
adjust_speed(-0.1);
}
}
}
public function adjust_speed(val) {
rotspeed+=val;
if (rotspeed<0.2) {
rotspeed = 0.2;
}
}
}
} |
As you can see, it’s very similar to coin.as because it mainly does the same thing: checking for collision between the bar itself and the hero.
The only different thing the rotating bar does is… to rotate.
At line 14 you can find the variable that handles the rotation speed and at line 23 bar rotation is updated.
Once I detect a collision, I don’t just reset hero (line 30) but I also subtract two points to the score (line 31) and slow down the bar (line 32).
How to slow down the bar? With adjust_speed function at lines 36-41.
If the bar slows down when the hero hits it, it must speed up when the hero picks up a coin.
That’s why coin.as becomes
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 | package {
import flash.display.Sprite;
import flash.events.Event;
public class coin extends Sprite {
// variables used in this class
private var dist_x:int;
private var dist_y:int;
private var distance:int;
// main function
public function coin() {
// calling place_coin function.
// this function randomly places the coin in the field
place_coin();
// checking for collisions at every frame
addEventListener(Event.ENTER_FRAME, check_collisions);
}
private function check_collisions(e:Event) {
// determining the distance between the hero and the coin
// notice how do I refer the hero
dist_x = x - as3circle(root).circle_hero.x;
dist_y = y - as3circle(root).circle_hero.y;
distance = dist_x*dist_x+dist_y*dist_y;
// 1809 = (hero radius + coin radius)^2
// this way I don't have to perform a square root to distance
if (distance < 1089) {
// if the hero picks up a coin, then move it elsewhere, add one point to the score and speed up the bar
as3circle(root).add_score(1);
as3circle(root).rotating_bar.adjust_speed(0.2);
place_coin();
}
}
private function place_coin() {
x = Math.floor(Math.random()*400)+50;
y = Math.floor(Math.random()*400)+50;
}
}
} |
At line 28 I am increasing bar rotation speed at every coin collected.
Finally, it’s useless to comment how the bar has been added to the main class, ascircle.as:
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 | package {
import flash.display.Sprite;
import flash.events.Event;
public class as3circle extends Sprite {
public var keyboard_input:keys;
public var circle_hero = new circle;
public var your_score = new score;
public var level_wall = new wall;
public var rotating_bar = new bar;
public var my_score = 0;
public var number_of_coins = 4;
public function as3circle() {
for (var i=1; i<=number_of_coins; i++) {
var ingame_coin = new coin;
addChild(ingame_coin);
}
addChild(your_score);
addChild(circle_hero);
addChild(rotating_bar);
keyboard_input = new keys(this);
addChild(level_wall);
stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
}
public function on_enter_frame(event:Event) {
if (keyboard_input.is_left()) {
circle_hero.apply_force(-1,0);
}
if (keyboard_input.is_right()) {
circle_hero.apply_force(1,0);
}
if (keyboard_input.is_up()) {
circle_hero.apply_force(0,-1);
}
if (keyboard_input.is_down()) {
circle_hero.apply_force(0,1);
}
}
public function add_score(points) {
my_score += points;
if (my_score<0) {
my_score = 0;
}
your_score.updatescore(my_score);
}
}
} |
Other classes remain unchanged.
This is the result…
How much did you score? In next step I’ll show you how to polish the gameplay with a timer.
They can be easily customized to meet the unique requirements of your project.















(8 votes, average: 4.75 out of 5)









This post has 10 comments
rolfrolfcopter
i got score 20 :D
SevereFlame
I’m just asking, what’s the point of putting the same thing you did in AS2 in AS3?
Bivis
Nice tutorial (and more… a very nice blog!)!
But for this tutorial, my sugestion is to substitute the line “as3circle(root).rotating_bar.adjust_speed(0.2);” (and others that call methods on a parent class) to a dispachEvent…
Its better for class if it will be used on another game.
Again… nice work!
Cya!
Frederik
It’s the point to teach you, how to code AS3
Art
I got 23!!!
RJ
“I’m just asking, what’s the point of putting the same thing you did in AS2 in AS3?”
“It’s the point to teach you, how to code AS3″
And I find it very useful
miff
I score 24! speed like hell ;) slowdown a little bit please.
And do you want publish some tutorial about Matrix in AS2? I search about this but i don’t have luck :(
Atarsh
Hey Imanuele,
I read your blog for over a year now I think, your’e doing a great job :) thanks.
One thing that does bother me is the current layout – the lists on the right side take up over half the page, which wasn’t so bad if it didn’t mean horizontal scroll on the code boxes – but it does.
Horizontal scroll working together with a box taller than the window (meaning you have to scroll down in order to scroll right, but then you can’t see the line you wanted to read in the first place…) is terribly, terribly uncomfortable. Hope you find a way to fix this, and keep up the good work with your contents.
Atar Sh.
AS3 Flash game creation tutorial - part 6: timing : Emanuele Feronato
[...] previous part we added some gameplay, now it’s time to add [...]
F
Woah, this is awesome. All the tutorial you made was really great. Thanks bro.