Laying out Icons In an inventory, that will rearrange to fit

Hi guys,

Wow, Im really enjoying using the new gui system. It kinda makes my head spin, and understanding the details is slowly making sense, but I've reached a point where it might be wise to ask for a quick bit of advice.

So Ive got a GuiBox that mostly fills the screen, and in that are small 128x128 icons, and Im trying to get them to layout nicely. Whats the best method? Currently they stack vertically rather than next to each other and into a second row. I figured the easiest way is to have greyed out textures at first, then change them based on game events, rather than try an insert new textures where there was nothing origionally.Anyways, if anyone with a flair for UnityGui feels like checking this out and advising on how to get it to layout nicer, that would be great. Thank you

AaronC

Code (csharp):

1. var Toy1Textures:String;
2. var Toy_01_00 : Texture2D;
3. var Toy_01_01 : Texture2D;
4. var Toy_01_02 : Texture2D;
5. var Toy_01_03 : Texture2D;
6. var Toy2Textures:String;
7.  
8. var Toy_02_00 : Texture2D;
9. var Toy3Textures:String;
10. var Toy_03_00 : Texture2D;
11. var Toy4Textures:String;
12. var Toy_04_00 : Texture2D;
13. var Toy5Textures:String;
14. var Toy_05_00 : Texture2D;
15. var Toy6Textures:String;
16. var Toy_06_00 : Texture2D;
17. var Toy7Textures:String;
18. var Toy_07_00 : Texture2D;
19. var Toy8Textures:String;
20. var Toy_08_00 : Texture2D;
21. var Toy9Textures:String;
22. var Toy_09_00 : Texture2D;
23.  
24. private var embedded_Icon_Toy_01 = Toy_01_00;
25. private var embedded_Icon_Toy_02 = Toy_02_00;
26. private var embedded_Icon_Toy_03 = Toy_03_00;
27. private var embedded_Icon_Toy_04 = Toy_04_00;
28. private var embedded_Icon_Toy_05 = Toy_05_00;
29. private var embedded_Icon_Toy_06 = Toy_06_00;
30. private var embedded_Icon_Toy_07 = Toy_07_00;
31. private var embedded_Icon_Toy_08 = Toy_08_00;
32. private var embedded_Icon_Toy_09 = Toy_09_00;
33.  
34. var showGUI = false;
35. private var Toy_01=0;
36.  
37.  
38. function Awake(){
39.  embedded_Icon_Toy_01 = Toy_01_00;
40.  embedded_Icon_Toy_02 = Toy_02_00;
41.  embedded_Icon_Toy_03 = Toy_03_00;
42.  embedded_Icon_Toy_04 = Toy_04_00;
43.  embedded_Icon_Toy_05 = Toy_05_00;
44.  embedded_Icon_Toy_06 = Toy_06_00;
45.  embedded_Icon_Toy_07 = Toy_07_00;
46.  embedded_Icon_Toy_08 = Toy_08_00;
47.  embedded_Icon_Toy_09 = Toy_09_00;
48. }
49.  
50.  
51. function Update() {
52.     if(Input.GetKeyDown("i")){
53.         Debug.Log("Opening Inventory");
54. showGUI=true;
55.     }
56. }
57.  
58.  
59.  
60.  
61.  
62.  
63.  
64.  
65.  
66. function OnGUI() {
67. if (showGUI==true) {
68.  
69.     GUI.Box (new Rect (10,10,Screen.width-20, Screen.height-20), "Inventory");
70.         if(GUI.Button (Rect (Screen.width - 130,10,120,20), "Next Page"))
71.         {
72.         print("Page2CodeHere");
73.             showGUI=false;
74.         }
75.    
76.         if (GUI.Button(Rect(10,10, 128, 20),"Close Window"))
77.             showGUI=false;
78.  
79.      GUILayout.BeginArea (Rect (10,30,Screen.width-20, Screen.height-40));
80.      GUI.BeginGroup (new Rect (0,0,Screen.width-20, Screen.height-20));
81.    
82.     GUILayout.Box (embedded_Icon_Toy_01);
83.     GUILayout.Box (embedded_Icon_Toy_02);
84.     GUILayout.Box (embedded_Icon_Toy_03);
85.     GUILayout.Box (embedded_Icon_Toy_04);
86.     GUILayout.Box (embedded_Icon_Toy_05);
87.     GUILayout.Box (embedded_Icon_Toy_06);
88.     GUILayout.Box (embedded_Icon_Toy_07);
89.     GUILayout.Box (embedded_Icon_Toy_08);
90.     GUILayout.Box (embedded_Icon_Toy_09);
91.         //  its those bits above that I need to layout better
92.  
93.     GUI.EndGroup ();
94.   GUILayout.EndArea ();
95.    
96. }
97.    
98. }
99.  
100.  

