SHMUP Tutorial 6: Parallax and Pixelmask

Hello everybody! Welcome to part 6 of my SHMUP tutorial using flashpunk! If you haven’t followed part 5, you can download this project file to follow along with this tutorial. Today we are going to add in some more parallax effects to our background, and update our player and enemy to have pixel perfect collision using pixelmasks.

Alright! This time we have some new images to work with!

For your convenience I’ve put them all together in this zip.
When you save them in your images folder, make sure you overwrite your old stars.png with the new one.

Next go ahead and open up your “Assets.as” file and embed your new images like so :

package  
{
	public class Assets 
	{
		[Embed(source="Images/ship.png")]
		public static const GRAPHIC_SHIP_PLAYER:Class;
 
		[Embed(source = "Images/enemy.png")]
		public static const GRAPHIC_SHIP_ENEMY:Class;
 
		[Embed(source = "Images/stars.png")]
		public static const GRAPHIC_STARS:Class;
 
		[Embed(source = "Images/stars2.png")]
		public static const GRAPHIC_STARS2:Class;
 
		[Embed(source = "Images/stars3.png")]
		public static const GRAPHIC_STARS3:Class;
 
		[Embed(source = "Images/bluebullet.png")]
		public static const GRAPHIC_BLUE_BULLET:Class;
	}
}

We’ve done this a few times now, but still make sure you get your folder paths correct for your images!

Now that we have all of these new images, let’s put them to use! We will start by opening up our “GameWorld.as” and find where we declare our backdrop and update it to this.

var b:Backdrop = new Backdrop(Assets.GRAPHIC_STARS, true, true);
b.scrollX = 0.4;
b.scrollY = 0.4;
 
var b2:Backdrop = new Backdrop(Assets.GRAPHIC_STARS2, true, true);
b2.scrollX = 0.55;
b2.scrollY = 0.55;
 
var b3:Backdrop = new Backdrop(Assets.GRAPHIC_STARS3, true, true);
b3.scrollX = 0.8;
b3.scrollY = 0.8;
 
var e:Entity = new Entity;
e.graphic = new Graphiclist(b, b2, b3);
e.layer = GC.LAYER_BACKGROUND;
add(e);

Most of this is pretty redundant, but as you can see they each have a different scroll speed, so when the camera is moved their position will only be moved by that decimal amount. Next you should notice we have something new, a Graphiclist. Make sure you add the import for it! If you type out the Graphiclist, FlashDevelop should import it automatically for you, but if you don’t you can put your cursor somewhere inside the word Graphiclist and then use the keyboard shortcut “Ctrl + Shift + 1? to add it in. This is a very useful shortcut and I use it all the time, so you might want to take the time to memorize that. Alright, now that we have Graphiclist imported, what is it? Well it’s a list of graphics! It let’s you set multiple images, spritemaps, even emitters to a single graphic and they will be rendered in the order that they were added. Saves us from making multiple entities just to render multiple graphics. Feel free to try this out now, you will see that we now have three layers of stars and they all move at a different speed! We had some parallax before, but it wasn’t noticeable at all since there was nothing to compare the speeds with, now there is!

Now that our background is prettier, let’s fix something that has been bugging me since we added in bullets! Our enemy and our player’s collision detection. Right now they are only using a hitbox, which can be fine, but our ships have wings on them and since we don’t want our enemies to make our player explode unjustly when the hitboxes collide. Before we had shrunk the enemies hit boxes so that they wouldn’t kill the player when the empty area around them touched our player, but that caused a problem for our bullets… they fly right through the enemies wings, making them very hard to hit! To fix this we are going to use use a pixelmask!

First, open up your “Player.as” and find the line that declares the hitbox, and replace that line with :

mask = new Pixelmask(Assets.GRAPHIC_SHIP_PLAYER, -16, -16);

Now, some people might see mask and their first thought will be of the standard masking that is used in flash to only show part of another clip… well this has nothing to do with that! What this does is setup an image to be used to check collision with. It will check the alpha of the image you use in your pixelmask to determine if an area is going to be solid when flashpunk handles collision. Make sure you import Pixelmask as well when you add this line in or your game will not compile! When we create a new Pixelmask we will give it an image to use, and offset numbers for x and y. I used -16 here because our graphic is centered and our image is 32×32, so that will make our pixel mask centered.

Excellent! That fixed up our player’s collision! Now let’s fix our enemies! Let’s open up our “Enemy.as” file next! Let’s just update our entire Enemy function.

public function Enemy() 
{
	_image = new Image(Assets.GRAPHIC_SHIP_ENEMY);
	_image.centerOO();
	graphic = _image;
	type = "Enemy";
	mask = new Pixelmask(Assets.GRAPHIC_SHIP_ENEMY, -16, -16);
	layer = GC.LAYER_ENEMY;
}

Since we have a new graphic for our enemy, let’s use that for our graphic, and to setup our pixel mask! We don’t need sethitbox, or flipping / coloring / tinting our image anymore so we can delete those lines! The main reason I made a new graphic here is not just for looks, but because pixelmasks don’t get affected by the rotation or flipped status of your image, so if we didn’t make a new image, our enemy’s collision would have been backwards! Now if we run our game we will notice that the bullets will collide anywhere they touch on the enemy ships, but they don’t collide on any of the empty space like they would with a hitbox that covers the entire enemy!

Ah right! There was one more thing I would like you to try out! If you disabled your console, add in FP.console.enabled to your “Main.as” init function, and then press the “~” key when the game is running and there are some enemies on the screen! Now instead of just having red squares around our entities, you will see red squares with a white copy of the player / enemies graphics overlaying their original images. This let’s us see our pixel masks- and is a good way to make sure your masks are aligned properly with your graphics.

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

SHMUP Tutorial 6: Parallax and Pixelmask

Share this: