Inventarisatie- en itemcrafting-systeem in eenheid maken

In deze tutorial laat ik zien hoe je een Minecraft-stijl inventaris- en itemcrafting-systeem maakt in Unity.

Het maken van voorwerpen in videogames is een proces waarbij specifieke (meestal eenvoudiger) voorwerpen worden gecombineerd tot complexere voorwerpen, met nieuwe en verbeterde eigenschappen. Bijvoorbeeld het combineren van hout en steen tot een houweel, of het combineren van metalen platen en hout tot een zwaard.

Het onderstaande knutselsysteem is mobielvriendelijk en volledig geautomatiseerd, wat betekent dat het werkt met elke UI-indeling en met de mogelijkheid om aangepaste knutselrecepten te maken.

Sharp Coder Video speler

Stap 1: Stel de Crafting-UI in

We beginnen met het opzetten van de crafting-UI:

Maak een nieuw canvas (Unity bovenste taakbalk: GameObject -> UI -> Canvas)
Maak een nieuwe afbeelding door met de rechtermuisknop op Canvasobject -> UI -> Afbeelding te klikken
Hernoem het afbeeldingsobject naar "CraftingPanel" en wijzig de bronafbeelding naar standaard "UISprite"
Wijzig "CraftingPanel" RectTransform-waarden in (Pos X: 0 Pos Y: 0 Breedte: 410 Hoogte: 365)

Maak twee objecten binnen "CraftingPanel" (klik met de rechtermuisknop op CraftingPanel -> Leeg maken, 2 keer)
Hernoem het eerste object naar "CraftingSlots" en wijzig de RectTransform-waarden in ("Linksboven uitlijnen" Draaipunt X: 0 Draaipunt Y: 1 Pos X: 50 Pos Y: -35 Breedte: 140 Hoogte: 140). Dit object bevat crafting-slots.
Hernoem het tweede object naar "PlayerSlots" en wijzig de RectTransform-waarden in ("Top Stretch Horizontaal" Draai X: 0,5 Draai Y: 1 Links: 0 Pos Y: -222 Rechts: 0 Hoogte: 100). Dit object bevat spelersslots.

Sectietitel:

Maak een nieuwe tekst door met de rechtermuisknop te klikken op "PlayerSlots" Object -> UI -> Tekst en hernoem deze naar "SectionTitle"
Wijzig "SectionTitle" RectTransform-waarden in ("Linksboven uitlijnen" Draaipunt X: 0 Draaipunt Y: 0 Pos X: 5 Pos Y: 0 Breedte: 160 Hoogte: 30)
Wijzig de tekst "SectionTitle" in "Inventory" en stel de lettergrootte in op 18, Uitlijning op Links midden en Kleur op (0,2, 0,2, 0,2, 1)
Dupliceer het "SectionTitle"-object, verander de tekst in "Crafting" en verplaats het onder het "CraftingSlots"-object, en stel vervolgens dezelfde RectTransform-waarden in als de vorige "SectionTitle".

Crafting-slot:

De crafting-slot bestaat uit een achtergrondafbeelding, een itemafbeelding en een teltekst:

Maak een nieuwe afbeelding door met de rechtermuisknop op Canvasobject -> UI -> Afbeelding te klikken
Hernoem de nieuwe afbeelding naar "slot_template", stel de RectTransform-waarden in op (Post X: 0 Pos Y: 0 Breedte: 40 Hoogte: 40) en verander de kleur in (0,32, 0,32, 0,32, 0,8)
Dupliceer "slot_template" en hernoem het naar "Item", verplaats het naar het "slot_template"-object, wijzig de RectTransform-afmetingen in (Breedte: 30 Hoogte: 30) en Kleur in (1, 1, 1, 1)
Maak een nieuwe tekst door met de rechtermuisknop te klikken op "slot_template" Object -> UI -> Tekst en hernoem deze naar "Count"
Wijzig "Count" RectTransform-waarden in ("Rechtsonder uitlijnen" Draaipunt X: 1 Draaipunt Y: 0 Pos X: 0 Pos Y: 0 Breedte: 30 Hoogte: 30)
Stel "Count" Tekst in op een willekeurig getal (bijv. 12), Letterstijl op Vet, Lettergrootte op 14, Uitlijning op Rechtsonder en Kleur op (1, 1, 1, 1)
Voeg de Schaduwcomponent toe aan "Count" Tekst en stel Effectkleur in op (0, 0, 0, 0,5)

