Carousel-style inventory

Tdunn · June 3

Hi all, I'm super new to AC so apologies if this might seem obvious.

I'm trying to recreate a carousel inventory similar to Silent Hill 2 and 3, I don't need it to be super complex - you don't even have a USE option. It'll just show whatever item is in the middle slot with a name and a description of the item. The carousel itself loops around with all your available items. Pressing A and D browse through it horizontally and pressing TAB toggles the inventory.

See EXAMPLE SCREENSHOT

See EXAMPLE in action.

I managed to hook the inventory screen to fade in/out with TAB, I set up some UI elements including a parent canvas, 5 slots (3rd one being the main) and some TMP elements for the text.

However I have to admit that after fiddling with some ActionLists to check if the inventory is active and use A and D to browse, etc. I am absolutely lost. I could not get the item slots to move in any way because my input seems to not be detected and I'm not sure how to replace the sprite/item name/item description with the items you picked up.

I may have very well bit off more than I can chew for my first complex AC customization, any advice on how to set this up would be much appreciated

Screenshots below of the hierarchy as well as the canvas showing up in prototype mode.

https://ibb.co/whtKTp0H
https://ibb.co/bRzQ1nP1

Thank you again!

ChrisIceBox · June 3

Welcome to the community, @Tdunn.

This could be done using scripting - something very similar (though in 3D) is present in the "Combat example" package over on the Downloads page. However, it'd be good to try this using AC alone (or at least with minimal scripting).

The first aspect is to get the item scrolling working - and later the name/description of the central item showing.

For scrolling, you should be able to just make do with your 5 Item slots in your UI - if the third slot's Image is larger, you don't need a separate "BigItemImage" to display it in.

If you then go to your Inventory menu's InventoryBox element in the Menu Manager, make sure that the Max number of slots property is set to 5, and then check Supports looping?. That will cause the display of items to cycle when offset using Button elements whose Click type are set to Offset Element Slot.

You can try this out with a quick test game by using the New Game Wizard to create a separate game with the default Unity UI interface, and adding 5 items to the Player's starting inventory. You should find that you can cycle through them on a loop when clicking the ShiftLeft / ShiftRight buttons.

In your own game, which uses A/D to cycle through items, you'll need to defined these inputs in your Input Manager (named e.g. "InventoryLeft" / "InventoryRight"), and then enter these names into the Alterative input button fields of your ShiftLeft / ShiftRight button elements. That will cause them to be "clicked" when those inputs are pressed.

There'll still be a couple of issues to address at this point: namely, the centre item will be the third item in the Inventory, not the first, and scrolling won't be possible unless you have at least 5 items.

We can deal with these next, but it'll need the above set up as a foundation. See how you go with the above first, and we can take things from there.

Tdunn · June 4

First of all, thank you so much for the prompt reply!

I've managed to set up everything following your suggestions and things seems to be doing better. The items now show up in the slots as intended, however some issues remain as you expected.

If you only have 2 items they are spaced far apart
3rd slot is always huge regardless of whether its center slot or not due to its native scale
My A/D navigation still does not work even with the Alt inputs in manager
When you carry 6 items you can't see the 6th because A/D does not work
Currently no way to attach item description/name to item in center "focus slot"

ATTACHED are all relevant images to the issues

ChrisIceBox · June 4

Thanks for the details.

The inputs look OK. Though, you'll need to define UI Button components to link to the Menu's ShiftLeft/Right Button elements. Position them off-screen so that they're not seen, but they'll need to be present to be interactable.

Dealing with less than 5 items might be tricky, but I'd imagine it might be best to have your middle slot (Slot2) be the first one listed in the ItemList element. That way, the first item you're carrying - even if you only have one - will be the one selected by default.

Try linking your UI Slot Buttons in the ItemSlots element with the order:

Slot2
Slot3
Slot4
Slot0
Slot1

Do these changes then allow for scrolling with A/D if you have 5 or more items?

Tdunn · June 4

Unfortunately changing the slots order did not seem to do too much, it still looks rather awkward with 2 items.

