When the 'EventsData' is successfully downloaded, I instantiate items from the prefabs. Here's what the prefab looks like:
Now that the prefab has been created, it's time to populate it with the information retrieved from the sheet. I've attached a script named 'EventItemUI' to this prefab and passed the UI reference into it.
/// <summary>
/// Attached to event Item prefab
/// </summary>
public class EventItemUI : MonoBehaviour
{
/// <summary>
/// Data to show on this item
/// </summary>
[SerializeField]
private EventsData _data;
/// <summary>
/// UI Title BG
/// </summary>
[Header("UI")]
[SerializeField]
private Image _titleBg;
/// <summary>
/// UI Background BG
/// </summary>
[SerializeField]
private Image _backgroundBg;
/// <summary>
/// UI Icon
/// </summary>
[SerializeField]
private Image _icon;
/// <summary>
/// Title Text
/// </summary>
[SerializeField]
private TextMeshProUGUI _title;
/// <summary>
/// Time left
/// </summary>
[SerializeField]
private TextMeshProUGUI _time;
/// <summary>
/// Description of the item
/// </summary>
[SerializeField]
private TextMeshProUGUI _description;
/// <summary>
/// Button text which shows Active, Coming Soon
/// </summary>
[SerializeField]
private TextMeshProUGUI _buttonText;
/// <summary>
/// Calls when item is spawned
/// </summary>
/// <param name="parent">Parent to be of this parent</param>
/// <param name="data">data to show on this item</param>
public void Setup(Transform parent, EventsData data)
{
_data = data;
RectTransform transform = GetComponent<RectTransform>();
transform.parent = parent;
SetupUI();
}
/// <summary>
/// Setup UI on the item
/// </summary>
void SetupUI()
{
_titleBg.color = _data.TitleColor;
_backgroundBg.color = _data.BodyColor;
_title.text = _data.EventTitle;
_description.text = _data.Description;
_time.text = string.Format("TimeLeft: \t {0}d {1}h {2}m {3}s", _data.EventTime.Days, _data.EventTime.Hours, _data.EventTime.Minutes, _data.EventTime.Seconds);
_buttonText.text = _data.EventType.ToString();
_icon.sprite = _data.IconSprite != null ? _data.IconSprite : null;
if(_data.EventType == EventType.ComingSoon)
{
_time.gameObject.SetActive(false);
}
else if (_data.EventType == EventType.Expired)
{
_buttonText.transform.parent.gameObject.SetActive(false);
_time.text = _data.EventType.ToString();
}
}
/// <summary>
/// Item Pool
/// </summary>
public class Pool : MonoMemoryPool<Transform, EventsData, EventItemUI>
{
protected override void Reinitialize(Transform p1, EventsData p2, EventItemUI item)
{
base.Reinitialize(p1, p2, item);
item.Setup(p1, p2);
}
}
}
The process of creating a pool is quite similar to the loading process. For reference, I'm attaching a class that looks like this:
/// <summary>
/// Pool of the Event Item
/// </summary>
public class EventItemPool
{
private EventItemUI.Pool _pool;
/// <summary>
/// Constructor of the Pool
/// </summary>
/// <param name="pool">Reference of the Memory Pool</param>
public EventItemPool(EventItemUI.Pool pool)
{
_pool = pool;
}
/// <summary>
/// Calls when spawn item from the pool
/// </summary>
/// <param name="parent">parent to be</param>
/// <param name="data">data to be used</param>
/// <returns></returns>
public EventItemUI Spawn(Transform parent, EventsData data)
{
return _pool.Spawn(parent, data);
}
/// <summary>
/// Calls when remove or Despawn the item
/// </summary>
/// <param name="item">itrem to remove</param>
public void Remove(EventItemUI item)
{
_pool.Despawn(item);
}
}
Next, I connect this pool to Zenject and pre-instantiate a few items like so:
/// <summary>
/// Zenject Installer attach to the scene context
/// </summary>
public class EventItemInstaller : MonoInstaller
{
/// <summary>
/// Event Item to spawn
/// </summary>
public GameObject _eventItem;
public override void InstallBindings()
{
// binding the pool
Container.Bind<EventItemPool>().AsSingle();
// spawning item from the pool
Container.BindMemoryPool<EventItemUI, EventItemUI.Pool>().WithInitialSize(20).FromComponentInNewPrefab(_eventItem).UnderTransformGroup("EventItems");
}
}
Now that the items have been instantiated and set up, it's time to proceed with the image download.