next »

[hexageek]

hello guys,

what's he best method of having an independent viewport in 2D games regardless the resolution?

first thing that came to my mind is to make the game for the most used resolution (1024x768) and scale the texture down or up right before drawing to the screen.

downside is, it still can't handle different aspect ratios (i.e: widescreen), scaling in every game loop can affect the performance and there may have glitches because of the scaling.

so what do you, experienced game designers, have to recommend on this issue?

thanks

[increpare]

if you're going for resolution independence in 2d, you'd be better to go with using vector graphics than textures.  If you're going with textures, you might want to consider generating them at runtime (at the start of the game, say) instead of scaling the source bitmaps.

with openGL you can change the aspect ratio pretty easily; you'll have to be careful about visibility, but it shouldn't be too much of an issue.  though, if it's a 2d game, and side-on, you might be able to just stretch it without there being any obvious distortion.

Be very careful about menus, &c., as well.

Resolution independence is quite hard to do right from what I can tell, especially with variable aspect-ratio.  very few people actually use it for interfaces (with Android, for instance, you have to manually do different layouts for different resolutions).

also: why would you have to scale in every game loop?

[hexageek]

also: why would you have to scale in every game loop?

what I thought was something like this,

1- draw every object to a buffer screen in size of 1024x768 regardless the resolution
2- scale it to the actual resolution
3- draw the buffer to the screen

so every game loop has the step 2 for extra.

[Eclipse]

just make a sprite class that renders a quad using also a scale variabile, then you'll be able to scale all your graphics easily

and if you don't use gpu support... use it, it's always better to do so.

hexageek: you don't need to scale every game loop, only to use a scale matrix during the loop itself to do so, it's quite unexpensive and it uses bilinear\trilinear or whatever filtering you want on the textures, so it's better than generating the scaled textures..

oh supporting higher resolutions than your textures is a performance waste and it'll look just the same (blurry), so you really shouldn't want to go higher than your starting resolution

[hexageek]

ah ok, so in OpenGL I can scale a quad once and not worry about it later?
i'm still thinking SDL way so sorry if I sound stupid 

[mcc]

ah ok, so in OpenGL I can scale a quad once and not worry about it later?
i'm still thinking SDL way so sorry if I sound stupid 

In OpenGL you don't actually have pixel coordinates.

Each drawing operation occurs at some coordinate x,y,z, where each of x y and z can be any floating point number. You then have a transformation matrix that maps OpenGL coordinates into pixels on your screen.

But the transformation matrix is agnostic to screen resolution-- your code will look at the left side of your screen as -1.0 and the right side of your screen as 1.0, or whatever, and when you run the program this will magically stretch to whatever the size of the screen or window is. (This means when you are using OpenGL you actually have to figure out what your screen/window aspect ratio is using something outside of OpenGL, and set up your matrices appropriately to correct for that, or everything will look stretched.)

[Will Vale]

Like Stephen says, scaling bitmaps is usually a bad idea - particularly if you scale them by a small amount as the rounding errors won't be evenly distributed and different texels end up different sizes - yuck.

Scaling bitmaps with bilinear filtering is perhaps better than the above, but they can look muddy instead of grobbly - like LCD monitor scaling when you can't run a game at full res - also not very nice.

Scaling bitmaps by a large amount works out fine - the rounding errors are small relative to the size of the texels and they look fine. Likewise vector art scales just fine.

I'd suggest either:

* No scaling - lots of indie games do this to preserve their pixels, and offer small windows.

* Fixed integral scalings like 2x and 4x. If you want to go fullscreen, maybe do the largest integral scale which fits completely and black out the borders.

