I'm making a 2D game and for the 50 billion different resolutions and aspect ratios out there I was wondering what do you guys do for your graphics?
I know there are things like letter boxing or scaling to fit (which would distort my images). But I'm just wondering what other people have done or what a solid approach is?
there are a number of ways to handle it.
1. whatever graphics you're using might do it for you automatically. for example, dx9 3d scales to whatever resolution you tell it automatically, however their d3dxSprite API does not.
2. draw at a single resolution, then strecthblit the results to the desired screen size.
3. use text and blit routines that convert to the current screen size on the fly.
i tend to prefer option 3. the slick thing to do is select a graphics package, then write wrapper routines for its text and sprite routines that convert from virtual to screen coordinates. also write wrapper routines to convert mouse input from screen to virtual coordinates. choose a virtual coordinate system big enough to last you well into the future. back in the mid 90's, i chose 10000x10000 as a virtual coordinate system. so you draw text and sprites to a virtual 10000x10000 pixel screen that the wrapper routines convert to screen coordinates on the fly. once you've written your text, sprite, and mouse wrapper routines, you now have a device independent graphics API you can use for all your projects.
but of course, being lazy, i started my last few projects hard coded at 1600x900. so my wrapper routines for those projects use a virtual 1600x900 screen size, not 10000x10000. as a result, it doesn't scale up quite as nicely as 10000x10000 would.
sounds like you haven't started yet, in which case i'd advise wrapper routines and a 10000x10000 virtual screen - unless devices will exceed that in the next 5-10 years.
note that mouse input wrapper also implies touch input wrapper, joystick input wrapper, etc. IE any input that usually arrives as screen coordinates must be converted to virtual before processing.
an example:
your virtual screen is 10000x10000. you draw some text using virtual coordiates: so you say text(1000,1000,"click here!"), which draws at 1/10 screen width and 1/10 screen height from the upper left corner of the screen. then when you check input, you do something like if isin(x,y,1000,1000,2000,1500) dostuff(). where 1000,1000,2000,1500 are bounding box virtual coordinates for the click area/hotspot/button, and x,y are the mouse click point converted to virtual coordinates.
both strechblit and wrapper routines are the same basic thing, the real difference being whether you draw everything then scale, or scale everything as you draw. implementing stretchblit can sometimes be easier, depending on the graphics package in question. but wrapper routines can yield better results, as individual text and blit routines can sometimes scale more accurately and with better looking results than simply stretching the whole screen to fit. also, generally speaking, scaling down tends to look better than scaling up. and obviously, scaling as little as possible looks best.
note that with stretchblit, you'll still need wrapper routines to convert input from current screen size to whatever screen size you draw in before strectblitting. so with stretchblit, your native drawing resolution is equivalent to your virtual screen size when using wrapper routines for drawing text and sprites.
I should have probably explained a bit more. I'm wondering how should I handle different resolutions in relation to pixel art and mobile devices.
I know that if I do not scale by a integer value my graphics will look bad. I'm also concerned with cases were I scale my graphics and then my game play areas are effected
This is a good example of what I'm talking about:
Lets say I draw everything at a 16:9 resolution (640x360) and someone with a weird resolution comes along 5:3 (800x480)
My gut reaction would be scale up
800/640 = 1.25
480/360 = 1.33333333
If I scale things up to fit then they are not going to look very good.
If I round up to the nearest integer value (2) and scale. My graphics should look good but this is where I'm kind of lost as of now.
Because 640x360 scaled by 2 is 1280x720, which is way bigger then 800x480.
Causing cut off on both vertical and horizontal sides, also this makes everything seemed zoomed in. Plus this could effect the game play I believe, as the player might not be able to "see" as much as someone where there device scales well. Which is why I feel totally lost at this point
As mentioned above, there are many ways to handle this. One way we dealt with this at a video game company I worked at was work in a fixed-height coordinate space. Instead of having all of your coordinates match up to pixels, come up with some arbitrary fixed height value (test it out though). The fixed height will be the domain of your screen's coordinate space. The width would vary between screen sizes, and you could find it by multiplying your fixed height value by the aspect ratio. That said, make sure all of your fullscreen background artwork produced with the height of your fixed-height value, and its width being whatever it is multiplied by your most extreme aspect ratio (most-likely 16:9, if working in landscape). Then, the sides would just be clipped on screens with fuller aspect ratios, most-notably the 4:3 aspect ratio. You'd design most of your UI in the middle of the screen, making sure it fits nicely in 4:3. You could attach certain UI elements to the edges of the screen so that they hug the sides regardless of fullscreen or widescreen aspect ratios. 9-slicing will be a huge part of this as well. A good deal of your panels and other large UI elements would most-likely be percentage-based if you want them to scale with the screen. The beauty here is that your UI is no longer resolution-dependent, and mostly not aspect-ratio dependent. You could get more creative, and have different resolution images for different resolution devices. For example, high-res iamges for Quad HD and 4K displays (many mobile devices are going Quad HD today). You could use lower-resolution versions of your images for lower-resolution devices --something I highly recommend. Lower-resolution devices are generally older devices as resolutions have been increasing almost every year. These older devices won't have the memory, or the GPU bandwidth to support these higher-resolution textures, so I'd suggest having some sort of content pipeline in place that automatically cooks up low-end builds with lower-resolution images.
Regarding having multiple resolutions of your game's assets, I'd use PC games as an example. With varying hardware and screen resolutions, gamers can usually lower graphical settings, such as texture resolutions, if there isn't enough resources to go around.
You can also use techniques mentioned above alongside this process.
xScale = deviceResWidth / TARGET_RES_WIDTH_53;
yScale = deviceResHeight / TARGET_RES_HEIGHT_53;
xScale = deviceResWidth / TARGET_RES_WIDTH_32;
yScale = deviceResHeight / TARGET_RES_HEIGHT_32;
xScaleBackgrounds = deviceResWidth / TARGET_RES_WIDTH_53;
yScaleBackgrounds = deviceResHeight / TARGET_RES_HEIGHT_53;
I am a little bit confused how your solution looks right now but if I understood you correctly you "scale" your objects drawn "in the world" according to the aspect ratio of the game.
> You do realize that is what a projection matrix is for?
This is how every game works since 1947(not really). I don't really understand the problem with aspect ratio because there is none.
The screen is independent from the actual game and should have no influence on it. It is just a windows with which you can view into the videogameworld.
Just set up a proper projection matrix calculating in the screen size of the current device and let your gpu do the work for you.
Sounds like your worried about graphic degradation during real time drawing routines. One way to combat this would be to resize during the buffer process; that way you can use a more complex filter without hurting performance.
I don't really understand the problem with aspect ratio because there is none.
There can be a problem. Here's a picture with four different screen sizes and aspect ratios. (1440x900, 1200x800, 1280x800, 800x600)
The difficulty is that each person gets a different view.
It is not something that can be easily solved with scaling, since different aspect ratios mean that one player will be able to see more to the sides or more to the top and bottom.
In some games there is no particularly advantage or disadvantage to being able to see a different size field of view. If you are playing a turn based game or a single player game, or if each player's view makes no real difference, then feel free to show whatever fits on the screen.
In other games, like the example in the picture, more screen real estate means a big advantage in what you can select or activate. The player with the smallest screen (red) can only see a few units and will be surprised as more come on the screen. The green and purple players can select a bunch of buildings while seeing the same area as the red view, each has their own slightly different size; it is only 80 pixels difference, but if that means seeing units on the edge of the screen 80 pixels earlier, that is an advantage. And the lucky player with the full view of the area can see not only the battle and select all the buildings, but gets an even bigger advantage of watching other units walk in from the edge long before anyone else.
Some games use the dreaded black bars, although that isn't always bad. Go back a decade or two and games like the Warcraft series (the thing the "world of" was based on) drew a beautiful decorative trim around the screen that was used for the UI buttons, no matter their screen sizes everyone was shown exactly the same view of the world that was potentially scaled. Several of Westwood's RTS games back in the day had a similar technique to keep it fair. The physical size could vary, but all players had exactly the same opportunity to view the same logical size view of the world.
If the size of a view port becomes something that provides a real advantage to certain players or a disadvantage to others, it is something that needs to be considered.
