Screen Issues

[bobskeldon]

Hi,

I have an app working perfectly on the simulator and set to iphoneX as the simulator doesn’t go beyond X. Looks and works fine. However, when I build for iOS and set the xCode simulator to iphone14plus, it works fine but it does not fit. I have tried changing the settings in config.lua and tried changing the resolution but still can’t get it!!! I am fairly new and not very confident so apologies if this is really obvious. Any help for what may seem a very obvious solution would be greatly appreciated. I have attached screenshots of both simulators. Thanks in advance to anyone who has the time to respond and/or help. Regards Bob

[XeduR]

If you could share those screenshots, some code and explain what you’re trying to do and what actually happens, then I’m sure we can figure out what’s going on.

[bobskeldon]

Hi XeduR,

Thanks for once again taking the time to respond. It is very much appreciated. I simply want the game to look the same size on e.g. the iphone14plus (xcode simulator) as it does on the iphone x (solar2D simulator). I am familiar with PS so creating different sized images is no problem if that is what I need to do but I am not sure about the config.lua code. In these screenshots, I have simply used “letterbox”, which you can see works fine in iphonex but not in iphone14plus. I have also tried using an adaptive setting (screenshot attached) but that didn’t work either. I am not very confident about coding or lua so any suggestions re config.lua code would be fantastic. Thanks Regards Bob

[famousdoggstudios]

I don’t use adaptive scaling and instead use letterbox-- this generally makes it far more manageable to ensure consistency of scaling across devices. For games, at least, this approach makes more sense but you probably have your reasons to use adaptive.

Try this and see if it helps-- after you add the image to the display hierarchy, add two statements to explicitly set the .width and .height parameters of the image object and then see if it respects the dimensions on the actual device you’re trying to test on.

[bobskeldon]

Hi Famous,

Thanks for taking the time to respond. I have only used “letterbox” in my config.lua as it generally suits ‘normal’ iphone screen sizes, I tried changing this to both “adaptive” and “zoomEven” but because I am really not sure what I am doing, I appreciate that I am flapping in the wind a bit and as such have absolutely NO reasons to try “adaptive”!!! So I have a couple of questions. firstly, when you say " add the image" do you mean when I add it to the app folder at the size that suits the IphoneX? This image is 380 x 760 @144dpi. Do I need more than one size of this image to suit ‘bigger screens’ or is this simply scaled up when on e.g. an iphone plus size? Secondly, when you say add two statements, do you mean in the congig.lua and would these sizes just be 380 x 760? Thanks again Regards Bob

[bobskeldon]

Hi Famous,

Just tried building for iphone 14 which is not really that different from Iphone X, here is how the same image looks on both. Bob

[bobskeldon]

Here is my existing config.lua for the above

[famousdoggstudios]

Am I correct in understanding that you are not using different image sizes for different screen sizes? In case that’s what you’re doing, I might not be able to offer much help as I have no experience with how solar2D handles dynamic selection of images from the file system. I always use a single set of assets for all screen sizes.

What I meant by adding the image to the display is-
When you add the display.newImage statement in your code to add the image to the screen, you have the ability to take a reference of this object like this-
local dummyImage= display.newImage(...

What you can then do is explicitly specify the width and height of this image in the next two lines of code-

dummyImage.width=380
dummyImage.height=760

This should hopefully ensure that the image will appear in the correct relative size to the screen across all devices without any scaling being applied. I have routinely faced this problem with larger images like backgrounds etc and explicitly putting their sizes in the code always corrects this for us. If this doesn’t work for you, it’s probably something interfering with Solar2D’s feature of being able to dynamically pick up images at different resolutions-- I won’t know much about that, unfortunately

[bobskeldon]

Hi Famous,

I only use one image so I will try your suggestion and let you know. As I have said, artwork etc is easy but coding is bonkers!!! Thanks again.

[bobskeldon]

Hi Famous,

Please tell me to get lost as I have already taken up more of your time than I thought, no offence taken. Here is my menu.lua code that gets me this perfect iphone screen. Can you show me where the width, height code goes please?

[jdsmedeirosbr]

application = {
content = {
width = 640,
height = 960,
scale = “letterbox”,
–fps = 60,
},
}

[bobskeldon]

Hi, thanks for responding, tried it and getting this. Regards Bob

[bobskeldon]

[ldurniat]

Probably you need use --fps=60 instead of -fps=60.

[bobskeldon]

Hi thanks for responding, no not that. Regards Bob

[XeduR]

You might benefit from reading through this guide that explains the content scaling used in Solar2D:

Understanding Content Scaling in Corona | Corona Labs

In this particular case, iPhone 14 Plus has a larger screen than iPhone X, so if you are just creating an image like that, it will be too small on some displays or too large on others. Content like this should be designed with different screen resolutions and aspect ratios in mind. Even just with iPhones, you have various screen aspect ratios, so it’s not possible to create just one image that will fit all screens perfectly.

You could create an image that is wider than necessary and always set the image’s size so that it will take the entire height of the screen (by using display.newImageRect, for instance) and you’d allow the “non-critical parts” of the image to bleed off the left and right edges of the screen.

[bobskeldon]

Hi Xedur,

Thanks for the article, I did see this but it still doesn’t make any sense to me as it seems that on the iphone14 plus the splash/buttons etc are all perfectly centred etc but just need to be 20% bigger to fill the screen so I am not sure why it doesn’t work with ‘imageSuffix’ and a second image@2x and additional buttons@2x. Anyway, I am sure you are very busy so I will just keep trying different things. Thanks again. Regards Bob

[famousdoggstudios]

so as an example, where you’re adding the background image, in the next lines, you can set its x, y, width and height-

local background= display.newImage("splash.png")
background.x=display.contentWidth/2
background.y=display.contentHeight/2
background.width= (enter the actual width that you want for the image)
background.height= (enter the actual height that you want for the image)
localGroup:insert(background)

This might just fix the issue you’re facing but I will suggest that you go through some of the solar2d sample projects and documentation/guides to get a better idea of scaling, rendering etc as it’s possible that the problem is somewhere else in your code or how you are setting up your project/assets

[bobskeldon]

Hi Famous, Thanks for your help, really appreciated. I tried what you suggested but as you can see same result, looks fantastic on the iphone x but small for the iphone14plus. I have also tried using Adobe XD to create a screen for the iphone 14 plus. I have read the Solar2D scaling guidelines a 100 times (slightly frustrated exaggeration1) but it hasn’t helped. It is so frustrating as it is functioning perfectly! Thanks again Kind Regards Bob

[XeduR]

You’re currently setting the image’s width and height using static numbers.

Like I suggested earlier, you can dynamically calculate its size and use display.newImageRect. If your image is 380x760, then you can do the following:

local width = display.actualContentWidth
local height = width*(760/380)
local background = display.newImageRect( "yourImage.png", width, height )

Now the image will always cover the width of the screen and you’ll be getting to the place where understanding the content scaling becomes important.