I'm trying to draw an image background for Dialogue in a RPG I'm working on and having issues with preventing the image from taking up the whole screen. The goal is to create an object (if it needs to be created), and otherwise show it, via code.

At the moment, it draws the image successfully, but it takes up the full screen every time.

Here's the code:

        GameObject canvasObject = GameObject.Find(DialogueObject);  //DialogueObject is a const string ID

        if (canvasObject == null)
            canvasObject = new GameObject()
                name = DialogueObject

            var canvas = canvasObject.AddComponent<Canvas>();
            var background = canvas.gameObject.AddComponent<Image>();

            canvas.renderMode = RenderMode.ScreenSpaceOverlay;

            canvas.transform.parent = canvasObject.transform;
            background.transform.parent = canvas.transform;

            background.rectTransform.anchorMin = new Vector2(0f, 0f);
            background.rectTransform.anchorMax = new Vector2(1f, .5f);

            if (background.sprite == null)
                background.type = Image.Type.Sliced;
                background.fillCenter = true;
                background.sprite = Resources.Load<Sprite>(DialogueBackgroundResource); //DialogueBackgroundResource is a const string 
                background.color = new Color(1, 1, 1, 0.5f);
                background.rectTransform.sizeDelta = new Vector2(40, 40);


The above is literally all of my code. I've tried setting the sizeDelta, per a number of queries on the web, and even though it changes, the image is always full screen. Is there something else I am missing? My understanding is that the anchors are telling it to basically only take up the spot in the bottom half of the screen.

Any help is appreciated!

  1. You attached your background image component to the same object as the canvas.

    The anchor properties only affect layout relative to an object's parent, and an object cannot be its own parent, so that robs you of all control over its layout.

    Try creating your background this way instead, so your image has its own layout object:

    var background = new GameObject("Background").AddComponent<Image>();

  2. This line is meaningless:

    canvas.transform.parent = canvasObject.transform;

    canvas is a component you attached to canvasObject so it has the same Transform as the object it's attached to. So you're trying to make the canvas its own parent, to which Unity will say "ha ha, no. It's null"

  3. You set the background's parent with .parent = which generates a warning when you do it with UI objects since it's probably not what you want. Instead:

    background.transform.SetParent(canvas.transform, false);

    keeps the background's default localPosition where it was created, rather than repositioning it to try to keep the same worldspace position (which would lead to an offset background in this situation)

  • \$\begingroup\$ That helped. Thank you! Unfortunately, it feels like Unity has a lot of methods and properties that don't actually do the same things, despite having the same names. Are there any good books or resources (aside from Stack Exchange) to help gain a better understanding? \$\endgroup\$
    – Locke
    Mar 9 '18 at 13:54
  • \$\begingroup\$ I highly recommend reading the Unity API docs for the types & methods you're using, or follow the tutorials published on their site. \$\endgroup\$
    – DMGregory
    Mar 9 '18 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.