Het eindresultaat zou er als volgt uit moeten zien:

Resultaatslot (dat wordt gebruikt voor het maken van resultaten):

Dupliceer het "slot_template"-object en hernoem het naar "result_slot_template"
Wijzig de breedte en hoogte van "result_slot_template" in 50

Crafting-knop en extra afbeeldingen:

Maak een nieuwe knop door met de rechtermuisknop te klikken op "CraftingSlots" Object -> UI -> Knop en hernoem deze naar "CraftButton"
Stel "CraftButton" RectTransform-waarden in op ("Midden links uitlijnen" Draaipunt X: 1 Draaipunt Y: 0,5 Pos X: 0 Pos Y: 0 Breedte: 40 Hoogte: 40)
Wijzig tekst van "CraftButton" naar "Craft"

Maak een nieuwe afbeelding door met de rechtermuisknop te klikken op "CraftingSlots" Object -> UI -> Afbeelding en hernoem deze naar "Arrow"
Stel "Arrow" RectTransform-waarden in op ("Midden rechts uitlijnen" Draaipunt X: 0 Draaipunt Y: 0,5 Pos X: 10 Pos Y: 0 Breedte: 30 Hoogte: 30)

Voor de bronafbeelding kunt u de onderstaande afbeelding gebruiken (klik met de rechtermuisknop -> Opslaan als... om deze te downloaden). Na het importeren stelt u het Texture-type in op "Sprite (2D and UI)" en de Filtermodus op "Point (no filter)"

Klik met de rechtermuisknop op "CraftingSlots" -> Leeg maken en hernoem het naar "ResultSlot", dit object zal het resultaatslot bevatten
Stel "ResultSlot" RectTransform-waarden in op ("Midden rechts uitlijnen" Draaipunt X: 0 Draaipunt Y: 0,5 Pos X: 50 Pos Y: 0 Breedte: 50 Hoogte: 50)

De gebruikersinterface-installatie is gereed.

Stap 2: Programmacrafting-systeem

Dit Crafting-systeem zal bestaan uit 2 scripts, SC_ItemCrafting.cs en SC_SlotTemplate.cs

Maak een nieuw script, noem het "SC_ItemCrafting" en plak de onderstaande code erin:

