- Home /
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()
{
}
}
Friend, you can do this with 1 canvas + 1 Image + a sprite array + very little coding!! =)
Answer by UnityM0nk3y · Apr 22, 2021 at 05:55 PM
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 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.
@nmushkin I was unaware you are in 3D, lemme help you quickly.
Your answer
Follow this Question
Related Questions
How to rotate GUI image on cursor drag? 0 Answers
Checking if Image Effects exist in the project 0 Answers
Unity 5.6.4 Canvas RawImage hides all objects 0 Answers
UI fade with CanvasGroup vs of Image.color.alpha or Text.color.alpha performance 1 Answer
Image on UI doesn't stretch when objects it's on is stretched. 0 Answers