I’m working with an artist who laid out our UI’s design in Photoshop with guides to show precisely how the UI needs to be laid out. I have to translate his UI into the Unity UI screen space. I was wondering if there is a guide or a best practices anyone could reccomend to matching up the positiong of the UI in Photoshop to the positioning of the UI in Unity?
Any suggestions?
I would say if you are trying to match it EXACTLY you should probably position everything programmaticallyvia scripts and what not
This mostly works until I have UI elements within UI elements, then the Unity anchoring system causes issues.
Export the whole image, drop in the background and use it as guide to line up the separate elements.
4 Likes
If you get funky anchoring problems, consider world space positioning and parent the ui canvas to the camera. It works.
1 Like
Try different scaling modes on the canvas
Do you have to support multiple screen resolutions and UI elements stretching?
If not anchoring everything to the centre of the screen or the nearest corner can be a handy trick.
Currently, I just need to support 16:9, but multiple resolutions based on that aspect ratio.
I’ll try the world space positioning and the exporting the Photoshop image as suggested, that may help.
If your aspect ratio is constant you don’t need to do any thing fancy with anchors. Either anchor everything to all four corners of its parent. Or anchor everything to a single point.
1 Like
Yeah, if you’re not supporting multiple aspect ratios I would simply anchor everything to the default position (which I think is the centre?) - the supporting multiple resolutions is just done through having a Canvas Scaler component on the root.
2 Likes