GUI box texture resizes itself

I have a menu based game, where each menu screen has a background image. My game uses 640 x 480 resolution and the art is in resource folder in this size. When I load the game, the background art (variable GUI_BG) resizes itself to 473 x 475 and goes into the center in the background! All other UI elements like buttons are placed and sized correctly though. I have added the bg image through the inspector.

This is my first try with Unity and I'm not an experienced programmer so its likely I have misunderstood something :)

var GUI_BG : Texture2D;
var newSkin : GUISkin;

function Screen() {
    //layout start
    GUI.BeginGroup (new Rect(20, 20, 640, 480));

    //the menu background box with image
    GUI.Box(Rect(0, 0, 640, 480),GUI_BG);
    var script = GetComponent("Screen"); 
    // Back to main menu button
    if(GUI.Button(Rect(35, 40, 180, 30), "Back to Main menu")) {
        var script2 = GetComponent("MainMenu"); 
        script2.enabled = true;
        script.enabled = false;
    }
    GUI.EndGroup(); 
}

Not sure if related to the issue, but I Have an additional UI box called "bottom menu" that takes around 200px of the screen and is partly on top of the main screen. The scaled image does go over this box though as designed. The resizing only effects horizontal size.

function OnGUI () {        
    Screen();
    BottomMenu.bottomMenu(BottomMenu.whichMenu());
}

1 Answer

1
function Screen() {
    //layout start
    GUI.BeginGroup (new Rect(20, 20, 640, 480));

should be

function Screen() {
    //layout start
    GUI.BeginGroup (new Rect(0, 0, 640, 480));

this is your "drawing" area for your GUI, the four digits after new Rect are, position x position y, size x, size y. This is relative to the top corner. If you're having scaling issues you need something like ScaleMode.StretchToFill which works for GUI.DrawTexture eg

GUI.DrawTexture (Rect (0,0,640,480),GUI_BG, ScaleMode.StretchToFill);

you need to make the group smaller if your screen size is 640 by 480 and you have taken 20 pixels off the top and side. So 600 by 440 will give you that 20 pixel boarder