SC_ItemCrafting.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SC_ItemCrafting : MonoBehaviour
{
    public RectTransform playerSlotsContainer;
    public RectTransform craftingSlotsContainer;
    public RectTransform resultSlotContainer;
    public Button craftButton;
    public SC_SlotTemplate slotTemplate;
    public SC_SlotTemplate resultSlotTemplate;

    [System.Serializable]
    public class SlotContainer
    {
        public Sprite itemSprite; //Sprite of the assigned item (Must be the same sprite as in items array), or leave null for no item
        public int itemCount; //How many items in this slot, everything equal or under 1 will be interpreted as 1 item
        [HideInInspector]
        public int tableID;
        [HideInInspector]
        public SC_SlotTemplate slot;
    }

    [System.Serializable]
    public class Item
    {
        public Sprite itemSprite;
        public bool stackable = false; //Can this item be combined (stacked) together?
        public string craftRecipe; //Item Keys that are required to craft this item, separated by comma (Tip: Use Craft Button in Play mode and see console for printed recipe)
    }

    public SlotContainer[] playerSlots;
    SlotContainer[] craftSlots = new SlotContainer[9];
    SlotContainer resultSlot = new SlotContainer();
    //List of all available items
    public Item[] items;

    SlotContainer selectedItemSlot = null;

    int craftTableID = -1; //ID of table where items will be placed one at a time (ex. Craft table)
    int resultTableID = -1; //ID of table from where we can take items, but cannot place to

    ColorBlock defaultButtonColors;

    // Start is called before the first frame update
    void Start()
    {
        //Setup slot element template
        slotTemplate.container.rectTransform.pivot = new Vector2(0, 1);
        slotTemplate.container.rectTransform.anchorMax = slotTemplate.container.rectTransform.anchorMin = new Vector2(0, 1);
        slotTemplate.craftingController = this;
        slotTemplate.gameObject.SetActive(false);
        //Setup result slot element template
        resultSlotTemplate.container.rectTransform.pivot = new Vector2(0, 1);
        resultSlotTemplate.container.rectTransform.anchorMax = resultSlotTemplate.container.rectTransform.anchorMin = new Vector2(0, 1);
        resultSlotTemplate.craftingController = this;
        resultSlotTemplate.gameObject.SetActive(false);

        //Attach click event to craft button
        craftButton.onClick.AddListener(PerformCrafting);
        //Save craft button default colors
        defaultButtonColors = craftButton.colors;

        //InitializeItem Crafting Slots
        InitializeSlotTable(craftingSlotsContainer, slotTemplate, craftSlots, 5, 0);
        UpdateItems(craftSlots);
        craftTableID = 0;

        //InitializeItem Player Slots
        InitializeSlotTable(playerSlotsContainer, slotTemplate, playerSlots, 5, 1);
        UpdateItems(playerSlots);

        //InitializeItemResult Slot
        InitializeSlotTable(resultSlotContainer, resultSlotTemplate, new SlotContainer[] { resultSlot }, 0, 2);
        UpdateItems(new SlotContainer[] { resultSlot });
        resultTableID = 2;

        //Reset Slot element template (To be used later for hovering element)
        slotTemplate.container.rectTransform.pivot = new Vector2(0.5f, 0.5f);
        slotTemplate.container.raycastTarget = slotTemplate.item.raycastTarget = slotTemplate.count.raycastTarget = false;
    }

    void InitializeSlotTable(RectTransform container, SC_SlotTemplate slotTemplateTmp, SlotContainer[] slots, int margin, int tableIDTmp)
    {
        int resetIndex = 0;
        int rowTmp = 0;
        for (int i = 0; i < slots.Length; i++)
        {
            if (slots[i] == null)
            {
                slots[i] = new SlotContainer();
            }
            GameObject newSlot = Instantiate(slotTemplateTmp.gameObject, container.transform);
            slots[i].slot = newSlot.GetComponent<SC_SlotTemplate>();
            slots[i].slot.gameObject.SetActive(true);
            slots[i].tableID = tableIDTmp;

            float xTmp = (int)((margin + slots[i].slot.container.rectTransform.sizeDelta.x) * (i - resetIndex));
            if (xTmp + slots[i].slot.container.rectTransform.sizeDelta.x + margin > container.rect.width)
            {
                resetIndex = i;
                rowTmp++;
                xTmp = 0;
            }
            slots[i].slot.container.rectTransform.anchoredPosition = new Vector2(margin + xTmp, -margin - ((margin + slots[i].slot.container.rectTransform.sizeDelta.y) * rowTmp));
        }
    }

    //Update Table UI
    void UpdateItems(SlotContainer[] slots)
    {
        for (int i = 0; i < slots.Length; i++)
        {
            Item slotItem = FindItem(slots[i].itemSprite);
            if (slotItem != null)
            {
                if (!slotItem.stackable)
                {
                    slots[i].itemCount = 1;
                }
                //Apply total item count
                if (slots[i].itemCount > 1)
                {
                    slots[i].slot.count.enabled = true;
                    slots[i].slot.count.text = slots[i].itemCount.ToString();
                }
                else
                {
                    slots[i].slot.count.enabled = false;
                }
                //Apply item icon
                slots[i].slot.item.enabled = true;
                slots[i].slot.item.sprite = slotItem.itemSprite;
            }
            else
            {
                slots[i].slot.count.enabled = false;
                slots[i].slot.item.enabled = false;
            }
        }
    }

    //Find Item from the items list using sprite as reference
    Item FindItem(Sprite sprite)
    {
        if (!sprite)
            return null;

        for (int i = 0; i < items.Length; i++)
        {
            if (items[i].itemSprite == sprite)
            {
                return items[i];
            }
        }

        return null;
    }

    //Find Item from the items list using recipe as reference
    Item FindItem(string recipe)
    {
        if (recipe == "")
            return null;

        for (int i = 0; i < items.Length; i++)
        {
            if (items[i].craftRecipe == recipe)
            {
                return items[i];
            }
        }

        return null;
    }

    //Called from SC_SlotTemplate.cs
    public void ClickEventRecheck()
    {
        if (selectedItemSlot == null)
        {
            //Get clicked slot
            selectedItemSlot = GetClickedSlot();
            if (selectedItemSlot != null)
            {
                if (selectedItemSlot.itemSprite != null)
                {
                    selectedItemSlot.slot.count.color = selectedItemSlot.slot.item.color = new Color(1, 1, 1, 0.5f);
                }
                else
                {
                    selectedItemSlot = null;
                }
            }
        }
        else
        {
            SlotContainer newClickedSlot = GetClickedSlot();
            if (newClickedSlot != null)
            {
                bool swapPositions = false;
                bool releaseClick = true;

                if (newClickedSlot != selectedItemSlot)
                {
                    //We clicked on the same table but different slots
                    if (newClickedSlot.tableID == selectedItemSlot.tableID)
                    {
                        //Check if new clicked item is the same, then stack, if not, swap (Unless it's a crafting table, then do nothing)
                        if (newClickedSlot.itemSprite == selectedItemSlot.itemSprite)
                        {
                            Item slotItem = FindItem(selectedItemSlot.itemSprite);
                            if (slotItem.stackable)
                            {
                                //Item is the same and is stackable, remove item from previous position and add its count to a new position
                                selectedItemSlot.itemSprite = null;
                                newClickedSlot.itemCount += selectedItemSlot.itemCount;
                                selectedItemSlot.itemCount = 0;
                            }
                            else
                            {
                                swapPositions = true;
                            }
                        }
                        else
                        {
                            swapPositions = true;
                        }
                    }
                    else
                    {
                        //Moving to different table
                        if (resultTableID != newClickedSlot.tableID)
                        {
                            if (craftTableID != newClickedSlot.tableID)
                            {
                                if (newClickedSlot.itemSprite == selectedItemSlot.itemSprite)
                                {
                                    Item slotItem = FindItem(selectedItemSlot.itemSprite);
                                    if (slotItem.stackable)
                                    {
                                        //Item is the same and is stackable, remove item from previous position and add its count to a new position
                                        selectedItemSlot.itemSprite = null;
                                        newClickedSlot.itemCount += selectedItemSlot.itemCount;
                                        selectedItemSlot.itemCount = 0;
                                    }
                                    else
                                    {
                                        swapPositions = true;
                                    }
                                }
                                else
                                {
                                    swapPositions = true;
                                }
                            }
                            else
                            {
                                if (newClickedSlot.itemSprite == null || newClickedSlot.itemSprite == selectedItemSlot.itemSprite)
                                {
                                    //Add 1 item from selectedItemSlot
                                    newClickedSlot.itemSprite = selectedItemSlot.itemSprite;
                                    newClickedSlot.itemCount++;
                                    selectedItemSlot.itemCount--;
                                    if (selectedItemSlot.itemCount <= 0)
                                    {
                                        //We placed the last item
                                        selectedItemSlot.itemSprite = null;
                                    }
                                    else
                                    {
                                        releaseClick = false;
                                    }
                                }
                                else
                                {
                                    swapPositions = true;
                                }
                            }
                        }
                    }
                }

                if (swapPositions)
                {
                    //Swap items
                    Sprite previousItemSprite = selectedItemSlot.itemSprite;
                    int previousItemConunt = selectedItemSlot.itemCount;

                    selectedItemSlot.itemSprite = newClickedSlot.itemSprite;
                    selectedItemSlot.itemCount = newClickedSlot.itemCount;

                    newClickedSlot.itemSprite = previousItemSprite;
                    newClickedSlot.itemCount = previousItemConunt;
                }

                if (releaseClick)
                {
                    //Release click
                    selectedItemSlot.slot.count.color = selectedItemSlot.slot.item.color = Color.white;
                    selectedItemSlot = null;
                }

                //Update UI
                UpdateItems(playerSlots);
                UpdateItems(craftSlots);
                UpdateItems(new SlotContainer[] { resultSlot });
            }
        }
    }

    SlotContainer GetClickedSlot()
    {
        for (int i = 0; i < playerSlots.Length; i++)
        {
            if (playerSlots[i].slot.hasClicked)
            {
                playerSlots[i].slot.hasClicked = false;
                return playerSlots[i];
            }
        }

        for (int i = 0; i < craftSlots.Length; i++)
        {
            if (craftSlots[i].slot.hasClicked)
            {
                craftSlots[i].slot.hasClicked = false;
                return craftSlots[i];
            }
        }

        if (resultSlot.slot.hasClicked)
        {
            resultSlot.slot.hasClicked = false;
            return resultSlot;
        }

        return null;
    }

    void PerformCrafting()
    {
        string[] combinedItemRecipe = new string[craftSlots.Length];

        craftButton.colors = defaultButtonColors;

        for (int i = 0; i < craftSlots.Length; i++)
        {
            Item slotItem = FindItem(craftSlots[i].itemSprite);
            if (slotItem != null)
            {
                combinedItemRecipe[i] = slotItem.itemSprite.name + (craftSlots[i].itemCount > 1 ? "(" + craftSlots[i].itemCount + ")" : "");
            }
            else
            {
                combinedItemRecipe[i] = "";
            }
        }

        string combinedRecipe = string.Join(",", combinedItemRecipe);
        print(combinedRecipe);

        //Search if recipe match any of the item recipe
        Item craftedItem = FindItem(combinedRecipe);
        if (craftedItem != null)
        {
            //Clear Craft slots
            for (int i = 0; i < craftSlots.Length; i++)
            {
                craftSlots[i].itemSprite = null;
                craftSlots[i].itemCount = 0;
            }

            resultSlot.itemSprite = craftedItem.itemSprite;
            resultSlot.itemCount = 1;

            UpdateItems(craftSlots);
            UpdateItems(new SlotContainer[] { resultSlot });
        }
        else
        {
            ColorBlock colors = craftButton.colors;
            colors.selectedColor = colors.pressedColor = new Color(0.8f, 0.55f, 0.55f, 1);
            craftButton.colors = colors;
        }
    }

    // Update is called once per frame
    void Update()
    {
        //Slot UI follow mouse position
        if (selectedItemSlot != null)
        {
            if (!slotTemplate.gameObject.activeSelf)
            {
                slotTemplate.gameObject.SetActive(true);
                slotTemplate.container.enabled = false;

                //Copy selected item values to slot template
                slotTemplate.count.color = selectedItemSlot.slot.count.color;
                slotTemplate.item.sprite = selectedItemSlot.slot.item.sprite;
                slotTemplate.item.color = selectedItemSlot.slot.item.color;
            }

            //Make template slot follow mouse position
            slotTemplate.container.rectTransform.position = Input.mousePosition;
            //Update item count
            slotTemplate.count.text = selectedItemSlot.slot.count.text;
            slotTemplate.count.enabled = selectedItemSlot.slot.count.enabled;
        }
        else
        {
            if (slotTemplate.gameObject.activeSelf)
            {
                slotTemplate.gameObject.SetActive(false);
            }
        }
    }
}

