This entry is part 3 of 3 in the series Build a Stage3D Shoot-'Em-Up
In this tutorial series (part free, part Premium) we’re creating a high-performance 2D shoot-em-up using the new hardware-accelerated Stage3D rendering engine. In this part, we’re adding eye candy with particle systems, a parallax effect, framerate-independent game loop timers, and collision detection.
Final Result Preview
Let’s take a look at the final result we will be working towards: a hardware-accelerated shoot-em-up demo that includes everything from parts one and two of this series, plus an efficient particle system for loads of eye-candy, framerate-independent timers for consistent movement, a subtle background parallax effect, the ability for entities to orbit one another, and a collision detection system capable of handling tons of entities.
Check it out: every explosion is slightly different!
Introduction: Welcome to Level Three!
Let’s continue to make a side-scrolling shooter inspired by retro arcade titles such as R-Type or Gradius in actionscript.
In
the first part of this series, we implemented a basic 2D sprite engine that achieves great performance through the use of Stage3D hardware rendering as well as several optimizations.
In (
the second part, we implemented a title screen, the main menu, sound effects and music, and an input system so that the player could control their spaceship using the keyboard.
In this part, we are going to add all the eye-candy: a particle system, complete with sparks, flying debris, shockwaves, engine fire trails and tons of explosions.
In previous versions, our game was framerate-locked and ran slower on old computers. To ensure the same timings for everything no matter what the framerate, we are going to change all movement and animation simulation units to account for the exact number of milliseconds that have passed since the previous frame. This way, whether you are running at 60fps on a modern gaming rig or your grandma’s old netbook, the game experience itself will be identical.
Finally, we’re going to program collision detection, which is required in nearly any game you can imagine. In order to trigger explosions and we need to be able to detect when a bullet has hit an enemy. While we’re at it, we are going to throw in a little bit of additional pizazz, just for fun, including a vertical parallax effect to the starfield background and an R-Type inspired orbiting “power orb” companion that circles the player’s ship.
Step 1: Open Your Existing Project
If you don’t already have it, be sure to
download the source code from part two. Open the project file in
FlashDevelop and get ready to upgrade your game!
This source code will work in any other AS3 compiler, from CS6 to Flash Builder. If you do use FB, be sure to include “
-default-frame-rate 60” in your compiler options to ensure you get the best performance.
Step 2: Get the Party Started!
We are going to take advantage of the well-optimized internals of your entity manager class from last time by adding a simple particle system to it that still uses all the same basic entity and spritesheet functionality.
This way, we are still rendering the entire game’s sprites (ships, bullets and all) in a single geometry batch using a single texture. Therefore, much of the simulation of particles will be handled the same way as we currently handle the movement of the enemies. Most importantly, we are going to keep the number of draw calls to a minimum by inserting particles into our existing sprite batch.
The fist thing we need to do is define a few interesting effects. We’re going to have a little fun and create some cool-looking effects such as an expanding ring of blueish energy (a “shockwave”), a bunch of different fireballs that spin and fade out, some fast moving sparks that stay nice and bright and some metallic spaceship hull debris.
Create a new file in your project called
GameParticles.as and implement the basic particle and explosion helper functions [...]
Read more: Build a Stage3D Shoot-’Em-Up: Explosions, Parallax, and Collisions
