Hey guys. I’ve been working on some sort of a menu here. I have several questions.
Take a look at the screen I’ve uploaded.
1 - I’m using buttons for the different perks, gear and crossgairs as you can see. I need to make it clear for the player which perk/gear/crossgair is selected, therefore I need to make something like a watermark, that will highlight the currently selected button. When you press a certain button, it changes a variable to the button’s number, than this vairable is used in an array to define what does the selected item do. Now, I can make different textures for all the elements - one normal and one highlited, but that’s a lot of effort. So my first question is how to make the image in a button hightlited when selected?
2 - I want to allow the user to change the color of the crosshairs and the HUD. I need to make a color palette, from which to chose a color. I searched the community, but I only found a post, saying that there’s no such thing , implemented in Unity, so I was wondering if it would be possible to use some sort of an image with all the colors on it and get the current color, from where the marker is dragged, but I don’t know how would I approach for this:
[SOLVED] 3- Take a look at the stats panel, a description box appears next to the mouse if I drag it over “Strenght”, “Agility”, “Endurance”. That’s okay, but every time I do that, there’s a message in the console, saying:
As you can guess, I’m using tooltips to do this, but what’s wrong here?
Hey that looks sweet. I’m new to gui skins but i think there is an option for color texture when selected. Ofc you can use a label with clear texture that swaps out with another highlighted alpha texture when told to do so. That way you can still see your stats through it. OR take the alpha tex and move it in front of the element for a second. All you have to do is compare the tooltip string name when hovered over it. and if it is true then do what you want.
Hey, thanks for the reply. I didn’t really understand your suggestion, is that the way to fix the error, that the console shows or it’s just an advice on how to make the tooltip explanation better. Sorry, I just couldn’t imagine your idea.
You can use a GUI.Toggle instead of GUI.Button to get a button with on/off state, but you will need to create two textures for each button still. It shouldn’t be that much work, though, since you just need to create a ‘highlight’ effect once, then composite that with each of your existing images. The alternative is what Black Mantis suggested – draw an additional GUI element directly on top of each button you want highlighted, using a translucent ‘highlight’ effect texture.
You have the right idea. You can use GUI.DrawTexture to show your colour swatch, and Texture2D.GetPixel to determine the colour at the point the user selects. You may also want a slider or similar to control brightness/saturation. Implementing a draggable marker is a little more work, as GUI.Window is the only GUI component that has any built-in support for dragging. You can either use a tiny window with a suitable GUIStyle applied to it, or implement the drad-and-drop handling yourself for some other GUI element.
Thanks, laurie! It seems I’ve misunderstood Black Mantis’ idea (sorry, buddy). So I was also thinking about putting a transparent image on top of the selected button, but there’s a problem, that comes to mind here: I don’t think I can make a button non-clickable if it’s highlighted, so no matter if it’s highlighted or not it still would react if hovered over and clicked. So I agree with you, toggle should do the job. I even tried doing it with toggle before I posted this thread, but no matter what scale and image I assigned to it in the script, the toggle stayed the same, so I’ll take a closer look at the toggle’s style and usage.
Thanks, I didn’t know in which class to search for a function like GetPixel. Making a slider shouldn’t be a hard thing to do, but there’s something I don’t know how to do: How to detect if I’m currently hovering my mouse over the GUI.DrawTexture. I can use a method, that I used with a pretty old engine, that I was working with, but this is pretty complicated, I will basicaly have to check manually:
for X: if(MousePosition >= ImagePosition MousePosition <= ImagePosition + ImageWidth)
And the same thing for the Y, but I’m pretty sure Unity has a better solution for that problem.
This does select a color from my image and applies it to the GUI texture, but the selection isn’t really accurate, it doesn’t exactly select the color I’m pointing at, for example if I’m over the red area, the color picked would be green.
Oh and is there a way to use a tint on a Texture2D, that would make it a lot easier for me.
You’re calling GetPixel with Input.mousePosition. That’d only work if the colour-swtch was covering the whole sceen. You need to scael and translate Input.mousePosition according to the size and location of the colour swatch.
It’s a simple scaling/translation problem. You have two coordinate systems: screen space [0,0 to SW,SH] and image space [0,0 to IW,IH]. The image space coordinates are mapped to a (possibly re-scaled) region in screen space, as represented by the Rect you pass to GUI.DrawTexture [X,Y, W,H]. So, very roughly:
if imageRect.Contains(mousePosition)
int pixelX = IW * ((mousePosition.x - X) / W);
int pixelY = IH * ((mousePosition.y - Y) / H);
Color c = image.GetPixel(x, y);
You may need to access-flip mousePosition.y (i.e. mousePosition.y = SH - mousePosition.y) but otherwise that should be pretty close.
I so really hate to have to post again, but I did this and nothing changed, it still gets incorrect colors. Here:
var colorBoxRect1 = Rect(410, 130 ,190,15); // we create the rect for the image
GUI.DrawTexture(colorBoxRect1, colorTable, ScaleMode.ScaleToFit, true, 10.0f); // Draw the image
if(colorBoxRect1.Contains(Vector2(Input.mousePosition.x, Screen.height - Input.mousePosition.y))) //check if mouse is over the image (only Input.mousePosition doesn't work)
{
if(Input.GetButton("Fire1")) // if we have clicked
{
//all the values before are from the Rect
var pixelX : int = 190 * ((Input.mousePosition.x - 410) / 190);
var pixelY : int = 15 * (((Screen.height - Input.mousePosition.y) - 130) / 15);
crosshairColor = colorTable.GetPixel(pixelX, pixelY);
guiTexture.color = crosshairColor;
}
}
Unless the size of the image you’re using really is the same as the size of the rect you’re drawing it to, IW != W and IH != H; in other words, you’re not correctly scaling into image space coordinates, because you aren’t scaling by the image dimensions. Add some Debug.Log traces of the various terms, sub-terms and results and you should be able to figure out where mistakes like that are coming in pretty easily. Also note that the values returned by GetPixel will be wrong if you don’t have the right texture import settings – filtering, compression and mipmapping can all affect what GetPixel returns. So convince yourself that your pixelX/pixelY results are sane first, then resolve any errors in the actual colour value from GetPixel.
Well, here’s the image I’m using, it’s resolution is 190 x 15, the Rect’s width and height are the same. The texture format is set to True Color and it’s read and write enabled. Whatever I do, it doesn’t work. I also noticed a strange thing. I’m able to get colors even if I’m not exactly hovering over the texture. I can put my cursor a little bit bellow the color box image and still get colors.
I also tried to add:
GUI.Label (colorBoxRect1, “testing testing testing”);
The result was strange, the text appears like it’s scaled down on the Y
I than put a box using that Rect and I saw that the Rect has different sizes from the ones of the texture.
I have this in my code to scale the GUI according to the aspect ratio:
GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3(parseFloat(Screen.width) / nativeHorizontalResolution , parseFloat(Screen.height) / nativeVerticalResolution, 1));
I have the feeling this causes the problems
Than I used ScaleMode.StretchToFill for the texture, but it keeps giving wrong colors
Yes, if you have additional GUI-wide transforms going on you’ll need to also account for those when mapping between input- / screen- / gui- / image-space. The code I posted didn’t attempt to do that, since you hadn’t mentioned needing it…
