• Create Account

### #ActualSimonForsman

Posted 16 April 2013 - 02:50 AM

float scaleFactor = 800.0f / config.screenSize.Width;
force *= scaleFactor;


as you can see I am at least trying to figure this out, but that code doesn't work either...

Thanks

Don't scale the forces (This is game logic, it should be 100% independent of the visual represenation), scale the rendering. (or just make the viewable area of the world larger)

So , if you want objects to appear the same size regardless of resolution (only higher detail at higher resolutions) you scale the rendering. (having high res sprites that you scale down for lower resolutions give the best result (allthough upscaling with filtering isn't completely worthless)

If you want objects to be smaller (and fit more of them on screen) at higher resolutions you don't scale anything, you just render a larger area

You cannot cleanly scale from a 4:3 resolution to a 16:9 resolution, when the aspect ratio changes you have 3 options:

1) Add a border (This is best for games where the full scene should be visible all the time, such as tetris, pong, etc)

2) Expand/contract the viewable area horizontally (good option for platformers etc where a wider resolution simply lets the player see further right/left)

3) Stretch the visuals (not recommended since its ugly)

So, lets say our simulation runs in a 2D world that is "800x600"(You can use anything for the size of your world, olofs suggestion is good for a game where everything is visible anyway (for large world games you could use 1 unit = 1 meter or something instead) and we want all of it to be on screen all the time. (a game like tetris for example).

we got a 20x20 object at position 40,50 , if we render at 800x600 this is easy enough.

if we scale the resolution to 1600x1200 we got a simple 2x scale and render a 40x40 object at 80,100. (This works better if you got high resolution sprites that you scale down for low resolutions, or better yet, vector art (you can rasterize that when the user selects a resolution for the first time)

If we do something a bit trickier and go for 1920x1080 we get a bit of a problem: the horizontal scale then is 2.4 and the vertical is 1.8

Since stretching is ugly we use a left-right border and the 1.8 scale (we could also use the 2.4 scale and cut off the top and bottom portions, but then we'd lose information)

800*1.8 = 1440

(1920 - 1440) / 2 = 240 (so we get a 240px border on each side)

then we render that 20x20 object as 36x36 at position x=240 + 40*1.8 , y=50*1.8

if we use sprites that are, lets say 80x80 for those 20x20 objects we can scale quite nicely even to very high resolutions, we could also provide hand-scaled sprites for various lower resolutions if automatic downscaling doesn't give nice enough results.

If the game world is scrollable it gets even easier, then we can have a game world that is, say 5000x5000 units and we just show as much of it on screen as we can centered around the player. (Higher resolutions = smaller units and more of the world visible at once), or we could combine the approaches and both scale and scroll (to keep things from getting horribly tiny at high resolutions).

### #1SimonForsman

Posted 16 April 2013 - 02:44 AM

float scaleFactor = 800.0f / config.screenSize.Width;
force *= scaleFactor;


as you can see I am at least trying to figure this out, but that code doesn't work either...

Thanks

Don't scale the forces (This is game logic, it should be 100% independent of the visual represenation), scale the rendering. (or just make the viewable area of the world larger)

So , if you want objects to appear the same size regardless of resolution (only higher detail at higher resolutions) you scale the rendering. (having high res sprites that you scale down for lower resolutions give the best result (allthough upscaling with filtering isn't completely worthless)

If you want objects to be smaller (and fit more of them on screen) at higher resolutions you don't scale anything, you just render a larger area

You cannot cleanly scale from a 4:3 resolution to a 16:9 resolution, when the aspect ratio changes you have 3 options:

1) Add a border (This is best for games where the full scene should be visible all the time, such as tetris, pong, etc)

2) Expand/contract the viewable area horizontally (good option for platformers etc where a wider resolution simply lets the player see further right/left)

3) Stretch the visuals (not recommended since its ugly)

So, lets say our simulation runs in a 2D world that is "800x600" and we wan't all of it to be on screen all the time. (a game like tetris for example).

we got a 20x20 object at position 40,50 , if we render at 800x600 this is easy enough.

if we scale the resolution to 1600x1200 we got a simple 2x scale and render a 40x40 object at 80,100. (This works better if you got high resolution sprites that you scale down for low resolutions, or better yet, vector art (you can rasterize that when the user selects a resolution for the first time)

If we do something a bit trickier and go for 1920x1080 we get a bit of a problem: the horizontal scale then is 2.4 and the vertical is 1.8

Since stretching is ugly we use a left-right border and the 1.8 scale (we could also use the 2.4 scale and cut off the top and bottom portions, but then we'd lose information)

800*1.8 = 1440

(1920 - 1440) / 2 = 240 (so we get a 240px border on each side)

then we render that 20x20 object as 36x36 at position x=240 + 40*1.8 , y=50*1.8

if we use sprites that are, lets say 80x80 for those 20x20 objects we can scale quite nicely even to very high resolutions, we could also provide hand-scaled sprites for various lower resolutions if automatic downscaling doesn't give nice enough results.

If the game world is scrollable it gets even easier, then we can have a game world that is, say 5000x5000 units and we just show as much of it on screen as we can centered around the player. (Higher resolutions = smaller units and more of the world visible at once), or we could combine the approaches and both scale and scroll (to keep things from getting horribly tiny at high resolutions).

PARTNERS