Activetuts+ Workshop #3: Sci-Fi Particle Effects - Coding Challenge

This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

For this Workshop, we're doing a Coding Challenge! It can be tricky to sit down and practise new coding techniques, so here's a fun exercise that'll help you learn how to use particle effects by giving you some ideas for what to do with them.

Update: I've added my own demo to the post, complete with source code; it's a Stage3D and Starling dynamic "fire trail" generator, inspired by Back to the Future!


Did you see Shiu's recent Stage3D Starling Particle Effects tutorial? Here's my favourite demo from it:

(Drag the mouse to move the ship, and press A to increase the smouldering.)

I think Starling and Stage3D are really important topics to learn for any Flash developer working on games or graphical effects. But I realise sometimes it can be hard to find inspiration for what to do with these tools, so this challenge is to encourage you to experiment and share your creations.

The Challenge

It's simple: use the particle effect framework of your choice (in either Flash, Unity, or JavaScript) to create special effects inspired by sci-fi movies and TV programs.

Here are a few suggestions:

The time travel effects from Back to the Future:

Pretty much any Doctor Who intro:


Phasers (blasters, plasma rifles, etc.):

Star Trek transporters:

Hyperspace jump:

All these examples are in 3D, but yours doesn't have to be - in fact, it'd probably make it easier to concentrate on the effects themselves if you used simple 2D graphics.

I recommend using Starling, if you're using Flash. Unity has a particle system built in: Shuriken. JavaScript has a few options, too; you might like to try ThreeJS with or without SparksJS.

Let Us See!

This is a personal challenge; the aim is to help encourage you to play with new techniques, rather than to compete to win a prize. Having said that, I'd love to see what you make, and I'm sure other readers would find your examples really useful, too!

So, if you come up with something neat, please send it in using this form or link to it in a comment below.

Here's Mine

I could do with brushing up on my own particle effect skills, so I've made something for the challenge myself: a Back to the Future-inspired fire trail generator!

Here's a picture of some sample output:

Back to the Future Fire Trails Flash particle effect in Starling with Stage3D

It works by creating multiple particle emitters, evenly spread along a line, each shooting particles backwards along that line. The emitters are given a wide spread to mimic the tire tracks from the movie.

Have a go with the demo; click in one place and then another to draw a straight line between the two points, or drag the mouse around to draw curvy trails:

You can play with a full-screen version of the demo, too.

The full source files (with lots of comments) can be downloaded here.