1. Home
  2. S-Inventory
  3. Crafting
  4. Craft UI

Craft UI

  • UI Canavs: Drag and drop the canvas object that contains the craft UI panel.
  • Panel: Drag and drop the craft Ui panel here. The craft panel object should include an Image component with the craft’s backdrop sprite on it. It must also have the Graphics Raycaster component and an Event Trigger. The Event Trigger must include two types of events:
  1. Begin Drag event: Drag and drop the object that holds the Craft UI script and pick “CraftUI -> DragStarted()”.
  2. End Drag event: Drag and drop the object that holds the Craft UI script and pick “CraftUI-> DragEnded()”.

  • Default Position: The craft UI panel starting position, you have five options: Top-Right corner, Lower-Right corner, Top-Left corner, Lower-Left corner and screen center.
  • Slots: In the crafting panel, you are going to create the items’ slots manually. Make sure to create as many slots as your need for all recipes. For each item, you need to create an empty slot object and add a UI Image component to it with the empty slot sprite. Then create another Image UI element and make a child object of the empty slot and call it “Icon”. In the empty slot object, add the “SlotUI” script and set only “Crafting Item” to true then add an Event Trigger with the following events:
  1. Pointer Enter event: Drag and drop the empty slot object and select:  “SlotUI -> SetDragDestination()”.
  2. Pointer Exit event: Drag and drop the empty slot object and select: “SlotUI -> RemoveDragDestination()”.
  3. Pointer Click event: Drag and drop the empty slot object and select: “SlotUI -> SendCraftClick()”.
  4. Then add a UI Text object as a child object of the empty slot and place the slots in their respective fields.
  • Show Recipe Items Sprites: Tick this if you want to show the recipe required items (when they are not added yet) and not only their names.
  • Result Icon: A UI Image (child of the craft UI panel) that will display the recipe result item’s icon.
  • Recipes: Recipe buttons are the UI buttons that allow the player to navigate between different recipes in the craft UI panel. Each button corresponds to a recipe that is defined in the Craft Manager. All UI Buttons must be children of the same object that is the “Recipe Buttons Parent”. The parent object should have a “Grid Layout Group” component. Using your desired settings for that component, all the buttons will be arranged inside the grid layout. You only need to pre-create one recipe button that will be cloned. Create a new UI Button object and make it a child of the “Recipe Buttons Parent” object and drag and drop it to the “Base Recipe Button”. Then add the “SlotUI.cs” script to the base recipe button with only the “Recipe Slot” bool set to true. In the “On Click” event in the button component of the base recipe button, drag and drop the base recipe button and select: “SlotUI -> SendRecipeClick”.
  • Crafting Info: Create a UI text object as a child object of the crafting panel then drag it and drop it to this field. This UI text will inform the player if crafting the item in the active recipe is in progress and if it’s done so he can take it to his inventory.
  • Currency Text/Icon: Create a UI Text object and a UI Icon object, both children of the craft UI panel. When the recipe requires currency to be launched then both of these objects will be activated and will show the currency’s icon and the amount required.
  • Is Movable: Set to true if you want the player to be able to drag and the craft UI panel around the screen.
  • Full/Empty Bar: You can show a progress bar while crafting an active recipe is in progress. Just created two UI Image objects, one represents the full bar and the other the empty bar. Both of the UI Image objects must be placed in the same position, have the same size and be children of the craft UI panel. The Full Bar must be also placed above the Empty Bar.

Other components of the craft UI panel:

  • “Craft” Button: Create a UI button and make it child of the Craft UI panel object and add this event to the button on click: Drag and drop the object that holds the Craft UI script and pick “CraftUI -> CraftItem()”. This button is used to craft the item after placing all the needed items.
  • “Close” Button: Create a UI button and make it child of the Craft UI panel object and add this event to the button on click: Drag and drop the object that holds the Craft UI script and pick “CraftUI -> DesactivatePanel()”. This button is used to close the crafting menu.
  • “Take” Button: Create a UI button and make it child of the Craft UI panel object and add this event to the button on click: Drag and drop the object that holds the Craft UI script and pick “CraftUI -> TakeCraftingItem()”. This button is used to take the result item when it’s ready.

How can we help?