koobas.hobune.stream
The gui box is overloaded with the background
Hi everyone, I want to make the background of the inventory.
I created the gui box but unable to make the background like the image above. Once I tried, the gui box is overloaded with the background.
Here is the image:
On the above image, I did not apply the background yet. But when I applied the background, it become like image below:
How do I make the background to the behind? So the gui box is not overloaded with the background, it is like the background become the holder for the gui box?
Here is the code that I am using:
void OnGUI()
{
GUISkin skin;
private Texture2D inventoryBackground;
inventoryBackground = Resources.Load<Texture2D>("Inventory Background"); // Inventory Background is the black background shown in the second image.
Rect backgroundInventory = new Rect((Screen.width / 3) - 5, (Screen.height / 3) - 80, 450, 450);
// I tried to make the GUISkin on Unity and apply the Inventory Background Texture on it and named it with Inventory Skin, but it says unable to find Inventory Skin
GUI.Box(backgroundInventory, string.Empty, GUI.skin.GetStyle("Inventory Skin"));
// I used either this code below or above (GUI.Box) to make the background, but still, the gui box that I have created is overloaded with the background
GUI.DrawTexture(backgroundInventory, inventoryBackground);
// This code below is to create the empty gui box based on the slotsX and slotsY
int slotsX = 10;
int slotsY = 10;
for (int y = 0; y < slotsY; y++)
{
for (int x = 0; x < slotsX; x++)
{
Rect slotRect = new Rect(x * 40 + (Screen.width / 3) + 25, y * 40 + (Screen.height / 3) - 50, 35, 35);
GUI.Box(slotRect, string.Empty);
}
}
Your answer much appreciated!
Thank you so much!
The word overloaded means something rather different to us, just an fyi. Try flipping the two
Sorry, I didn't get what you mean sir. Which one and should I flip?
The problem is rather simple. You are drawing the background after drawing your inventory slots. This means that the background is drawn in front and not in the back, which is what you want.
Simply change the rendering order.
UPDATE:
public Texture2D inventoryBackground; //Assign through the Inspector
public Rect backgroundInventory;
void Awake () {
backgroundInventory = new Rect((Screen.width / 3) - 5, (Screen.height / 3) - 80, 450, 450);
}
void OnGUI () {
GUI.DrawTexture(backgroundInventory, inventoryBackground);
int slotsX = 10;
int slotsY = 10;
for (int y = 0; y < slotsY; y++)
{
for (int x = 0; x < slotsX; x++)
{
Rect slotRect = new Rect(x * 40 + (Screen.width / 3) + 25, y * 40 + (Screen.height / 3) - 50, 35, 35);
GUI.Box(slotRect, GUIContent.none);
}
}
}
Thank you sir. But when I changed the code like your answer. I am still got the result like the image above (blank image) when the GUI.Box or GUI.DrawTexture is called after many boxes was called. Is the problem is the texture itself?
I want to be like this (Link):
A blank image like the image not rendering at all? Or it rendering in front?
Please have a look at updated answer.
No, it render sir, but rendering in front.
I have added the item to the GUI.Box with and without background image and modify the code as you mention on updated answer. This image link will show you:
Are you completely sure that is rendering the texture in front?
Since that is a black background you cannot see the GUI boxes. Try changing the background texture to a white texture.
I have decrease the opacity of the background to 50% and this is how it looks like sir:
Still, this background still rendering in front
