0

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.

-

4
  • 1
    Just by reading your last question before this one, I want to tell you that the way you are doing your UI is bad. Even though the last question has been answered, the answer is wrong too. It may be working for you now, but you will have lots of problems when your UI gets bigger. Please expand every UI GameObject in your scene, take Screen shot,then post a picture of the hierarchy of your UI GameObject. I will show you how to do this properly Commented Apr 23, 2016 at 10:59
  • I am in the process of writing this. I have few more questions. Is the background you want to set called "Backgound" that is under cameraBackground->Canvas? Also which gameObjects in your scene are the Jump, Ground, Joystick,Score and pause button under? Some of these are named in Spanish and I don't speak Spanish.... Commented Apr 23, 2016 at 12:02
  • Updated with translate =] my Background IS Background (inside Canvas) - Bee are the player =] that litle bee in midle first screen =] - Commented Apr 23, 2016 at 12:20
  • Ok,I will try now, was sleeping in the last 2 hours! Commented Apr 23, 2016 at 15:14

2 Answers 2

2

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

Sign up to request clarification or add additional context in comments.

7 Comments

I will update how to setup your UI later on but this should solve your current problem.
It does not work when the aspect ratio is changed, not to change background image proportionally.
@AlanVieiraRezende That's because the screen size does not change during play on Android and iOS. Although it can change in the Editor. Try this on Android or iOS, it should work as expected. If you want it to change in the Editor while you are re-sizing it in the game-view, put resizeSprite(); in the Update() function instead of Start() function. Now it should resize-anytime in the game-view. Although you don't have to do this in the mobile devices as it will do it once in the start function. Let me know ...
@AlanVieiraRezende Also updated my post to show how to setup your UI.
Hello I was away from home, just come, I will try and warn you if it worked! =]
|
1

I recommend that you look into using a separate UI camera. This will allow you to draw only the UI to the second camera and not the Main Camera. You can then Draw that at whatever depth you want relative to everything else. To do this you will have to create another camera and set it's Culling Mask and Clear Flags to only draw the UI and not a skybox.

If you google 'UI camera Unity' there should be a lot more information on doing exactly what you want. This is a relatively common thing to do.

3 Comments

I need drag and drop all UI canvas into this new camera?
No, keep the UI canvas separate. You need to set the new camera's Culling Mask so that only 'UI' is ticked. Then untick 'UI' in the Main Camera's culling mask. You will then have on camera drawing the UI and another drawing everything else.
Now that you have updated your answer with screen shots, I think the other answer has understood your individual problem much better and gives a fuller answer. Follow that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.