Resolution & Aspect Ratio

[Zach]

Pretty soon I am planning on getting my feet wet (hopefully) with a simple 2D game project.
However one thing that annoys me as a gamer, personally, is when games sometimes lack a Fullscreen and/or Widescreen option for display settings.

So my questions are pretty basic.. although admittedly verbose.. How are resolution and aspect ratio independence typically accomplished? Anyone who can speak from personal experience would be really helpful I think.

One thing I hear for resolution issues is:
Design for your maximum supported resolution, and then scale down for the selected resolution when resources are loaded. This makes sense because graphics tend to scale down, better than they scale up. But how does this affect certain game calculations, like pixel perfect collisions or collisions in general? Resource positioning? How does it affect the physical layout of the 2D level you are showing?

What methods are there for this kind of "global" scaling of resources? Are there specialized libraries we need, or that others have designed? Are there efficiency concerns?

On the aspect ratio front, I am totally lost as to how to design a game that can be played either way, without black bars. I don't want to end up with a game designed for one aspect ratio / resolution and then look misshapen (stretched or squished) in a different aspect ratio, and I'd hate to have to put black bars in, or rely on the users monitor to do such.. I know very little about aspect ratios and pixel shapes though.. I know from my video editing experience that older TV's have rectangular pixels as part of the NTSC standard, while PC's have Square pixels, but I'm not sure how it works with on PC's with 4:3 vs 16:9 resolutions.. Although I know from experience that working with graphics for my magazine in 1280x1024 (5:4 AR) was not a good idea as it distorted my view of emulator screen shots.


I think for now.. I will be making a Windowed game, targetted at 1024x768 as a medium compromise. On larger 16:9 screens like mine its a big enough window to see and have fun with, and all PC's today should be capable of the resolution, so for those running @ 1024x768 I could offer a simple Fullscreen mode, or I could even offer fullscreen to everyone and let their Monitor / 3D Card do the scaling however they have set up.

[TomS]

Unfortunately stretching and black bars is exactly how big companies handle this problem.
Last 3 fullscreen games I played:
Trackmania - Screen is being stretched
Need For Speed Most Wanted - 4:3 screen and black bars on a widescreen
Mirror's Edge - Black bars to simulate a widescreen effect on a 4:3/5:4 aspect ratio. But on a widescreen you have black bars on all for sites of the screen...

Depending on the type of game you have some options.
Use 16:9 as base and cut parts away on 4:3. This is not a good solution for shooter games, since widescreen users would have an advantage.
If it's a game like chess then use a layout like a webpage. Again use 16:9 as base but only display relevant informations on a 4:3 area in the middle of the screen. The rest is just background that looks better than black bars.

[PMV]

Trackmania - Screen is being stretched

i have Trackmania United Forever ... 4:3, 5:4, 16:9, no stretch, no black bars.

But all games you have counted are 3D-Games ... there is no problem.
Only if you want it as a multi-player game, because other aspect ratio will allow
other views. On 2D ... you can't allow other resolutions so easily.

Only one windowed resolution is not the solution. Low-budge-games do
it like this: one solution, windowed and fullscreen. Because PB äh DX9
doesn't allow SpriteBuffer() anymore, there is no possibility to use Sprite3D
and use this as output. Or you use DX7 (or OpenGL if it supports it). So you
could scale your sprites like it is needed.

Another solution is, to make all graphics twice ...
Or you use a 3D engine and make your 2D game with this. MP3D would fit
this needs.

MFG PMV

[TomS]

You have tested it just now with 3 different monitors?
It's physically impossible to display the same image without stretching or the use black bars on different aspect ratios.
And of course it matters on any 3D game even in singleplayer mode.
It's a total other experience if you play a game twice and and the second time is on 16:9. You'll see twice as much. Depending on the camera angle you may even see things that are supposed to be behind you.

For a 2D game I'd prefer the solution with a background instead of black bars.
An autostretch WindowedScreen is slowing down severly if there are many sprites.

[Nituvious]

One way is through the use of vector graphics.

[Zach]

I had considered using the 3D method, but I think that is a bit too advanced for me..
I terribly suck at graphics of any kind.. Don't even know how to make my own textures (the actually look like something) but would probably fail miserably if I tried..

However I will admit I would love to do an Isometric game some time in the future.. A console-style RPG with a 3D camera that is locked to provide the isometric view.
Actually I am a big fan of Isometric engines.. Diablo and Divine Divinity on the PC; The strategy RPG's on Playstation like Front Mission 3/4, Final Fantasy Tactics, Kartia, and the classic console style RPG's that have either 2D or Isometric type cameras (Final Fantasy, Grandia, Breath of Fire III / IV, etc).

