I’ve finished making a game (simple 2D platformer) and I’m trying to improve some aspects of it. One of those aspects is making the game full screen. I unfortunately wrote the entire game with a 1440 x 900 window in mind so all of the object coordinates are fixed. After a lot of effort, I changed every single image position and size to a variable that’s depndant on the window size and height. Note that I want exactly everything that was present in the window to be present in full screen as well; literally stretching the window to full screen. Here is an example of what I did:
//before
objects = new Object[10];
objects[0] = new Cone(648);
objects[1] = new Bin(1112, 1);
objects[2] = new Sign(1536, 1);
objects[3] = new Bench(2136);
objects[4] = new Bus_Stop(2500);
objects[5] = new Light(3400);
objects[6] = new Car(3710, 2);
objects[7] = new Bin(4744, 2);
objects[8] = new Hydrant(5436);
objects[9] = new Tree(5800);
//after
objects = new Object[10];
objects[0] = new Cone(width*0.45);
objects[1] = new Bin(width*0.77, 1);
objects[2] = new Sign(width*1.07, 1);
objects[3] = new Bench(width*1.48);
objects[4] = new Bus_Stop(width*1.74);
objects[5] = new Light(width*2.36);
objects[6] = new Car(width*2.58, 2);
objects[7] = new Bin(width*3.29, 2);
objects[8] = new Hydrant(width*3.77);
objects[9] = new Tree(width*4.03);
Even though it works, I realize it isn’t a perfect solution as most, if not all, of the object positions (which is the first argument in every object, it’s the x coordinate) will be decimal so they’ll get rounded to a specific pixel as you can’t really print images using decimal pixels.
Is there a better way to implement full screen in a project or is this the only way?
Using floating point numbers for pixel values isn’t really noticeable on a medium/high screen resolution since it will interpolate the pixels with sub-pixeling and anti aliasing techniques.
Look at this thread:
By the way the position of your elements as the screen size update is not the only way to make it responsive, a scale factor can also be applied so it looks the same on a mobile screen…
By the way the position of your elements as the screen size update is not the only way to make it responsive, a scale factor can also be applied so it looks the same on a mobile screen…
I don’t quite understand this. If you’re saying I should also scale the width and height of the image based on the screen resolution, I’ve done it the same way:
yes that’s right because on a smartphone screen your objects won’t look the same as on desktop. That’s why you might need to scale your objects as well.
In some cases, you also need to take into account the pixel density:
yes that’s right because on a smartphone screen your objects won’t look the same as on desktop. That’s why you might need to scale your objects as well.
I scaled all of my objects already but I fear I might be doing it the wrong way. As shown in my code above, the way I do it is as follows:
an object that’s 64 x 64 in a resolution of 1440 x 900
will be 1920 / (1440/64) x 1080 / (900/64) in a resolution of 1920 x 1080
so the formula I use is width / (1440/object.width) x height / (900/object.height) which seems to work fine.
A problem I encountered is that when I move an object by just one pixel, that same movement option is not possible in other resolutions (since 1 pixel in 1440 x 900 won’t be the same as 1 pixel in 1920 x 1080 and I also can’t used decimal values for pixels) and I don’t know any workarounds for that.