koobas.hobune.stream
Layering GUI Texture
Hey guys, I am trying to do something that I thought should be easy.
I am having levels download and have a rating (all server side, all done). The rating is between 0 and 5, and contains up to one decimal. So like... 2.7 would be a rating.
I am trying to display a set of 5 stars. I made these in photoshop. I made 2 images, one of empty stars, and one of full stars, each obviously have 5 stars.
I want the empty stars to all appear, and then the full stars fill in. Now, this is similar (I thought) to the concept found here: http://answers.unity3d.com/questions/11892/how-would-you-make-an-energy-bar-loading-progress.html
However, I just can't seem to get it work. I need it to appear in a GUI Layout, as there are going to be 10 levels per page. I have that loop all done, and it displays the rating number in a GUILayout.Horizontal() area. I am writing this in UnityScript/Java.
I have tried making a GUI box and then having these stars appear on top of it, which works if the stars are FULL, but only if they are full. I essentially need them to crop, instead of resize. I'm truly lost here. Any help would be so greatly appreciated.
I don't think you can put GUI.BeginGroup in a GUILayout.BeginHorizontal(); or GUILayout.BeginVertical();
So the way I would do it is ..
#pragma strict
var starsEmpty : Texture2D;
var starsFull : Texture2D;
public var starRating : int[] = [0,4,3,1,2,4];
public var starNames : String[] = ["Mike","Steve","Paul","Harry","Stuart","Kevin"];
function Start () {
}
function Update () {
}
function OnGUI(){
var adjust : int;
for(var j = 0; j < 6; j++){
// Here you would call the players rating .. by this script: parsed[i]["rating"]
adjust = starRating[j];
adjust = adjust + 25 * adjust;
GUI.BeginGroup(Rect(0,j*33,100,24));
GUI.DrawTexture(Rect(0,0,100,24), starsEmpty);
GUI.EndGroup();
GUI.BeginGroup(Rect(0,j*33,adjust,24));
GUI.DrawTexture(Rect(0,0,100,24), starsFull);
GUI.EndGroup();
}
GUILayout.BeginArea (Rect (100,0,200,200));
for(var i = 0; i < 6; i++){
GUILayout.BeginHorizontal("box");
GUILayout.Label("Star rating in Level " + i);
// Here you would call the name .. "Level name: " + parsed[i]["name"]
GUILayout.Label(starNames[i]);
GUILayout.EndHorizontal();
}
GUILayout.EndArea ();
}
Use the below Textures with this scrip to try it, then alter to suite your requirements .. Hope this helps you out.
This was very close. Sadly, it was off by just a bit. After a little bit of tweaking, I got all of the stars to appear how I needed; however, without me thinking about it... some of the information stretches out certain columns, so the stars no longer lined up... that's hard to explain in words, so I'll include a screenshot link below.
The only solution I could think of, which I can do if I need to, is to have the description in a scrollbox of a set height so that it doesn't stretch the rows. I'd prefer them as is, but I can add a scrollbox if that's what I need to do!
Screenshot: http://www.coreymccown.com/images/GUIClose.png
Thanks for the help man. I really appreciate it.
Ok, glad it helped, can you mark it as answered please, now I've seen a screen shot of what you're trying to achieve I'll have a think about it, if I come up with something I'll let you know.
Do you $$anonymous$$d posting the code that done the screenshot ?
I'll P$$anonymous$$ you a link to the download level file on the Unity Forums that way you can see the entire script.
Yes. It'll be a web player game with an optional client download to play it offline. No android or iOS at the time. I sent a link to an archive that has the stars I am using as well as the level list script in a private message on the forums. :)
Try this, create a empty game object, drop this script onto it then add the textures I've supplied below Stars.zip, press "z" to test it and alter to suite your requirements.
And don't forget to set the texture type of the star to GUI in the Inspector.
#pragma strict
var starsEmpty : Texture2D;
var starsFull : Texture2D;
private var adjustStars : float;
function Start () {
}
function Update () {
if (Input.GetKeyDown ("z")){
adjustStars = adjustStars + 50;
}
}
// Adjust the health bars of the enemy
function OnGUI(){
var adjust : float = adjustStars;
// Place the GUI at the top of the screen
GUI.BeginGroup(Rect(Screen.width / 2 - 150,Screen.height - Screen.height + 50,200,48));
GUI.DrawTexture(Rect(0,0,200,48), starsEmpty);
GUI.EndGroup();
// Place the GUI at the top of the screen
GUI.BeginGroup(Rect(Screen.width / 2 - 150,Screen.height - Screen.height + 50,adjust,48));
GUI.DrawTexture(Rect(0,0,200,48), starsFull);
GUI.EndGroup();
}
That works, however, how could I get that into the loop that displays all of the levels? It's inside of a GUILayout.BeginHorizontal(); and if I just use GUI it stacks all of them in one spot =/ Thanks a lot for the help so far!
Not sure what you'r asking but I think all you need to do is use a global variable for the line
var adjust : float = adjustStars;
something like
var adjust : float = globalVars.GetComponent(GlobalVars).starRating;
and check it in the loop with some thing like
private var globalVars : GameObject;
function Awake(){
globalVars = GameObject.Find("Global Vars");
}
function Update(){
globalVars.GetComponent(GlobalVars).starRating;
}
The code I'm inserting this into is like this: (This is a shortened version):
for(var i = 0; i < parsed.length; i++){
GUILayout.BeginHorizontal();
GUILayout.BeginVertical();
GUILayout.Label("Level name: " + parsed[i]["name"],GUILayout.Width(w1));
GUILayout.BeginHorizontal(rating,GUILayout.Width(150),GUILayout.Height(29));
//Rating stars go here! Variable obtained by this script: parsed[i]["rating"] . This is unique for every level in the loop.
GUILayout.EndHorizontal();
GUILayout.EndVertical();
GUILayout.EndHorizontal();
}
It needs to go where that comment is, each time the loop goes through. This is all part of a GUILayout.BeginArea, so they all end up stacking on top of each other into a nice list of all the levels. The rating is being obtained through a JSON parser, as is all of the other information. For each iteration i, the rating, name, etc will change.
Thanks man!
Hi, Here is a quick workaround I've done, (a very short script) it rounds the players score to .5 and uses a set of star textures to match, drop the star textures in the array in the inspector, the star ratings will stay within the GUILayout if you add more text to one, it might help get your project where you want it.
It does work very well. I decided to go with having set heights for the description, and it looks better than I anticipated. The scroll bars only come up if it's a large description, and it doesn't really look out of place. Thanks a ton for all of your help. I am very grateful for it, and it seems like you have took a lot of time out of your day to help out, and that's rare to find these days. Thanks!
