Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question How to resize a 2D sprite scene to any screen?

Discussion in '2D' started by adrianzarp, Jan 24, 2023.

  1. adrianzarp

    adrianzarp

    Joined:
    Feb 25, 2014
    Posts:
    4
    Hello, guys! We are developing a 2D game for desktop and mobile. It is grid-based although we decided not to use tilemaps and, instead, create our own grid by code, because we need to program different actions and interactions for each tile. The game UI is on a canvas and that part resizes as we expected. Also, everything already works quite well "functionality-wise" on both, mobile and desktop. The problem is that, as we made the main grid and objects as sprites, it works great on any 16:9 screen, but some of the screen space gets cut when it runs on any wider screen.

    How can we resize the whole sprite scene depending on screen size? I guess it has more to do with the camera than with the actual objects but we don´t have a clear clue. We already looked into "pixel-perfect camera" and, although we haven´t dug too deeply into it, it looks like it´s aimed more towards preserving artwork at full resolution and not so much at what we need.

    I´ve included two images: one is from the PC where we are developing the game and where it looks as it should, 16_9_Screen.jpg

    and the other is from a widescreen monitor in another PC where the first and last columns of the grid are out of view (I marked them in yellow on the image above): Widescreen.jpg


    I guess there should be a way to stretch all sprites to fit the screen, but I think the best way to go would be to get empty horizontal or vertical bars, on top and bottom or to the sides, in order to preserve the exact proportions, and that would be good enough. But how to do it?

    Thanks in advance.
     
  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,517
    The camera's orthographicSize is half the vertical height in world units, regardless of pixels.

    From that size, the ratio between Screen.width and Screen.height (be sure to divide them as floating point quantities!) gives you the width in world coordinates.

    From that you can decide everything.

    Or as you said, generate black bars at the sides (or top and bottom) to maintain the same visual area on all devices.
     
  3. Miyagi_Endspiel

    Miyagi_Endspiel

    Joined:
    Oct 16, 2020
    Posts:
    1
    I understood the theory that Kurt mentioned but how exactly does this code look like?

    Here's my grid creation code:
    Code (CSharp):
    1. _tiles = new Dictionary<Vector2, GridTile>();
    2.         for (int x = 0; x < _columns; x++) {
    3.             for (int y = 0; y < _rows; y++) {
    4.                 var isOffset = (x % 2 == 0 && y % 2 != 0) || (x % 2 != 0 && y % 2 == 0);
    5.                
    6.                 var spawnedTile = Instantiate(_tilePrefab, new Vector3(x, y), Quaternion.identity);
    7.                 spawnedTile.name = $"Grid Tile {x} {y}";
    8.                 spawnedTile.Init(isOffset);
    9.                
    10.                 var tileRect = _tilePrefab.GetComponent<RectTransform>();
    11.                 print("Tile rect " + tileRect);
    12.  
    13.                 // Attempt 2 that also doesn't work
    14.                 float tileSize = (float)Screen.width / (float)_columns;
    15.                
    16.                 _tiles[new Vector2(x, y)] = spawnedTile;
    17.             }
    18.         }
    The print statement says:
    Code (CSharp):
    1. Tile rect null
    2. #0 GetStacktrace(int)
    The _tilePrefab object is in the Editor & used as the template for init'ing new tiles.
     
  4. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,517
    Looks great but that doesn't matter: Please don't necro-post.

    If you have a new question, make a new post. It's FREE!!

    If you have an ACTUAL question, when you make a new post, use this handy checklist:

    How to report your problem productively in the Unity3D forums:

    http://plbm.com/?p=220

    This is the bare minimum of information to report:

    - what you want
    - what you tried
    - what you expected to happen
    - what actually happened, log output, variable values, and especially any errors you see
    - links to documentation you used to cross-check your work (CRITICAL!!!)

    The purpose of YOU providing links is to make our job easier, while simultaneously showing us that you actually put effort into the process. If you haven't put effort into finding the documentation, why should we bother putting effort into replying?