Maak een nieuw script, noem het "SC_SlotTemplate" en plak de onderstaande code erin:

SC_SlotTemplate.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class SC_SlotTemplate : MonoBehaviour, IPointerClickHandler
{
    public Image container;
    public Image item;
    public Text count;

    [HideInInspector]
    public bool hasClicked = false;
    [HideInInspector]
    public SC_ItemCrafting craftingController;

    //Do this when the mouse is clicked over the selectable object this script is attached to.
    public void OnPointerClick(PointerEventData eventData)
    {
        hasClicked = true;
        craftingController.ClickEventRecheck();
    }
}

Slotsjablonen voorbereiden:

Voeg het SC_SlotTemplate-script toe aan het "slot_template"-object en wijs de variabelen ervan toe (de afbeeldingscomponent op hetzelfde object gaat naar de "Container"-variabele, de onderliggende "Item"-afbeelding gaat naar de "Item"-variabele en een onderliggende "Count" Tekst gaat naar "Count" variabele)
Herhaal hetzelfde proces voor het "result_slot_template"-object (voeg het SC_SlotTemplate-script eraan toe en wijs variabelen op dezelfde manier toe).

Craft-systeem voorbereiden:

Voeg het SC_ItemCrafting-script toe aan het Canvas-object en wijs de variabelen toe ("PlayerSlots" Object gaat naar de "Player Slots Container" variabele, "CraftingSlots" Object gaat naar de "Crafting Slots Container" variabele, "ResultSlot" Object gaat naar de "Result Slot Container" variabele, "CraftButton" Object gaat naar "Craft Button" variabele, "slot_template" Object met bijgevoegd SC_SlotTemplate-script gaat naar "Slot Template" variabele en "result_slot_template" Object met SC_SlotTemplate-script bijgevoegd gaat naar "Result Slot Template" variabele):

