I am creating a UI canvas via script and am trying to create a side bar that will overlay the screen during gameplay, but when I set the canvas render mode to “Screen Space - Overlay” it does not overlay the scene at all, and simply sticks the UI in the world space. The “Screen Space - Camera” render mode works correctly, but when using this mode I encountered a lot of clipping issues that the Overlay mode would prevent if I can get it to work.
Here is the code I use to create the UI canvas and the side bar:
// Create the canvas.
canvas = new GameObject("Battle UI Canvas", typeof(RectTransform));
canvas.transform.position = new Vector3(canvas.transform.position.x, canvas.transform.position.y, canvas.transform.position.z - 1.0f);
canvas.AddComponent<Canvas>();
canvas.GetComponent<Canvas>().renderMode = RenderMode.ScreenSpaceOverlay;
canvas.GetComponent<Canvas>().worldCamera = Camera.main;
canvas.GetComponent<Canvas>().planeDistance = 5.2f;
canvas.AddComponent<CanvasScaler>();
canvas.GetComponent<CanvasScaler>().uiScaleMode = UnityEngine.UI.CanvasScaler.ScaleMode.ScaleWithScreenSize;
canvas.GetComponent<CanvasScaler>().referenceResolution = new Vector2(Screen.width, Screen.height);
canvas.GetComponent<CanvasScaler>().matchWidthOrHeight = 0.5f;
canvas.AddComponent<GraphicRaycaster>();
// Create the side bar
int sideBoxHeight = (int)(Screen.height * 1.5);
int sideBoxWidth = (int)(Screen.width * 0.170);
GameObject sideBoxLeft = new GameObject("UI Box Left");
SpriteRenderer boxLeft = sideBoxLeft.AddComponent<SpriteRenderer>();
var mTexture = new Texture2D(sideBoxWidth, sideBoxHeight);
Color[] myColours = new Color[sideBoxWidth * sideBoxHeight];
for (int j = 0; j < (sideBoxWidth * sideBoxHeight); j++) { myColours[j] = Color.gray; }
mTexture.SetPixels(myColours);
mTexture.Apply();
Sprite mSprite = Sprite.Create(mTexture, new Rect(0.0f, 0.0f, mTexture.width, mTexture.height), new Vector2(0.5f, 0.5f), 100.0f);
boxLeft.sprite = mSprite;
boxLeft.transform.localScale += new Vector3(69.0f, 69.0f, 69.0f);
sideBoxLeft.AddComponent<RectTransform>();
sideBoxLeft.GetComponent<RectTransform>().anchoredPosition = new Vector2(-(Screen.width / 2.0f) + (sideBoxWidth / 3.0f), 0);
sideBoxLeft.transform.SetParent(canvas.GetComponent<Canvas>().transform, false);
And here is the result:
Instead of overlaying the scene the side bar is created in the same plane as the game objects and is massive. I don’t understand why this is happening, as it displays correctly when the render mode is set to “Screen Space - Camera”.
If anyone can point out what I am doing wrong I would really appreciate it!