itch.io is community of indie game creators and players

Handling game window resizing

Well, here we are... This is my very first post, so here goes nothing, and there is also a big chance not one other person is going to read it.

I started a new project recently, and I will (hopefully) finish and release it. The new project is a very basic mining game where you need to find some artifacts in the world and defend yourself against some enemies, so pretty much Terraria but on a way smaller scale.

So here comes the point of the blog: I use SFML to code my games, so I have to handle the creation and maintenance of the window for the game. This means that if the user decides to resize the window, I have to code how the window handles the resize. How you handle it depends on what you want for the game.

  • The first option is to enlarge the camera view to match the window size. If you decide to make the window bigger, the amount you can see goes up, and if you resize it smaller, you can see less of the world. This means that a sprite that is 100 pixels wide on screen will always be 100 pixels. Usually useful for games that need pixel-perfect sprites, or you don't care that the player can look further, although you need to be careful and handle when the camera can see way beyond what you initially intended or if the drawing will become slower than expected. Some examples of this are (again) Terraria or Factorio.

  • The second options is to scale the image. If you were to double the size of the window, a sprite that is 100 pixels wide on screen will become 200 pixels wide. The main problem with this method is: what happens if the width of the window increases, but the height stays the same? Well, you are going to get an ugly, distorted image. The key to good scaling is to keep the aspect ratio of the original. What's the aspect ratio, you may ask? The aspect ratio is the ratio of the width and height. A window of size 200x200 has an aspect ratio of 1:1, 1 horizontal pixel for every 1 vertical pixel. So when the resize happens, it is necessary to keep the aspect ratio the same. The main two ways of doing this are: Adding some sidebars to fill the unwanted space, or changing the size to accommodate the ratio. 
Comparison of resize modes


  • Finally, another options is to not let the player freely resize the window directly and to only allow changing the size in a preset number of ways, usually through the options menu. This way, you can ensure that the aspect ratio is such that all the presets fit into it.

In conclusion, deciding the way the game window will behave toward user interaction is something to keep in mind when developing a game, and choosing an option accordingly is important.

Read comments (1)