Hello, in this game where progress is made room by room, I have to add black bands when the screen resolution does not respect the proportions of the design.
I’m having a problem with the UI elements sticking out of the screen. UI elements overlap when they change. It only concerns the elements that protrude from the screen. However, these elements are visible to the player.
You can see it on the life counter at the top left but also on the player control buttons at the bottom (on the last screenshot only the one where I add the black bands).
The first 3 photos show the game when nothing exceeds for comparison. The last photo (iPAD resolution with black bands) shows the game when UI elements protrude. This problem does not come from a script I checked. Everything works well when the UI elements are superimposed on the design but the bug arrives as soon as they leave the design.
I can’t get UI elements to stay inside the design for all resolutions besides that would not be desirable since it is necessary that the control buttons are positioned at the thumbs of the player. Do you know why I am having this problem and how to solve it please?
This is the script I add to my camera to keep proportions even if the resolution of the devices are different:
// Converted from UnityScript to C# at http://www.M2H.nl/files/js_to_c.php - by Mike Hergaarden
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
public class CamAutoScale : MonoBehaviour
{
// Use this for initialization
void Start()
{
// set the desired aspect ratio (the values in this example are
// hard-coded for 16:9, but you could make them into public
// variables instead so you can set them at design time)
float targetaspect = 16.0f / 9.0f;
// determine the game window's current aspect ratio
float windowaspect = (float)Screen.width / (float)Screen.height;
// current viewport height should be scaled by this amount
float scaleheight = windowaspect / targetaspect;
// obtain camera component so we can modify its viewport
Camera camera = GetComponent<Camera>();
// if scaled height is less than current height, add letterbox
if (scaleheight < 1.0f)
{
Rect rect = camera.rect;
rect.width = 1.0f;
rect.height = scaleheight;
rect.x = 0;
rect.y = (1.0f - scaleheight) / 2.0f;
camera.rect = rect;
}
else // add pillarbox
{
float scalewidth = 1.0f / scaleheight;
Rect rect = camera.rect;
rect.width = scalewidth;
rect.height = 1.0f;
rect.x = (1.0f - scalewidth) / 2.0f;
rect.y = 0;
camera.rect = rect;
}
}
}
