Photoshop Question posted in
The official user guide can be found here.

Unity3d android 2d sprites placement – Photoshop

Please take a look at this picture
final game export
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.

Tags:

4

Answers


  1. 0

    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).

    Login or Signup to reply.
  2. 0

    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).

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search