how to create responsive ui in unity for android and iOS

Показать описание

Support me through paypal :

My favorite Gadgets :

official personal facebook page :

follow me on Instagram :

udemy of unity coming soon

how to create responsive ui in unity for mobile

how to implement responsive UI menu and also create a responsive (not a fixed resolution) screen size in unity. The problem we are facing in UI implementation is android or iOS are having wide variety of different screen resolution and screen densities, UI layout need to adopt that different screen resolution. The goal of this post is to adopt one layout to various resolution.

unity mobile screen resolution

To create a responsive UI menu, you must understand two things

Anchors
Canvas scalers

Anchors is responsible for positioning of UI element and every UI element have its own anchors
anchors in unity

Anchors is the feature in unity that helps you to position your UI element with different screen sizes or screen densities, anchors contains four points (as screen contains 4 sides) that are by default connected to the center of parent rectangle. This means that by default your UI element have some constant offset from center of the screen.

Canvas Scalers is responsible for sizing of UI element and canvas scaler is available in canvas and it is applied for all UI element inside canvas.

Canvas scaler in unity
canvas scaler will scale things with screen size, so best thing is to set size of UI elements at lowest resolution (480 x 800) so it will automatically scale the size of UI element (button, textfield) with screen size.

In canvas scalar, there are three attributes you must care about in order to make your UI responsive.

UI scale mode
Reference resolution
Match

In the UI scale mode, change it from constant pixel to scale with size. For reference resolution, add width as 480 px and height as 800 px and also do initial size setting of UI element at this resolution (480 x 800) otherwise it will not work appropriately. The last attribute is match, match is option for screen size scaling dependence with width or height, by default, it is depended on width and it value is from zero to one. When value of match is zero means it is totally depended on width, 0.5 values means depended on both width and height. 1 value means it is depended on height only. So set value of match as 0.5.

subscribe our channel and like our videos thank you