UI Prefabs

Hey all, just started using the new UI stuff. It seems pretty straightforward so far!

I am having a hard time figuring out how to position UI elements. then save to a prefab. I make a canvas and place a few elements where i want them, then save it as a prefab and instantiate that prefab through code. But when i create it, the UI elements aren't where they should be in relation to the canvas. They are slightly moved to the right for some reason.

I am not sure how to approach this. You can't edit UI stuff when it's a prefab since you have no preview where you can graphically click and drag elements around. I've been just dragging it into the scene, making changes, then dragging it back to the prefabs folder.

How come instantiating prefabs gives me different results than just leaving the UI elements in the scene? How can i fix it?

 

If you are setting your instantiated object's parent to be the canvas, be sure to do so through SetParent(), with the `worldPositionStays` parameter to false. I found other methods to move and scale my prefabs around as well. =)

 

Even if i use SetParent() the instantiated text is still enormous.

I use this to scale it to it's normal size:

Code (CSharp):

1. textFloating.transform.localScale = new Vector3(1f, 1f, 1f);

 

Well the way i am doing things now is i have a canvas for every distinct thing.

1 canvas for the intro splash for the game, 1 for the main menu, 1 for the pause menu, etc.

I'm already seeing problems with my approach though, for example i have a GameManager which is in the scene and cannot be referenced by prefab button action events. So i guess i will need to place the menu canvas in the scene and disable it when the menu is not supposed to be visible, instead of instantiating it as a prefab?

 

Twoski, if I understand correctly, is your problem that your UI prefabs' Event Triggers (Select, Drag, ...) can't reference your in-scene GameObject? If so, you can dynamically add Triggers to the list through code.

Example code (C#):

Code (csharp):

1. GameObject gameManager; //find from scene
2.  
3. GameObject btn = (GameObject) Object.Instantiate(buttonPrefab);
4. EventTrigger.EntrytriggerEntry = newEventTrigger.Entry();
5. triggerEntry.eventID = EventTriggerType.Select;
6. triggerEntry.callback.AddListener(delegate{gameManager.YourCallback(param1, param2, ...);});
7. btn.GetComponent<EventTrigger>().delegates.Add(triggerEntry);

 

Oh that is handy to know, thank you good sir.

My other problem is that for some reason my Image objects are mis-aligned when i instantiate a prefab. Let's say i scale an image to be the height of the canvas but only half the width and move it to the top left corner, then save the canvas as a prefab and instantiate it. The instantiated version moves the image to the right for some reason so there's a gap to the left of it.

 

It's hard to tell without a visual, but by any chance are you positioning/ aligning in a small view, and testing it maximized? If so, perhaps the anchors are misaligned? If that's not it, could you provide a screenshot of your setup?

 

I just created a canvas in the scene, added some Images/buttons/etc to it, then saved it as a prefab. From what i could tell, you can't resize a canvas so i assumed all elements positioned within it were using normalized/local positioning.

When i swap from scene to game view and mess with the aspect ratio, it completely mucks up the layout when it's in anything other than 16:10.

Is there a way to make a canvas auto-resize to fit the camera? It seems like that isn't happening in this situation. Or if the canvas does auto-resize, it's not properly resizing the other elements to follow suit.

 

Apologies for my late reply. Anchors are indeed completely relative, though the offsets are not. Perhaps you could check those? I haven't ttried to instantiate an entire Canvas yet, but if its Render Mode is set to Screen Space, I'd assume it should just work.