Forum rules - please read before posting.

Inventory setup - Show next/previous item, only highlight centre item.

edited January 2020 in Technical Q&A

I've been playing around with the built-in AC UI options and finding them very versatile for what I've needed so far.

I was wondering if there is a way to setup the InventoryBox to always have the centre item highlighted with arrows either side to shift through the list of items.

I'm looking to setup something similar to this:

In that example you press left/right to cycle through the item graphics and then then press up to select the categories at the top of the screen and down to switch to weapons or supplies.

It would be nice if I could recreate this exactly, but I'd settle for left/right buttons than you highlight then press to shift previous/shift next.

It's achievable if I set the number of slots in the InventoryBox to 1, but I would like to show a graphic of the next/previous inventory item alongside that box.

The closest I've come so far is increasing the slot spacing on the InventoryBox and putting the ShiftLeft/ShiftRight buttons alongside the centre item.

This works but you are also able to select the items to the left/right of the shift buttons :D

Any advice would be appreciated or a pointer to a relevant post/tutorial.

I'm using Unity 2018.4.1f1 and Adventure Creator version 1.70.1

Comments

  • edited January 2020

    A quick note about those yellow lines being offset - try toggling the Apply outline offset fix? option at the top of the Menu Manager.

    Both input styles should be possible, though they will have slightly different approaches and may require a bit of custom coding to get right. Either way, you'll want to look into using Unity UI for your Menu's rendering, as this offers much more in the way of control over style and interaction.

    Switching to Unity UI involves supplying the Menu with a Unity UI canvas prefab, and then linking each AC menu element to its associated Unity UI component (e.g. Label element to Text component). This is covered in the Manual's "Unity UI menus" chapter, in a text tutorial here, and in a video tutorial here.

    With Unity UI, you can position the shift left/right buttons wherever you like - and also enter values into the Alternative input button fields in the Element's properties list so that you can press left/right keys instead of needing to highlight/select them.

    To limit inventory interaction to only the middle of the three slots shown, there's a couple of methods you can take:

    1) Make an InventoryBox of 3 slots, but make it non-interactive (uncheck Prevent interactions?). Then, via a Button overlaid on top of the middle slot, which is interactive, run code to interact with the item (e.g., select it):

    MenuInventoryBox inventoryBox = PlayerMenus.GetElementWithName ("MyMenu", "MyInventoryBoxElement") as MenuInventoryBox;
    InvItem invItem = inventoryBox.GetItem (1); // Get 2nd slot item (starting index 0)
    if (invItem != null)
    {
        invItem.Select ();
    }
    

    (Where "MyMenu" and "MyInventoryBoxElement" are the names of your Menu and InventoryBox element respectively. The "AC" namespace is also necessary).

    2) Make an InventoryBox of 1 slot - as you have done - and add RawImage components to display the left/right items. These wouldn't be linked to AC's Menu Manager, but you'd instead use code to set their images based on the item in the centre:

    public UnityEngine.UI.RawImage leftImage;
    public UnityEngine.UI.RawImage rightImage;
    public Texture emptyTexture;
    
    private void Update ()
    {
        MenuInventoryBox inventoryBox = PlayerMenus.GetElementWithName ("MyMenu", "MyInventoryBoxElement") as AC.MenuInventoryBox;
        InvItem invItem = inventoryBox.GetItem (1); // Get 2nd slot item (starting index 0)
        int offset = inventoryBox.GetOffset ();
        int count = KickStarter.runtimeInventory.localItems.Count;
    
        if (offset - 1 < count)
        {
            InvItem leftItem = KickStarter.runtimeInventory.localItems [offset-1];
            leftImage.texture = leftItem.tex;
        }
        else leftImage.texture = emptyTexture;
    
        if (offset + 1 < count)
        {
            InvItem rightItem = KickStarter.runtimeInventory.localItems [offset+1];
            rightImage = rightItem.tex;
        }
        else rightImage.texture = emptyTexture;
    }
    

    A little bit more in the way of tweaking would likely be needed in both cases, but that should be a good start.

  • Thanks for the prompt reply Chris, this is really helpful.

    'Apply outline offset fix?' did indeed sort out the rendering of the yellow lines, I was wondering what was going on there.

    I'll give your instructions a shot today and come back if I have any issues. Thanks again!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Welcome to the official forum for Adventure Creator.