Question by Tubsiwub · Mar 15, 2018 at 06:37 PM · c#texture2d performance optimization transition pixels

Screen Gradient Transition - Using Pixels, Poor Performance

Pixel Transition

I'm currently using a system where I'm finding all of the pixels in a gradient texture and scaling through the image comparing all of the pixels to a changing gradient color (white to black). I then set that color in the image to be alpha 0.0f instead of 1.0f.

The thing is, GetPixels(), SetPixels() and Apply() are super slow and I can't get a clean transition, even when I have an image that's only 100x100 in size.
Can someone give me some sort of advice? The effect I want to achieve is below. I'll post a code example.

     IEnumerator FadeOut(float waitDelay)
 {
     InTransition = true;

     Color origColor = fadeScreenHUD.color;
     origColor.a = 1.0f;
     fadeScreenHUD.color = origColor;

     // SET IMAGE
     Texture2D texReset = Instantiate<Texture2D> (shownTexture as Texture2D);
     Texture2D tex = Instantiate<Texture2D> (gradient as Texture2D);
     TextureScale.Bilinear (texReset, tex.width, tex.height);
     //TextureScale.Bilinear (tex, texReset.width, texReset.height);
     Color[] pixelsGradient = tex.GetPixels ();
     Color[] pixels = texReset.GetPixels ();

     // Get invisible, please
     for (int i = 0; i < pixels.Length; i++)
         pixels [i] = new Color (pixels [i].r, pixels [i].g, pixels [i].b, 0.0f);
         

     // PERFORM FADE
     int counter = 255;
     float shade = 1.0f / 255;
     float colorVal = 0.0f;
     while (counter > 0)
     {
         for(int j = 0; j < speedValue; j++)
         {
             for (int i = 0; i < pixelsGradient.Length; i++)
             {
                 if (pixelsGradient [i] == new Color(colorVal, colorVal, colorVal))
                     pixels [i] = new Color (pixels [i].r, pixels [i].g, pixels [i].b, 1.0f);
             }

             colorVal += shade;

             texReset.SetPixels (pixels);

             fadeScreenHUD.sprite = Sprite.Create (texReset, fadeScreenHUD.sprite.rect, new Vector2 (0.5f, 0.5f));

             counter -= 1;
         }

         texReset.Apply ();

         yield return new WaitForEndOfFrame();
     }

     yield return new WaitForSeconds (waitDelay);

     StartCoroutine (FadeIn ());
 }

alt text

screentransitiongif.gif (224.4 kB)

Add comment · Show 6

UnityCoach · Mar 15, 2018 at 07:28 PM 1

I'd rather use a Shader.

Tubsiwub UnityCoach · Mar 15, 2018 at 07:32 PM 0

That'd be awesome, but I lack the experience to write a shader that does this. Would you know where to look? I've searched for one but couldn't find something that fit the idea.

UnityCoach Tubsiwub · Mar 15, 2018 at 07:46 PM 0

Well, I'm working on a training course on Shaders and Effects, but it won't be available until a few weeks from now.

I could also suggest using a UI.Image component, which features Fill options you can easily animate.

hexagonius · Mar 16, 2018 at 03:45 PM 0

You could simply use a screenspace canvas with a single image component of type filled, horizontal, origin left. then you can change how much of it is visible by changing the fill amount

Tubsiwub hexagonius · Mar 16, 2018 at 05:53 PM 0

The thing is, with what I'm doing now I can add any gradient to the script and it'll perform the wipe from White to Black. This allows for unique patterns.

UnityCoach Tubsiwub · Mar 17, 2018 at 12:30 PM 0

I totally get your point. The only way to get proper performances is via shader writing. This is part of my upco$$anonymous$$g training chapter on the topic. I'll post a link when it's ready.