(WIP)

 

How about creating a 2 dimensional Texture array. Each position in the array will represent one slot in your inventory.
If a texture is null, display a default icon.

Of course instead of using a Texture array, it would be better for later use, if you built your own struct, which keeps reference to the actual Object the Texture represents.

Then run through the array like so:

Code (csharp):

1.  
2. Texture[][] inventory
3. int iconWidthHeight = 20;
4.  
5. // Create the an 8x8 Texture-Array
6. public void Awake()
7. {
8.     inventory = new Texture[8][];
9.     for( int i = 0; i < inventory.Length; i ++ )
10.     {
11.         inventory[i] = new Texture[8];
12.     }
13. }
14.  
15. public void OnGUI()
16. {
17.     //Go through each row
18.     for( int i = 0; i < inventory.Length; i ++ )
19.     {
20.         // and each column
21.         for( int k = 0; k < inventory[i].Length; k ++ )
22.         {
23.             //if there is a texture in the i-th row and the k-th column, draw it
24.             if( inventory[i][k] )
25.             {
26.                 GUI.DrawTexture( new Rect( k*iconWidthHeight, i*iconWidthHeight, iconWidthHeight, iconWidthHeight ), inventory[i][k] );
27.             }
28.         }
29.     }
30. }
31.  

[/code]

 

Hey,


Any chance you could make that into a script? Nothing I do makes that snippet compile. I know theres some obvious stuff missing but even adding that doesnt help.

Thanks
AaronC

 

I did forget a semicolon.

The bigger problem however was, that I failed to mention I wrote that snippet in C# and from the looks of this post you use JavaScript.

So I attatched both versions to this Reply.

 

Thanks. Its really good having real world examples. Thats pretty fancy but too slick this time round. I need to assign to different icons and your solution, though elegant, restricts me to one. So its not about procedurally laying it out but by having say 30 different icons and getting the preassigned icons to sit nice. Like my script doesnt.

Your solution would be really good for multiples of the same item though. Ive decided to go for a "find screensize divide screen up scale each icon relative to the overall screensize" approach. I can do simple math...most of the time.

Cheers-Much appreciated.
AC

 

It doesn't actually restrict you at all. Each slot in the inventory array can hold a different Texture. All you need to do iss assign them. The default texture is only used, when there is none in the appropriate slot (empty).

 

To prove my point, I extended the above script. It now has Functions called AddItem, which search for a free spot in the inventory.
When you click mouse button 0 or 1, an item is added to the inventory with textures you assign.

Also the Array doesn't consist of Textures anymore, but of instances of a class called InventoryItem. This class can hold any data necessary. Now it only holds a texture and a GameObject.

Guess I have too much time on my hands....

Code (csharp):

