Splatter in Bloopboop

One of the major aspects about this game is its aesthetic, We wanted to have the player splash a lot of colour onto the screen as they played each level to make the game more vibrant and give a sense of satisfaction to the player as they are actively making the game more prettier. With this in mind, one of my main tasks was to create some sort of splatter system used to show the impact of the player moving the blob and hitting the various hazards in the level. This would leave a large splatter of colour on whatever the player hit with the blob, minus the player made platforms, and act as one of our major juicing methods.

I was lucky enough to have a head start with my lecture giving me a base splatter system to work with that gets the would take a render texture and paint randomly selected images onto the texture itself, at a scaled size based on the object. This was a great starting point for me and help save a lot of time creating my own. However there was many things I needed to change about it before it would be functional in our game. Firstly, world space coordinates.

This system required the corners of the object it was on to work correctly as it used to determine how big the object is. Instead of dealing this by had I decided to research and found a nice function called, renderer.bounds.min and .max. What these are, are Vector3’s of the min and max corners of an object based on the renderer attached to the object in local space. However I needed world so with more digging I found, transform.TransformPoint(). Which is used to covert local position to world, and it was with these two I created a system to automatically get the corner’s of each object on the scene.

void LocalToWorld()
 {
 //Min corner of the the object
 Vector2 min = rend.bounds.min;

 //Max corner of the object
 Vector2 max = rend.bounds.max; 

 //Min corner in world position
 Vector2 worldMin = transform.TransformPoint(min);

 //Max corner in world position
 Vector2 worldMax = transform.TransformPoint(max);

 //Appling values
 minCorner = worldMin;
 maxCorner = worldMax;
 }

Next I needed some logic on when and where the system will splat textures. With this needed to show the impact of where and what the blob hit, I needed some collision detection thought OnCollisionEnter2D(). As OnTriggerEnter2D() doesn’t store much collision data that I can use and is really only to check if something hit, plus the object would need to be a trigger and we don’t want that. With this I found a struct called ContactPoints and ContactPoints2D which stores information on where there were contacts on this object.

With this i could get the initial contact position between the blob and object and use that as my splat position, using contact.point.

void OnCollisionEnter2D(Collision2D coll)
 {
 Debug.Log("Collision");
 //First point that collided, in world space
 ContactPoint2D contact = coll.contacts[0];
 splat(new Vector3(contact.point.x, contact.point.y), 0,3, 1f);
 }

However for future use, contact.point in 2D returns a world position not a local one, so keep that in mind if going to be used later.With this, splats were appearing on the render texture but not on the actual object and this stumped me for some time and then I realised I didn’t have the render texture in the detailed Alberto section of the standard shader I was using. Now I had splats appearing on my object however they weren’t at the right positions.

The X positions of the splats were correct however the Y positions weren’t. I then looked thought the code again and realised that they system used the Z axis to determine height not Y. So after swapping those around, it help place the splats on the edges of the object and not in the centre.

 int z = (int)(remap(position.z, minCorner.y, maxCorner.y, 0, (float)renderTexture.height - 1) - splatHeight/2.0f);
to
 int z = (int)(remap(position.y, minCorner.y, maxCorner.y, 0, (float)renderTexture.height - 1) - splatHeight/2.0f);

However there is an issue, the splats are on the wrong side of the object or more specifically the splats only appear on the top side of the object.

This is one of the few issues I am still having with this system and I don’t know why. O there issues that there are, is the face that all objects need to be black in order for the colours shows and, lastly, since there is only one render texture shared between multiple objects, everything receives the splats. These are the cores issues that I am so far unable to solve and the progress made on the splatter script.

Thanks for readying 🙂