Item System

Hi

Can anyone tell me how they would make "an item shop" based on the following:

- all shop items are displayed as a grid (with scrollbar)

- clicking on one should bring up a larger picture and a description as well as the usual do you want to purchase this options.
(this is proving difficult - I'm a noob to unity)

- this should be happening over the top of game play and be removed when leaving the shop.

 

Hi, i seems to be having problems trying to do this aswell.

Help us if you can. Greatly apreciated

 

Firstly, read the documentation where they teach you how to make custom controls using the GUI... That would be step 1.

Now, Go into Photoshop and draw yourself a nice background image.

Next, in Unity, create a new GUISkin. Inside this skin, use the image you created as the NORMAL background under the Button tab.

(If you want to be REALLY fancy, you could repeat this process for the VerticalSliderThumb or even the VerticalSlider also for a complete package!)

Now, I would create an array of INT and fill it with 0. One entry for every block you want to show.

In your OnGUI function, set you skin using GUI.skin = mySkin;
Then, simply create your scrollarea like in the docs and then, simply create a loop to draw your custom objects within the scrollarea.

Because you have defined buttons to use a background image in the skin, your scroll area will have a nice graphical interface.

Now, for your custom object, make each button check it's value in the array. If it's value is 0, check that the current block's size is the same as the rest. If not, simply make it slightly smaller and move it closer to it's default position. If it is 1, then check to see if it is full size or not (the size of your scrollarea) and if not, increase it's size ever so slightly and move it slightly closer to the top left corner. Continue to do this until the size is right. Now simply say that if your control is clicked, change the value from 1 to 0 or vice versa.

Heck you could even use a boolean if you want to.

Then you could always have another boolean to say wether there is currently an item being scaled. If so then no other button's presses do anything. You could then have a separate custom control that always checks wether something is selected and wether it is opening or opened. That can then either only show when it is done or grow with the button. This custom control can then display the info and the buttons to buy etc.

At least, that's the way I would do it...

Code (csharp):

1.  
2. function CustomItem(pos : Rect, id: int, item: Texture)
3. {
4.   if (id == SelectedItem)
5.      pos = SelectedItemSize;
6.  
7.   if (GUI.Button(pos, item))
8.   {
9.     if (!itemSelected)
10.     {
11.       itemSelected = true;
12.       SelectedArray[id] = true;
13.       SelectedItem = id;
14.       SelectedItemSize = DefaultSmallSize;
15.     } else
16.     {
17.       if (id == SelectedItem)
18.         SelectedArray[id] = false;
19.     }
20.   }
21. }
22.  
23. function Update()
24. {
25. if (SelectedItem >= 0) {
26. if (SelectedArray[Selecteditem])
27. {
28.   if (SelectedItemSize.width < DefaultLargeSize.width)
29.      SelectedItemSize.width += 500 * Time.deltaTime;
30.   if (SelectedItemSize.height < DefaultLargeSize.height)
31.      SelectedItemSize.height += 500 * Time.deltaTime;
32.   if (SelectedItemSize.x > DefaultLargeSize.x)
33.      SelectedItemSize.x -= 500 * Time.deltaTime;
34.   if (SelectedItemSize.y > DefaultLargeSize.y)
35.      SelectedItemSize.y -= 500 * Time.deltaTime;
36. } else
37. {
38. //copy the above but reverse all +/ - / < / > and use the ACTUAL position it should go to instead of the DefaultSize variables...
39. //also add in an else for every line so that you end an item on an exact size and place.
40. //This way you can test that if the size = the size it should be,
41. // you can turn off the variable that indicates something is being shown and do the other remaining processing to enable the next button to be pressed...
42. }
43. }
44. }
45.  

Hope this helps you get started. Good luck figuring out the rest.

 

Thanks for that

I had the images and looked at the docs and failed which is why I came here,

Will try your approach in the morning and let you know how it turns out.

Thanks again!

 

how do you set up the item variables then?[/b]

 

NO IDEA WHAT YOU MEAN...

What item variables? You mean what items to show? For that you could simply create a prefab that lists all the info you want to associate with an item, including an image of the item and even a model... anything you like. duplicate that prefab for every item you have in your game and then create an array of GameObject or Transform and just drag each on into the array.

As a programmer there is many different ways you can do anything you want to do. It all depends on what is easier for you. You could build a prefab that contains all your prefabs and just load that prefab list... or you could place all your items in a Resource folder and load what you want using the Resources.Load function. You could create a text file with comma separated values and in there include the name of the image in the Resource folder....

Many options to setup something...

 

I couldn't get your version to work and broke unity in the process.

After reinstalling unity this is what I have come up with so far

Code (csharp):

1.  
2.  
3.  
4. var scrollPosition = Vector2.zero;
5. var numberOfMerchantAssets = 30;
6.  
7. function OnGUI () {
8.  
9.  
10. // make the scroll area
11.     scrollPosition = GUI.BeginScrollView (Rect (10,300,740,400),
12.     scrollPosition, Rect (0, 0, 690, 1200));
13.  
14.     for (var e=0; e < 15; e++)
15.     {
16.         for (var i=0; i < 9; i++)
17.         {  
18.             if (GUI.Button (Rect (1 + (i * 80), 1 + (e * 80) , 78, 78), (i +"-" + e)))
19.             {
20.    
21.             }
22.         }
23.     }
24. }
25.  
26.  

I'm not sure what to do from here...

 

That only shows buttons with numbers on them, how do i connect them to swords and attach pictures?

MrDude... i dunno wat you mean either

any other helps you can give us... me in particular?

 

The number displayed was a co-ordinate for my own reference, however if it could be used to link to the item to be purchased, it would be nice.

Some visual improvements I will make to this (eventually!) are :

- variable length of the scrollable area based on how many items the merchant has for sale.

- buttons that appear after you select an item to purchase.

- a button that switches between buy and sell

- a spacey theme ( computer chip like graphics )

 

I notice you guys have very low low post counts so I am going to assume that means you guys are new. With that being the case, perhaps me starting out with something that fancy and expecting you to fill in the blanks (of which there were numerous) was perhaps a bit much to ask...

Let me make it a lot simpler. Using Myth's code, Just to get your game to LOOK like something for now, just create an array of Texture and call it "images" and then in your inspector drop an image for each item you want to display.

Now replace this:

Code (csharp):

1. if (GUI.Button (Rect (1 + (i * 80), 1 + (e * 80) , 78, 78), (i +"-" + e)))

with this:

Code (csharp):

1. if (GUI.Button (Rect (1 + (i * 80), 1 + (e * 80) , 78, 78), Images[(e*15) + i])))