1. //Our inventory
2. var inventory : Array;
3.  
4. //This will be drawn when a slot is empty
5. public var emptyTex : Texture;
6.  
7. //the size of the inventory in x and y dimension
8. public var inventorySizeX = 8;
9. public var inventorySizeY = 5;
10.  
11. //The pixel size (height and width) of an inventory slot
12. var iconWidthHeight = 20;
13.  
14. //Space between slots (in x and y)
15. var spacing = 4;
16.  
17. //set the position of the inventory
18. public var offSet = Vector2( 100, 100 );
19.  
20. // TEST VARIABLES
21. // Assign these to test adding Items with mouse clicks (see Update())
22. public var testTex : Texture;
23. public var testTex2 : Texture;
24.  
25. //Our Representation of an InventoryItem
26. class InventoryItem
27. {
28.     //GameObject this item refers to
29.     var worldObject : GameObject;
30.     //What the item will look like in the inventory
31.     var texRepresentation : Texture;
32. }
33.  
34. // Create the Inventory
35. function Awake()
36. {
37.     inventory = new Array(inventorySizeX);
38.    
39.     for( var i = 0; i < inventory.length; i ++ )
40.     {
41.         inventory[i] = new Array(inventorySizeY);
42.     }
43. }
44.  
45. function OnGUI()
46. {
47.     var texToUse : Texture;
48.     var currentInventoryItem : InventoryItem;
49.    
50.     //Go through each row
51.     for( var i = 0; i < inventory.length; i ++ )
52.     {
53.         // and each column
54.         for( var k = 0; k < inventory[i].length; k ++ )
55.         {
56.             texToUse = emptyTex;
57.             currentInventoryItem = inventory[i][k];
58.            
59.             //if there is an item in the i-th row and the k-th column, draw it
60.             if( inventory[i][k] != null )
61.             {
62.                 texToUse = currentInventoryItem.texRepresentation;
63.             }
64.            
65.             GUI.DrawTexture( new Rect( offSet.x+k*(iconWidthHeight+spacing), offSet.y+i*(iconWidthHeight+spacing), iconWidthHeight, iconWidthHeight ), texToUse );
66.         }
67.     }
68. }
69.  
70. function AddItem( item : InventoryItem )
71. {
72.      //Go through each row
73.     for( var i = 0; i < inventory.length; i ++ )
74.     {
75.         // and each column
76.         for( var k = 0; k < inventory[i].length; k ++ )
77.         {
78.             //If the position is empty, add the new item and exit the function
79.             if( inventory[i][k] == null )
80.             {
81.                  inventory[i][k] = item;
82.                  return;
83.             }
84.         }
85.     }  
86.    
87.     //If we got this far, the inventory is full, do somethign appropriate here 
88. }
89.  
90. function AddItem( worldObject : GameObject, texRep : Texture )
91. {
92.     var newItem = new InventoryItem();
93.    
94.     newItem.worldObject = worldObject;
95.     newItem.texRepresentation = texRep;
96.        
97.     AddItem( newItem );
98. }
99.  
100. function Update()
101. {
102.     if( Input.GetMouseButtonDown( 0 ) )
103.     {
104.         AddItem( gameObject, testTex );
105.     }
106.    
107.     if( Input.GetMouseButtonDown( 1 ) )
108.     {
109.         AddItem( gameObject, testTex2 );   
110.     }  
111. }

 

Hey thats great, thanks! lots of cool little treats in there!
AC

 

No problemo.

More advanced functionality like actually using the items is missing of course. You could start by making the items draw as buttons and checking if they're being clicked.

Just post if I can help some more.

 

Hey I've had Unity for about 3 months now and I'm no programmer. I've searched everywhere trying to figure out how to use the items once they're in the inventory. I used the script from Der Dude 3 posts above this one and mostly I would like to at least be able to remove the texture once it's there. How would I be able to know the location of the item in the array to remove it? Or how would I go about solving this? Thanks in advance!

 

First thing you could do is to not draw Textures, but Buttons.

So the line

Code (csharp):

1.  
2. GUI.DrawTexture( new Rect( offSet.x+k*(iconWidthHeight+spacing), offSet.y+i*(iconWidthHeight+spacing), iconWidthHeight, iconWidthHeight ), texToUse );
3.  

could be something like:

Code (csharp):

1.  
2. if(GUI.Button(new Rect(...), textToUse))
3. {
4.     // Do Inventory Item Action here
5.  
6.     //Remove it
7.     currentInventoryItem = null;
8. }
9.  

To actually create different kinds of Iventory Items you extend the InventoryItem class.

Code (csharp):

1.  
2. class MySwordItem : IventoryItem
3. {
4.     protected int damage;
5.     protected int durability;
6.     protected int weight;
7.  
8.     // This could be executed when clicked in the GUI
9.     void OnClick()
10.     {
11.         // Equip this sword
12.     }
13. }
14.  

You can check the type of an object like this:

Code (csharp):

1.  
2. if( myObject.GetType() == typeof(MySwordItem))
3. {
4.     //Do specific SwordItem action
5. }
6.  

EDIT: Note these are C# snippets.

 

Thanks for the quick reply! I got the buttons to work and I can remove things now, but I tried for a couple of hours to get the check the type of object and I'm having trouble adding something from a different class. I attempted to copy the function AddItem in the script and to modify it so that it would add the different class if some variable was true. Is there an easy fix for this? Thanks again!!

 

Okay I've been in and out of this topic for a few days now I cant seem to get a hold on this I try to simplify your code down to my level but I keep having trouble with the InventoryItem class I've made my own but it doesn't use an array and I don't know how to code it so that it'll pick up an item display the info when you click on it and know when a slot is open and can be used...
please help I've been wandering around trying to stumble on a hacked solution without success and I cant find much help anywhere else :?
any help would be Greatly appreciated!

