Getting around the aspect ratio unfair advantage

Hi guys!

I'm developing a type of endless runner at the moment and am thinking about the fact that people with aspect ratio that is wider in width (e.g.: 16:9 Android devices) naturally has a slightly unfair advantage over people playing on a taller from the fact that they are able to see more of the game world and thus has a bit more time to react to jump/avoid obstacles/what have you.

Are there any techniques that can help with this sort of thing? At the end of the day it's all playable, but at the very top end it can most likely affect the score you get. Are there examples of any games you've seen that handle this very well?

The way I am implementing my camera is using 2D toolkit camera with a wildcard override set to auto scale using Fit Height. Basically the top to bottom space is exactly the same in every device, but the left to right space depends on how much screen real estate you have.

 

What if you just flipped it and scaled it so that no matter how much horizontal space they have, the scene is scaled to fit that width exactly, then trim off the top and bottom as necessary?

 

That's... actually a pretty obvious and elegant solution that I'm totally embarassed I had not thought of..

Well it's because the game is totally not designed to behave like that from the get go. I just changed the override rule to Fit Width instead, and as you would expect, everything looks broken. I would need to re-anchor everything on the top and bottom of the screen.

Thanks!

 

You can set it to run at specific views(Left/Right horizontal, vertical).

 

If it is an endless runner, you can move the runner across the view. That way they don't see any more ahead where it matters, but see more behind where it doesn't.

 

Right, that's what Jetpack Joyride does for example.

--Eric

 

You could change the projection matrix, so that it enforces an aspect ratio of 16:9. http://docs.unity3d.com/ScriptReference/Camera-projectionMatrix.html

The draw back would be that your image will be a bit streched/squashed if the mobile screen doesn't use 16:9 format.

 

You could position the character a certain % from the right side of the screen (assuming your infinite runner runs to the right), then the extra space will behind the player.

 

Which is what moonjump said.

--Eric

 

This is the solution that I settled on after wrestling with this issue for a week or so. While there is a certain charm in going for pixel-perfection for your scaling, it isn't always feasible. And aspect ratios are the reason why it is such a challenge. While there are a few game genres that can play fast-and-loose with aspect ratios, some other genres require that the developer know the aspect ratio before hand.

When you need a specific aspect ratio, it's best to simply take control of the aspect ratio away from the player, and go the letterbox route. If you don't like the graphical effect of big black bars, you always have the option of "sprucing" those areas up with pre-designed graphics, possibly designed to scale well.

Struggling with different resolutions has always been a challenge for PC developers. Console developers have it significantly easier, especially now that 720p and 1080p are so ingrained as television standards. Now try imagining the challenge of developing for a vertically-oriented game.

 

Great minds think alike. Oops.

Players who don't like those bars simply don't appreciate what they are there for.

 

I've never minded them myself. But then I was always a fan of the true-widescreen aspect ratio for films. So I had already gotten used to the idea in a different medium. I know for a fact that those bars bug some people. I've spoken to quite a few people for whom they are just a constant distraction.

And thanks to the flexibility that Unity provides, it is possible to mitigate that annoyance with a bit of scale-able graphics. Instead of big, black bars, you can instead have some appealing pattern, themed appropriately for the action on-screen. You can even change those graphics up for different levels/rooms/environments. I think a big part of the offense people take to letter-boxing bars is that they contrast and distract from the action on screen. The more you can soften that contrast, the less egregious they will appear.

 

I use a mac I'm switching to a windows machine when it gets back from its 5 week vacation at iBuyPower RMA, but with this 16:10 resolution I'm all too familiar with black bars and stretched resolutions.

How do you put images in the black bars? Is there a way to have them appear but still be part of the screen? They seem like really convenient places to put a few buttons / menu shortcuts.

 

Well, the Camera.rect property is your friend for this. If you adjust your rendering viewport rectangle using this, you can tweak your actual rendering to be exactly the aspect ratio you want, no matter what the size or orientation of the screen is. One of the nice things about this approach is that it prevents stretching, and it doesn't render anything outside of the adjusted viewport, which saves on performance. It will leave "letterbox-bars" that will be your scenes default background color. (not the camera's default background color, mind)

Once you've got your camera set up this way, you can use the legacy GUI system to plop down some 2D graphics on top of those empty, non-rendered areas. The legacy GUI system doesn't care what sections of the screen the camera is rendering to. Boom, you've got some tasteful graphics where those solid color bars used to be.

I would shy away from putting actual interactive elements in those areas. Part of the reason for this approach is because you don't know what manner of screen your end-user has. It is to adjust dynamically to unknown elements. If your user has a screen with the exact aspect ratio you are looking for, there won't be any overflow areas. Than your interactive elements would be hidden. I'm merely proposing some static images to spruce up those usually bland bars.