That will at least show the images but it is not of much use as it is only an image and nothing else. Of course you could have the button call a function called "Buy(index: int)" and have the index sell a specific thing:

Code (csharp):

1. function Buy(index:int) {
2. switch(index)
3. case 0: Swords++; break;
4. case 1: Knives++; break;
5. default : Forks++;
6. }
7. }

...but that's just plain bad programming...!

Instead, what I would suggest is that you do this:
1. Create a script named StockItem.js and give it a number of variables. I.e. Name, Price, Image etc
2. Create a new empty GameObject and add that file to it. Then create a prefab from that.
3. Duplicate it once for every item you have in the game and fill in the fields as appropriate.
4. Back in this script where you display the items, create a variable like so:

Code (csharp):

1. var Items : StockItem[];

5. In the inspector, drag all the items into the variable.
6. Optional. In the StockItem.js file, have a variable called "Available" and depending on if it is available or not, don't show it when you show your items...
7. Now modify Myth's code like so:

Code (csharp):

1.  
2. var CurrentSelection : StockItem;
3. var Row : int = 0;
4. var Col : int = 0;
5. for(var I : Stockitem in Items)
6. {
7. if (GUI.Button(Rect( 5 + (Col++ * 40), Row, 35, 35), I.Image))
8. {
9. CurrentSelection = I;
10. }
11. if (Col == 15)
12. {
13. Row += 40;
14. Col = 0;
15. }
16. }
17.  
18.  
19. function OnGUI()
20. {
21. if(CurrentSelection)
22. {
23.   GUI.Label(Rect(5,5,90,90), CurrentSelection.Image);
24. }
25. }
26.  

then you can get fancy depending on what you had in the StockItem.js file...

Code (csharp):

1.  
2. GUI.Label(Rect(110, 05, 500, 30), CurrentSelection.name);
3. GUI.Label(Rect(110, 35, 500, 30), CurrentSelection.price);
4. if(GUI.Button(Rect(110, 65, 50, 30), "Buy"))
5. {
6. Gold -= CurrentSelection.price;
7. thisItem = MyPlayer.FindObject(CurrentSelection.name);
8. thisItem.Own++;
9. }
10. if(GUI.Button(Rect(110, 65, 50, 30), "Sell"))
11. {
12. Gold += CurrentSelection.resellValue;
13. thisItem = MyPlayer.FindObject(CurrentSelection.name);
14. thisItem.Own--;
15. }
16.  

 

How do i mannage to create this array?

 

OMG!

You type this:

Code (csharp):

1.  
2. var images : Texture[];
3.  

 

I am not getting any variable come up for the picture/texture in the inspectior

have tried to call it with both the Texture2D and texture[] commands

 

Make sure it is in the top of the file, not inside a function. If you do that it should pop up in the inspector just fine

 

Code (csharp):

1. var pic : Texture[];
2. var names = "adamantium";
3. var price = 200;
4. var description = "Ad, a metal";
5.  
6.  
7. function Update ()
8.     {
9.    
10.     }

well, mines also not showing in the inspector, and above is how i have it. Can you see any problems with it?

am i meant to have anything inside the update function also?

 

that looks perfect! you have this attached to an object and you are inspecting the object and nothing comes up?

You have tried this with Texture2D also?

The only thing I can think of that might be wrong is that there is another error somewhere in your script and because of that the script is not updated. When you look in the console, is there are red icons that indicate an error in your file? If there is 1 error anywhere, it will refuse to build the file and NONE of your changes will be visible.

Just to test, take that code you just pasted above and make that the ONLY code in a file. See if that comes up when you attach it so an object.

 

the errors are in the code you said to update

 

It is appended to a blank gameObject

 

can you past a complete version and I can compare it

 

And how do I get rid of

"you are pushing more GUI clips than you're popping"

 

It means you are starting a group but not closing it again either because you don't write a close statement or because something goes wrong inside the group. In your case I would assume inside the scrollarea. Did you remember to add a GUI.EndScrollView() ?

 

Found out what the problem was, i hadnt changed a part of the code.
nothing shows..

 

Thanks

That got rid of that! - It's been annoying me ALL night!

 

Code (csharp):

1. var scrollPosition = Vector2.zero;
2. var numberOfMerchantAssets = 30;
3. var pic : Texture2D[];
4. var items : StockItem [];
5.  
6. var CurrentSelection : StockItem;
7. var Row : int = 0;
8. var Col : int = 0;
9.  
10.  
11. for(var I : pic in StockItem)
12.     {
13.     if (GUI.Button(Rect ( 5 + (Col++ * 40), Row, 35, 35), I.pic))
14.         {
15.             CurrentSelection=I;
16.         }
17.     if (Col == 15)
18.         {
19.             Row += 40;
20.             Col = 0;
21.         }
22.     }
23.  
24. function OnGUI()
25. {
26.     // make the scroll area
27.     GUI.Box (Rect (10,300,740,400), "Sure");
28.     scrollPosition=GUI.BeginScrollView (Rect (10, 300,740,400), scrollPosition, Rect (0, 0, 690, 1200));
29.  
30.     if(CurrentSelection)
31.         {
32.             GUI.Label(Rect (5,5,90,90), CurrentSelection.pic);
33.         }
34.        
35.     GUI.EndScrollView();
36.    
37. }

This brings up some errors... what is wrong with it?
and in advance, cheers for helping MrDude

 

first thing's first, i need to know what your StockItem.js file looks like. Do you have a var named pic in there?

Secondly, did you fill up the items variable in the inspector? i.e, it is not empty?

Thirdly, I noticed a bug in your code:

Should be:

Code (csharp):

1.  
2. for (var I : StockItem in Items)
3.  

... and then you use I.pic for the button. This is why I wanted to find out if you actually HAVE a pic variable defined inside StockItem.js

The rest looks fine. Check if this solves your issue and if you still get errors, please post the actual error message instead of just saying "some errors", please and I can try and help you out from that.

 

That was the first js that i showed.

At the moment there is one item in it as i want to see what it does singular, does it need more than one item in it to work properly?

Are you able to explain what that means?

 

1 items should be fine

This is an alternate way of looping an array. Instead of saying:

Code (csharp):

1.  
2. for( x = 0; x < Itms.length; x++)
3. {
4. var i :  StockItem = Items[x];
5. Debug.log(i.pic);
6. }
7.  

you just say

Code (csharp):

1.  
2. for (var i: StockItem in Items)
3. Dbug.Log(i.pic);
4.  

 

i am getting an error,

NullReferenceException: Object reference not set to an instance of an object
UnityEngine.GUI.Button (Rect position, UnityEngine.Texture image)
ItemSales.Main () (at Assets\New Folder\ItemSales.js:13)

what does that mean?

code has been slightly changed, and is giving me just that error..

Code (csharp):

1.  
2. ItemSales Script
3.  
4. var scrollPosition = Vector2.zero;
5. var numberOfMerchantAssets = 30;
6. var pic : Texture2D[];
7. var items : StockItem [];
8.  
9. var CurrentSelection : StockItem;
10. var Row : int = 0;
11. var Col : int = 0;
12.  
13.  
14. for(var i : StockItem in items)
15.     {
16.     if (GUI.Button(Rect ( 5 + (Col++ * 40), Row, 35, 35), i.pic))
17.         {
18.             CurrentSelection = i;
19.         }
20.     if (Col == 15)
21.         {
22.             Row += 40;
23.             Col = 0;
24.         }
25.     }
26.  
27. function OnGUI()
28. {
29.     // make the scroll area
30.     GUI.Box (Rect (10,300,500,250), "Sure");
31.     scrollPosition=GUI.BeginScrollView (Rect (10, 300,500,250), scrollPosition, Rect (0, 0, /*   */250, 1200));
32.    
33.     GUI.EndScrollView();
34.  
35.     if(CurrentSelection)
36.         {
37.             GUI.Label(Rect (5,5,90,90), CurrentSelection.pic);
38.         }
39.        
40.    
41.    
42. }
43.  
44.  
45.    /*for (var e=0; e < 15; e++)
46.    {
47.       for (var i=0; i < 9; i++)
48.       {  
49.          //if (GUI.Button (Rect (1 + (i * 80), 1 + (e * 80) , 78, 78), (i +"-" + e)))
50.          //if (GUI.Button (Rect (1 + (i * 80), 1 + (e * 80) , 78, 78), images[(e*15) + i]))
51.     //     {
52.    
53. //         }
54.       }
55.    }
56. } */
57.  

Code (csharp):

1.  
2. StockItems
3.  
4. var names = "adamantium";
5. var price = 200;
6. var description = "Ad, a metal";
7. var pic : Texture2D;
8.  
9. function Update ()
10.     {
11.    
12.     }

 

the commentation within was for some help for myself

 

Trying to use an item that is not assigned. In this script I see you still have a variable named

If you are using the prefabs method that I explained earlier on, then you won't need this variable. Delete it completely then make sure that the pic variable inside your prefab is setup. You will be using the THAT images.

This tells you exactly what I just said. You are using an item that is not yet assigned to anything and is therefor NULL. See how that works? "NULL Reference Exception"? In computer speak Exception is fancy talk for "Error".

bla bla bla...

HELLO!!! So a null reference on an Texture? Okay so THAT is the problem. A texture has not yet been selected for the pic value used in the coding...

"at line 13" of file "ItemSales.js" which is

Code (csharp):

1. if (GUI.Button(Rect ( 5 + (Col++ * 40), Row, 35, 35), i.pic))

And since the only variable used at that line is the i.pic it means that either you setup the array to have more than 1 item but you only moved 1 item into the array in the inspector meaning all the rest all null, or it means that you filled up the entire array with prefabs but that one of the prefabs doesn't have an image in the pic variable.

Edit:
P.s. see my next post. I can't believe I missed this up to now! You have that code to display the stuff setup to run once at the beginning of the program and then never again. If you have everything setup then it will show up for 1 frame and then never again. I am wondering if this is why you get the error... Perhaps you are trying to use the stuff in the array before Unity gets a change to fill it up... hmmm...

Anyways, that code needs to be in a function and then in the OnGUI function you need to call that function. That is how you show it every frame! Alternatively, instead of placing it in a function and called that function from OnGUI, which will look much nicer and cleaner, you can just put all that code directly into the OnGUI function.

Take what you are doing and think about it logically step by step. the program starts, it starts from the top and works it's way to the bottom. It finds variable declarations so it creates the memory for it. It then gets some code to show some stuff so it tries to show some stuff. It then gets a few functions but it doesn't call them because there is no code that calls the functions. So now the file is done and the rest of the game does it's thing.

Now, every frame, the OnGUI code is called. You tell it: Create me a scroll region here. this is where I want to show my buttons. Great! Now close this scroll area again without drawing anything here. Fantastic, now we are done...

So what have you done? You said WHERE you want to show your buttons, you just didn't ACTUALLY say to DRAW the buttons...

Let me teach you the number 1 most important lesson of programming you will ever learn. Find a permanent marker and write this on your monitor so you never forget this:

"A program will never, ever, under any circumstances whatsoever ever, ever (!) do what you WANT it to do... but a program will absolutely always and without fail do exactly what you TELL it to do"