EDIT: Figured it out. But I get a NullReferenceException: Object reference not set to an instance of an object
when I call the AddItem function on another script when I'm looking for an empty slot... the GameObject and Texture variables are used... so I cant pinpoint it :?

 

Alright I fixed it I'll leave the forum alone for awhile

 

Upon request I've whipped up a little example project where you can add, remove and equip items from the inventory.
Note this is very generic but it should point you in the right direction, if you are having trouble extending the above scripts.

It includes a test scene. A click on the world-objects adds them to the inventory. A right click on an inventory-Item removes it (item in world, not in inventory), a left click equips it (item in world and in inventory.

 

Thanks, very nice you share this, i was just about to get an idea of implementing a inventory and your project looks quiet good.

I had to upgrade and the only flaw i found, it's not removeing the image of the dropped item.
It works if i use "mouse 1" tough.

Really cool script.

 

(@DerDude?)

I was looking at your code and it certainly works, but I had a question about the nested arrays:

Your code has this:

Code (csharp):

1. var inventory : Array;
2.  
3. function Awake () {
4.      inventory = new Array (inventorySizeX);
5.  
6.     for (var i : int = 0; i < inventory.length; i ++) {
7.         inventory[i] = new Array (inventorySizeY);
8.     }
9. }

And later your code accesses these nested arrays

Code (csharp):

1. function OnGUI () {
2.     var currentInventoryItem : InventoryItem;
3.  
4.     //Go through each row
5.     for (var i : int = 0; i < inventory.length; i ++) {
6.         // and each column
7.         for (var k : int = 0; k < inventory[i].length; k ++) {
8.             currentInventoryItem = inventory[i][k];
9.  
10. //  More Code...
11. }

So, I assume that the nested arrays are protected in some way that there is no confusion with the duplicated variable name. Obviously it works, and inventory[ i ][ k ]; is certainly neat. I just wouldn't have guessed you could do that and would have used inventoryX and inventoryY (for example).

What am I asking...

I guess it's "Why does this work?"

Why is there no confusion about the duplicated variables? How can you distill this down to inventory [ i ][ k ]?

--

As I'm writing this I think it's becoming more clear...

Because the first variable is "inventory", and then the next variable is not "inventory" [ i ], but it is in fact "inventory [ i ]"?

If so, then is it Unity.js and it's dynamic typing that is allowing the statement:

Code (csharp):

1. inventory[i] = new Array (inventorySizeY);

... rather than something like:

Code (csharp):

1. var inventory[i] : Array = new Array (inventorySizeY);

??

 

What... The... Hell, Your logic is broken...
xD

 

Hey - I'm not a coder.

Just trying to make sense of something I don't understand.

If I have it wrong, can you explain it?

 

I have taken the code here and updated it to make a more "WoW-like" Inventory and Loot system.

I have posted more details, including links to the code, here:
http://forum.unity3d.com/viewtopic.php?p=319613


(Some Textures and Icons in this project are not licensed for distribution and are for testing purposes only)

Please note that even tho' this is pictured within an Apple iPhone, this code is platform independent and has NOT been optimized for an Apple Touch Device and is standard Unity code for any project.

 

I've been looking at the part of the code that confused me with (inventory[k]) and somewhere my OCD wanted me to have one large flat array for my inventory.

I don't know if there is any advantage to iterating through one array containing a class rather than iterating through an array containing arrays containing a class... but hey.

SO this is the basis of what could become a new method of displaying the array:

Code (csharp):

1. function Awake () {
2.     var inventoryWidth : int = 5;               //  The number of columns
3.     var j : int;                                    //  A storage variable
4.     var k : int;                                    //  A storage variable
5.     for (var i : int = 0; i < 30; i++) {    //  30 here is arbitrary and should be array.length
6.         Debug.Log ("[i] == : " + i);
7.         j = i / inventoryWidth;
8.         Debug.Log ("[i]/5 == : " + i/inventoryWidth);
9.         Debug.Log ("Mathf.Round: " + Mathf.Round (i/inventoryWidth));
10.         Debug.Log ("---------------------------------");
11.         k = i % inventoryWidth;
12.         Debug.Log ("i remainder(modulus)" + k);
13.         Debug.Log ("=================================");
14.     }
15. }

This shows (in the console) that:

- You can divide the array location by the inventoryWidth and a simple int will give you the rows number, starting with 0. (I also included Mathf.Round out of curiosity...)

- You can take the modulus of the array location using the inventoryWidth to find the remainder to get the column number, starting with 0.

These should plug into the current code:

Code (csharp):

1. GUI.DrawTexture (new Rect (offSet.x + k* (iconWidthHeight + spacing), offSet.y + i* (iconWidthHeight + spacing), iconWidthHeight, iconWidthHeight), currentInventoryItem.itemIcon);

replacing i k with j k to display a single flat array in a grid, eliminating the need for:

Code (csharp):

1. inventory = new Array (inventorySizeX); // Create the matrix of arrays to hold the inventory
2. for (var i : int = 0; i < inventory.length; i ++) {
3.     inventory[i] = new Array (inventorySizeY);
4. }

 

I've done a bodge update to the code and it works...

You also need to change this function:

Code (csharp):

1. function AddItem (item : InventoryItem) {
2.     for (var i : int = 0; i < inventory.length; i ++) {
3. //      for (var k : int = 0; k < inventory[i].length; k ++) {
4.            
5.             if (inventory[i] == null) {
6.                 inventory[i] = item;
7. //          if (inventory[i][k] == null) {
8. //              inventory[i][k] = item;
9.                 return;
10.             }
11. //      }
12.     }
13.     Debug.Log ("Inventory is full");
14. }
15.  

 

So - I've discovered the answer to my own question about inventory[ i ][ k ]

http://www.unifycommunity.com/wiki/...Of_Array_Or_Collection_Should_I_Use?#2D_Array

It's a 2D array, which I was unaware was something accommodated for in the code. I'd assumed that this was just clever nesting of arrays. I still like the flat array solution I've posted, as it allows easy resizing of the inventory on the fly.

 

I told you, where would you be without me...

 

http://forum.unity3d.com/viewtopic.php?t=46222 watch that

 

My basic research on this project:

http://theantranch.com/Unity/Entries/2010/5/17_Basic_Inventory_&_Looting_System.html

has lead me to these links:
http://forum.unity3d.com/viewtopic.php?t=11865 Der Dude
http://forum.unity3d.com/viewtopic.php?t=46222 Alexwilds
http://forum.unity3d.com/viewtopic.php?t=51475 stneas

The one by stneas is by far the most comprehensive, with serialization and editor scripts, but I found it a bit out of my league to adapt.

There are others. A search of the forums for "inventory" provides good feed back. When it comes to a forum search, don't forget Google! You can google subjects on a specific site by going to the advanced search and typing the site url (eg: http://forum.unity3d.com) into the "Search within a site or domain:" field. You will end up with a search string like: abcdefg site:http://forum.unity3d.com. I find that since the forum search and the Google search are different, you can get different, if not better, results from the advanced google search.

-

Ok, try this:
http://tinyurl.com/Unity3DInventorySearch

... which is short-hand for this:
http://www.google.co.uk/search?num=...orum.unity3d.com/&aq=f&aqi=&aql=&oq=&gs_rfai=

...which is just google searching the forums for "inventory".

Lots of good hits!

 

This was a great help.

I have a question,
everything works like a charm except for one small piece, my Inventory is a different scene.
I did this to try and reduce fps loss.

So in essence, my objects are in scene 'level_1'
and my Inventory is ina scene labeled 'invent'

To test it and see if it works I currently have the 'invetory prefab' (der dude's code)' in both scenes.
All my variables are public and all my other elements work properly in both scenes 'console etc.'
I tried:

Application.LoadLevel("invent").InventoryEquip.statInventory.AddItem(item);

ThX

 

Problem Solved.

 

I don't know if anyone still views this thread but I have one quick question. The inventory script works amazing, thanks a ton for posting it. However I was wondering how you could change it (js version) into allowing the items to stack. I've tried a few different things and gone to many different sites and haven't found anything that really told me what to do. I understand that there are many different ways of doing this and that is why people don't put down one simple way. All I would like is an inventory where your items stack, the number of that item is displayed on the lower right side of the icon and you can drag the items around to rearrange them in the inventory. (an mmo styled inventory basically..something similar to Flyff or Grand Fantasia) I'd like the maximum stackable items to be 999.
I am kind of new to unityscript (been learning stuff as I go) so forgive me if I've left anything out that might be needed. Throughout all of my experiments I just can't seem to get this right. If there are any tips or even an example code that'd be great. As I am a newbie still, I am slow with some things and explanation would be great if you don't mind.
Thank you.