I regularly create all my apps in “zoomEven” for a content area of 768 * 1024, everything was 95% fine for my criterion of how my App looks on different devices until Samsung created the Samsung galaxy s8 and s8 plus where a 10% of my content goes off the edges of the screen and I was forced to reduce the size of all content which makes the App look strange on devices that before s8 looked good. I do not like “letterBox” because of the amount of background images. I have decided to try the “adaptive” but reading I have a doubt, it will be possible to know the value in pixels resulting from a _W + - (value), _H + - (value), centerX + - (value) and centerY + - (value) from each display object ? I read that I should position the size of every display object and its position “x and y” following this rule.
i can imagine what your setup looks like: specify minimum aspect ratio content (4:3, as per your 768x1024), internally capable of bleeding out horizontally to maximum aspect ratio device (which was formerly ~16:9). now with 2:1 aspect ratio S8 you are faced with too much horizontal bleed once scaled to fit vertically. (all of above using portrait orientation terms). sound about right?
so the crux of the problem was assuming that no-one would ever invent a > 16:9 aspect device. (similarly, some other dev’s config.lua might someday fail with assumptions that no-one will ever invent a < 4:3 aspect device)
if i’ve got that right, then you have two primary options (assuming that your preference is to leave everything else alone to the extent possible, and just “patch” for S8 support):
make your config.lua conditional, calc device aspect ratio and set different width/height based on it. leave everything else alone unless/until aspect ratio exceeds 1.667, then do something “different” that only affects S8
(or settle for non-square pixels and use zoomStretch on S8 with 16:9 content dimensions, ie “cap” your content aspect ratio to 16:9 and anamorphically stretch it, it’ll then “act like” a 16:9 device but display 2:1 with non-square pixels)
leave config.lua alone, but make your app’s layout code conditional, in same way - again via device aspect ratio, squashing things in as necessary horizontally when aspect ratio exceeds 1.667
Adaptive is great for business apps where you want more real estate on tablets than you have on phones and plan to have different UI layouts. But for games, you generally want to keep the same basic screen albeit a different shape.
You may need to just make your backgrounds big enough to fit the extra space the S8 gives you.
Rob
Hi @dodi_games,
Apparently the “excessively tall” screen size of the S8 is proving to be a nightmare for app developers across all platforms. It’s simply “too tall” to accomodate UI designs that almost everybody designs for. Personally, I’m hoping that Apple and others don’t follow this trend.
Anyway, with “adaptive” mode, it’s often better to position/size things based on screen “percentage” instead of strict X and Y values (except for things that align to screen edges, for positioning, which of course can be predictable values). This is because adaptive will adjust the content area size automatically, so if you position something at like “.x=50” then 50 on one device will vary quite a bit from 50 on another device.
There are other things to note, all of which are outlined in this guide:
https://docs.coronalabs.com/guide/system/adaptiveScale/index.html
Brent
Thanks to everyone for your replies. I hope the trend of devices with strange content area ends.
@Brent I will read and practice with new projects before changing an entire App to Adaptive, is a challenge for me. I will be updating here if I find some novelty that can help other people.
I am going to ask my basic doubts about positioning objects using “adaptive” in this topic to avoid the creation of multiple topics with the same central idea.
Reading “Adaptive Scaling (Resolution Independence)” I understand that in order to position an object down the screen I need to use “display.contentHeight” (_H), and if I want to position it up I guess it is _H / _H, but this only locates the vertical center of the object which causes only half of my image to be seen on screen. Is there any way to calculate that vertical center to subtract it from _H / _H (top)? Before I am forced to create an image of twice the size leaving half of it blank so when the image is located above with its vertical center is full on the screen.
Thanks in advance
_H / _H results in 1. I don’t think that’s what you want. _H / 2 or _H * 0.5 (somewhat more efficient) would compute the center point between 0 and _H. Personally I would out of habit use display.actualContentHeight though for “adaptive” they are likely the same.
Rob
to position an image with a specific bottom y coord, subtract half the image height, or set the anchor to bottom:
image.y = desiredBottomY - image.height/2 -- or: image.anchorY = 1.0 image.y = desiredBottomYAll your answers were very useful and I managed to accommodate all the App menu display objects where I wanted. The only thing I can not adjust is the sprites. Try “object.scale ()” but it does not give me the result that I want (pretty bad blurry images when switching through devices in the simulator). I use sprites to make “ads banners”. The sprites are in “images sheets” and the sprites api does not allow me to change the size. The result is that for 320 x 480 use sprites of 240 x 45 (I use it as a guide to create my images, I know Adaptive does not use predefined content area) and it is good in the small devices but when I switch to ipad they stay at 240 x 45 and hardly see on the screen. Is there any way to work the sprites using adaptive?
Are you using dynamic image (sprite) selection? You should almost always do so, and “adaptive” is no exception.
Brent
Yes, I have my default image, @2x and @3x sheet, I have also activated them in the config lua. The problem is to put it on the screen and adjust its size, I must use _W/(some value) and _H/(some value), but the sprite api does not allow to change its width and height, same when using an image sheet for the widget button. object:scale() is not a good solution because it would have to double its size so that it looks good on large devices but is off the screen on small devices. I think the problem is that the sprites can not be adjusted width and height because their value is given in the size that the image sheet was created.
Hi again,
So to be clear, you’d like to actually scale the sprite to a “consistent” size regardless of the content area size adaptive mode is picking?
In many cases (but I realize not all ), the main benefit of adaptive mode is to actually make things like UI buttons smaller on tablets than they are on phones, since there’s a larger screen area. Thus, when I use that mode, I don’t usually scale anything like graphics or sprites less/more than the size I designed them to be. Sure, there are exceptions (and you might have one) but that’s sort of a general approach which I take.
Take care,
Brent
Holy Moley. This is a great post and something I had no idea about.
So it looks for right now, I am just going to continue doing what I have been doing, zoomStretch x2,blinear, “magTextureFilter”, "nearest, and sprites x2 to fit my Pixelated game on most screens without too much stretching. (I avoid circles so it’s not noticeable or ever complained about with my customers)
However, this one presents a special case. For now, my solution will be to set the GooglePlay Store to not download to Samsung Galaxy S8.
But I wonder if there is another solution I could do later, such as detect if the device is 2:1 and then set my zoomStretch x2,blinear, “magTextureFilter” up differently for Samsung Galaxy S8 specific? Advice?
For the moment I applied a 512 pixels rule. I have noticed, in tests with s8 and s8+ devices, that after 512p for a content area of 768*1024 (zoomEven) I still have around 10-20 pixels between my content and the edge of the screen. I lose a lot of background, but at the moment it is not very important for the concept of application that I am creating.
On the actual devices I assume? Do you have both of these for testing or are users reporting this to you?
Brent
I have both devices (s8 & s8+) on which I test. I keep buying and selling devices and while I have them in my hands I test them with my app.
I don’t personally have one and I’m out of the office at the moment. Doesn’t that device have some kind of “tall mode” software switch option which toggles between what is displayed?
Brent
Settings > display > full screen apps
If my memory does not fail me, I’m not in my home studio right now.
Can I reset the config after the app is loaded?
I was thinking I’ve seen this before in an app. Where the user can set the scale mode.
If not then if the user doesn’t want zoomStretch/letterbox, I could let them decide? Maybe I could put “note: Close the App and reload to letterbox/zoomstretch”. And I could read letterbox or zoomstretch out of a saved file in the Documents directory? Because both seem to work well in my game. I might as well give the user a choice.