- Home /
2D Dynamic Reflections ReadPixel Issue
I recently came to the decision that I needed rest from a bigger project I've been working on after coming to the conclusion that I've overstepped my ability somewhat. I decided instead to work on something that seemed easier, something minimalist and yet satisfying. I managed to get a fairly engaging physics-based movement system in, as well as the ability to spawn small squares. Then, at a moment's notice, I had a brilliant idea! Why not add some "pizzazz" to the project, something sleek and beautiful, something glorious? So what better thing to add to a minimalist project than dynamic 2-Dimensional reflections?
It was a fairly simple approach. The reflector (beneath the black line) is nothing more than a 3d cube which uses a BoxCollider2D of the exact same size to simply screenshot the area above it once at the end of each frame. This screenshot is then converted to a Texture2D which is plastered to the cube. Unfortunately, my skill-set is quite limited, so the entire process is not done hands-free (though if I can get the whole thing working I plan on making it truly dynamic). There are a few variables you must tweak depending on the scale of the reflector to achieve the perfect look, but if done correctly the result is surprisingly beautiful.
Here is the code that I have so far (sorry if there are any annoying inefficiencies):
#pragma strict
//Attach this to a 3D cube with a Mesh Filter, Mesh Renderer, and BoxCollider2D components. Ensure //the BoxCollider2D is offset by AT LEAST (0, 1) AND the cube itself has a scale who's X is negative (else //the reflections move in the opposite direction of the player
private var width : int;
private var height : int;
var sizeFactorX : float; //Tweak for screenshot size X || ROUGHLY 13 for every 1 scale of the reflector
var sizeFactorY : float; //Tweak for screenshot size Y || ROUGHLY 13 for every 1 scale of the reflector
private var startX : int; //Starting X-coordinate for the screenshot
private var startY : int; //Startin Y-coordinate for the screenshot
var boundDivisorY : float; //To readjust the reflection to the center
var reflectTexture : Texture2D; //The texture generated by the screenshot + tweaks
private var reflectBox : BoxCollider2D; //The BoxCollider used to calculate the screenshot area
function Start () {
if (gameObject.GetComponent.<BoxCollider2D>()) {
reflectBox = gameObject.GetComponent.<BoxCollider2D>(); //Sets reflectBox
}
}
function Update () {
if (gameObject.GetComponent.<BoxCollider2D>()) {
width = reflectBox.size.x * sizeFactorX; //Tweaks screenshot area X
height = reflectBox.size.y * sizeFactorY; //Tweaks screenshot area Y
startX = Camera.main.WorldToScreenPoint(reflectBox.transform.position).x - (width/2); //Finds //starting point X
startY = Camera.main.WorldToScreenPoint(reflectBox.transform.position).y + (height/boundDivisorY); //Finds starting point Y
}
StartCoroutine(ReflectTexture()); //Begins the reflect coroutine
}
function ReflectTexture() {
yield WaitForEndOfFrame(); //Must be present or the code will not compile
reflectTexture = new Texture2D(width, height, TextureFormat.RGB24, true); //Initializes the texture
reflectTexture.ReadPixels(Rect(startX, startY, width, height), 0, 0); //Reads designated screen pixels
reflectTexture.Apply(); //Applys the generated texture to the texture variable
reflectTexture.mipMapBias = -50; //Sets the reflection's affinity for mipmapping
GetComponent.<Renderer>().material.mainTexture = reflectTexture; //Pastes the reflection texture //on the reflector
Resources.UnloadUnusedAssets(); //Ensures a memory pool of previous reflection textures doesn't //pile up and exhaust your computer's memory
}
This code produces the reflection effect seen above (So long as the user-augmented variables have been correctly set), and works brilliantly up to a point. If the player (the rectangle in the middle) stays at or near the center of the reflector (like above), everything works. Likewise, if the player is to move to the left, absolute bliss and perfection (similar to above. But everything falls apart once the player moves far enough to the right to cover up the starting coordinates:
I do have some information on the root of the problem. That large grey area is actually what lies beyond the camera's view to the left side, and only begins to appear once startX is registered as a negative number (which means that startX is now outside of the camera's view to the left). The ReadPixels function for my Texture2D requires a rectangular transform (Rect Transform) to read the screen pixels, and for some odd reason once the X-value of the Rect transform is less than zero that grey area grows out from the right and pushes the actual reflection to the left. Also, the grey area's size is completely predictable, as it is the exact size of the portion of the reflector which has been rendered invisible by the left side of the screen.
I feel like the answer is so simple, but just out of reach. Any help is greatly appreciated!