How to zoom in and zoom out UI objects inside canvas?

Question

I'm trying to implement zooming in and zooming out for my view, but changing the Camera component Size doesn't give the impression of zooming in and out of objects inside a Canvas. Only objects not belonging to a canvas, like background, give the impression of zoom in and zoom out.

Here is a video of what is happening when I change the size https://imgur.com/a/iwhSg72

From what can be seen on the Hierarchy, I have on my scene an image named Card and another game object (Canvas) that has the very same image inside. The camera is set to Ortographic and when I change the Size, it does give the impression that Card and DarkBackground are zooming in and zooming out, but the image inside the Canvas stays the same size.

Is there anyway to achieve a zoom in and zoom out for a scene in which objects inside Canvas (or canvas itself) also zooms in and out?

Edit: The image inside the canvas is a UI object whereas the one outside is a Sprite. I noticed UI objects don't zoom in or out by changing the size of the camera. The canvas however will have other UI elements which I would need to zoom in and out. Is there any way to zoom UI elements?

Edit: Changing the Render Mode of the Canvas to World Space makes the canvas and its UI elements zoomable when changing the Camera Size. But I wonder if there is an alternative.

Answer 1

@EtherialBlue

Attach this script in the canvas UI objects you want to zoom in and out "Works only for Canvas objects"

 using UnityEngine;
 using UnityEngine.EventSystems;
 
 public class ObjectScalling : MonoBehaviour, IPointerDownHandler, IPointerUpHandler {
     private bool _isDragging;
     private float _currentScale;
     public float minScale, maxScale; // minScale and maxScale are limits of scaling
     private float _temp;
     private float _scalingRate = 2;
 
     private void Start() {
         _currentScale = transform.localScale.x;
     }
 
     public void OnPointerDown(PointerEventData eventData) {
         if (Input.touchCount == 1) {
             _isDragging = true;
         }
     }
 
 
     public void OnPointerUp(PointerEventData eventData) {
         _isDragging = false;
     }
 
 
     private void Update() {
         if (_isDragging)
             if (Input.touchCount == 2) {
                 transform.localScale = new Vector2(_currentScale, _currentScale);
                 float distance = Vector3.Distance(Input.GetTouch(0).position, Input.GetTouch(1).position);
                 if (_temp > distance) {
                     if (_currentScale < minScale)
                         return;
                     _currentScale -= (Time.deltaTime) * _scalingRate;
                 }
 
                 else if (_temp < distance) {
                     if (_currentScale > maxScale)
                         return;
                     _currentScale += (Time.deltaTime) * _scalingRate;
                 }
 
                 _temp = distance;
             }
     }
 }

How to zoom in and zoom out UI objects inside canvas?

1 Reply

Your answer

Follow this Question

Related Questions