How can I change the image inside rawimage to be much more bright ?

Unity Engine
,
1

Just changing the rawimage material to white color not make it bright enough.
So I added to the rawimage this script after added reference to the visual studio of the system.drawing also added copied the system.drawing to the Assets/Plugins folder.

using System.Collections;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using UnityEngine;
using UnityEngine.UI;

public class MouseHover : MonoBehaviour
{
    [Range(0, 500)]
    public float bright;

    private Bitmap myImage;

    public void OnHover()
    {
        Debug.Log("Enter");
    }
    public void OnHoverExit()
    {
        Debug.Log("Exit");
    }

    private void BrightImage()
    {
        myImage = new Bitmap(GetComponent<UnityEngine.UI.Image>());
    }

    public static Bitmap AdjustBrightness(Bitmap Image, int Value)
    {

        Bitmap TempBitmap = Image;

        Bitmap NewBitmap = new Bitmap(TempBitmap.Width, TempBitmap.Height);

        System.Drawing.Graphics NewGraphics = System.Drawing.Graphics.FromImage(NewBitmap);

        float FinalValue = (float)Value / 255.0f;

        float[][] FloatColorMatrix ={

                    new float[] {1, 0, 0, 0, 0},

                    new float[] {0, 1, 0, 0, 0},

                    new float[] {0, 0, 1, 0, 0},

                    new float[] {0, 0, 0, 1, 0},

                    new float[] {FinalValue, FinalValue, FinalValue, 1, 1}
                };

        ColorMatrix NewColorMatrix = new ColorMatrix(FloatColorMatrix);

        ImageAttributes Attributes = new ImageAttributes();

        Attributes.SetColorMatrix(NewColorMatrix);

        NewGraphics.DrawImage(TempBitmap, new Rectangle(0, 0, TempBitmap.Width, TempBitmap.Height), 0, 0, TempBitmap.Width, TempBitmap.Height, GraphicsUnit.Pixel, Attributes);

        Attributes.Dispose();

        NewGraphics.Dispose();

        return NewBitmap;
    }
}

I want to be able to use the bright variable to change the image brightness.
but getting error on the line :

myImage = new Bitmap(GetComponent<UnityEngine.UI.Image>());

Argument 1: cannot convert from ‘UnityEngine.UI.Image’ to ‘string’

This is how the image looks like when the game is running in the rawimage :
The left image is too dark :

The problem is that I’m taking screenshots from the game so the problem is not light problem or something in the scene the problem is in the image on the hard disk because when I take screenshots from the game in some cases and places the light/s in the game is not the same so the image looks like too dark but the image is fine.

That is why I want to be able to change the image brightness and not to add lights or other stuff.

Maybe it will help too so this is the script I’m using to take screenshots from the game and save them as images on the hard disk :

using UnityEngine;
using System.Collections;
using System.IO;

public class HiResScreenshots : MonoBehaviour
{
    public int resWidth = 1920;
    public int resHeight = 1080;
    public SaveLoad saveLoad;

    public static string ScreenShotName(int width, int height)
    {
        return string.Format("{0}/screenshots/screen_{1}x{2}_{3}.png",
                             Application.dataPath,
                             width, height,
                             System.DateTime.Now.ToString("yyyy-MM-dd_HH-mm-ss"));
    }

    void Update()
    {
        if (Input.GetKeyDown("k"))
        {
            var filename = ScreenShotName(resWidth, resHeight);
            var directory = Path.GetDirectoryName(filename);
            Directory.CreateDirectory(directory);
            ScreenCapture.CaptureScreenshot(filename);

            StartCoroutine(saveLoad.SaveWithTime(directory,Path.GetFileNameWithoutExtension(filename) + ".savegame.txt"));
        }
    }
}
2

I don’t think you want to do anything with System.Drawing… that won’t bring you happiness in this context.

I’m trying to understand what you mean about the image itself. Are you saying it was just screenshotted where the game is in a dark place? I mean, if you pull up the image in an image viewer, does it look too dark then too? Or is it only when it gets loaded into your RawImage Component?

Check also you don’t have some other image in front of the RawImage, and also check that the RawImage has full opacity and is solid white (the color property in the RawImage Component itself).

1 Like
3

Yes, If I pull the image or if I edit the image from the hard disk in paint for example it’s dark too same darkness.
You right about I’m taking the screenshots in any places I want in the game and in some places they are darker or brighter so the images on the hard disk are the same.

That is why I need to get directly to the image it self and make it brighter.

But this is my logic and maybe there is a better way/s to do it ? What I’m doing is taking screenshots in places in the game and also save game for the same places where I took the image screenshot. So in the game I want to make something that when you move the mouse over the images it will show them like they were selected like highlight them or make them brighter, something that the user will know he is on the image without clicking for selecting it but just moving the mouse over it.

But I want something visual not just Debug.Log like now :

public void OnHover()
    {
        Debug.Log("Enter");
    }
    public void OnHoverExit()
    {
        Debug.Log("Exit");
    }

The way the images are no in the main menu they are not looking good some too dark and some too bright.
I want the user to be able to save the game in any place in the game and then to load this saved games with the correct selected(highlighted, bright) image then clicking on the image will load the saved game.

The save and load is not the problem I have this already.
The problem is with the taken images that because in the game in some places it’s more darker and some more bright.

4

When you take the screenshot, do a FindObjectsOfType() and disable them all, then put in a single directional light, probably aligned the way the player is looking, take the shot, Destroy the directional light, and re-enable all the other lights (which you kept a list of from the first find).

As for making it highlight, why not just put a white card behind it and color it black or white depending on if its selected or hovering or whatever? That’s usually how I do my cursor- and mouse-selectable buttons.

1 Like
5

Adding more light to the game at the moment you take the screenshot might give better results. Once you’ve taken the picture, you no longer have 3D geometry or material information, you just have a bunch of pixels, and that limits what you can do with them (some data has been lost).

But if you can’t or don’t want to do that, there are some ways you can increase the lightness of a picture after you’ve taken it. The simplest ways to do this would be to raise the RGB values of each pixel, perhaps by multiplying them (by some number greater than one) or adding something to them. (Note that in some cases this will give you a value higher than 100%, which means this modification is lossy.) There are probably also more-sophisticated mathematical techniques floating around on the Internet somewhere.

A quick way to apply this concept in Unity is to use a Button component (though I believe this would require that you replace your RawImages with Images). A Button with its Transition type set to “Color Tint” lets you specify a color multiplier for each button state (normal, highlighted, pressed, etc.) Normally pure white means a multiplier of 1, and so you can’t make anything brighter than it starts…however, there’s an extra parameter called “Color Multiplier” that lets you multiply the whole color by an additional scalar value. This defaults to 1, but if you set it to something higher, then you can create multipliers that make the colors brighter instead of darker.

Another way to do this would be to write a custom shader–this will give you more precise control over the exact math you’re using. I haven’t used shaders to make things brighter before, but I’ve used a custom shader to convert images to grayscale, and I can’t see any reason that doing the same thing to increase brightness wouldn’t work. (Note: I did this with Images; I’m not completely sure whether the equivalent thing can be done with RawImages.)

Both of those would change how the texture is rendered. You could also change the Texture2D itself, modifying its pixel values via code (either before saving it or after loading it).

6

You could also use my asset Better UI for this (see signature).
There is a Shader that can be assigned to images / raw images which can change the hue, saturation and brightness of the given image. The asset also allows to easily modify these values in transitions.

The benefit is that you only need one texture and even can animate between brightness values.

Edit: Or use the color multiplier as suggested above. That would be the cheaper but less flexible option.

Edit2:

No, it works on any class which derives from Graphic. That includes RawImage.

7

If you want a highlight in the actual image when hovering, add another Image (just plain white, no image file) on top of the RawImage (as opposed to behind, like your frame is). By default opacity 0, when you hover change it to 20% or so, tweak that level to suit. This will add that amount of white to the RawImage RGB values, just like turning up “Brightness”.

8

Adding a transparent white image on top is equivalent to blending to white, which is not visually equivalent to any of the other methods discussed so far. And in particular, it will reduce contrast within the original image (whereas e.g. multiplying will increase constrast, and adding a constant to each pixel will keep it the same, except in cases where you hit the maximum).

Could be a good option if you’re just trying to show which picture is currently selected, but a bad method of trying to make the details within the picture more visible.

1 Like
9

Yes, that’s true, it’s a somewhat different change. Adding a constant to each pixel would most likely give better visual results…just need to be careful not to change the texture asset itself, which SetPixels() will do unless you make a copy in code. (Likely there are many other ways)

10

