Unity2D layering multiple canvas'
I have two canvas' set up for my project, one to act as a background and one to hold foreground UI elements. Originally they were set to world space, and I had no problems, but now I am optimizing my game, I must change the space so they adjust to mobile phones. How can I design the canvas' so that one acts in the background and the other in the foreground? I have tried changing the z-pos and other quick fixes I found online but none have worked.
unity3d canvas
asked Nov 26 '18 at 12:17
MattattackMattattack
778
|
show 7 more comments
I have two canvas' set up for my project, one to act as a background and one to hold foreground UI elements. Originally they were set to world space, and I had no problems, but now I am optimizing my game, I must change the space so they adjust to mobile phones. How can I design the canvas' so that one acts in the background and the other in the foreground? I have tried changing the z-pos and other quick fixes I found online but none have worked.
unity3d canvas
asked Nov 26 '18 at 12:17
MattattackMattattack
778
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32
|
show 7 more comments
I have two canvas' set up for my project, one to act as a background and one to hold foreground UI elements. Originally they were set to world space, and I had no problems, but now I am optimizing my game, I must change the space so they adjust to mobile phones. How can I design the canvas' so that one acts in the background and the other in the foreground? I have tried changing the z-pos and other quick fixes I found online but none have worked.
unity3d canvas
asked Nov 26 '18 at 12:17
MattattackMattattack
778
I have two canvas' set up for my project, one to act as a background and one to hold foreground UI elements. Originally they were set to world space, and I had no problems, but now I am optimizing my game, I must change the space so they adjust to mobile phones. How can I design the canvas' so that one acts in the background and the other in the foreground? I have tried changing the z-pos and other quick fixes I found online but none have worked.
unity3d canvas
unity3d canvas
asked Nov 26 '18 at 12:17
MattattackMattattack
778
asked Nov 26 '18 at 12:17
MattattackMattattack
778
asked Nov 26 '18 at 12:17
MattattackMattattack
778
asked Nov 26 '18 at 12:17
MattattackMattattack
778
asked Nov 26 '18 at 12:17
MattattackMattattack
778
778
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32
|
show 7 more comments
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32
|
show 7 more comments
1 Answer
1
active
oldest
votes
Ok, you have background canvas, sprites and foreground canvas, and background canvas should be behind everything including sprites.
The idea is to render at first only background with one camera, and then render everything with another.
To do that, we should:
- Add a layer for background canvas. Change layer of background canvas and children to that layer.
To add a layer, select any gameObject and in top of the inspector you will see:
Click on a dropdown list labeled "Layer" and select "Add Layer". Then create new layer and give it a name:
Select your background canvas and change layer for it and its children. When adding gameObjects, keep in mind that if you add them to background canvas, their layer must be the same as the layer of canvas, otherwise they will be rendered by the wrong camera.
- Disable that layer in main camera's culling mask.
Now the camera should no longer render background UI, and it will disappear in the game view.
- Add a camera for rendering background UI.
Cameras with higher depth render on top of those with lower depth, so we should set its depth to less than depth of main camera. We should also set its culling mask to only layer for background UI, otherwise all objects on scene will be rendered twice. Copy other setting from main camera. Set main camera's clear mode to Don't Clear or Depth Only to prevent it from erasing background.
- Set mode of the background canvas to Screen Space - Camera and drag newly created camera into field "Render Camera" there.
It should work now.
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480971%2funity2d-layering-multiple-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Ok, you have background canvas, sprites and foreground canvas, and background canvas should be behind everything including sprites.
The idea is to render at first only background with one camera, and then render everything with another.
To do that, we should:
- Add a layer for background canvas. Change layer of background canvas and children to that layer.
To add a layer, select any gameObject and in top of the inspector you will see:
Click on a dropdown list labeled "Layer" and select "Add Layer". Then create new layer and give it a name:
Select your background canvas and change layer for it and its children. When adding gameObjects, keep in mind that if you add them to background canvas, their layer must be the same as the layer of canvas, otherwise they will be rendered by the wrong camera.
- Disable that layer in main camera's culling mask.
Now the camera should no longer render background UI, and it will disappear in the game view.
- Add a camera for rendering background UI.
Cameras with higher depth render on top of those with lower depth, so we should set its depth to less than depth of main camera. We should also set its culling mask to only layer for background UI, otherwise all objects on scene will be rendered twice. Copy other setting from main camera. Set main camera's clear mode to Don't Clear or Depth Only to prevent it from erasing background.
- Set mode of the background canvas to Screen Space - Camera and drag newly created camera into field "Render Camera" there.
It should work now.
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
add a comment |
Ok, you have background canvas, sprites and foreground canvas, and background canvas should be behind everything including sprites.
The idea is to render at first only background with one camera, and then render everything with another.
To do that, we should:
- Add a layer for background canvas. Change layer of background canvas and children to that layer.
To add a layer, select any gameObject and in top of the inspector you will see:
Click on a dropdown list labeled "Layer" and select "Add Layer". Then create new layer and give it a name:
Select your background canvas and change layer for it and its children. When adding gameObjects, keep in mind that if you add them to background canvas, their layer must be the same as the layer of canvas, otherwise they will be rendered by the wrong camera.
- Disable that layer in main camera's culling mask.
Now the camera should no longer render background UI, and it will disappear in the game view.
- Add a camera for rendering background UI.
Cameras with higher depth render on top of those with lower depth, so we should set its depth to less than depth of main camera. We should also set its culling mask to only layer for background UI, otherwise all objects on scene will be rendered twice. Copy other setting from main camera. Set main camera's clear mode to Don't Clear or Depth Only to prevent it from erasing background.
- Set mode of the background canvas to Screen Space - Camera and drag newly created camera into field "Render Camera" there.
It should work now.
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
add a comment |
Ok, you have background canvas, sprites and foreground canvas, and background canvas should be behind everything including sprites.
The idea is to render at first only background with one camera, and then render everything with another.
To do that, we should:
- Add a layer for background canvas. Change layer of background canvas and children to that layer.
To add a layer, select any gameObject and in top of the inspector you will see:
Click on a dropdown list labeled "Layer" and select "Add Layer". Then create new layer and give it a name:
Select your background canvas and change layer for it and its children. When adding gameObjects, keep in mind that if you add them to background canvas, their layer must be the same as the layer of canvas, otherwise they will be rendered by the wrong camera.
- Disable that layer in main camera's culling mask.
Now the camera should no longer render background UI, and it will disappear in the game view.
- Add a camera for rendering background UI.
Cameras with higher depth render on top of those with lower depth, so we should set its depth to less than depth of main camera. We should also set its culling mask to only layer for background UI, otherwise all objects on scene will be rendered twice. Copy other setting from main camera. Set main camera's clear mode to Don't Clear or Depth Only to prevent it from erasing background.
- Set mode of the background canvas to Screen Space - Camera and drag newly created camera into field "Render Camera" there.
It should work now.
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
Ok, you have background canvas, sprites and foreground canvas, and background canvas should be behind everything including sprites.
The idea is to render at first only background with one camera, and then render everything with another.
To do that, we should:
- Add a layer for background canvas. Change layer of background canvas and children to that layer.
To add a layer, select any gameObject and in top of the inspector you will see:
Click on a dropdown list labeled "Layer" and select "Add Layer". Then create new layer and give it a name:
Select your background canvas and change layer for it and its children. When adding gameObjects, keep in mind that if you add them to background canvas, their layer must be the same as the layer of canvas, otherwise they will be rendered by the wrong camera.
- Disable that layer in main camera's culling mask.
Now the camera should no longer render background UI, and it will disappear in the game view.
- Add a camera for rendering background UI.
Cameras with higher depth render on top of those with lower depth, so we should set its depth to less than depth of main camera. We should also set its culling mask to only layer for background UI, otherwise all objects on scene will be rendered twice. Copy other setting from main camera. Set main camera's clear mode to Don't Clear or Depth Only to prevent it from erasing background.
- Set mode of the background canvas to Screen Space - Camera and drag newly created camera into field "Render Camera" there.
It should work now.
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
answered Nov 29 '18 at 11:50
trollingchartrollingchar
3187
3187
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480971%2funity2d-layering-multiple-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you set the canvas render mode to Screen space - overlay, there will be a number named Sort order. Greater value brings elements to front, lesser sends them to back.
– trollingchar
Nov 26 '18 at 12:43
Tried this, didn't seem to work for me unless the sort order can't be less than one? Didn't give an error though.
– Mattattack
Nov 26 '18 at 12:53
I checked it and all values are working as expected, even below zero. How it's not working, gives wrong order of elements? Can you please add a screenshots of canvases and what you expect from them? And I forgot to say, overlay canvases always are over the world and sprites, if background is on canvas it will cover them, maybe this is your problem.
– trollingchar
Nov 26 '18 at 13:01
My problem is that I need the canvas behind the sprites and other gameobjects ect. is there anyway to do this without using the world canvas?
– Mattattack
Nov 26 '18 at 13:21
If your background is a single image, you can use a sprite
– trollingchar
Nov 26 '18 at 13:32