Inventory - stacking from the right and realistic drag and drop

Dev_Martas

I am using a drag-and-drop type of inventory. I am trying to set it up so that:

1) The collected items appear from right to left
2) Once I drag an item from the inventory, I want its icon in the grid to disappear. It should look like i truly dragged the item out of its slot, not just its "copy".

However I am unable to find a setting in the editor that could do that, nor could I find anything in this forum. is there any way to achieve this?

ChrisIceBox

The collected items appear from right to left

Switch to Unity UI for your Menu's Source, and then re-arrange the slot Buttons in reverse order.

Once I drag an item from the inventory, I want its icon in the grid to disappear. It should look like i truly dragged the item out of its slot, not just its "copy".

In the Settings Manager's "Inventory" panel set the Selected item's display field to Hide From Menu.

Dev_Martas

Can I rearrange the buttons by changing the numbers of the slots somehow or the order of numbers based on which the items appear in the slots? (instead of appearing in slot 1 first, appear in slot no. 10?). Or do I have to open the canvas prefab and manually change the position of each slot?

Dev_Martas

Nevermind, found this tutorial that explains everything :-)
https://adventurecreator.org/tutorials/creating-inventory-bar-unity-ui

Dev_Martas

I noticed that when I drag an item over a hotspot, it stays hovering over it until I tap it again (to use it). Is it possible to automate the second step, so the only thing you need to do is drag items over objects and if interaction is possible, it will start automatically and if not, the object will fly back to the inventory?

ChrisIceBox

If you have Drag and drop inventory interface? checked, then it should be that the interaction is run by releasing the click/tap over the Hotspot.

I don't recommend the interaction running automatically by simply moving the item over to a Hotspot, in case the Player needs to drag "past" one Hotspot to get to the other. It could be done, however, by hooking into the OnHotspotSelect custom event:

using UnityEngine;
using AC;

public class AutoUseItem : MonoBehaviour
{

    private void OnEnable () { EventManager.OnHotspotSelect += OnHotspotSelect; }
    private void OnDisable () { EventManager.OnHotspotSelect -= OnHotspotSelect; }

    private void OnHotspotSelect (Hotspot hotspot)
    {
        if (InvInstance.IsValid (KickStarter.runtimeInventory.SelectedInstance))
        {
            hotspot.RunInventoryInteraction (KickStarter.runtimeInventory.SelectedInstance);
        }
    }

}

Dev_Martas

I do have the drag-and-drop inventory interface checked. Thank you for the script, but what i actually meant was what you just described as the standard behavior: the interaction is run by releasing the click/tap over the Hotspot.

But in my case, this does not work. The interaction is not triggered by releasing the tap/click but has to be clicked/tapped one more time. On mobile, the icon of the item remains hovering over the hotspot it has been dragged over.

I tried to recreate it on a version not using the SuperScript and all works as it should. So I suspect the script may be causing this behavior.

Dev_Martas

Also, would it be possible to "animate" an item returning to inventory in case I use an item on a hotspot that has no interaction with it? Currently, the item just disappears and reappears back in the inventory. I would like it to fly back from the point of interaction on the hotspot to its slot in the inventory.

And ideally, if the speed could be adjustable in the editor with an editable deceleration option?

ChrisIceBox

I tried to recreate it on a version not using the SuperScript and all works as it should. So I suspect the script may be causing this behavior.

Use this replacement for SuperScript:

https://paste.ofcode.org/JMZ2Vp7Tbtz7RauM5Y3N6e

Also, would it be possible to "animate" an item returning to inventory in case I use an item on a hotspot that has no interaction with it?

Here's how to do it:

Move your Inventory UI into the scene and set its Render Mode to Screen Space - Camera. Assign the MainCamera beneath, set the Plane Distance to 1, apply changes and remove from the scene.

Open up the UI prefab in Prefab Mode, and for each slot, move the Image component to a child object and attach the following script.

using UnityEngine;
using AC;

public class ItemSlotFollowCursor : MonoBehaviour
{

    public Canvas canvas;
    public int slotIndex;
    private GameObject buttonOb;
    private RectTransform rectTransform;
    private const float ReturnSpeed = 5f;
    private InvInstance recordedInvInstance;

    void Awake ()
    {
        rectTransform = GetComponent<RectTransform> ();
        buttonOb = transform.parent.gameObject;
    }

