Search code examples
c#unityscriptunity-game-engine

UI Canvas Image with UI Buttons

I have UI canvas image with 2 UI buttons. I set as background, that layer. But this layer overlaying my game! How do I it is behind everything?

enter image description here enter image description here

I want set the second imagem as background.

I am using the UI Canvas because it automatically adjusts to any screen through the anchors.

-

Solution

  • No GameObject in your scene should be under Canvas unless the GameObject is part of the UI. The background image you want to use is not a UI. Your post shows that you only want it as a UI because Canvas automatically adjust the size to match the screen size.

    How to fix this with code and without making that background texture part of the UI.

    1.Remove/Delete the current Background and the Canvas Object for it. You don't need it.

    2.Re-import the background image and make sure that its Texture Type is set to Sprite (2D and UI)

    3.Drag it to the scene and rename it to Background. Now put it under Bee GameObject. Bee should now be the parent of the Background texture and the Background texture should be on top of Ground Object.

    4.Create a script called BackGroundResizer and put the code below in it. Attach the script to the Background GameObject/Texture.

    // Use this for initialization
void Start()
{
 resizeSprite();
}

void resizeSprite()
{
 SpriteRenderer bgSprite = GetComponent<SpriteRenderer>();
 float screenHeight = Camera.main.orthographicSize * 2;
 float screenWidth = screenHeight / Screen.height * Screen.width;
 transform.localScale = new Vector3(screenWidth / bgSprite.sprite.bounds.size.x,   screenHeight / bgSprite.sprite.bounds.size.y, 1);
}

    This should solve your current problem for this post. Below describes how to properly setup a UI.

    Use different Canvas to separate your UI and group them depending on when they are displayed. Then you can toggle the whole Canvas on/off. Your post before this post shows that you are using image as button and you have a different script attached to two images you are using as buttons. Use Buttons for buttons and image for non-clickable objects. Simple as that. So change those images to buttons.

    You don't need the GameOver scene. A GameOverCanvas is fine. The GameObjects in bold are the parent Objects(Canvas). The ones under that starts with '-' are the child GameObjects.

    Step 1:

    Create Canvas and name it MainMenuCanvas (First UI to display when game Loads).Create each child button and rename them as below(GameObject->UI->Button):

    -playButton;
-settingsButton;
-exitGameButton;

    Attach the MainMenuCanvas script to the MainMenuCanvas Object.

    Step 2:

    Create a Canvas and name it GameCanvas (Displayed during game).Create each child button and rename them as below(GameObject->UI->Button):

    -pauseButton
-jumpButton

    Attach the GameCanvas script to the GameCanvas Object.

    Step 3:

    Create a Canvas and name it PauseCanvas (Displayed when pause button is clicked).Create each child button and rename them as below(GameObject->UI->Button):

    -resumeButton;
-backToMainMenuButton;
-settingsButton;
-exitGameButton;

    Attach the PauseCanvas script to the PauseCanvas Object.

    Step 4:

    Create a Canvas and name it SettingsCanvas (Displayed when settings button is clicked).Create each child button and rename them as below(GameObject->UI->Button):

    -backButton;

    Attach the SettingsCanvas script to the SettingsCanvas Object.

    Step 5:

    Create a Canvas and name it GameOverCanvas (Displayed when Game is Over or player is killed).Create each child button and rename them as below(GameObject->UI->Button):

    -playAgainButton;
-backToMainMenuButton;
-exitGameButton;

    Attach the GameOverCanvas script to the GameOverCanvas Object.

    Step 6:

    In the Game scene, make sure that only GameCanvas is enabled. The rest of the canvas should be manually disabled.

    Step 7:

    In the Menu scene, make sure that only MainMenuCanvas is enabled. The rest of the canvas should be manually disabled.

    Once you get this setup correctly, the UI code templates I provided should work. No more UI overlapping each other and you can easily add or remove features.

    Your setup should look like the image below.

    enter image description here