Unity UI: stretching an image over the display

user_9566746 0
Viewed 6619

I have an image (the game strategic map) resting in a Canvas element and I want it to stretch over the full width or length of the display (which may have different sizes or aspect ratios on different devices), so that the ratio of the image is preserved and at the same time all image is visible.

No matter what I set up, the image is either too small, or too big to fit in the display.

If I understand correctly, two groups of settings are important: (1) The position of the image, its pivot, its anchor, its min and max x and y. (2) The parent canvas scaler UI scale mode (which I probably need to be "scale with the screen size"), its x and y sliding scale. Did I overlook something? Because no combination seems to work for me.

Secondary question: Do I need to play it in the maximized mode to be able to test it? Or should it work even in the non-maximized mode?

unity3d
1 Answers

Here are the steps to achieve what you want from scratch:

  1. Set the resolution of your game view to the main resolution you are developing in for simplicity. For now we will use 1920x1080.
  2. Add a canvas to the scene.
  3. Configure the canvas settings:
    • Render mode: screen space overlay
    • UI scale mode: scale with screen size
    • Screen match mode: expand
    • Reference resolution: 1920x1080 (same as the game view).
  4. Add an image as a child of your canvas and add your desired sprite to the image.
  5. Drag the image how you want it to appear and anchor it to the center.

At this point you should be able to switch to other resolutions in your game view (e.g. 2048x1536 for iPad, or 2960x1440 for the Note 8), and the image should stretch without compromising its aspect ratio. Depending on exactly what you want to do, you may need to play around with the screen match mode.

Note: Changing your canvas reference resolution after the fact may require you to reconfigure or scale your UI.

user_102098830
Related