What we want to do here is to generate a splotchy blurred out nebular (-lous?) background. Without going into to too much detail, I’m interested in something that would go well underneath a procedurally generated space station map.
The algorithm @pentadact describes works like this:
- Draw a faint white blob
- Tint the blob one of two randomly generated colors
- Randomly place the tinted blobs
How it works
The blobs are white, which is represented in RGB color as 100% in all three values (black is 0%). This corresponds to 255 in 8-bit colorspace and
1.0 in Unity’s colorspace. Since the blobs are faint, the actual RGB values will approach, but not reach 100%.
When we apply a tint to the blobs’ sprites we are essentially multiplying each of the RGB values by our desired color’s value. The resulting value will approach the full intensity of the color as our raw blob approaches 100% white, if that makes sense. So the result is a faint blob of any desired color we want.
The colored blobs overlap each other, generating interesting patterns of lighter and darker mixtures of the two colors.
I fired up my favorite image editing program and made a 256 x 256
png blob sprite. Using the airbrush tool, I plopped a blob in the middle of the canvas.
The settings I used were:
- 128 pixel diameter
- To avoid any artifacts around the edges of the canvas
- Very soft hardness
- To avoid sharp edges
- 20% opacity
- To help with blending later on
Setting the scene, blob prefab
Back in Unity, create a fresh 2D project and imported the blob sprite. We drag the sprite into the scene to create a
GameObject with the blob sprite.
We then add a
Sorting Layer named
Blobs and set the sprite’s sorting layer to
Blobs. While we’re at it, we also create a sorting layer named
BG behind the
Blobs layer for the background.
We name the
Blob and drag it to the
Prefabs directory, creating a prefab from it.
Blob prefab in hand, we still needed a couple more pieces to prepare the scene.
We create a black
Background UI object and set the
X scale and
Y scale to
1000, to be sure Background covered the whole screen. We then set the sorting layer of the sprite to
BG. Remember how we set that layer up earlier? How prescient!
One GameObject To Hold Them All
We’re planning to create a whole metric ton of blobs, so we create a
GameObject to hold all of the blobs. By setting the instantiated blob’s
transform.parent to the
Blobs.transform all of the instantiated blobs fall under the parent
GameObject and it keeps the Hierarchy in our Scene nice and tidy.
We have a background, a Blob prefab and even a
GameObject that will hold all of the blobs we plan to create. Now we just need to make a
BlobGenerator script to randomly place the blobs.
BlobGenerator takes a reference to the Blob
Prefab, a reference to the parent Blobs
GameObject, an integer number of blobs to create, and maximum and minimum coordinates to control the spread of the created blobs.
BlobGenerator generates two random colors using a function called
1 2 3
Which it then zips up into an array called
Random.value returns a random
1.0, which we use to generate a new
BlobGenerator gets into the main routine,
PlaceBlobs instantiates clones of the blob prefab at random positions within the maximum and minimum boundaries we specify, makes the cloned blob a child of the parent Blobs
GameObject, and sets the color tint of the cloned blob to one of the two colors generated above.
1 2 3 4 5 6 7 8 9 10 11 12
That’s all there is to it. You can check out the full example project on github.
It would be nice to have more fine-grained control over the local density of the blobs in certain regions, so the map would become a little less uniform, creating pockets of character in an otherwise featureless space. But I think the effect here works nice as a background.