* Scale the viewable area - let people see more of the level. This can look delicious but the gameplay has to support it (so you don't see all the cheating which would be happening offscreen at the default res.)

* Scale the vector elements and not the bitmap elements - especially for text and UI. Consider writing UI controls that draw pixel-crisp but at different sizes (so use single pixel lines around a box, anchor bitmap skin elements to the sides and corners, but allow the box to grow to avoid teeny-tiny button syndrome.

If you have access to WoW, have a play with the UI scaling to see how upscaled bitmaps can look. Sometimes it's not that bad, it depends on your preference.

Cheers,

Will

[ஒழுக்கின்மை (Paul Eres)]

Didn't Aquaria support multiple resolutions and use bitmapped graphics? You could ask Alec how he did it so well.

[Will Vale]

Thanks for pointing out the hole in my post!

I think it's that Aquaria's art style is soft enough (and high-res enough) that the bilinearly-filtered scaled + rotated sprites/polys look just fine - if the texels are small enough, and there's plenty of variety (lushness) so you aren't looking at edges all the time, texel sized artifacts are no big deal. But it's quite an expensive art style to reproduce - if you had fewer, smaller sprites, more repetitive backgrounds, etc. I think the artifacts would be more objectionable.

Just my 2p.

[Alex May]

For pixelled games in full screen, you can get the native monitor resolution pretty easily when you set up the window, and set up your viewport so that it's the largest multiple of your game's desired resolution that will fit inside that, centre it, and draw black around the outside of it. You'll get borders, but at least the pixels will be intact. If it's smaller than the game resolution, I don't know what to suggest beyond supporting that in your game.

For pixelled games in a window, you can use the same technique but get the resolution of the desktop from the operating system.

For non-pixelled games, scaling is less of an issue, so it would make sense to support the full screen resolution. You should be able to support wide screen like this fairly easily. Once you know the resolution of the screen you can set up your viewport and projection accordingly (OpenGL has good utility functions for this).

For GUI, I've never come to an acceptable conclusion over whether to use screen proportion or pixels as the units of measurement. It depends on the application. With pixels (i.e. 0 < x < screen pixel width), you basically commit to having a GUI that doesn't graphically scale up with resolution (which could be good for things like RTS games or MMO interfaces, things with lots of buttons), and also you don't have to worry too much about screen aspect ratio, as you'll likely be anchoring your GUI elements to parts of the screen e.g. 16 pixels in from the lower left corner, lower centre edge etc. Your main worry there would be fitting it all on at low resolutions. With screen proportional units (i.e. 0% < x < 100%), your GUI is suitable for scaling with the resolution (e.g. FPS games, simulator/cockpit games), and you'll have to take into account the screen aspect ratio when drawing the elements.

[lithander]

With bilinear filtering downscaling looks pretty good while upscaling creates a blurry look. So I suggest to create your assets in the maximum supported screen resolution.

[Eclipse]

downscaling using bilinear filtering is pretty good, of course that can change if you're using pixel art, but normally you can scale how you want.

Also Aquaria does scaling during gameplay, as it zoom in and out of the scene while Naija swim or stay still.

Fixed integral scalings or no scaling at all aren't nice solutions, or better, they're the problem, and it totally sucks.
So for everyone out there: make your assets with the higher resolution you want to support in mind, then support lower ones by downscaling using hardware (something that rely on directx\opengl), your game will be faster and will look more polished.

[Zaratustra]

Vector graphics. Because higher and higher resolutions will come out and we should have been doing this for ten years already.

[hexageek]

thanks for the replys guys.

first of all, I have to use pixel art, vector's are not detailed enough for my taste
I also don't worry about GUI for now since the game I'm planning to start, won't need any GUI other than menu and some labels.

I played aquaria's demo and I remember it being blurry when the camera zoomed in to the main character. It wasn't that bad actually.
So far, producing the textures according to the highest resolution (thanks lithander and eclipse) and scaling down with a nice filtering seems to be the best choice.

Still there is no solution for widescreen resolutions though. If one wants to support 4:3 and Widescreen, viewport can't stay the same. I will need to show more of the level (as stated by Will Vale) and that bugs me a lot since it would affect the game play (regardless the genre).

EDIT:
Here is the list of aspect ratios that I want to support

*5:4 (17" LCDs)
*4:3
*16:10 PC Widescreen
*16:9 TV Widescreen (for consoles with HDMI support)

are there any 2D games that support all these ratios? I would like to observe and analyze it.

[Core Xii]

first of all, I have to use pixel art, vector's are not detailed enough for my taste

Eh? Vectors are as detailed as you make them.

[hexageek]

first of all, I have to use pixel art, vector's are not detailed enough for my taste

Eh? Vectors are as detailed as you make them.

1- If you make detailed vectors wouldn't be a PITA to render it? Even a vector editor like inkscape takes minutes to render a moderately detailed vector image.
I can't imagine what it could be like to load tons of game objects, maps etc...

2- And still I don't think you can achieve the same detail level. In raster you can simply push pixels. There is no limit. Think of a classic hidden object game screen. Like this one for example: http://games.bigfishgames.com/en_polly-pride-pet-detective/screen1.jpg
And here is a screen of WoG which I think is entirely done in vectors: http://www.co-optimus.com/images/upload/image/world-of-goo.jpg

I know these are not the only examples and there could be more detailed vector games but it has surely a limit. And that limit is way low for my taste

Anyway let's not make it a vector vs raster flaming. this is just my personal idea.

[dustin]

There is always having your artwork in vector format and then converting to pixels of the right resolution during loading time.

[Hideous]

Actually, World of Goo is all done with PNGs, no vectors.

[hexageek]

There is always having your artwork in vector format and then converting to pixels of the right resolution during loading time.

yup that's what I meant by rendering.

Actually, World of Goo is all done with PNGs, no vectors.

wow very nice then. changing resolution didn't cause any bluriness at all so I thought it was vectors

EDIT: Oh and, I didn't mean that vector games don't look beautiful. that's not my point.

[Eclipse]

Vector graphics. Because higher and higher resolutions will come out and we should have been doing this for ten years already.

you can't do everything in vector graphics