Autofit scaling
Monkey Forums/Monkey Programming/Autofit scaling
| ||
| Maybe this is a stupid question but shouldn't autofit scale images to be a smaller in size for smaller resolutions and larger in size for higher/larger resolutions? It seems to be working the opposite of what I would expect. I am trying to autofit my game for different resolutions. I have a tilemap that I want to guarantee will fit onto the entire screen of different devices with different resolutions. In other words I want the entire map on the screen regardless of the resolution size. (No scrolling in this game) Therefore, it would make sense to scale the images down when we are on a small resolution and scale them up when we are on a high resolution? I am comparing the results for 320x240 and 960x640. I have set RESIZEABLE_CANVAS to true and here is what I am currently getting with autofit. 320x240 [CODE] ' Set virtual display size SetVirtualDisplay 320, 240[/CODE]  960x640 [CODE] ' Set virtual display size SetVirtualDisplay 960, 640[/CODE]  These screenshots were both taken when running the game in HTML mode from my desktop. Please ignore the ugliness. Thank you! |
| ||
| - |
| ||
| - |
| ||
| i never used autofit, so i cant tell you about that. The best way to solve this for me was to have a fixed size for the gamescreen like 400x400 on wich you work with (wich not contains scores or lives or whatever maybe) Then find out wich one is bigger, deviceheight or devicewidth, and then use the smaller one for a factor. I.e. Devicewidth / gamesize Then just use this factor for a scale() call bevore you draw your gamescreen. And then just draw your game while working with the size of 400x400 (in my example) Your game will be as big as possibe and keep its aspect ratio (like best fit option when printing an image) This is like having a virtual resolution of 400x400 wich is scaled to the screen without the use of any module or magic tricks, just dont forget to push n pop the matrix. Also all users on all devices see the same thing, just scaled. So its fair for all useres and nobody can see more. When you then just provide different images for differend screensizes (by checking the resolution on start and load different images), it is still working well, the images / frames are fitting then well and will not blurried or look washed out. Or if you dont need to keep the aspect ratio then you could use 2 factors for x and y axis, wich will stretch your game maybe Sorry for doublepost, i wonder why i cant edit entrys with ipad, it just make a repost. |
| ||
| Thank you for the input. I would like to understand how to do this with autofit, as it seems to be the popular approach. Hopefully someone can help. |
| ||
| keep the virtual screen size static. If your map sizes are static, then this won't be an issue. The virtual screen size is the game's "native resolution". It's always scaled to the screen's native resolution. That's why when you specify a higher number, the screen appears to shrink. The virtual screen becomes larger, so it needs to be scaled down smaller to fit within the actual screen dimensions. |
| ||
| Okay, so I shouldn't be changing the virtual screen size. Is there a recommended virtual screen size to code against? So, how do I test against different resolutions? Currently I only have the free version of Monkey so can only compile against HTML5 and desktop. However, I would like to test against phone resolutions, such as 640x960 and 640x1136. |
| ||
| Only you can decide what the virtual resolution is. For example, say you wanted to design your graphics for a 320 x 240 display but want it scaled up to fit onto a modern 1920 x 1080 display, you'd set the virtual resolution to 320, 240. The physical display size (this might be your monitor resolution, such as 1920 x 1080, or the size of window you want to open on the screen) is set differently for different targets: in the Desktop target, you need to go into the .build folder and open CONFIG.MONKEY, then change these two entries: From... #GLFW_WINDOW_WIDTH=640 #GLFW_WINDOW_HEIGHT=480 To... #GLFW_WINDOW_WIDTH=1920 #GLFW_WINDOW_HEIGHT=1080 ... and save the file. That sets the 'real' display size, and the virtual resolution of 320 x 240 will then be automatically scaled to fit this as best as possible. Do try the other settings, too, for example: #GLFW_WINDOW_FULLSCREEN=False #MOJO_IMAGE_FILTERING_ENABLED=True That last one would make your pixels blocky on the desktop target, which would probably be better for the style. On HTML5, you need to go into the .build folder, open up MonkeyGame.html in a text editor, scroll to the bottom and look for: <div><canvas id="GameCanvas" width=640 height=480 tabindex=1></canvas></div> Just edit the width and height to suit, eg. change them to one of your suggested phone resolutions, and save the file. |
| ||
| Thank you DruggedBunny, this connected the dots :) Also, thank you for autofit; we appreciate it :D |
   |