I love those types of games and views.. But I'm not sure if I could ever have the skills to make such a game, or even a working Demo.. Perhaps one day I would have the programming skill - but I would totally suck when it comes to original Artwork, Textures, etc..


For my first 2D game though I think I am gonna try a simple Hack N Slash Dungeon type game, or a shooter (scrolling shooter! not FPS). I would love to know what kind of effects were used to make Stargunner. It was a great game from Apogee that came out in the late 90's I think... It had awesome music (I think they used the MOD/Module format) and it was psuedo 3D of sorts.. like when your ship traversed the screen up/down it would bank and the sprite would animate, showing a different view of the ship.. I know they definitely used Parallax effect, but beyond that I have no idea.

re: Vector graphics. I have always been intrigued by those, but I really know next to nothing about them or how to use them; much less create them.

[TomS]

Vector graphics can be used for different resolutions at the same aspect ration.
They'll still be distorted when stretched to another aspect ratio.

I don't know if there is any lib for svg and the likes, but simple vector graphics ae manageable with the drawing functions of pb.

This code opens 3 windows. 1024x768, 800x600 and 400x200
1024 and 800 are both 4:3 thus it looks nicely zoomed.
400x200 is 2:1 and everything is stretched in width.
So you still got this problem with vector graphics but any resolution with the same aspect ratio can easily be created.
Again that's on the fly, so that you can actually work with ExamineScreenModes() if you use fullscreen.
Sorry, this code is not anywhere near perfect coding style. It's just been made up from the scratch right now, so nothing you would add to your project. Just a basic example
Close any window to quit.