If you write the code to show the items but you don't tell the program to USE that code, it won't. The OnGUI function gets called every frame so if you want to SEE your items every frame, you need to draw it every frame...

Food for thought...

And before you ask me this, when you define a scroll area you are basically redefining the screen coordinates. so if you drew something at Rect(5,5,10,10) before and it showed up at 5,5, if you place it inside a scroll area that is defined as Rect(100,100,100,100) then it will show up at 105,105...

 

Actually, now that I looked at the actual coding... There is no way this is going to work... Try this instead....

Code (csharp):

1.  
2. var scrollPosition = Vector2.zero;
3. var numberOfMerchantAssets = 30;
4. var pic : Texture2D[];
5. var items : StockItem [];
6.  
7. var CurrentSelection : StockItem;
8.  
9. function OnGUI()
10. {
11.     // make the scroll area
12.     GUI.Box (Rect (10,300,500,250), "Sure");
13.     scrollPosition=GUI.BeginScrollView (Rect (10, 300,500,250), scrollPosition, Rect (0, 0, /*   */250, 1200));
14. var Row : int = 0;
15. var Col : int = 0;
16.  
17.  
18. for(var i : StockItem in items)
19.     {
20.     if (GUI.Button(Rect ( 5 + (Col++ * 40), Row, 35, 35), i.pic))
21.         {
22.             CurrentSelection = i;
23.         }
24.     if (Col == 15)
25.         {
26.             Row += 40;
27.             Col = 0;
28.         }
29.     }
30.     GUI.EndScrollView();
31.  
32.     if(CurrentSelection)
33.         {
34.             GUI.Label(Rect (5,5,90,90), CurrentSelection.pic);
35.         }
36.        
37.    
38.    
39. }
40.  
41.  
42.  

 

I'm not sure this will work for what I'm trying to achieve.

In my game, there is a fixed number of most resources, commodities etc. , but some purchasable items such as ships and ammunition are produced during the game.

Almost all objects exist ALL THE TIME. Any one merchant will not have an infinite supply of any item.

Also I cannot get your code to show any buttons at all, in fact all I can make it show is " Current Selection ".

What am I doing wrong?

 

Buttons now showing but still doing nothing!

 

Hi all,

Have got most of it working (part of it just started to work again rather randomly).

How do I get the description etc to be displayed as well?

here is the code:

Code (csharp):

1.  
2.  
3. var scrollPosition = Vector2.zero;
4. var numberOfMerchantAssets = 30;
5. var pic : Texture2D[];
6. var items : StockItem [];
7.  
8. static var mx_rws = 0;
9.  
10. var CurrentSelection : StockItem;
11.  
12. function OnGUI()
13. {
14.     // make the scroll area
15.     GUI.Box (Rect (9,(Screen.height * 0.55) - 5,(Screen.width * 0.4) + 11,(Screen.height * 0.35) + 10), " ");
16.     scrollPosition=GUI.BeginScrollView (Rect (10,(Screen.height * 0.55),(Screen.width * 0.4) + 5,(Screen.height * 0.35)), scrollPosition, Rect (0, 0, 300, 1200));
17.     var Row : int = 0;
18.     var Col : int = 0;
19.  
20.  
21.     for(var i : StockItem in items)
22.     {
23.         if (GUI.Button(Rect ( 5 + (Col++ * 80), Row, 78, 78), i.pic))
24.         {
25.             CurrentSelection = i;
26.         }
27.         if (Col == 7)
28.         {
29.             Row += 80;
30.             Col = 0;
31.         }
32.     }
33.     GUI.EndScrollView();
34.  
35.     if(CurrentSelection)
36.     {
37.         GUI.Box (Rect ((Screen.width * 0.645) - 12,(Screen.height * 0.1) - 10,(Screen.height * 0.35) + 20,(Screen.height * 0.35) + 10), " ");
38.         GUI.Label(Rect ((Screen.width * 0.645),(Screen.height * 0.1) - 5,(Screen.width * 0.25) + 11,(Screen.height * 0.35)), CurrentSelection.pic);
39.        
40.         GUI.Box (Rect ((Screen.width * 0.545) - 12,(Screen.height * 0.55) - 10,(Screen.width * 0.35) + 20,(Screen.height * 0.35) + 10), " ");
41.         GUIContent.text (StockItem.description);
42.        
43.     }
44. }
45.  

This tells me I'm unable to access static variables with this command.

I would also like it if multiple instances of the "same item" would stack.