I've located one Asset Store script that might be helpful. Easy Resolutions. I've never used it myself, so I can't directly speak to how useful it is, but it is targeted at making the whole resolution/aspect ratio issue easier.

 

@RichardKain I'll definitely look into some of that. I don't trust the 4.6 ui yet and my teacher said using screen percentages to make sure nothing breaks is lazy and looks bad on some devices lol.

 

I'm not actually talking about using the new 4.6 UI, but the older, legacy UI. The new 4.6 UI is generally geared toward rendering in the viewport. It might be possible to render it in its own viewport, but I wasn't particularly suggesting that. The legacy UI is more geared toward pure 2D rendering, especially overlaying.

I don't know about using screen percentages being lazy. It may look bad on some devices, but that's exactly why I was proposing a graphical overlay for the "letterboxed" areas. And as I already pointed out, it really only applies to some certain genres of games. Not all games require a tight control over the rendered aspect ratio, but some do. If you're making a 2D pixel style game that is based off of a specific number of tiles on the screen, you are going to want to be able to control that aspect ratio, no matter what the size of the screen is.

I'm not suggesting a blanket, one-size-fits-all solution. I've actually been meaning to finish up a quickie aspect-ratio script for the Asset Store. I've been so immersed in my much more complex Lip-Sync plug-in that I haven't had time to polish it up. I ought to finish that one up. It wouldn't take me long, and there aren't many free/simple options for that in the Asset Store.

 

People say a lot of terrible things about OnGUI. I get that having the ui be 3D objects is better performance wise than the draw call issue for OnGUI, but is it really significant? I never noticed any issues with it.

But if you did, people would be all over that. Unity is already the one-size-fits-all solution

 

Well, it's always good to have more options. And having a quick-and-easy solution for sorting out your aspect ratio woes would be appealing, yes? Of course yes! This is especially true since most of what's necessary for such a solution is based on some very easy, simple math, and a small number of features that are already built into Unity from the ground up.

I was kind of feeling like taking a break from my lip-sync software. Let's see how quickly I can crank out a quickie plug-in like this.

 

Your community appreciates your service.

I call those options Al and Zak. I'm not good at certain things, and from my ventures into drawing / 2D art / 3D art I know I'm never going to be good at certain things. I feel like UI is starting to get into the art-side of things, and that's why any time I touch it, it comes out broken or terrible. I throw my art requirements at Al.

 

If you just want letterboxing/pillarboxing, http://wiki.unity3d.com/index.php?title=AspectRatioEnforcer. Note that you always need to render something in the unused areas, even if it's just black, since altering the viewport by itself leaves the unused parts in an undefined state. (So you get different results on different systems, ranging from black or grey to garbage.)

--Eric

 

Thanks for reminding me. On mac, you get some beautiful rainbow pixel noise.

 

I'm well on my way to cooking up a little plug-in for this aspect-ratio issue. It's like the Aspect Ratio Enforcer script, but a little more streamlined and user-friendly. It is also going to have a pre-defined list of commonly-used aspect ratios that the user can choose from. (in addition to determining their own custom aspect ratio)

I'm also designing it in such a way that you don't actually have to use it for rendering, but can just use it for creating letter-box bars if you want. In such a case, you will be able to reference the area where the screen would normally be rendered. This is for anyone who is planning on handling the viewport management themselves. (splitscreen, custom windows, etc..0

 

Last night I rigged up the rendering for the letter-box bars. I used a basic Texture2D with one white pixel and the no-saving hide flag. Throw on a quick color-assignment in the GUI drawing and you've got yourself a fully-adjustable, colored letterbox. As an added bonus, it works automatically whether you are pointing the plug-in at a camera or not. So it will be possible to use it without cropping the rendering viewport, and even fade it out by adjusting the alpha value on the color selection. Flexibility for the end-user is a win-win!

I spent a lot of time over the weekend bug-testing and refining the core functionality, and that part is pretty much finished. It's running just fine, can be extensively customized, and fully supports vertical orientation. Right now I'm just testing, and looking into adding texture-overlay support for the letterbox areas.

 

Boom! Nailed it! I was able to get several solid hours of development in tonight, and made a ton of progress. The only thing I haven't added is GUISkin support for the GUI-Texture drawing. I might leave that for a later version. For now, all of the features I had wanted are there, and working properly. The GUI letterbox drawing is running just fine. The texture overlay drawing is also working perfectly. I added support for a different texture for each different cardinal direction, as well as the ability to mirror opposite textures. The textures are automatically positioned relative to which side of the screen they're placed on. And it all updates in real time, so it will work even if your game is in windowed mode and the user is re-sizing the window like crazy.

I'm going to start putting together a logo, graphics package for the Asset Store, and I'm going to look into using my computer's NVidia software to do some video capture for a YouTube tutorial.