I've also added the 2 nav buttons on either side with hidden img component but they oddly did nothing for A/D nav. I enabled them visually to debug and the weirdest thing happened : clicking on ShiftRight seems to move the inventory but in actuality a totally new item popped out of nowhere in the middle slot and after that it does not seem to cycle anymore. Pressing ShiftLeft button does nothing.

Thank you for taking the time to help me, I feel like I'm close but not quite there

ATTACHED are relevant images with file name according to issue.

ChrisIceBox · June 4

I may have been wrong about updating the order like that. Let's revert back to the original order (0, 1, 2, etc). Test only with 5 or more items for the moment - it's likely we'll need to use scripting to fix the issues that occur when 4 or less are shown.

Are you using a Content Size Fitter / Horizontal Layout Group component? It looks like the slot positions are reacting to the number of items.

When the number of items is less than the number of defined slots, empty slots will be disabled. For this style of Inventory, you want each slot to be in a fixed position, so you'll need to manually position each of the slots without the use of the above components that cause them to automatically reposition if some slots are disabled.

I also see you have a numbe of "Slot" elements in your Menu - do these affect the same Slot objects as your ItemSlots element? This'll create a conflict if so, where two elements are competing for control over the same GameObject. It's likely that your Slot elements can/should be removed.

Your ShiftLeft element's "Is visible?" property is unchecked. This'll need to be checked - it doesn't just affect the enabled state of the UI GameObject itself, but its reactivity to input. You can move it further off-screen once the behaviour is correct.

For the input: does the project rely on Input Manager for other inputs, or are you using Input System alongside AC's integration for it?

Tdunn · June 5

Very good points Chris, deleting the additional slot buttons in the menu seems to have made the navigation much more functional. I also deleted the horizontal layout group which helped somewhat, it made sense to add that in the beginning but you are totally right that for this kind of inventory that doesn't belong.

Currently I rely only on Input Manager along with defined AC inputs from the AC Settings menu.

Now the navigation seems to work but sporadically, sometimes the A/D keys work, and sometimes the visible buttons work. The carousel also often comes to a "stop" on certain items when you are browsing in the right direction, not sure why - perhaps it has to do with my "-1" value on Offset Element Slot.

I've ATTACHED some videos to show what I mean.

Thank you again

ChrisIceBox · June 5

Are any other inputs mapped to A/D?

The ShiftLeft Button will need to shift by 1, not -1, as it's already set to Shift Previous.

Tdunn · June 5

My god I'm an idiot - that solved everything! Thank you very much

The next issue is getting the Name and Description text to match the item in the middle slot. If you're not too busy could you give me a general pointer of how to approach this?

ChrisIceBox · June 5

You'd need a script that checks which item is in the 3rd slot of your ItemSlots element, extracts that item's name and description, and then displays them in Text boxes.

This should do it:

using UnityEngine;
using UnityEngine.UI;
using AC;

public class ShowItemLabels : MonoBehaviour
{

    public GameObject slot;
    public Text labelText;
    public Text descriptionText;


    void Update()
    {
        var inventoryBox = PlayerMenus.GetElementWithName("Inventory", "ItemSlots") as MenuInventoryBox;
        var item = inventoryBox.GetItem(2);

        if (item != null)
        {
            labelText.text = item.GetLabel(0);
            descriptionText.text = item.GetProperty("Description").TextValue;
        }
        else
        {
            labelText.text = string.Empty;
            descriptionText.text = string.Empty;
        }
    }

}

For the Description, create a new Property by this name in the Inventory Manager, and you can then enter text for it in each Item's properties panel.

Tdunn · June 6

That worked amazingly, thank you so much!

I have 3 more questions if you could spare the time

1.) There is a lot of awkwardness when there is a single item or less than 5 items in the inventory's layout - is there any way to get around this?

SINGLE ITEM
THREE ITEMS

2.) The items currently just snaps to the next slot instead of a smooth continuous carousel animation, I tried to script something to allow this but it often ends up fighting with AC, do you think it is possible?

3.) If I would like to implement a sound to play every time you press A/D would I use an actionlist? At which stage should I hook it up?

Thank you again, even in this stage it is more than enough for me to prototype my gameplay with - you have been a great help

Tdunn · June 6

