Pinch Zoom and Panning on Mobiles

ChrisIceBox · March 24

I would need a sample scene to work with.

And I assume the Orthographic size is set to fit automatically, right?

It'll zoom into avoid going outside of the boundary sprite, yes.

Dev_Martas · March 25

PM sent.

ChrisIceBox · March 27

Thanks, try this:

https://paste.ofcode.org/pVjnR4tAVGWLNiDYdXziwm

Dev_Martas · March 27

The issue is solved, thank you!

Could we just also add the option for locking the camera in the X and Y axes (separately), please?

ChrisIceBox · March 28

https://paste.ofcode.org/XZq7bXfjKpzRWsKr6YSbPy

Dev_Martas · April 5

Works like a charm; many thanks again! :-)

Dev_Martas · April 8

Could we please add the double-click to move functionality to the script?

Dev_Martas · May 21

Chris, I have encountered a problem when trying to force the maximum aspect ratio in Settings Manager. When i then play the game on a device with larger ratio (even simulated in Editor), the camera doubles itself on the left side (only). I am writing this here in case it may have something to do with the (otherwise great!) custom camera script you wrote for me.

I am using two navcams, the second one for UI only (to regulate brightness), but the problem persists even if I delete it completely.

This is a snip of the upper left part of the screen on a mobile with a wider screen. There is correctly a black bar on the left, but you can see that right next to it the camera is doubled.

How can I fix this?

ChrisIceBox · May 22

Does this occur if you swap to a regular GameCamera2D, i.e. one with no custom scripts?
What are the forced and simulated aspect ratios?

Dev_Martas · May 22

I tried some more combinations and found what is causing it.
Switching to a regular GameCamera2D didn't help, but i deleted my whole brightness settings in one scene and the problem disappeared there. So that is the cause.

I have been using a setup i described here

I use two cameras to enable the brightness control for UI and the scene itself. See attached images. The range of allowed aspect ratio is 1.33-2.17. The problems appear at ratios 2.33, 2.44 but also 1.87 (not with a "double vision" but this time the UI is not stretched to fit). The only time all works nicely is ratio 2.

ChrisIceBox · May 22

Does the NavCamUI Camera get enabled at runtime? It's disabled in your screenshot.

When enforcing an aspect ratio, however, AC will force the MainCamera's rect property to the correct ratio. It may just be a case of having the custom UI camera copy this rect onto itself, i.e.:

using UnityEngine;

public class CopyMainCameraRect : MonoBehaviour
{

    public Camera uiCamera;

    void Update ()
    {
        uiCamera.rect = AC.KickStarter.CameraMain.rect;
    }

}

Dev_Martas · May 22

It has been disabled but worked for the change of UI brightness nonetheless. I enabled it, but there was no change.

I attached this script to the UI camera, but now the image is tripled :-)

ChrisIceBox · May 22

Run the game, then disable the script - what are the UI Camera's "Viewport Rect" values, and are you able to remove the issue by manually adjusting its values? Lowering the X and raising the H ought to do it.

Dev_Martas · May 22

The rect values are: X: 0.0560053, W: 0.8879894, (Y: 0, H: 1 - same as NavCam 1).
Changing X to 0 and W to 1 does make it change from triple image back to double image only.

The rect values are similarly shifted in the Main Camera, when i change them the image is only one, but it is cut from both sides.

Here is a snap of the Main Camera at runtime:

ChrisIceBox · May 23

Don't adjust the MainCamera's Rect values - they should be set correctly.

Changing X to 0 and W to 1 does make it change from triple image back to double image only.

What does that look like? Does the "triple image" mean the black pillarboxing becomes thinner?

Try adjusting the "Clear Flags" option on the NavCamUI Camera. And is the UI Canvas now listing this camera in its Inspector?

Dev_Martas · May 23

The pillarboxing changes with the selected ratio and Rect X (not W). Here is 21:9

Compared to 22:9

This is 21:9 with the script:

And this is the same with the script disabled and Rect X changed from 0.056... to 0.09:

Skybox and solid color give a black screen. Don't clear is the same as Depth only. I tried all of them both with and w/o the script attached to the NavCam UI with the same result.

