How would I make a shop and inventory UI like this?

Hey!

I am working on a game. I was wondering how would I be a able to make a shop and inventory like this?

https://gyazo.com/8d7173d4169b353f869f5fb9b28fe6ae

Please help!

What about it do you want to recreate?

The shop and inventory gui, fully functioning.

There is a lot to that kind of system, more than I think most people will be willing to explain. There are plenty of YouTube tutorials for that which can be found with a google search like “How to create a Shop UI in Roblox”.

Other resources can be found in the Developer Hub. I will try to point you in the right direction with a few things:

For GUI creation:
ScreenGui | Roblox Creator Documentation -The object that houses all of the Gui objects and makes them visible (should be placed in StarterPlayerGui).

Frame | Roblox Creator Documentation -An object to hold your shop buttons.

TextButton | Roblox Creator Documentation -For clickable buttons with text.

ImageButton | Roblox Creator Documentation -For clickable buttons with images.

ScreenGui and Frame are just “building blocks” and you shouldn’t need to know very much about them in terms of scripting, aside from the Visible property of Frames. ImageButtons and TextButtons function identically in terms of click events and things of that nature, so looking into either should work for you to find events and functions in terms of clicking.

Scripting Stuff:

GuiObject | Roblox Creator Documentation -For moving objects like frames (to have animations for it coming in and out of the screen).

MarketplaceService | Roblox Creator Documentation -For if you are selling things for Robux like Gamepasses or Developer Products.

Those resources are helpful, and I suggest you read them and figure out what the functions and events do. If you are uninterested in reading, you can find YouTube tutorials as I said above.

3 Likes

Yeh this is really helpful. ^

But if youve never made a gui before or your new it can be quite challenging to wrap your head around tweens and the marketplace service.

Im sure there a plugin on the ROBLOX library that can do a lot of it for you.
And if not, it may be worth starting with something simpler like a GUI health bar.

Once you start understanding the properties of GUI objects then you can learn to script them. and theres alot of online videos that will help with that.

Hope this sorta helped.

I’ve tried this a few times now, the results I’ve gotten are just shop UIs. I’ve tried learning how to make shop and inventory UIs but I am not able to, not how the video showed.

@anon25856735 explained it very well. A shop UI is definitely not the best thing to start out with.

If you have just recently started developing, I’d recommend staying away from GUI entirely for a little bit so that you can learn the very basics like variables, functions, and events. If you know how to script basic things, and you understand the fundamentals of variables, functions, and events, then you should still not try to do something so complicated at first. I would recommend just experimenting with creating UI’s in studio, and then adding buttons to them. Like just trying to make a Frame that you can open and close.

Learning something, especially like scripting, is tough, and it will seem like something complicated is impossible, but if you just stick with it and work towards the goal at a steady pace, all of a sudden you’ll realize that you have all of the information you need to create a Shop UI.

2 Likes

Alright, thank you @Pr0pelled & @anon25856735.

2 Likes