1. Home
  2. S-Inventory
  3. Vendor
  4. Vendor UI

Vendor UI

For the UI panel of the item group, add the “VendorUI.cs” script in your scene.

  • UI Canavs: Drag and drop the canvas object that contains the vendor panel.
  • Panel: Drag and drop the vendor’s panel here. The UI panel object should include a UI Image component with the backdrop sprite on it. It must also have the Graphics Raycaster component.
  • Default Position: The vendor UI panel starting position, you have five options: Top-Right corner, Lower-Right corner, Top-Left corner, Lower-Left corner and screen center
  • Is Movable: If set to true, then the player will be able to drag the vendor UI panel around the screen.
  • Toggle Info: To enable the toggle info set “Enable Toggle Info” to true. then drag and drop the toggle info Text UI object. This object will be activated when the player is in range of a vendor and will show the instructions to interact with him.
  • Vendor Name: A UI Text object, child of the vendor UI panel and used to display the vendor’s name
  • “Buy” Button: This button is used to purchase the selected item in the buy menu. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> PurchaseItem()”.
  • “Sell” Button: This button is used to sell the items listed in the sell menu. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> SellItems()”.
  • “Take Back” Button: This button is used to take back the item from the sell menu to the inventory menu. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> TakeBackItem()”.
  • “Take Back All” Button: This button is used to take back all the items listed in sell menu to the inventory menu. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> TakeBackAllItems()”
  • Vendor Slots: Vendor slots are used to display items for sale and items to sell in the vendor UI panel. All the vendor slots must be children of the same object that is the “Slots Parent”. The parent object should have a “Grid Layout Group” component. Using your desired settings for that component, all the slots will be arranged inside the grid layout. You only need to pre-create one slot button that will be cloned. Create a new UI Image object with the empty slot as the sprite and make it a child of the “Slots Parent” object and drag and drop it to the “Base Slot”. Create the following UI objects as children of the base slot object:
  • UI Text: This will display the item’s to buy/sell name. Drag and drop in the “Textfield” field of the “Slot” array.
  • UI Image: This will display the item’s to buy/sell icon. Drag and drop in the “Icon” field of the “Slot” array.In this object, add the “SlotUI” script and only check the “Vendor” field then add an Event Trigger with the following events:
  1. – Pointer Enter event: Drag and drop the “Icon” object and select: “SlotUI -> HoverON()” and “SlotUI -> SetDragDestination()”.
  2. – Pointer Exit event: Drag and drop the “Icon” object and select: “SlotUI -> HoverOFF()” and “SlotUI -> RemoveDragDestination()”.
  3. – Pointer Click event: Drag and drop the “Icon” object and select: “SlotUI -> VendorSelection()”.VendorItemEvents
  • UI Text: This will display the item’s to buy/sell price. Drag and drop in the “Price Text” field of the “Slot” array.
  • UI Image: This will display the item’s to buy/sell currency icon. Drag and drop in the “Currency Icon” field of the “Slot” array.
  • Max Items: Enter the number of maximum items you want to display in the sell or buy menu in the “Max Items” field.
  • Slots Per Row: Enter the number of items you wish to display in a single row in the “Items Per Row” field.
  • Slots Vertical/Horizontal Spacing: Set the slots vertical and horizontal spacing.
  • Take Back On Double Click: If checked, items in the sell menu will be taken back to the inventory if you double click them.
  • Purchase On Double Click: If checked, items in the buy menu will be bought if you double click them.
  • Hover Info: If checked, a UI panel will appear next to the items in the vendor UI when hover the mouse over them

 

Other components of the vendor UI panel:

  • “SellMenu” Button: This button is used to swutcg to the menu where you can sell items to the vendor. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> OpenSellMenu()”.
  • “BuyMenu” Button: This button is used to switch to the menu where you can buy items from the vendor. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> OpenBuyMenu()”.
  • “Close” Button: This button is used to close the vendor menu. Create a UI button and make it child of the Vendor UI panel object and add this event to the button on click: Drag and drop the object that holds the Vendor UI script and pick “VendorUI -> Desactivate()”.

How can we help?