SHMUP Tutorial 2: Basic Enemy

Hello! And welcome to part 2 of my tutorial series! If you didn’t follow part 1, you can just download this project to follow this tutorial.

All right then, we have a ship that moves around the screen right now. Pretty boring if you ask me. So let’s add in an enemy! Start by making a new file named “Enemy.as”

package  
{
	import net.flashpunk.Entity;
	import net.flashpunk.graphics.Image;
 
	public class Enemy extends Entity 
	{
		private var _image:Image;
 
		public function Enemy() 
		{
			_image = new Image(Assets.GRAPHIC_SHIP_PLAYER);
			_image.centerOO();
			_image.color = 0xFF0000;
			_image.tinting = 0.7;
			_image.flipped = true;
			graphic = _image;
		}
	}
}

Alright, I suppose at least some of you will wan’t me to explain all of the new stuff here.

private var _image:Image;

This time, instead of just making an Image on the spot for our graphic we will store a reference to it so we can make adjustments to it easily.

_image = new Image(Assets.GRAPHIC_SHIP_PLAYER);
_image.centerOO();

This should look familiar, we did this with our player ship! Almost exactly the same thing here. Now hopefully you will notice why it can be handy to use an Assets file to store all of your embedded objects.

_image.color = 0xFF0000;
_image.tinting = 0.7;

Flashpunk images can easily be colored like just by setting a hex color code to it’s color property. I set the tinting to 0.7 so that it didn’t wash out the original colors as much.

_image.flipped = true;

Makes the image render flipped horizontally, this way the enemies will be facing towards the player.

graphic = _image;

Sets the graphic to render our image variable.

So now we have an enemy… let’s add it to our world! Open up your “GameWorld.as” and add in this code after the code that adds the player.

var _enemy:Enemy = new Enemy;
_enemy.x = FP.width - 100;
_enemy.y = FP.halfHeight;
add(_enemy);

Not much to note here, other than the use of FP.halfHeight to place the enemy in the middle of the screen it’s exactly the same as how we added our player.

Compile your game now. You should see a red ship on the other side of the screen with your player ship that can move around.
Awesome. But not awesome enough.
When we touch the enemy nothing happens. That’s still rather boring.

Let’s give our Enemy a Hitbox and type next. So go back into your “Enemy.as” and right after :

graphic = _image;

Add in :

type = "Enemy";
setHitbox(32, 32, 16, 16);

This sets the collision type of the Enemy, so it can easily be checked against later, and set’s it’s hitbox to be a 32×32 square offset to be centered on our entity’s x and y.

Now let’s go into your “Player.as” and fine this line :

Image(graphic).centerOO();

Now right after that line add these two lines of code :

type = "Player";
setHitbox(32, 32, 16, 16);

Now before I add in a collision check, I would like you to add one more line first after all of that.

FP.console.enable();

This will enable the Flashpunk information console when we run our game! Try running you game now and you will see all sorts of information like memory usage and your FPS. Very useful information there by itself, but there is more! Now make sure your game is active and press the “~” key on your keyboard. BAM! Now your game is paused and you can select entities to see their locations. You should see red boxes around your Player and your Enemy, those are their current hitboxes. You can press the “~” key again to return to the game if you wish.

Great! Now let’s make it so that when we collide into the enemy, it teleports our player.

At the bottom of the update function in your “Player.as” file, right after :

if (y > FP.height - 32) y = FP.height - 32;

if (collide(“Enemy”, x, y)) {
x = 32;
y = FP.halfHeight;
}

Flashpunk has a very well written and easy to use collision system, for what we are doing now all we need to do is check if our Player entity collided with any “Enemy” types at it’s current X and Y locations. If it does, then we just teleport it to the start of the screen.

This is all well and good, but still a bit boring. Let’s at least spice up our Enemy and make it do some really basic moving back and forth.

Open up your “Enemy.as” file and add in :

import net.flashpunk.FP;

To your imported classes.
Now let’s add in a speed variable for moving up and down. Right after :

private var _image:Image;

Declare this variable :

private var speedY:Number = 50;

Excellent! Now we are ready to add in an update function for our Enemy!

override public function update():void 
{
	if (y < 32) speedY *= -1;
	if (y > FP.height - 32) speedY *= -1; 
	y += speedY * FP.elapsed;
}

This should go right after your Enemy Function’s closing } bracket. Just like when we overid the update function for the Player entity, this will run every frame update. This is a very simple movement pattern, but it will do for now so we don’t just have a static image. All we are doing is moving the y based on our current speedY * the time elapsed between the last update. This keeps the movement smooth even if the player gets laggy and has a lower FPS than what the Flashpunk engine is set to run at. Next we are checking if the enemy’s Y is less than 32, if it is then we multiply the speedY by negative 1, turning -50 speed into 50 speed in this case. If that didn’t happen then we check if the enemy’s y is greater than 32 pixels above the Flashpunk’s initiated height and do the same trick to change 50 speed into -50 speed.

You can download a zip containing the entire project for this tutorial here.

SHMUP Tutorial 2: Basic Enemy

Share this: