Unity3d android 2d sprites placement

Question

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:

1. 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)
2. Use blue sprites outside of a canvas and obviously via a Sprite Renderer component
3. Use blue sprites in canvas viaSprite Renderer component and set the canvas render mode to Screen Space - Camera
4. 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.

Answer 1

I would use the Image/Canvas system for all UI elements (red sprites). This way you can take advantage of the CanvasScaler 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 and Screen.height and the actual aspect (landscape vs portrait). Generally, I would advise to look at the CanvasScaler source code to see an example of how to do different scalings. (see Unity Technologies UI source on Bitbucket, especially the method HandleScaleWithScreenSize on line 134).

Answer 2

To add upon Xarbrough's great answer:

• Don't put SpriteRenderer in a Canvas. Use the Image component instead, you will have a lot more control on the actual size/ordering of the images.
• If you will only handle default UI events of components like Button/ScrollView etc., use a 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).
• If you need to handle complex events on the UI (drag'n'drop, transform on mouse hover, most things that require you to extends the EventTrigger class), you will want to use Screen Space - Camera because it's much easier to works with mouse coordinate in this mode.
• If you have a canvas that should move together with a sprite (e.g. chat bubble in RPG), use World Space.