This script lets you modify your RawImage texture by adding or subtracting a custom amount from all pixels. Colors clamp at (0,1). Original texture can be restored. No changes are made to the texture asset. Is kinda fun :wink:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class forumPixelPlay : MonoBehaviour
{
    // Create a blank RawImage and drag this script onto it

    // NOTE: Unless you create a new texture from the image (instead of using it directly),
    // changes will alter the asset itself!
    // Textures must be type 2D/UI and have Read/Write enabled

    // Unity docs say GetPixels32 etc. is faster, but I wasn't able to get the modifyPixels() to work...
    // colors kept wrapping around 255, even with clamps (?)

    RawImage myImage; // texture will be assigned in code, but can assign in Inspector to see in Editor

    public Texture2D origTex; // drag texture to slot in Inspector
    public Texture2D newTex; // leave blank, will be created in code

    [Range(-1, 1)]
    public float lightenAmount = 0.1f;

    Color[] pixels;

    void Start()
    {
        myImage = GetComponent<RawImage>();

        // Prints the float equivalent color at pixel (50,50). Note the texture origin is lower left!
        //print("pixel 50, 50 = " + origTex.GetPixel(50, 50));
        pixels = origTex.GetPixels();

        newTex = new Texture2D(origTex.width, origTex.height);

        newTex.SetPixels(pixels);
        newTex.Apply();
        myImage.texture = newTex;
    }

    void modifyPixels() // Press "P" to change pixel colors by lightenAmount
    {
        for (int i = 0; i < pixels.Length; i++)
        {
            pixels[i].r += lightenAmount;
            if (pixels[i].r > 1) pixels[i].r = 1;
            if (pixels[i].r < 0) pixels[i].r = 0;
            pixels[i].g += lightenAmount;
            if (pixels[i].g > 1) pixels[i].g = 1;
            if (pixels[i].g < 0) pixels[i].g = 0;
            pixels[i].b += lightenAmount;
            if (pixels[i].b > 1) pixels[i].b = 1;
            if (pixels[i].b < 0) pixels[i].b = 0;
        }
        newTex.SetPixels(pixels);
        newTex.Apply();
    }
    void restorePixels() // Press "O" (letter O) to restore original texture/image
    {
        pixels = origTex.GetPixels();
        newTex.SetPixels(pixels);
        newTex.Apply();
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.P))
        {
            modifyPixels();
        }
        if (Input.GetKeyDown(KeyCode.O))
        {
            restorePixels();
        }
    }
}
2 Likes
11

There is a problem. When I’m attaching the script to the RawImage in runtime I can’t add any texture2d to the field origTex.

Look at this screenshot. When I’m running the game I’m using a prefab of RawImage and the RawImage source texture is a image from the hard disk. After running the game I’m dragging your script to the RawImage but the field origTex I can’t assign to it anything. Not the RawImage it self and nothing else.

I can select many other textures but they are not the one in the RawImage in the Texture field of my RawImage like in the screenshot :

12

Found how to do it and it’s working now great.

What I changed in the script is in the Start :

var texture = GetComponent<RawImage>().texture;
origTex = texture as Texture2D;

Because the Texture in the RawImage is Texture and not Texture2D I just get the RawImage Texture and cast it as Texture2D.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class RawImagePixelsChange : MonoBehaviour
{
    // Create a blank RawImage and drag this script onto it

    // NOTE: Unless you create a new texture from the image (instead of using it directly),
    // changes will alter the asset itself!
    // Textures must be type 2D/UI and have Read/Write enabled

    // Unity docs say GetPixels32 etc. is faster, but I wasn't able to get the modifyPixels() to work...
    // colors kept wrapping around 255, even with clamps (?)

    RawImage myImage; // texture will be assigned in code, but can assign in Inspector to see in Editor

    public Texture2D origTex; // drag texture to slot in Inspector
    public Texture2D newTex; // leave blank, will be created in code

    [Range(-1, 1)]
    public float lightenAmount = 0.1f;

    Color[] pixels;

    void Start()
    {
        var texture = GetComponent<RawImage>().texture;
        origTex = texture as Texture2D;

        myImage = GetComponent<RawImage>();

        // Prints the float equivalent color at pixel (50,50). Note the texture origin is lower left!
        //print("pixel 50, 50 = " + origTex.GetPixel(50, 50));
        pixels = origTex.GetPixels();

        newTex = new Texture2D(origTex.width, origTex.height);

        newTex.SetPixels(pixels);
        newTex.Apply();
        myImage.texture = newTex;
    }

    void modifyPixels() // Press "P" to change pixel colors by lightenAmount
    {
        for (int i = 0; i < pixels.Length; i++)
        {
            pixels[i].r += lightenAmount;
            if (pixels[i].r > 1) pixels[i].r = 1;
            if (pixels[i].r < 0) pixels[i].r = 0;
            pixels[i].g += lightenAmount;
            if (pixels[i].g > 1) pixels[i].g = 1;
            if (pixels[i].g < 0) pixels[i].g = 0;
            pixels[i].b += lightenAmount;
            if (pixels[i].b > 1) pixels[i].b = 1;
            if (pixels[i].b < 0) pixels[i].b = 0;
        }
        newTex.SetPixels(pixels);
        newTex.Apply();
    }
    void restorePixels() // Press "O" (letter O) to restore original texture/image
    {
        pixels = origTex.GetPixels();
        newTex.SetPixels(pixels);
        newTex.Apply();
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.P))
        {
            modifyPixels();
        }
        if (Input.GetKeyDown(KeyCode.O))
        {
            restorePixels();
        }
    }
}
13

Yep, it has to be the correct kind of Texture. Cool you got it working!

1 Like