EDIT: Vectors are as you may recall from math class just normal lines stretched or compressed by a factor.
You just carry on as normal and then switch the factor.
I used 800 as the factor in X-direction and 600 as the factor in Y-direction, meaning every x-position and width are multiplied by 800 and any y-position and height is multiplied by 600 (ok. not really. They're multiplied by 1*800/800 and 1*600/600)
Then you determine how great the new factor for the new resolution is and you've got your zoom.
So starting with a point 100,100 the base vector is x = 1*100, y = 1*100 (actually: 800/800*100 etc...)
The actual point with a resolution 1024x768 is: x = 1024/800*100, y = 768/600*100 => x = 128, y = 128

Code: Select all

;very very basic vector example
;base = 800x600

Enumeration 1
	#Vector_Type_LineXY
	#Vector_Type_Box
	#Vector_Type_Circle
EndEnumeration 

Structure struct_vectorElement
	type.i
	param1.i
	param2.i
	param3.i
	param4.i
	color.i
EndStructure 

Global NewList vectorElement.struct_vectorElement()

Procedure DrawVector_LineXY(x1.i, y1.i, x2.i, y2.i, color.i)
	AddElement(vectorElement())
	vectorElement()\type = #Vector_Type_LineXY
	vectorElement()\param1 = x1
	vectorElement()\param2 = y1
	vectorElement()\param3 = x2
	vectorElement()\param4 = y2
	vectorElement()\color = color
EndProcedure 

Procedure DrawVector_Box(x.i, y.i, width.i, height.i, color.i)
	AddElement(vectorElement())
	vectorElement()\type = #Vector_Type_Box
	vectorElement()\param1 = x
	vectorElement()\param2 = y
	vectorElement()\param3 = width
	vectorElement()\param4 = height
	vectorElement()\color = color
EndProcedure 

Procedure PrintVectorCanvas(width.i, height.i, image.i)
	
	factorX.f = width / 800
	factorY.f = height / 600
	
	StartDrawing(ImageOutput(image))
	
	ResetList(vectorElement())
	ForEach vectorElement()
		Select vectorElement()\type				
			Case #Vector_Type_LineXY
				LineXY( vectorElement()\param1* factorX, vectorElement()\param2* factorY, vectorElement()\param3* factorX, vectorElement()\param4* factorY, vectorElement()\color)
			Case #Vector_Type_Box
				Box(vectorElement()\param1* factorX, vectorElement()\param2* factorY, vectorElement()\param3* factorX, vectorElement()\param4* factorY, vectorElement()\color)
		EndSelect
		
	Next  
	
	StopDrawing()
EndProcedure

Procedure FlushVectorCanvas()
	ClearList(vectorElement()) 
EndProcedure 

DrawVector_LineXY(0,0,100,100,$0000FF)
DrawVEctor_Box(100,100,50,80,$FF0000)


OpenWindow(0,10,10,1024,768,"")
image = CreateImage(#PB_Any,1024,768)
PrintVectorCanvas(1024,768, image) 
ImageGadget(0,0,0,1024,768,ImageID(image))

OpenWindow(1,10,10,800,600,"")
image = CreateImage(#PB_Any,800,600)
PrintVectorCanvas(800, 600, image) 
ImageGadget(1,0,0,800,600,ImageID(image))

OpenWindow(2,10,10,400,200,"")
image = CreateImage(#PB_Any,400,200)
PrintVectorCanvas(400, 200, image) 
ImageGadget(2,0,0,400,200,ImageID(image))

Repeat
Until  WaitWindowEvent(20) = #PB_Event_CloseWindow	

[J. Baker]

What I did for a project that isn't finished yet is make it 720p no matter what. It just scales the width of the game. For instance, write the code so the width of your game is DesktopWidth() and the height is 720. But the height has to begin by DesktopHeight - 720 / 2. This will give black bars on the top and bottom if the users screen height is larger then 720. Should be pretty safe to use too, as this can even work for a 1024x768 monitor. The graphics are not stretched and still look crisp. And you don't have to write any extra code to scale the graphics per monitor. It really doesn't look bad even on 1920x1080 monitors either. Just looks like a movie that uses the extra wide aspect ratio.

Hope that helps!

[PMV]

You have tested it just now with 3 different monitors?
It's physically impossible to display the same image without stretching or the use black bars on different aspect ratios.
And of course it matters on any 3D game even in singleplayer mode.
It's a total other experience if you play a game twice and and the second time is on 16:9. You'll see twice as much. Depending on the camera angle you may even see things that are supposed to be behind you.

Thats no problem. I have tested it with 3 monitors ... not right
now ... but in the past. For you, i have made 2 Screenshots now.
One with 1280x800 and another 1024x768. I will upload it tonight.

Only the GUI is stretched. You see on the wider one more ... of
course ... but it is not another experience. If you have a 16:9 ...
you want to use all his width. If you have a 4:3 or 5:4 ... you want
to use that full screen. For what do i have such a monitor?

If you are playing another game as racing ... it could be more important.
But only for multi-player, to be fair. And you forget 2x, 3x, ...
monitor-screens. Should that be always be forbidden, or should be a
second monitor with the right resolution in the hardware requirements?
And if aspect ratio would be a big problem, how would multi-monitor
resolution be solved?

For 3D games it needs only a little bit mathematic.

MFG PMV

[TomS]

Ok, PMV. Yes the gui was stretched. I thought the racing environment was stretched, too.

[Rescator]

My advise is to use 1920x1080 during the design, this is the Full HD standard and thus pretty future proof.
For 4:3 aspect the best way is to either crop the sides or add black bars on the top or bottom (or use some background as suggested further above in this thread).

Now, depending on the art assets and how big they are. (PNG is great as it's lossless and compresses well, you could also use JPG at maybe 85%+ quality, and use it on huge textures and backgrounds etc but personally I'd stick with PNG for everything.)

There is two possible ways to provide this art to the user.

#1. Separate art sets, by this i mean provide Full HD 1920x1080 (this is the master art), Half HD 1280x720 (scaled from the master art, and then 1024x768 4:3 Legacy (scaled from master art and cropped/bars/background to make it fit).
This could bloat the size a lot, so there are two ways to handle this.
Either separate distributions/downloads, or one main distribution/download with the art packs separate (the installer could pretty much automate this part after having asked the user first).

#2. Just provide 1920x1080.
Single distribution, just let the game scale/fit the art during start/loading.
If this is very slow, then use a cache so everything is only scaled once. If the user changes the resolution the cache need to be rebuilt.
To save more time you could just scale and cache per level load rather than scale and cache everything, that way if they restore a savepoint or quit the game and continue later
the loading will be almost instant the 2nd+ times.
Depending on the game and how the art assets are used, a lot of the cache could be cleared when the user goes to the next level (except art sets used across multiple levels obviously)
The scaled and cached art assets should be stored as PNG (very important if they originally was stored as JPG as JPG'ing a JPG causes artifacts to appear more and more)


Personally I'd go for solution #2 as it's more future proof, less hassle as a gamedev, and the user when they do get a better system will automatically get a gaming upgrade.
Not to mention the game will age damn well so it wont look "outdated" as quickly.

Also, don't be afraid of 3D.
A common trick is 2.5D where the game is a 2D/3D hybrid (scrollers tend to use this which is fixed camera and either 3D or flat 2D using 3D, or isometric which is a fixed camera angle 3D.)
Just use two polygons (a polygon is a triangle) for example and render the texture/art to it for example.
This is used a lot in 3D games for billboards or in-game screens or posters etc.
There is also better hardware acceleration you can take advantage of, as well as effects and lighting.
But anyway, I'm getting kinda off topic here now!