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

Aspect ratio and sprite size across multiple devices

Discussion in '2D' started by imaginaryhuman, Sep 26, 2019.

  1. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    So I'm working on a new game which is a 2D sprite-based game. I'm aiming for it to run on a range of devices from large 60" tv screens down to 4" phone screens. But this presents major issues.

    First of all there are issues of aspect ratio. TV's, desktop computers, and most modern phones, are close to a 16:9 aspect ratio, or could support that ratio fairly closely. But when it comes to tablets, a majority at a 4:3 ratio. So now that means either expanding the gameplay screen area or having some black bars or something to try to force a 16:9 aspect.

    But even if I stick to one aspect, the colossal difference in screen sizes is a problem. Trying to make a single app with specifically sized sprites, which take up a specific percentage of the screen area, and having objects which move at specific speeds across the screen, to get that to be useable and friendly on all these screens, it seems really difficult. I don't want to have to scale up the sprites on a phone or scale them down on a large desktop. One size fits all, though, means that what looks reasonable on a large desktop or tv, is really tiny on a phone. I'm considering maybe having to drop phone support altogether and just try to make it work at the tablet level. This doesn't so much have to do with sprite scaling or being pixel perfect, but to present the same proportions of object sizes and screen ratio on all these devices so that it "looks the same", but still keep it playable. Because I don't really want to have to code support for having e.g. expanded gameplay area or making all kinds of stretchy UI elements etc.

    This is tough when developing websites too because to make it responsive and still make things readable and appropriately sized there's usually a major restructuring of pages and text and layout and all that so that the mobile folks have a reasonable experience as well as the desktop folks using more real estate. This tends to come down to sort of... "information per inch".. where big displays can quadrouple the amount of data on the screen. But this approach with a game, would mean the play area has to now expand significantly, which for a "one screen" kind of game, that now means a whole lot more complexity in the object placement and animation and so on, significantly changing the gameplay.

    How do you deal with this dilemma? Do you just try to make a separate 'large screen' game and then reformat and refactor everything for a smaller screen 'version'?
     
  2. imaginaryhuman

    imaginaryhuman

    Joined:
    Mar 21, 2010
    Posts:
    5,834
    No replies... but here's what I figured out.

    For pixel art, on laptops, desktop and tv, 640x360 is a pretty good resolution. It has to span from a 13" laptop all the way up to a 30" desktop and beyond for tv's. The pixels have a reasonably noticeable pixelated look on the smaller screens and slightly oversized on a 27" monitor. This res also perfectly maps to 720p, 1080p, 1440p, 2880p etc so supports 4k and 5k. I was dabbling with 960x540 for desktop (not laptop) which looks good on a 21-27" screen but does not exactly divide into a 5k screen resolution.

    Then for tablets and phones, my plan is to reduce the size of the play area to 66%, ie 2/3rds of the desktop play area will be visible - desktop has 50% extra room. The virtual resolution jumps down to around 240 cells height instead of 360. This fits roughly into a 720px high display and divides well into 1080p - trying to maintain exact numbers of pixels per cell. This results in the sprites on tablets and mobile being boosted up to 1.5x normal size, in terms of how much of the screen space they take up. And this is without having to actually scale the sprites or worry about how many pixel cells they consume - the resolution shift takes care of it. This is pretty much necessary since the screen itself is smaller and more compact, to keep the sprites a decent size and to keep text readable.

    It does present a few quandries such as that the game has to now support two play-area sizes. Or in fact sort of 3, because tablets are largely 4:3 ratio and phones are closer to 16:9. Any movement speeds might have to be adjusted, the placement and position of menu items and spawning and characters and menus and other on-screen elements has to be considered able to 'fit into' the size of an ipad screen, which is closer to a 384x240 resolution. To fit an entire enemy for example on-screen on all devices puts a bit of a limit on the maximum sprite size, which can't be full-screen on desktop. So the user interface has to be able to adjust/stretch somewhat. I didn't want the scenario of having to create multiple sets of sprites.

    It's pretty hard to shove a desktop-resolution game into a phone and expect people to be able to see the smaller objects. But if we're going from a 30" display down to a 4" phone screen it's really very difficult to overcome that shrinkage while still keeping enough resolution to do something useful.

    I think I can see why in the general picture it's better to develop ipad/iphone games "separately" and designed specifically for those screen resolutions/sizes, because to be readable and legible and an appropriate size for objects, the objects would just end up being way too big on desktop if you scaled it up. Of course doing anything in 3D has none of these problems, it's mainly a 2D spatial proportion thing. Making e.g. a 2d platformer or shootemup that looks great on a larger play-area screen on a desktop monitor, is quite difficult to interact with on a tiny phone screen due to the massive shrinkage.
     
    Last edited: Sep 30, 2019
    dnspll_brgwin likes this.