Reusable Canvas for enlarging images

Question

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()
     {
     }
 }

Answer 1

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

All you need is a "Trigger Collider" on the object.
No Event Trigger. (Remove those)
Then all you need to add this code below to every object.
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.
Do this individually for each "Frame" object you have. (Arrays will complicate this).
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;
     }
 }

Answer 2

Answer by nmushkin · Apr 22, 2021 at 10:08 PM

@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.

Add comment · Show 1 · Share

UnityM0nk3y · Apr 26, 2021 at 01:41 PM 0

Share

@nmushkin I was unaware you are in 3D, lemme help you quickly.

Reusable Canvas for enlarging images

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions