How do I make UI prefab elements able to be clicked and put in different locations at runtime?

Unity Engine
, , , , , ,
1

I have a card prefab that gets generated 6 times whenever you level up in my game. The goal is for you to be able to click them, and they will switch from a white border to a blue border, you can click another card, and the first card will return to a white border, and the new card will switch to blue, and you can click different set areas in the menu, which will put the card on that location. I would also like to make it so when you click a second card, the two cards switch places. This is the relevant code that I have:

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

public class LevelUpMenu : MonoBehaviour
{
//
	void DrawCards()
	{
		GameObject a = null;
		for (int i = 0; i < 6; i++)
		{
			a = Instantiate(cardBase);
			a.GetComponent<CardContainer>().data = cardData[Random.Range(0, cardData.Length - 1)];
			a.transform.SetParent(parentPos[i + 5].transform, false);//the parentPos array contains the locations where the objects can go
			a.GetComponent<CardContainer>().icon.sprite = a.GetComponent<CardContainer>().data.icon;
			a.GetComponent<CardContainer>().title.text = a.GetComponent<CardContainer>().data.cardName;
			a.GetComponent<Button>().onClick.AddListener(() => CardClicked(a));//this is one of my attempts to get the cards to register that they have been clicked
		}
	}

	public void CardClicked(GameObject card)
	{
		moving = card;
		card.GetComponent<CardContainer>().data.color2 = Color.blue;
		foreach (GameObject c in cards) //cards is a list of the card prefabs
		{
			if (c != card)
			{
				c.GetComponent<CardContainer>().data.color2 = Color.white;
			}
			card.transform.GetChild(1).gameObject.GetComponent<Image>().color = card.GetComponent<CardContainer>().data.color2;
		}
	}

	public void SlotClicked(GameObject slot)
	{
		if (moving != null)
		{
			moving.transform.SetParent(slot.transform);
			moving.transform.position = moving.transform.parent.position;
			moving.GetComponent<CardContainer>().data.color2 = Color.white;
			moving.transform.GetChild(1).gameObject.GetComponent<Image>().color = moving.GetComponent<CardContainer>().data.color2;
			moving = null;
		}
	}
}
using UnityEngine;
using TMPro;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class CardContainer : MonoBehaviour
{
	public CardBox data;
	public Image icon;
	public TMP_Text title;
}

I put the slot function into a button component that is on a number of game objects, the six spaces where the cards are instantiated, and the five slots for game stuff. Any help that can be provided would be appreciated.

2

Any card game will not just be code. It will be a very tight coupling between purpose-built prefabs such as cards, which might in turn be made out of a basic card, perhaps with a changeable border as you call out above, and then the “meat” of what is actually on the card, perhaps a composite prefab made out of a few parts.

I would recommend working through some card game tutorials. The elements you will need to learn involve ways of placing and moving cards, and then separate from that simple mechanical “card playfield” stuff will be the semantics, such as “if card X reaches card Y then it attacks that card or becomes another card, etc.”

3

It’s not a card game. It’s a roguelike. The “cards” are for the level up sequence, which involves the logic I stated in my original post.

4

If it’s just a canned UI sequence use an animation. Anything more is overkill.

By unticking Write Defaults in the animation states you can leave specific properties un-animated, such as any custom data related to what is actually in the cards, allowing you to initialize the card sequence correctly with runtime data (eg, this is the card you are getting) while allowing the animation sequence(s) to handle all the fiddly color change and flip stuff.

Enclosed is an example of authoring part of a dynamic UI (the exemplar pieces) in the editor while customizing it in code. Those things are not animated but they trivially could be animated via the standard Unity animation system, either legacy or mechanim.

Doing that stuff in code is the Hard Way™ by far.
9557998–1351300–DynamicUIDemo.unitypackage (94.0 KB)

5

The styling stuff you’re talking about is pretty much built into the existing button control: Button | Unity UI | 3.0.0-exp.4

Regardless the rest of what you’re asking for would be us writing an entire tutorials into these forums. Bottom line is, you just listen for one button to be clicked, store a reference to it, then wait for the next button to be clicked and do the movement. It’s just about managing some state.

I would also recommend you move some of functionality in your example onto the button prefabs themselves. The level up menu in particular doesn’t need to be responsible for managing each button’s styling. They ought to do that themselves.