Posted on

magenta skeleton FX

soundtrack to this post:


That rain particle system eventually found its way into magenta skeleton :^)
The stellar dude didn’t :(

I wanted to make a game with glorious rain that soaked a city and flowed off awnings. Finding out Unity3D particle systems could collide and bounce was the First Step in a Series of Some Steps that would Step Towards/Through Magenta Skeleton.

Behind the scenes (in the Unity3D scene editor), the rain in Magenta Skeleton acts like one of those cartoon rainclouds that follows a sulking earthling around. It is a big particle system that is just way up above the players head.


Make sure the particles Simulate In World Space rather than Local Space or you get Weird Effects (maybe you want those weird Fx tho, experiment (assuming you want to even make rain maybe you’re just reading this for the simple pleasure of parsing text + viewing gifs (good on you either way)));

The main Rain ParticleSystem is that outlined box. This is the rain u probably think of when you think “Magenta Skeleton had rain”.
It emits a LOT of particles that are rendered as Stretched Billboards based on Their Speed. They use a simple gradient in their material to make the bottom of the drop White and the top Fade Out. They fall really fast (gravity) so you get LONG STREAKS of WONDERFUL RAIN.

These raindrops collide with objects tagged “Water”. “Water” was a default unity3d tag and I didn’t change it. Objects Tagged Water collide with Rain and KILL THE RAIN. The highway that passes over the island is tagged Water and so any rain that collides with it is killed off, leaving a sweet little dry zone below.

The terrain was tagged Water, but when rain collides with things tagged Water the rain dies IMMEDIATELY and doesn’t really appear to ‘fall into’ the object but rather just DISAPPEAR. Looking out along a flat plain, the rain disappears a few feet above the surface of the ground and only sometimes tentatively prods at the earth below. So I tagged the terrain as “Ground”. This Main Rain doesn’t collide with Ground, so it just drops right through and looks really nice. The rain just gets absorbed into the earth.


In this gif i have the rain collide with the ground and then not collide with the ground. you notice more water “passing into the ground” during the “not collide with the ground” part.

There is a second particlesystem, it is like the Main Rain except it emits in a much greater area around the player and emits Much Less Rain and These Raindrops Emit a Cloud of Mist whenever they Die. This second rain collides with Ground and Water tags. The Main Purpose of this rain is to coat the world in that wonderful mist. In Unity3D you can have a particlesystem emit a secondary particle when it dies. So this rain emits a CLOUD  (cloud is just a textured cube).

this gif goes
no rain
Main Rain
Clouds Rain

the CLOUD is actually just a particlesystem whose renderer is set to render MESH->BASIC UNITY CUBE with a pretty bleh cloudtexture on it. The clouds fade in and out over their lifetime and rotate a bit. It makes me smile when i think of how stupid the cubes look  in the editor vs how nice they look in game.


The Buildings!

Before I knew how COSTLY thousands of particle collisions could be I wanted each raindrop from the sky to dramatically bounce and tumble and roll off every dang building. That can’t happen on my lappy, so I had to FAKE IT.

The places where rain seems to FLOW off a structure are actually just their own particle system.

I just set up the emitter to emit along the edge and send that rain arcing down. It doesn’t collide with anything and seems to be pretty cheap. The entire length of the overpass has this type of rain cascading off of it.


For most of development the sky was that boring dark grey/green color. The ground looked awesome with mist, but the sky looked like so empty! Where did the rain fall from?

I added ANOTHER PARTICLE SYSTEM to the game. This time I used a giant half-sphere emitter. The sky is actually GIANT NOISE-TEXTURED CUBES THAT FALL GENTLY.

It is huge and fills the sky with wonderful noise that seems to flow down (looking like lots and lots and lots of distant rain)

In game if you look up at the sky you can see some cubes in the mess of noise. I think it looks pretty cool.

I think that mostly covers the rain effects.


The neon signs in this game are giant fullbright cubes.

I have two cameras. One camera renders Most Of the Terrain and the skycubes-noise-rain. the other camera renders The Rain and The ?N?eon Signs. The final game composites these two cameras to create What You See.

The camera that renders the terrain is drawn first (it has a lower Depth setting on its Camera Component).

The camera that renders the neon is drawn second.
attached to the neon camera is a script with

void OnPreCull() {

RenderSettings.fogDensity = 0.0064f;
void OnPostRender() {
RenderSettings.fogDensity = 0.01f;

So just before the neon is rendered (OnPreCull), the fog is made much less dense. This makes the neon appear mega bright, even at a distance, even when the surrounding area (terrain, rendered earlier) is fogged out. After the camera renders (OnPostRender) the fog is reset to the default for the scene, so next frame the terrain is foggy.

i toggle that script in this gif

Leaf through the Messages in this Script Reference to see all kinds of things unity has functions for. Sometimes finding cool functions sparks an idea for me.
I added the rain/rainclouds to the neon camera because otherwise the neon signs would draw overtop of the rain even if the rain was in front of it and that looked silly and plus the rain looking bright looks better imo.

Every sign that flickers has a FlickerScript on it. Its a mess.


The script chooses a new random color for the sign and then waits about 1/10th of a second.
Every 1 in 15 times that the script chooses a new color it pauses this new color selection for 5-25 seconds.
The result is that a sign holds a color for a bit, and then flashes a few random colors, and then holds another color, and so on.

the script adds a giant point light to the sign object.

the point light matches the color of the sign.

Every frame the point light is positioned somewhere between the sign model and the player (it looks like it casts it onto the surrounding area and looks kinda neat and moves a little as the player moves. Its “wrong” but “seems interesting” (make things following that precept).

The script also generates a soundwave (a sin wave) that is based on the signs current color values (RGB numbers) (i just played with multiplying / dividing the sin waves’ amplitude and period by the RGB nmbers until it seemed ok). The signs hum and worble in interesting ways. When they flicker through colors they bleep and blorp because of wave math or something.


I linked the basic script earlier. Essentially, each camera’s pixelRect is scaled down by “The Size I want My Pixels”. So I want big fat pixels, I divide the pixelRect by four. Now the cameras are only rendering to a tiny corner in the bottom left of my unity window. Now I use a function by the name of ReadPixels to snatch the camera render and put it into a Texture. This is typically a SLOW operation because it is sending information from the Graphics Card to the CPU, but because the camera pixelRect is only a quarter of the original size, its Not That Bad. In fact, making the pixelRect smaller is saving me more time than I’m losing to ReadPixels because of all of the transparent pixels I would be overdrawing with all of these insane overlapping particleSystems.

So I grab the scaled down camera pixels.
Then in the OnGUI function I just draw that ReadPixels texture as a GUI element stretched over the screen. Glorious chunky pixels.

That’s not all though. I also frankensteined a few shader effects into the mix.
The GUI function that draws my texture accepts a material as an argument. A material has a shader :=0

I took a Dithering Shader I found on the unity communify wiki, and a ‘blur shader’ i found somewhere. I wanted it to appear like “light bloom” so I made the shader only render the pixels if they were above a certain brightness. bright areas (the mist, the neon, the rain) get rendered as a dithered and blurred image rather than just normally. Everything else doesn’t get rendered.

Everything else should get rendered though. So I render two gui images. once as the dithered, blurred, only bright things. and then i just paste the unshadered, low res, screen image underneath. The shadered version acts like a highlight.

is that… it?

Weird magenta skeleton fact: there’s an unused intro scene. Check it out here:


About David Grenzowski

i play videogames and then i write about videogames i am mad videogames

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s