- Home /
Using prefab in UI buttons and/or canvas?
Hi,
I'm working on my first 2D game. I have six nice prefabs (one per avatar), each of the prefabs randomly chooses among 5 different sprites for the avatar (blinking, waving, etc). I want to create a UI for changing the avatar during game play.
1) Can I use prefabs inside Canvas as in a regular Scene? Just drag/drop avatar inside canvas doesn't work. I see the avatar in the "scene" but not in the "game"
2) Can I somehow use my prefabs with UI buttons?
Thanks
Answer by DiegoSLTS · Mar 02, 2015 at 12:47 PM
Is your prefab a UI object (does it have a Rect Transform)? Is it in the UI layer?
Prefabs work inside a canvas as long as they're prefabs of things that work inside a canvas.
Diego, my prefab is not a UI object and does not have a Rect Transform. I'll check into it. Thanks!
Diego,
I've been looking at your suggestions and now I have more questions.
1) I was able to transfer my prefab to the UI layer and it kind of works but now it seems like integration is really difficult. UI objects seem to be on a different scale system than UI layer. Why are gameobjects tiny and in the corner of the canvas in Scene view and yet they look fine in game?
Can you please explain this and or point to an article that does? I don't understand the logic of working with things that seem to be in complete different scales.
Thanks
I don't have all the details about that, it's just how Unity works, but here's what I understand:
When you add a Canvas Unity creates a giant object with the size of the canvas resolution. You can see that in the rect transform's width and height.
Canvas are added in "Screen space - Overlay" render mode, and Canvases in that mode are not rendered by cameras, Unity renders them internally over everything else you have in your scene. Since this render mode is not drawn by the camera, it's size in the scene doesn't matter.
When you change the render mode "Screen space - Camera" it works like Overlay until you set the Render Camera for it. If you look at the Rect Transform's scale you'll see that they change from (1,1,1) to something like (0.016,0.016,0.016). Since the UI is now drawn by a camera, it's size does matter, so Unity scales it down A LOT to fit inside the camera's frustum.
Something similar happens when you switch to "World space" render mode with a Render camera selected. The canvas is scaled down a lot, but now you can also change those values.
The size (width and height values) in Overlay and Camera modes can be changed using the Canvas Scaler component. When you choose "Scale with screen size" as the "Ui Scale mode" you can change the reference resolution and the "$$anonymous$$atch mode" and you'll see the width and height affected.
As for you're difficulties adding your prefabs, remember that UI elements must have a Rect Transform component (EVERY game object in the prefab hierarchy should have it), not a regular Transform. You're prefab should have been created from a UI game object in the first place, if you created it as a game object placed on the world you will have troubles because you're mixing things that are not intended to be mixed.
You should create what you want inside a canvas, then create a prefab with that, and then use that prefab in other canvases.
If you what to display 3D models from the world as part of the UI the only thing I've found that works is having a Camera that renders to a RenderTexture, then set that RenderTexture of a Raw Image component of some UI element... but I'm not sure if this is the best method.