koobas.hobune.stream
Color changer using HEX in game
Hi guys, I am really new but trying to help out a client. I want to have a UI element in game that would provide a color slider and/or a text box to input HEX code that would change the material color of an object. I can do this with keys, but I am not familiar with how UI works. Please help!
First we have have 3 main things here we want to do
Get an Input from the Player.
Convert the Hex into RGB.
Apply it to a material.
Player Input
You can use a Text Input Field. Limit the characters to 6 and then set it to Alpha Numeric. Create or at least already have the Material you want the colour to change one. Create a C# Mono Behavior script. Add a Material variable called Mat. This is the material that will have its Colour changed. Add a Method that accepts a string as a Parameter, this one is called OnMaterialEditEnd
public class HexColourMaterial : MonoBehaviour
{
public Material mat;
public void OnMaterialEditEnd(string input)
{
// we will fill this in later
}
}
Attach this script to the Input Field UI element. Next on the "OnEditEnd" select the same input field then select the function we just created. this will feed the string the player edits into this script. We also want to select the material on the script.
HEX To RGB
If you're a programmer this part isn't very hard, its simply converting Base16 into Base10 numbers. First we want to create a function that will check if our Hex is Valid. Hex accepts Letters to make up for its Base16 nature so letters such as "B" or "E" (11 and 14) are fine but other such as "G" or "M" are invalid.
//Check if if our input is Valid for Hex Colours.
public bool IsHex(string hex)
{
char[] chars = hex.ToCharArray();
bool isHex;
foreach (var c in chars)
{
isHex = ((c >= '0' && c <= '9') ||
(c >= 'a' && c <= 'f') ||
(c >= 'A' && c <= 'F'));
if (!isHex)
return false;
}
return true;
}
This function will return True if our supplied string has valid Hex Characters in it, it doesn't check the length of the characters, though.
now we want to split out hex values into the 3 colours and convert them to base 16. then apply that value to a colour. We spit the string just by indexing its characters. first two are the RED, next two is GREEN and the final two is BLUE.
We make sure to Divide the result by 255 since RGB colors are Normalized. (values between 0 and 1)
public Color Hetx2RGB(string hex)
{
Color newColor = Color.white;
//Make sure we dont have any alpha values
if (hex.Length != 6)
{
return newColor;
}
var hexRed = int.Parse(hex[0].ToString() + hex[1].ToString(),
System.Globalization.NumberStyles.HexNumber);
var hexGreen = int.Parse(hex[2].ToString() + hex[3].ToString(),
System.Globalization.NumberStyles.HexNumber);
var hexBlue = int.Parse(hex[4].ToString() + hex[5].ToString(),
System.Globalization.NumberStyles.HexNumber);
newColor = new Color(hexRed / 255f, hexGreen / 255f, hexBlue / 255f);
return newColor;
}
This will convert any hex color into a RGB value.
Apply to Material
We will just edit this function in our Script, First we check if our Hex is valid with isHex. Then Convert Our Colour using the 2nd Function Hetx2RGB. Then just use the SetColor Method of the material to apply the result.
public void OnMaterialEditEnd(string input)
{
if (IsHex(input))
{
Color newColor = Hetx2RGB(input);
mat.SetColor("_Color", newColor);
}
}
Make sure the shader of the material you are using has a "_Color" attribute in it, if it has other colour methods such as "_Albedeo" , replacing the "_Color" parameter in the Set Color Method should work. Most Materials will use "_Color" so the resulting code should look like this. This is mostly very rough code that just gets this job done.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class HexColourMaterial : MonoBehaviour
{
public Material mat;
public void OnMaterialEditEnd(string input)
{
if (IsHex(input))
{
Color newColor = Hetx2RGB(input);
mat.SetColor("_Color", newColor);
}
}
//Check if if our input is Valid for Hex Colours.
public bool IsHex(string hex)
{
char[] chars = hex.ToCharArray();
bool isHex;
foreach (var c in chars)
{
isHex = ((c >= '0' && c <= '9') ||
(c >= 'a' && c <= 'f') ||
(c >= 'A' && c <= 'F'));
if (!isHex)
return false;
}
return true;
}
public Color Hetx2RGB(string hex)
{
char[] values = hex.ToCharArray();
Color newColor = Color.white;
//Make sure we dont have any alpha values
if (hex.Length != 6)
{
return newColor;
}
var hexRed = int.Parse(hex[0].ToString() + hex[1].ToString(),
System.Globalization.NumberStyles.HexNumber);
var hexGreen = int.Parse(hex[2].ToString() + hex[3].ToString(),
System.Globalization.NumberStyles.HexNumber);
var hexBlue = int.Parse(hex[4].ToString() + hex[5].ToString(),
System.Globalization.NumberStyles.HexNumber);
newColor = new Color(hexRed / 255f, hexGreen / 255f, hexBlue / 255f);
return newColor;
}
}
I've tested this on Unity 2017.
Hope it helps.
