Reusable Canvas for enlarging images

Hi,

I have set up a scene consisting of a house, and have got a character controller so I can walk around the house. I want to have several picture frames throughout the house, and when the player clicks on them, I want a larger version of that image to be displayed in a popup canvas. Currently, I have a canvas with an image and some text, and have figured out onclick events to enable the canvas when I click on a frame. I am planning on attaching the onclick script to each image I want to make interactive, and having a public sprite variable I can set on a per-frame basis. However, I am not sure where to set the canvas active/inactive, as I can’t find the canvas children (including image) after it is made inactive, but don’t want it to be visible all the time. If anyone has an idea for a better general solution that would be great too.
Script so far (to be attached to photo frames:

public class ImageClick : MonoBehaviour
{
    GameObject canvas;
    Text titleElem;
    Text descriptionElem;
    Image photoElem;
    GameObject closeButton;

    public string title;
    public string description;
    public Sprite photo;
    // Start is called before the first frame update
    void Start()
    {
        canvas = GameObject.Find("ArtCanvas");
        titleElem = GameObject.Find("/ArtCanvas/ArtPanel/ArtTitleText").GetComponent<Text>();
        descriptionElem = GameObject.Find("/ArtCanvas/ArtPanel/ArtDescriptionText").GetComponent<Text>();
        photoElem = GameObject.Find("/ArtCanvas/ArtPanel/ArtImage").GetComponent<Image>();
        closeButton = GameObject.Find("/ArtCanvas/ArtPanel/ArtCloseButton");
        closeButton.GetComponent<Button>().onClick.AddListener(closePopUp);

        canvas.SetActive(false);
    }

    void OnMouseDown() {
        openPopUp();
    }

    void openPopUp() {
        canvas.SetActive(true);
        titleElem.text = title;
        descriptionElem.text = description;
        photoElem.sprite = photo;
    }

    public void closePopUp() {
        Debug.Log("Close Popup");
        canvas.SetActive(false);
    }

    // Update is called once per frame
    void Update()
    {
    }
}

Since you are in 3D, (Please add that tag next time). =) Here is a simple solution for 3D. (Should work).

  1. All you need is a “Trigger Collider” on the object.
  2. No Event Trigger. (Remove those)
  3. Then all you need to add this code below to every object.
  4. Set the code up so that the variable “spr” is the sprite you want to display, and var “mainCanvasImage” is the main image on your canvas that will display the sprite.
  5. Do this individually for each “Frame” object you have. (Arrays will complicate this).
  6. Hope that helps. =)

Code:

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

public class derp02 : MonoBehaviour
{
    public Sprite spr; //The Sprite this object must display when clicked on
    public Image mainCanvasImage;

    private void Start()
    {
        mainCanvasImage.enabled = false; //We turn it off at start
    }

    void OnMouseDown()
    {
        mainCanvasImage.sprite = spr;
        mainCanvasImage.enabled = true;
    }
}

@UnityM0nk3y Thanks for that! Will this work for 3D GameObjects? I tried your solution using a regular raycaster (not 2d) and a box collider for an object and don’t seem to be having any luck getting the Pointer Click to fire.