And is the UI Canvas now listing this camera in its Inspector?

If you mean UI Canvas of the menu i created and use as Prefab, then no, it still shows no camera on runtime (in none of the Clear flags):

Dev_Martas · May 23

Also, I am having a problem with the said menu, as shown in the last image (MainPozadi). This menu basically serves only as a background image of the Main menu (that is AC). When in runtime, and i change resolution/aspect ratio to something lower than 21:9, the menu/image shows up shrunk in the middle of the screen. You can see my setting of the Canvas scaler. I don't know if I am doing anything wrong or if it has something to do with this general issue. I also have a custom inventory menu in Prefab and there is no problem.

ChrisIceBox · May 24

If you mean UI Canvas of the menu i created and use as Prefab, then no, it still shows no camera on runtime (in none of the Clear flags):

That'll be the issue to address first.

The SetNavCamUI script (from this thread) should set the Camera property by searching for an object named NavCamUI. If it can't be found, it'll report a warning in the Console - is this not the case?

When in runtime, and i change resolution/aspect ratio to something lower than 21:9, the menu/image shows up shrunk in the middle of the screen. You can see my setting of the Canvas scaler.

It's a combination of things - the Canvas Scaler, and the RectTransform of the Image object, will contribute. If it's a case of the Menu needing to adhere to AC's enforced aspect ratio (as opposed to the aspect ratio of the game window), you can use AC's "Auto Correct UI Dimensions" component.

Dev_Martas · May 24

There is no message in the Console regarding this at all; the only place that lists the camera is the Script component, but the Canvas is still empty - just like in the image in the previous post.

It's a combination of things - the Canvas Scaler, and the RectTransform of the Image object, will contribute. If it's a case of the Menu needing to adhere to AC's enforced aspect ratio (as opposed to the aspect ratio of the game window), you can use AC's "Auto Correct UI Dimensions" component.

I tried to add the component, but it has zero effect. Frankly, i am a little lost and unsure if i set the menu up correctly in the first place. I added a graphic element now in the menu inspector that I linked to the image in the menu hierarchy. It seems that the image is stretched across the whole screen within various resolutions, but the image file gets deleted from the Image child within the prefab. Here are screens of the whole settings, as I am sure i did something wrong. Do I even need the Panel object if the only thing the menu is supposed to be is a background image (and that i can set the RectTranfromBoundary in the menu inspector from the image?

ChrisIceBox · May 25

There is no message in the Console regarding this at all; the only place that lists the camera is the Script component, but the Canvas is still empty - just like in the image in the previous post.

Use this variant of the SetNavCamUI script, which should detail more info in the Console when enabled:

using UnityEngine;
public class SetNavCamUI : MonoBehaviour
{
    void OnEnable ()
    {
        Debug.Log ("SetNavCamUI: Assign the NavCamUI camera.");
        GameObject navCamUIOb = GameObject.Find ("NavCamUI");
        if (navCamUIOb == null) { Debug.LogWarning ("No NavCamUI object found"); return; }
        navCamUIOb.GetComponent<Camera> ().enabled = true;
        GetComponent<Canvas> ().worldCamera = navCamUIOb.GetComponent<Camera> ();
        Debug.Log ("Found " + navCamUIOb, navCamUIOb);
    }
}

Failing that, assign the Camera manually (make sure it is enabled) in the Canvas Inspector at runtime.

I tried to add the component, but it has zero effect. Frankly, i am a little lost and unsure if i set the menu up correctly in the first place.

You don't need to create/link a Graphic element in the Menu if it doesn't need to be controlled (made visible/invisible etc) at runtime.

Is the "MainMenuMobil" sprite intended to cover the full-screen? If so, you can remove the Image object and assign this sprite in the Panel's Image component - no need for two Images. The Panel's RectTransform is set up correctly, it'll expand to fit the Canvas in all directions.

If the Auto Correct UI Dimensions component is needed, check both Update scale? and Update position?, and set the Min/Max anchor point fields to (0,0) and (1,1) respectively.

Pinch Zoom and Panning on Mobiles

Comments

Howdy, Stranger!

Categories

Pinch Zoom and Panning on Mobiles

Comments

Howdy, Stranger!

Quick Links

Categories