Okay, so the post title does sound a little weird. But it’s not. Actually, it’s really simple. What is the biggest problem with designing video games? For me personally, it is making sure that it looks exactly the way you want it too on any sized screen.
In my new water drum game, I’ve drawn a cool little hand for the mouse cursor. It is 200 x 200 pixels. On my 1280×1024 screen, that seems appropriate for this game. However, when I want to show it to my buddy who only has a 1920×1600, the size of the hand becomes disproportionately smaller than it was on my screen. On his screen it is only 1.3% of the screen size, but on mine it is doubled at 2.8% of the screen size.
What if someone tried to play the game on a 640×480 screen? Well, aside from consoling them for having such a tiny, poor resolution screen, the game could actually get a bit difficult to play as the mouse pointer would take up nearly 14% (almost 1/6th) of the screen! What can you do? Then your game would have to be purposely designed for each screen size.
There are several options.
- Purposely build and distribute the game for a set screen size. You would then need to name that size as a dependency of minimum resolution, and use a window for larger screens.
- Build your game to check for common screen resolutions, and have multiple artwork and if/then statements to check which ones to use. (I’ve done this in the past with some Android games.)
- Write code to scale your images to be appropriate for the screen resolution.
- Some combination of the above. (My Dad always picked “D – all of the above” if it was an option, so I’m putting it in here.)
Each of these has drawbacks as well as perks. If you do the first choice, your game will look absolutely best on that resolution. This can be limiting to those with lower res systems, or will limit you to make a low res game that will look bad or tiny on hi res systems if in a window.
If you do the second, you will increase the size of your application by including bigger and better art for each resolution. Also, this gets tedious. What if you change the player icon? You now have to change it 18 times to support the change across each resolution, because currently there are 18 different “HD” resolutions. Not to mention lower res systems, which you probably just wont support anyways.
If you try the third, that of code to scale your graphics, it will always look proportional on any resolution. However, scaling may make the art look pixelated or stretched if scaled too far. Generally, this is the easiest, but may cause graphical quality problems.
I tend to think that most big games (at least on Android) use a combination of both. You select a few common screen sizes and make art for those, scaling anything in between with the closest matching resolution art.
What did I choose? Well, I chose to scale my art. I’m not too worried about quality of the art, since I drew it in a few minutes with pretty low quality to begin with. Here’s how I set the scale:
// Hide the mouse pointer and replace it with drum hand
window.setMouseCursorVisible(false);
Texture textureDrumHand;
textureDrumHand.loadFromFile(“graphics/hand.png”);
Sprite spriteDrumHand;
spriteDrumHand.setTexture(textureDrumHand);
spriteDrumHand.setOrigin(100, 100);
spriteDrumHand.setScale((resolution.x*.04)/200,(resolution.x*.04)/200);
By making the size of the hand a math problem derived from the resolution, it *should* be right on different sized screens. In theory, it should always be about 4% of the screen width. It is 4% of screen width divided by 200 (the size of the png file), which will make the scale, which is multiplied by the actual size of the png file. Mathematically, that means we can take out the divide by 200 and multiply by 200, so it will remain as 4% of the screen resolution!
Similarly, I did the same for the water drums themselves, except I want them to be 20% of the screen resolution width:
// And the water drums themselves.
Sprite spriteWD1;
spriteWD1.setTexture(textureWaterDrum_still);
spriteWD1.setPosition(resolution.x/15*2,resolution.y/7*2);
spriteWD1.setScale((resolution.x*.2)/500,(resolution.x*.2)/500);
Again, the formula is simple: (resolution.x * {desired percentage}) / {original art size in pixels}. This way it will always be a uniform size no mater what screen resolution you use!
You can check out the full commit on my GitLab if you like!
Linux – keep it simple.