Please take a look at this picture
It’s a final look of the game exported from photoshop
I marked the ui sprites with red marker and the gameplay sprites with blue marker
My question is how should i correctly use these sprites in unity3d 2d game development.
This is the ways i can think of:
- Use the red sprites in a canvas as
Image
component inside a layout group (vertical or horizontal, so i can place them in in the corner and it will work with every resolution) - Use blue sprites outside of a canvas and obviously via a
Sprite Renderer
component - Use blue sprites in canvas via
Sprite Renderer
component and set the canvas render mode toScreen Space - Camera
- Use blue sprites in canvas via
Image
component
These ways all might be wrong but these are all i can think of right now.
I’m open to all of your suggestions.
My unity version is 2017.2.0f and i want the game to work with every resolution.
4
Answers
I would use the
Image
/Canvas
system for all UI elements (red sprites). This way you can take advantage of theCanvasScaler
component and anchoring to make the UI resolution independent. (also see HOWTO-UIMultiResolution)Gameplay sprites (blue) would simply be
SpriteRenderer
components in world space with a regular orthographic camera. This has better performance than doing it all on the UI canvas. Also, gameplay code will (from experience) be much easier in world space, than when dealing with canvas positions, because the UI layout system might add additional transformations/complexity.Finally, you will probably want to adjust the blue sprites’ size via the camera’s orthographic size property. There is no one-fits-all solution for this, so you will have to make a tradeoff, considering the actual screen resolution returned from
Screen.width
andScreen.height
and the actual aspect (landscape vs portrait). Generally, I would advise to look at theCanvasScaler
source code to see an example of how to do different scalings. (see Unity Technologies UI source on Bitbucket, especially the methodHandleScaleWithScreenSize
on line 134).IMO If you are going to move camera around or zoom in/out then use sprite renderer for game play and UGUI for UI of game.
But if your game has static screen unlike former case i described then you must go for UGUI (image or raw image).
I Would use Canvas for the red marker sprites, as this is UI element that need to be behave like an UI, and get adventage of RectTrasnform to modify it to fit your screen need i.e Anchoring, use Text and other stuff to fill the UI Content.
and use Sprites for blue markered sprites, and use Prespective Camera to render it, make the Tree sprites a little bit higher/backward to get nice parallax effect easily.
Why we need to place it with sprites and don’t place it in canvas, because RectTransform and Transform are behave differently, use Transform if you want to apply Physic, when you use Transform instead of RectTransform you will work in World spaces, but if you use RectTransform with Canvas you will work in Screen Spaces which make it’s harder and inacuratte.
To add upon Xarbrough’s great answer:
SpriteRenderer
in a Canvas. Use theImage
component instead, you will have a lot more control on the actual size/ordering of the images.Screen Space - Overlay
canvas. This way you don’t have to bind a camera to each canvas and can easily separate your UI into another scene, and later Load Scene Additive them into your main scene as needed. This allow for less cluttered and more organized scenes (imagine having to put options, shop, inventory, achievement etc. canvases all in one scene).Screen Space - Camera
because it’s much easier to works with mouse coordinate in this mode.World Space
.