Also, I'm trying to link a label to a TextMeshPro component on a different UI canvas, however even after adding "TextMeshProIsPresent" to the Scripting Define Symbols I still can't link it to the Linked Text field in Label.

Should I use the old script workaround?

ChrisIceBox · June 6

There is a lot of awkwardness when there is a single item or less than 5 items in the inventory's layout - is there any way to get around this?

It'd probably be a case of having a custom script that adds "empty" item slots if there are less than 5 when the Inventory is opened. I expect that you'd also need to disable the Shift Left / Right buttons when the next item to scroll onto is an empty slot.

What's the exact behaviour you're looking for when dealing with less than 5?

The items currently just snaps to the next slot instead of a smooth continuous carousel animation, I tried to script something to allow this but it often ends up fighting with AC, do you think it is possible?

You can attach a couple of Animations to the Canvas that cause the slot GameObjects to snap one slot left/right and then return to their original position. When shifting left/right, you could then play one of these animations to give the effect of the items moving (whereas the reality is they switch slot, but the slots have now changed position so that they appear in the same place at the start of the animation)

If I would like to implement a sound to play every time you press A/D would I use an actionlist? At which stage should I hook it up?

You can assign a "Click sound" in the ShiftLeft / ShiftRight button element properties.

Also, I'm trying to link a label to a TextMeshPro component on a different UI canvas, however even after adding "TextMeshProIsPresent" to the Scripting Define Symbols I still can't link it to the Linked Text field in Label.

Having to manually enter TextMeshProIsPresent is no longer necessary in newer versions of AC. So long as the package has been installed, you can check Use TMPro components? in the Menu's properties to make use of TextMesh Pro instead of Unity UI for text.

Tdunn · June 6

Thanks Chris, I forgot to define DefaultSound that's why it wasn't working.

The expected behavior for me is to always have at least one item in the focus slot, so if you have a single one it should always be in the center - 3 slots work quite well but 1 or 2 means they are off the focus area.

3 SLOTS

The other thing also is that you currently can't navigate until all 5 slots are filled and I'm not sure why.

I've also started implementing the "New Item Found" menu following your tutorial here but ran into some issues.

"NEW ITEM" CANVAS

While the image shows up just fine, the name, description, and instruction text are completely gone. The weird part is sometimes it does show, but sometimes not. Even weirder, sometimes the text shows up mismatched and takes the property of the previous item picked up. The "instructions" text (ie. press SPACEBAR to exit) also seems to disappear completely.

NO TEXT
WRONG TEXT

I'm probably unable to call up the Description property of the inventory to the event editor somehow.

EVENT EDITOR AND ACTIONLIST

I'll give the animation a try this weekend, thanks for the tip

ChrisIceBox · June 8

I forgot to define DefaultSound that's why it wasn't working.

No problem. Actually, the next update will automate this - which should avoid this issue in future.

The expected behavior for me is to always have at least one item in the focus slot, so if you have a single one it should always be in the center - 3 slots work quite well but 1 or 2 means they are off the focus area.

Create a new Item named "Empty" and assign it an invisible texture. Check Can carry multiple?, and set the Slot capacity to 1.

What you'll probably want to do is add these items to the Inventory such that they "surround" the proper items when you open the Menu. That is, if you only have 2 items, add 2 Empty items at the front (so that the 1st proper item is the third, and so shown in the centre slot), and 1 Empty at the end (to make the final Item count equal to 5).

You can then remove these Items again when the Menu closes.

