scaling sprites

Started by
10 comments, last by Tispe 11 years, 2 months ago

I remember playing F.E.A.R. when it came out, at the time this was not an issue but later when I was able to play at higher resolutions, I noticed that GUI was smaller and smaller on higher resolutions and fonts were scaled up (they were TTF font (I think) after all). I didn't notice this in other games, and I know there is a way to avoid this. How exactly should this be handled regardless of game? If I have a sprite that that has certain dimensions how can I make it cover same amount of screen on all screen resolutions?

Advertisement

Either scale it, or provide multiple versions for the different resolutions. Or use vector art (which is how a font is able to scale) for which scaling is well-supported.

When rescaling sprites can lose fidelity, I don't want that. Which format can be used for vector art so it is usable with OpenGL or SDL?

I've never dealt with vector images myself, but here's what little I understand: .svg is the most common and popular vector art format.

SDL doesn't have knowledge of vector graphics. I don't think OpenGL natively does either. OpenVG is an API for hardware accelerated vector graphics.

But that's not really what you want anyway, because SDL doesn't need to know about vector graphics.

Imagine this: You have your GUI images in vector graphics.

Your game is loaded, your resolution is set to 1920x1280, so you use your vector graphics to generate bitmap images of the sizes you want. Then, you give the generated pixel data to SDL and SDL draws them like normal. The user resizes the game to 1024x768, and you use your vector graphics to generate bitmaps at a new size that you then pass to SDL. You don't need to generate the bitmaps every frame, just once whenever you want a new size.

So, you'll want a third-party library that is independent of drawing graphics, and doesn't require a window, to load a vector image and generate pixel data at various sizes for you. Something small, compact, and simple that you can plug easily into your existing program.

Which library that would be, I'm not sure. Perhaps librsvg, but that has two other dependencies (libxml and Cairo, and I'm not sure how hefty Cairo is). There's an outdated third-party SDL_svg library, but it's pretty old. Maybe download that and see how it works? I just stumbled across AGG, perhaps that might work.

You'd have to deal with resizing text too, if your GUI text is dynamic, but that's a separate topic and you're probably using SDL_ttf anyway.

There are several methods for dealing with sprite scaling (mipmapping and filtering immediately spring to mind).

Switching to vector graphics is a pretty significant change in your graphics design. Just be aware that it's not your only option.

void hurrrrrrrr() {__asm sub [ebp+4],5;}

There are ten kinds of people in this world: those who understand binary and those who don't.

I have a similar question to OP ( see my thread http://www.gamedev.net/topic/637864-scaling-2d-bitmaps-for-multiple-resolution-support/)

What happens if I draw all my sprites at really high resolution and scale them down to fit all the required resolutions? Will this result in negative effects on image quality?

Sometimes, yes - depending on the details of the image itself. Also, it depends on what kind of scaling algorithm you use.

If it's a simple GUI element, it probably won't look too bad.

You could always make a high res one, save it. Resize it using a good algorithm in your image editor, manually correct any mistakes, save it as a Mid-res version. Repeat for the low-res one. Then just use the closest match, and add more versions between high, mid, and low, if needed.

But at that point, you might as well use a vector image - and use your vector image editor to generate the various resolutions of the image for you, and then ship the various images, but not the vector image itself, with your program.

FYI, if you are using the rendering API in SDL2, there is a function SDL_RenderSetLogicalSize which allows you to program to a fixed resolution no matter the resolution of the display window. The entire output is scaled by the hardware (assuming the D3D or OpenGL renderer). This is a painless alternative to handling SVGs. I'm using it to good effect in a game I'm working on right now. It's a low-res game, so I'm rendering to an 800x600 logical size. For high-res graphics, you'd want to render to a higher logical resolution that would then be scaled down. I don't know for sure what sort of effect it would have on quality in that case, but it would certainly be worth looking into before going all SVG and scaling individual images.

SDL2 isn't ready yet there is some better stuff in it, but I would still like to avoid it until it is officially released. I can scale my sprites using streching which appears to have good effect when downscaling. So, any advice on how can I calculate how much I should resize the sprite depending on screen resolution, so it covers 'the same' amount of screen? The problem that I currently see is that I can't exactly tell if the sprite is scaled up enough. I am currently testing with 640x480 and 800x600 resolutions.


FYI, if you are using the rendering API in SDL2, there is a function SDL_RenderSetLogicalSize which allows you to program to a fixed resolution no matter the resolution of the display window. The entire output is scaled by the hardware (assuming the D3D or OpenGL renderer). This is a painless alternative to handling SVGs. I'm using it to good effect in a game I'm working on right now. It's a low-res game, so I'm rendering to an 800x600 logical size. For high-res graphics, you'd want to render to a higher logical resolution that would then be scaled down. I don't know for sure what sort of effect it would have on quality in that case, but it would certainly be worth looking into before going all SVG and scaling individual images.

I'm not familiar with SDL2, but SFML has something similar (using 'views'), and is an awesome by-product of the nature of the 3D APIs which SDL2 and SFML are built upon.

While nice and useful for most things (the game content itself)... if you use it with your GUI, still have to take into account the *ratio* of the resolution, or your GUI can get stretched in ways you don't want.

SDL2 isn't ready yet there is some better stuff in it, but I would still like to avoid it until it is officially released. I can scale my sprites using streching which appears to have good effect when downscaling. So, any advice on how can I calculate how much I should resize the sprite depending on screen resolution, so it covers 'the same' amount of screen? The problem that I currently see is that I can't exactly tell if the sprite is scaled up enough. I am currently testing with 640x480 and 800x600 resolutions.

The cheap and easy way is to use percentages (well, 0.0 to 1.0). If the GUI element is 20 pixels of a 800 pixel wide screen, that's 0.025f the screen. So for a 1024 wide screen, you might resize it to 26 pixels wide (1024 * 0.025 = 25.6). Bu you also want to keep the the element from being stretched out of it's shape, so you need to calculate the width of the element relative to it's height, then multiply.


float guiElementRatio = (NormalElementHeight / NormalElementWidth);
float elementRelativeWidth = (NormalElementWidth / NormalScreenWidth);

int currentElementWidth = (CurrentScreenWidth * elementRelativeWidth);
int currentElementHeight = (currentElementWidth * guiElementRatio);

I was resizing the elements based on the width of the screen - in retrospect, resizing the elements based off of the height of the screen is a better solution.

Anyway, you can do the same with the element's position. As mentioned, this is the cheap and easy way - a more difficult but superior solutions also have the elements morphing in the content they show, as more screen space becomes available or scarcer.

This topic is closed to new replies.

Advertisement