Need to add image in the Instantiated object

Question

I am following a tutorial on youtube.This is a swipe menu tutorial. https://www.youtube.com/watch?v=njfc_QYKdio&t=229s I tried and understood what he have done.

public class SecMenuScene : MonoBehaviour {
    [Range(1, 50)]
    [Header("Controllers")]
    public int panCount;
    [Range(0, 500)]
    public int panOffset;
    [Range(0,20)]
    public int snapSpeed;
    [Range(0,6)]
    public int scaleOffset;
    [Range(0,20)]
    public int scaleSpeed;
    [Header ("Other object")]
    public GameObject panPrefab;
    public ScrollRect scrollRect;


    private GameObject[] instPans;
    private Vector2[] panPos,panScale;


    private RectTransform contentRect;
    private Vector2 contentVector;

    public int selectedPanID;
    public bool isScroling;
    // Use this for initialization
    void Start () {


        contentRect = GetComponent<RectTransform>();
        instPans = new GameObject[panCount];
        panPos = new Vector2[panCount];
        panScale = new Vector2[panCount];
        for (int i = 0; i < panCount; i++)
        {

            instPans[i] = Instantiate(panPrefab, transform, false) ;


            if (i == 0) continue;
            instPans[i].transform.localPosition = new Vector2(instPans[i - 1].transform.localPosition.x + panPrefab.GetComponent<RectTransform>().sizeDelta.x + panOffset,
                instPans[i].transform.localPosition.y);
            panPos[i] = -instPans[i].transform.localPosition;

        }
    }

    // Update is called once per frame
    void FixedUpdate () {
        if(contentRect.anchoredPosition.x>= panPos[0].x && !isScroling || contentRect.anchoredPosition.x <= panPos[panPos.Length - 1].x  && !isScroling)
        {
            scrollRect.inertia = false;
        }
        float nearestpos = float.MaxValue;
        for (int i = 0; i < panCount; i++)
        {
            float distance =Mathf.Abs( contentRect.anchoredPosition.x - panPos[i].x);
            if (distance < nearestpos)
            {
                nearestpos = distance;
                selectedPanID = i;
            }
            float scale = Mathf.Clamp(1 / (distance / panOffset) * scaleOffset, 0.5f, 1);
            panScale[i].x = Mathf.SmoothStep(instPans[i].transform.localScale.x+0.3f, scale, scaleSpeed * Time.fixedDeltaTime);
            panScale[i].y = Mathf.SmoothStep(instPans[i].transform.localScale.y+0.3f, scale, scaleSpeed * Time.fixedDeltaTime);
            instPans[i].transform.localScale = panScale[i];
        }
        float scrolVelocity = Mathf.Abs(scrollRect.velocity.x);
        if (scrolVelocity < 400 && !isScroling) scrollRect.inertia = false;

        if (isScroling || scrolVelocity>400) return;
        contentVector.x = Mathf.SmoothStep(contentRect.anchoredPosition.x, panPos[selectedPanID].x, snapSpeed * Time.fixedDeltaTime);
        contentRect.anchoredPosition = contentVector;
    }
    public void Scrolling(bool Scroll)
    {
        isScroling = Scroll;
        if (Scroll) scrollRect.inertia = true;
    }
}

But the problem is now I am not able to change the image of prefab obj. I tried taking instantiate obj and change sprite using SpriteRenderer. But unable to find the solution. If anyone can help or advise what I should read to make it working. Thank you for helping.

Answer 1

First of all, you can hold a reference to your desired sprite like other public variables that are declared:

 [Header ("Other object")]
public GameObject panPrefab;
public ScrollRect scrollRect;
[SerializeField]
private Sprite sprite; // or Sprite[] sprites if you need more than one

then you can add an Image component to your prefab in Editor and set its size and position the way you like.

for (int i = 0; i < panCount; i++)
    {

        instPans[i] = Instantiate(panPrefab, transform, false) ;
        // you can get the reference to your Image component and set its sprite
        Image im = instPans[i].GetComponent<Image>();
        im.sprite = sprite; // or im.sprite = sprites[i] if you are using multiple sprites

        if (i == 0) continue;
        instPans[i].transform.localPosition = new Vector2(instPans[i - 1].transform.localPosition.x + panPrefab.GetComponent<RectTransform>().sizeDelta.x + panOffset,
            instPans[i].transform.localPosition.y);
        panPos[i] = -instPans[i].transform.localPosition;

    }