#GMTWeekly: Downwell-Style Motion Trail

Before we start, if you haven’t read last week’s tutorial and/or you aren’t too comfortable with blend modes and surfaces, I suggest that you take a look at that tutorial first.

Requests

I am always accepting requests for these tutorial segments! Feel free to send me ideas if/when you have them! The first email that I received after tweeting about a tutorial series was in regards to a motion trail effect found in the recent Steam release, Downwell. It was the very first request that I had received AND I believe that it flows fairly easy from last week’s blend mode example.

Subtractive Blending

The Downwell motion trail is pretty simple aside from the fact that the trail is both blended with a different color from the player sprite, as well as every other row of pixels becoming transparent.

There are numerous ways to accomplish this, but I feel that using subtractive blending (bm_subtract) is by far the simplest. You draw the motion trail images to a surface, then set the blend mode to subtract, then you draw a grid of white lines. Instead of actually drawing the white lines, this blend mode will instead erase (essentially) the overlapping pixels. This will leave every other row and/or column of pixels transparent.

From there you can just change image_blend or use other tinting methods to draw the surface using a color other than the player’s color. In my example, I set image_blend to an every changing color by using make_color_hsv(hue, 255, 255) and manually increasing some hue variable each frame.

Result

I changed the example to erase horizontal lines instead of vertical. I also iterate through the vertical lines and arbitrarily erase a few of those to make it look a bit more chaotic.

However, it should be simple enough to look through the attached example and mess with the effect to get your own desired result.

GMTWeekly1.gmx.rar

Enjoy,
Z

Advertisements
#GMTWeekly: Downwell-Style Motion Trail

2 thoughts on “#GMTWeekly: Downwell-Style Motion Trail

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s