    void Update ()
    {
        MenuInventoryBox inventoryBox = (MenuInventoryBox) KickStarter.playerMenus.GetMenuWithCanvas (canvas).GetElementWithGameObject (buttonOb);
        InvInstance invInstance = inventoryBox.GetInstance (slotIndex);
        if (!InvInstance.IsValid (invInstance)) return;

        bool isSelected = invInstance == KickStarter.runtimeInventory.SelectedInstance;
        if (isSelected)
        {
            rectTransform.localPosition = new Vector2 (0f, -10f);
            RectTransformUtility.ScreenPointToLocalPointInRectangle (canvas.transform as RectTransform, Input.mousePosition, canvas.worldCamera, out Vector2 movePos);
            rectTransform.position = canvas.transform.TransformPoint (movePos);
            recordedInvInstance = invInstance;
        }
        else
        {
            if (invInstance == recordedInvInstance)
            {
                rectTransform.localPosition = Vector2.Lerp (rectTransform.localPosition, Vector2.zero, Time.deltaTime * ReturnSpeed);
            }
            else
            {
                rectTransform.localPosition = Vector2.zero;
            }
        }
    }

}

In each Inspector, assign the root Canvas, and the relevent slot index number (starting from 0). You can adjust the speed with the script's ReturnSpeed value.

Dev_Martas

The items are flying nicely back to their boxes, unfortunately, interactions with objects on the scene stopped working altogether. It seems like releasing the button is not triggering any action now.

I don't know if this is related but i had a little issue creating my own inventory, and am not sure if this is normal behavior or a mistake on my side. I moved the prefab back to the scene hierarchy, set the Main camera, and created a new prefab from it according to your instructions. But then when I inspected the prefab, the Render Camera was set to none. I don't know if this is normal or if i am missing something, but in any case, i didn't find any option to directly apply any changes i made to the object in the scene.

Also, in Menu Manager, when I open my custom Inventory menu, the RectTransform boundary says "missing" and all the assigned Buttons in the Inventory box also say missing, even though I assigned them all from the prefab.

ChrisIceBox

interactions with objects on the scene stopped working altogether

Inventory interactions only, or Use as well? And on mobile builds only, or the Editor as well?

So that we're working with the same values, share a screenshot of your Settings Manager - I can't recreate the issue on my end using your earlier project.

But then when I inspected the prefab, the Render Camera was set to none.

That's expected - the Render Camera can only accept objects in the same scene, which is why the step of temporary moving it into the scene was necessary.

in Menu Manager, when I open my custom Inventory menu, the RectTransform boundary says "missing" and all the assigned Buttons in the Inventory box also say missing, even though I assigned them all from the prefab.

This is harmless, as its the Constant ID numbers beneath each field that are used to link the Menu Manager with the UI objects at runtime. In the next update, however, these field values will be correctly retained.

Dev_Martas

Thank you for the explanation.

I can pick up objects and they properly appear as items in the inventory. I can also combine items in the inventory.

But when I drag and drop an item over a scene object (Use) it does not do what it should, it does nothing. The issue is the same in the Editor as well as in the Mobile build.

Here are screens from the Settings Manager:

Dev_Martas

Just in case, here is a screen of the action list (but it should be OK, it worked before).

ChrisIceBox

The selected Interaction in your screenshot is not present in my copy of the scene you sent me.

If I manually add an Inventory interaction to test (e.g. a Cheese item interaction to the Bucket Hotspot), it runs as intended.

I think you may need to send me an updated project to test with.

Dev_Martas

PM sent.

ChrisIceBox

It looks like this occurs because of the Raycast Target option on your Inventory UI's Image components.

Uncheck this option for each Slot's Image child object and it should work.

Dev_Martas

It works! Thank you :-)

Dev_Martas

Can it somehow be set that if I successfully use an inventory item on an object and the item is spent by the action - it disappears immediately upon tap-release? In other words, the item wouldn't fly back to the inventory but immediately would disappear (both as inventory item and cursor) and then the actions would get performed.

ChrisIceBox

The item won't fly back if no longer present in the Inventory at the time - but if the Hotspot runs a "Player action" beforehand, it won't remove the item until the Player has reached the Hotspot.

You could see about using events removing the item at the moment the Player clicks/taps, but as you can click elsewhere while they move, that'd cause the item to be lost.

The easiest way would be to have the Player's approach to the Hotspot be part of the Interaction - and thus block gameplay hiding the Inventory. To do this, set the Player action to Do Nothing, and precede the Interaction with a Character: Move to point Action to have the Player move to the Hotspot's Marker.

Dev_Martas

Works nicely this way, thanks!