creating graphics to handle different resolutions.
BlitzMax Forums/BlitzMax Beginners Area/creating graphics to handle different resolutions.
| ||
| How would I create graphics to handle different resolutions? If I create a 2d/3d game and make a background and gameboard at a resolution of 800x600 and it fills the whole screen, is it possible to get it to fill the whole screen if a person wants to play it at 1024x768? Now I know the obvious; if a background created at 800x600 is loaded and the resolution is at 1024 x 768, it fills the 800x600 area of the screen with the remaining portion in black or whatever color. But is there a way to keep this from happening no matter what resolution is chosen. How is it handled in 3d games? I would like to create a game that will allow the user to choose their resolution or default to the resolution they already have selected. Should I just create all my graphics at a resolution of 1024x768 and force all computers to switch to this mode or what? |
| ||
| You can load an image and set it to have smoothing/filtering so that when it is resized, if the OpenGL driver supports it, it will be resized very smoothly without any obvious `stretch marks` or weird areas where rows or colums seem to have been skipped. So that's the first thing you'll want to use - load the game board as a filtered image. It means that whenever you draw it at any given size/scale, it will still look good. Then I think what you want to consider is creating a game board at the biggest resolution you want to support with detail, let's say, 1280x1024. Create the game board at that size with all its detail and glory. You then load in the image with ... I think it's the `FILTEREDIMAGE` flag. Then you open your Graphics screen at whatever resolution is available ... let's say you open it at 800x600. Then you need to use SetScale to set what size the image is going to be drawn. In this case, the X factor would be (800/1280) and the Y factor would be (600/1024). These will be floating point values. It will basically mean, in this case, to draw the image at a shrunken size. Then you simply DrawImage at 0,0 and the image should be drawn to fill the whole resolution, smoothly filtered and shrunk down to fit the whole screen. The reason you want to start out with an original image at a high resolution is so that you ensure you get good-looking detail on high resolution screens. If someone tries to play your game at 1600x1200 for example, you can scale up using the same formulate (xresolution/originalxresolution and yresolution/originalyresolution). It will then be stretched, but not by too much to make it look bad. So I'd say go for a high-resolution original image for your game board, load it with filtering enabled, set the scale to the appropriate amount so that it stretches or shrinks depending on the resolution, then draw the image. You might want to do something similar with your objects that move around or are updated on the screen .. is scale them using the same values you used in the SetScale for resizing the main board. You also will have to multiply any X or Y coordinates by those scale factors as well to make sure you are drawing to the right location in proportion. In 3D games this is basically the same thiing that happens. An image is defined at a certain coordinate relative to how much of the scene the camera lense is looking at, and then regardless of the resolution it will always occupy the same amount of screen space. |
| ||
You could try something like:Graphics 640,480,0 Local width = 1024 Local height = 768 glMatrixMode GL_PROJECTION glLoadIdentity glOrtho 0,width,height,0,-1,1 glMatrixMode GL_MODELVIEW glLoadIdentity SetViewport(0,0,width,height) Use Max2D commands as though it was a 1024x768 screen and it should scale it up or down to the actual screen size. I don't know how robust this method is though, and the results might look rubbish. Fonts, especially. |
| ||
| Very helpful. Thank you! |
| ||
| Of course you need to make your graphic drawing routines independent on size as well -- rather than calculating things based on absolute locations and coordinates, use variables for tile widths, etc. so you can position things relationally. As far as graphics are concerned: while you can have them automatically rescaled, some things may end up looking a little blurry, especially if you are using many thin lines in your images. Doesn't always look good. Depending on the style of your graphics, you may need to include multiple versions of those as well. |
   |