What image dimension to use for my UI elements?

Hello guys,

So I am a bit confused about the canvas UI system.

I have these few questions:

1- What is the main difference between Overlay and Camera Render Mode

2- In "Scale with Screen Size", what reference resolution to use? I need my game to be in HD mode for new phones.

3- So basically when a designer starts to draw the assets, what canvas size to choose? I mean should I use the highest resolution available ? Will the assets still look as it is in older/lower resolution phones? What's the best strategy to design assets for different phone resolutions?

Thank you

 

1:
Overlay: Directly rendered to GPU (No camera is used for rendering)
Camera Render Mode: a camera (that you select) is used to render the UI.

2: Use a general resolution that you want to support.

3: You have to use the layout system and the options that the recttransform give you to make a flexible designe that scales with the different phone resolutions and aspect ratios.
You should take a look into the UI tutorials, they will explane how to deal with the system.
http://unity3d.com/learn/tutorials/topics/user-interface-ui

 

Thank you for your reply. Yeah i checked these tutorials. What I am concerned about is the quality of the images once they are scaled up or down...Like I use 960 x 540 as a reference but how would my sprites look up in a 2560x1440 device ? Im developing card games and my cards are full of colors and designs. That's my concern.

What i acutally did was I used 2560x1440 as a reference and designed all assets accordingly. When I tested the game in an old device like samsung s4 mini, the cards were a bit blur and not clear.

 

In most cases the people who notice scaling issues the most are the developers

For a computer card game I would ensure there's no text in the graphics. Use the built-in text system instead, so that you can adjust for different resolutions where necessary. Try with or without point sampling, mipmapping and all the other advanced options for the textures if the pictures are getting too blurry. But if you have a way to inspect the cards in the game and zoom in on them, and they look fine like that, I don't think players will care if they're a bit blurry on the table.

Texture compression settings also matter. Some devices might not support the best formats. If designing for mobile you should have several sets of graphics so you can switch as needed. Include a default resolution embedded with the app, and download the higher resolution graphics if the device supports it. On-demand resources let the device choose what to even download initially.

Apple have some nice guidelines for supporting different resolutions, and if following something similar for Android you'd probably want to support more than two sets of graphics to cover the most devices. Plain old SD devices, HD devices, ridiculous resolutions (1440p and up).

 

Thank you for your reply,

So in the "Scale with Screen Size", what reference resolution to use? I need my game to be in HD mode for new phones.

So you mean i need to use asset bundles so each phone (iOS and Andrioid) will download the required set of assets that suits the resolution? Do you have any link for any tutorial about this?

 

We've used 1536x2048 and made images accordingly. Looks fine on tablets and phones as far as we're concerned.

 

So you used only one dimension set of assets for all devices ( old, new, tablets) ?

 

Yes.