Further scripting would then be necessary to disable the effects of the ShiftLeft/Right buttons when the next item to scroll is an Empty. However, see if this works to begin with (test by giving the "Empty" items a visible texture, attach this script to the UI prefab, and assign the Empty Item's ID):

using UnityEngine;
using AC;

public class EmptyItemAdder : MonoBehaviour
{

    public int emptyItemID;

    void OnEnable() => AddEmpties();
    void OnDisable() => RemoveEmpties();

    void AddEmpties()
    {
        if (GetNumItems() < 5)
        {
            // Add 2 to front
            KickStarter.runtimeInventory.PlayerInvCollection.Insert(new InvInstance(emptyItemID), 0);
            KickStarter.runtimeInventory.PlayerInvCollection.Insert(new InvInstance(emptyItemID), 0);

            while (GetNumItems() < 5)
            {
                KickStarter.runtimeInventory.PlayerInvCollection.AddToEnd(new InvInstance(emptyItemID));
            }
        }
    }

    void RemoveEmpties()
    {
        KickStarter.runtimeInventory.PlayerInvCollection.DeleteAllOfType(emptyItemID);
    }

    int GetNumItems()
    {
        return KickStarter.runtimeInventory.PlayerInvCollection.GetCount(false);
    }

}

I've also started implementing the "New Item Found" menu following your tutorial here but ran into some issues.

This is best discussed in a separate thread, but try using the ActionList: Comment Action to print "Added item: [param:0] to the Console. That should show the ID number of the added item, which you can check is the same item that was added.

Tdunn · June 24

Hey Chris, finally managed to get back to it. Your suggestions did the trick - thank you so much!

https://imgur.com/C7mZe3U

https://imgur.com/aUNxLgh

However when I enabled the "Found an item" screen it definitely clashed with that somewhat. Like you suggested, I will make a new topic regarding that in general.

https://imgur.com/uktVctz

Thank you again!

Tdunn · June 24

I've made a short carousel animation moving to the right to test but I'm not sure how to trigger it with my ShiftRight inventory input via AC - is that possible or does it need to be done via custom script?

Animated carousel

I'm also a bit at a loss on what to do with the leftmost slot which will be left empty

ChrisIceBox · June 25

You'd need a custom script, yes. One that hooks into the OnMenuElementShift event (this is a script-only event, not one listed in the Events Editor), and then plays an animation accordingly.

The animations can be put into an Animator, and then set up to play when Triggers parmaters are invoked. This script, attached, should do it:

using UnityEngine;
using AC;

public class ShiftAnimation : MonoBehaviour
{

    public Animator animator;
    public string leftTrigger = "Left";
    public string rightTrigger = "Right";

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

    private void OnMenuElementShift(MenuElement element, AC_ShiftInventory shiftType)
    {
        if (element.title == "Items")
        {
            animator.SetTrigger (shiftType == AC_ShiftInventory.ShiftNext ? rightTrigger : leftTrigger);
        }
    }

}

I'm also a bit at a loss on what to do with the leftmost slot which will be left empty

Yes, there's a few small details like this to crack. Let's cross that bridge when the above is up and running.

Tdunn · June 28

Hi Chris, I've attached the script to the mother prefab for the UI, however it does not seem to trigger the animation properly. See my animator setup attached, I started testing with right movement only.

Prefab setup
Script inspector
Animator states
Animator transition

C# script

using UnityEngine;
using AC;

public class ShiftAnimation : MonoBehaviour
{

    public Animator animator;
    public string leftTrigger = "SlotShiftLeft";
    public string rightTrigger = "SlotShiftRight";

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

    private void OnMenuElementShift(MenuElement element, AC_ShiftInventory shiftType)
    {
        if (element.title == "ItemSlots")
        {
            animator.SetTrigger(shiftType == AC_ShiftInventory.ShiftNext ? rightTrigger : leftTrigger);
        }
    }

}

The animation definitely works because when I set it to play on entry it does so without issue. Perhaps it has to do with my inventory input?

Inventory element
ShiftRight input

Thank you!

ChrisIceBox · June 29

The script reacts to the Inventory element being shifted - not the underlying input that causes that shift. If the items are shifting, then input shouldn't be the factor here.

If your UI pauses the game, is your Animator set to run in Unscaled Time?

Tdunn · June 29

Ah yes, making it run in Unscaled Time fixes the issue! Thank you

Apologies in advance if this seems obvious but now I'm struggling with an animation related issue. You can see from the video that the first transition is pretty much what I wanted but the subsequent animations seems to have been shortened to almost an awkward tweened snapping of the items. I also don't like how much bounce there is even though there is none in the original UI animation. Could this be related to the empty slot issue we spoke about earlier because we offset everything to left or right?

Carousel-style inventory

Comments

Howdy, Stranger!

Categories

Carousel-style inventory

Comments

Howdy, Stranger!

Quick Links

Categories