• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by nmushkin · Apr 21, 2021 at 07:46 PM · scripting problemcanvasimageclickpop-up

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()
     {
     }
 }
Comment
Add comment · Show 1
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image UnityM0nk3y · Apr 22, 2021 at 05:19 PM 0
Share

Friend, you can do this with 1 canvas + 1 Image + a sprite array + very little coding!! =)

2 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

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

  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;
     }
 }

 









Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

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.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image UnityM0nk3y · Apr 26, 2021 at 01:41 PM 0
Share

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

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

218 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How to rotate GUI image on cursor drag? 0 Answers

[4.6 - UI] Accessing Text in Image inside Canvas via C# Script 3 Answers

Does the "Static" checkbox in the inspector affect Canvas UI? 0 Answers

Canvas Text renders under Image 1 Answer

image will not snap to canvas 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges