Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join Lee Brimelow in this project-style course that teaches how to build a Flash-based game with Flash Builder 4.6, Flash Player 11, and the Starling framework. Starling, a pure ActionScript 3.0 library for advanced graphics, extends Flash Player 11's support for the modern GPU (graphic processing unit) to enable visual presentations and games in the browser or as a mobile app.
Starting with installation and configuration of Starling and creation of a Flash Builder project, the course shows how to prepare and import graphical assets, create MovieClip classes from sprite sheets, manage various gaming objects, detect collisions, and add both particle and sound effects. The finished game can be deployed to any browser or mobile device that integrates Flash Player 11, which was released in September 2011.
So like I showed you in the last movie we are going to be using distance-based collision detection for our game. Now I could do that collision detection directly in the Play state, but again, it's nice if we create a CollisionManager class which is going to handle that for us. So I am going to right-click on my managers package, New > ActionScript Class and this one is going to be called CollisionManager, and to the constructor we are going to send in our Play state. So I am going to create an argument called play, it's going to be of type Play, and we'll create that as an instance variable, so this.play = play.
And we are going to create a public update function which we are going to call from our play state. So public function update, and we are not going to return anything here. And in this update method we are going to call two different functions and they are going to check collisions between the bullets and the aliens, and then also we are going to check collisions between our hero ship and the aliens, because essentially in our game it's pretty simple; the game is going to be over if an alien crashes into you essentially.
So we are going to first call the bulletsAndAliens function, so we'll just define that here and we can do a quick fix to actually create that function. Then we are going to be doing the heroAndAliens check and I'll create that method. So we are going to start with the bulletsAndAliens function. So now what we need to do is to get a reference to the bullets array and the aliens array which are in those manager classes.
But remember, by default, we create all of our class properties as private so we need to now expose those as public. So I am going to go into my BulletManager class and this bullets:Array, we are going to change its access modifier to public, and then also in our Play method we need to make sure that our bulletManager and our alienManager class is also exposed as public, so that we can access it from our CollisionManager.
And then I also need to go into the AlienManager and make sure that aliens:Array is also set to public. Okay, so I am going to get references to both of those, so I am going to create a local variable called ba for bullets array and this is going to be of type Array, is equal to play.bulletManager.bullets. And we are going to do the same thing for the aliens:Array, so var aa = play.alienManager.aliens.
Now we are going to create two local variables as we loop through to store the references to the bullet and to the alien, so var b is going to be of type Bullet and var a is going to be of type Alien. So what we need to do is to create two nested for loops. So we are going to loop through all of the bullets and for each bullet we are then going to test whether it's touching or close enough to any other aliens that are currently in play.
So I'm going to create a for loop, var i:int, and remember that we are going to want to loop backwards through these, so is equal ba.length-1; i>=0; i--). Now I am going to copy this line right here because we are going to create an inner for loop, and I am going to change the variable to j, and then this is going to be aa.length-1; j>=0; j--).
What I want to do inside of this first for loop is get a reference to the current bullet, so I am going use that b variable and I am going to go into ba and go to the ith element of that array like that. And now inside of the second for loop, I am going to set that alien local variable, to aaj. So now we need to test the distance between the alien and the bullet, and to do that we are going to use the point class. So we are essentially going to create two point objects that contain the X and Y of both the bullet and the alien.
Now we could create those in here but it's a lot better performance if we create those at the top as class properties. So we are going to say private var p1, is of type Point, and we are going to instantiate it right here, new Point, and we are going to do the same thing for the second point. p2, type Point = new Point. And then all we are going to do inside of this loop is just adjust the X and the Y position of that point, that way we were not instantiating a new point on every frame.
So let's first get the position of our bullet and we are going to use that p1 point. So we are going to set p1.x = b.x, p1.y = b.y and now we'll set the second point, the x property to the aliens x and we'll set the y property to the alien y. Well now we can use a static function on the Point class called Distance, which will give us the distance between these two objects.
So we are going to test if the difference is small enough and then we are going to determine that a collision has occurred. So we are going to use an if statement. We are going to say if Point.distance, and here we pass in those two point objects, p1 and p2, if it's less than the radius of both the alien and the bullet. So if it's less than a, and we are going to use the pivotY of it, because remember these things are actually coming down vertically up and down so we need to get the center vertically of each of these objects.
If it's less than a.pivotY + b.pivotY, then we are going to go ahead and determine that a collision has occurred, and in that case, we want to destroy both the bullet and the alien. So we are going to say play. alienManager.destroyAlien(a); and then play.bulletManager.destroyBullet(b).
And if you want to make sure you have these set correctly, if we go into our Alien class and our Bullet class, here we are setting the pivotX and pivotY to make sure it's in the center of our alien. If we go to the Bullet class this actually should not be image, so let's go ahead and remove that to make sure it's in the center of our actual bullet sprite itself. So now we are going to determine that a collision has occurred here. So now if we actually go and create our CollisionManager now in our Play class, let's just create it right under our alienManager and we'll call it collisionManager = new CollisionManager, and we are going to pass in this, and create that as an instance variable.
And much like before, we are going to come to our update method and call the update method of the collisionManager. So now let's go ahead and test it and see what happens. So if I click, now you can see when I am shooting I am actually now killing aliens and both the bullets and the aliens are actually going away. Now we haven't got to adding particle effects or anything like that, but we can see the collision is now working. Now let's say we wanted to make it so the bullet had to be even closer to the alien, but we could come to the CollisionManager and actually update this.
So we can make it a little less than this if we wanted to, but this is actually fine for what we are doing now. Now lastly, we need to do the heroAndAliens because that's how we actually are going to die and the game is going to be over. So we are going to loop through the aliens, so I am going to copy this line from bulletsAndAliens, and then again, I want to get a local alien variable. So I'll just copy this, and I am going to go ahead and copy this for loop, because we are going to do a very similar thing here, and we are going to be looping through aa here.
And again, let's get that local reference to aai. And now essentially we are going to do the same thing, where we are setting this point object. So let's go ahead and copy that, and this point can say the same, but in this one we are actually going to be getting the x and y of our hero, so play, and we need to make sure the hero is actually public in our Play state, which it is. So here, if we say play.hero.x, play.hero.y. And again, we are going to do this if statement and we are going to check the distance between these two points. If it's less than a.pivotY and then we want play.hero.pivotY.
Then we are not going to worry about any of this because we are going to make it so that the game is actually over. So for that, we are going to say play, and we need to make sure that our game in our Play state is also public. So let's go ahead and modify that to public. So we'll do play.game.changeState and then we'll go into that Game class and get the GAME_OVER constant. Okay, so now we have added it. If we actually test this now, we can see that as I shoot, I am actually killing the aliens, but I'll let myself hit one of the aliens and we can see that everything is paused.
Now again, we haven't created the destroy method for our Play state yet and we don't have any visuals yet on the GameOver state. But you can see that our collision detection is actually working and you can see here where it actually stopped, that's where that collision has occurred. And you can see with that distance-based collision detection that's about the right location. So we can, again, adjust that, expand the numbers dependent on our case, but the collision detection is now working. In the next movie we are going to do all of our clean up and handle destroying of the Play state before we move to the GameOver state.
There are currently no FAQs about Building Flash Games with Starling.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.