Zoals je al hebt opgemerkt, zijn er twee lege arrays met de namen "Player Slots" en "Items". "Player Slots" bevat het aantal beschikbare plaatsen (met item of leeg) en "Items" bevat alle beschikbare items samen met hun recepten (optioneel).

Items instellen:

Controleer de sprites hieronder (in mijn geval heb ik 5 items):

(steen)

(diamant)

(hout)

(zwaard)

(diamanten zwaard)

Download elke sprite (klik met de rechtermuisknop -> Opslaan als...) en importeer ze in uw project (stel in de importinstellingen het textuurtype in op "Sprite (2D and UI)" en de filtermodus op "Point (no filter)"

Wijzig in SC_ItemCrafting de Itemgrootte in 5 en wijs elke sprite toe aan de Item Sprite-variabele.

"Stackable" variabele bepaalt of de items in één gleuf kunnen worden gestapeld (u wilt bijvoorbeeld misschien alleen stapelen toestaan voor eenvoudige materialen zoals steen, diamant en hout).

"Craft Recipe" variabele bepaalt of dit item kan worden gemaakt (leeg betekent dat het niet kan worden gemaakt)

Voor de "Player Slots" stelt u de Array Size in op 27 (het beste geschikt voor het huidige Crafting Panel, maar u kunt elk getal instellen).

Wanneer u op Play drukt, zult u merken dat de slots correct zijn geïnitialiseerd, maar dat er geen items zijn:

Om een item aan elk slot toe te voegen, moeten we een item Sprite toewijzen aan de "Item Sprite" variabele en de "Item Count" instellen op een positief getal (alles onder 1 en/of niet-stapelbare items worden geïnterpreteerd als 1):

Wijs de "rock" sprite toe aan Element 0 / "Item Count" 14, de "wood" sprite aan Element 1 / "Item Count" 8, "diamond" sprite aan Element 2 / "Item Count" 8 (Zorg ervoor dat de sprites hetzelfde zijn als in "Items" Array, anders werkt het niet).

De items zouden nu in Player Slots moeten verschijnen. Je kunt hun positie wijzigen door op het item te klikken en vervolgens op het slot te klikken waarnaar je het wilt verplaatsen.

Recepten maken:

Door recepten te maken, kun je een item maken door andere items in een specifieke volgorde te combineren:

Het formaat voor het knutselrecept is als volgt: [item_sprite_name]([item count])*optioneel... 9 keer herhaald, gescheiden door komma (,)

Een gemakkelijke manier om het recept te ontdekken is door op Play te drukken, de items vervolgens in de volgorde te plaatsen waarin u ze wilt maken en vervolgens op "Craft" te drukken. Druk daarna op (Ctrl + Shift + C) om de Unity-console te openen en de nieuw afgedrukte lijn (u kunt meerdere keren op "Craft" klikken om de lijn opnieuw af te drukken), de afgedrukte lijn is het knutselrecept.

De onderstaande combinatie komt bijvoorbeeld overeen met dit recept: rock,,rock,,rock,,rock,,wood (LET OP: het kan voor jou anders zijn als je sprites verschillende namen hebben).

Recept voor het maken van zwaarditems