Animate inventory

jamesfootlight

ok so we are defo getting somewhere, but there are a couple of issues:

1. I have set this script to play when the two objects are in the players inventory, however, the original item that is to be dragged is still visible when the new RawImage (CombineItem) version is dragged.

2. Also, the currently seems dependent on starting position of RawImage (CombineItem) needs to appear automatically at the position of where the specific inventory item to be moved is. There is a little delay.

See here:

https://www.dropbox.com/s/wbf4yw6e8hp09h3/CombineANimate.mov?dl=0

ChrisIceBox

the original item that is to be dragged is still visible

You may have to rely on a per-slot CanvasGroup component, but you can try temporarily unsetting the Image's Sprite for the duration:

using UnityEngine;
using System.Collections;
using AC;

public class AnimateCursor : MonoBehaviour
{

    public Vector2 offset;
    public RectTransform cursorRectTransform;
    public int itemToMoveFrom;
    public int itemToMoveTo;
    public Canvas canvas;
    public float moveDuration = 3f;

    public string menuName = "Inventory";
    public string inventoryElementName = "InventoryBox";


    public void AnimateCombine ()
    {
        StopAllCoroutines ();
        StartCoroutine (AnimateCombineCo ());
    }


    private IEnumerator AnimateCombineCo ()
    {
        MenuInventoryBox inventoryBox = PlayerMenus.GetElementWithName (menuName, inventoryElementName) as MenuInventoryBox;

        int fromSlot = inventoryBox.GetItemSlot (itemToMoveFrom);
        RectTransform fromRectTransform = inventoryBox.uiSlots[fromSlot].GetRectTransform ();

        Sprite originalSprite = inventoryBox.uiSlots[fromSlot].uiButton.image.sprite;
        inventoryBox.uiSlots[fromSlot].uiButton.image.sprite = null;

        int toSlot = inventoryBox.GetItemSlot (itemToMoveTo);
        RectTransform toRectTransform = inventoryBox.uiSlots[toSlot].GetRectTransform ();

        Vector2 fromPosition = fromRectTransform.position / canvas.transform.localScale.x;
        Vector2 toPosition = toRectTransform.position / canvas.transform.localScale.x;

        Vector2 parentOffset = canvas.GetComponent<RectTransform>().sizeDelta / 2f;
        fromPosition -= parentOffset;
        toPosition -= parentOffset;

        fromPosition += offset;
        toPosition += offset;

        float timer = moveDuration;
        while (timer > 0f)
        {
            float p = 1f - (timer / moveDuration);
            cursorRectTransform.anchoredPosition = Vector2.Lerp (fromPosition, toPosition, p);

            timer -= Time.deltaTime;
            yield return null;
        }

        inventoryBox.uiSlots[fromSlot].uiButton.image.sprite = originalSprite;
    }


    private Rect RectTransformToScreenSpace (RectTransform transform)
    {
        Vector2 size = Vector2.Scale(transform.rect.size, transform.lossyScale);
        return new Rect((Vector2)transform.position - (size * 0.5f), size);
    }

}

There is a little delay.

Unless the game is paused while the menu is open, it will begin moving on the same frame that AnimateCombine is called. You will need to call the function sooner if you want it to play earlier, but the RawImage's position will be unchanged until it is called - you should move it's default position to be out of view.

If the game is paused, you can try Time.unscaledDeltaTime instead of Time.deltaTime.

jamesfootlight

ok done this, still issues however, the original inventory item that needs to move is still visible whilst the pretend one moves, can we hide it whilst animation happens and then unhide when done?

EDIT: I tried removing the matches inventory item and that worked, except the matches then stayed over the item, can they fade out or disappear once they have combines - so close now! see video:

https://www.dropbox.com/s/gnreukpkrexksyj/Almost there!.mov?dl=0

ChrisIceBox

This update will return the Cursor Rect Transform back to its original position once the effect is complete. You could replace this with a colour-fade coroutine if you wanted a fade out effect.

using UnityEngine;
using System.Collections;
using AC;

public class AnimateCursor : MonoBehaviour
{

    public Vector2 offset;
    public RectTransform cursorRectTransform;
    public int itemToMoveFrom;
    public int itemToMoveTo;
    public Canvas canvas;
    public float moveDuration = 3f;

    public string menuName = "Inventory";
    public string inventoryElementName = "InventoryBox";


    public void AnimateCombine ()
    {
        StopAllCoroutines ();
        StartCoroutine (AnimateCombineCo ());
    }


    private IEnumerator AnimateCombineCo ()
    {
        MenuInventoryBox inventoryBox = PlayerMenus.GetElementWithName (menuName, inventoryElementName) as MenuInventoryBox;

        int fromSlot = inventoryBox.GetItemSlot (itemToMoveFrom);
        RectTransform fromRectTransform = inventoryBox.uiSlots[fromSlot].GetRectTransform ();

        Sprite originalSprite = inventoryBox.uiSlots[fromSlot].uiButton.image.sprite;
        inventoryBox.uiSlots[fromSlot].uiButton.image.sprite = null;

        int toSlot = inventoryBox.GetItemSlot (itemToMoveTo);
        RectTransform toRectTransform = inventoryBox.uiSlots[toSlot].GetRectTransform ();

        Vector2 fromPosition = fromRectTransform.position / canvas.transform.localScale.x;
        Vector2 toPosition = toRectTransform.position / canvas.transform.localScale.x;

        Vector2 parentOffset = canvas.GetComponent<RectTransform>().sizeDelta / 2f;
        fromPosition -= parentOffset;
        toPosition -= parentOffset;

        fromPosition += offset;
        toPosition += offset;

        Vector2 originalPosition = cursorRectTransform.anchoredPosition;

        float timer = moveDuration;
        while (timer > 0f)
        {
            float p = 1f - (timer / moveDuration);
            cursorRectTransform.anchoredPosition = Vector2.Lerp (fromPosition, toPosition, p);

            timer -= Time.deltaTime;
            yield return null;
        }

        inventoryBox.uiSlots[fromSlot].uiButton.image.sprite = originalSprite;
        cursorRectTransform.anchoredPosition = originalPosition;
    }


    private Rect RectTransformToScreenSpace (RectTransform transform)
    {
        Vector2 size = Vector2.Scale(transform.rect.size, transform.lossyScale);
        return new Rect((Vector2)transform.position - (size * 0.5f), size);
    }

}

jamesfootlight

Great thanks!