So I am quite new to Unity Development, and I have run into a problem. I have two UI's in my game (two buttons), however, when I change the device from an Iphone 12 (landscape) to a Iphone 11 (landscape), the UI's ratio goes all whacky and it changes size. Is there any way I can prevent this? I will link photos below
So this is what it looks like if the camera is in the Iphone 12 landscape 'mode'
and this is what it looks like in Iphone 11 'mode'
The ratio and size of the UI goes all whacky. How do I fix this?
(a picture of my canvas inspector
One thing that comes to mind is to change the Canvas Scalers UI Scale Mode from "Constant Pixel Size" to one of the other options, depending on what works best for you.
Unfortunately, "Constant Pixel Size" is the default value and it usually breaks everything when building a full screen UI.
For canvas settings, use the "scale with screen size" option and play around with the values. If most of the resolutions look fine but there is a spesific one that straight up breaks your UI, you can write a script to check if its that resolution and change the canvas values.
For UI elements you can play around with the setting I circled in red.
Also you might want to check this thread.
Related
I am trying to set the screen resolution of a project to 2048x1536 (retina display on ipad).
I created a new single page app in Xcode using Swift, targeted ipad, set deployment target to various values (from 8 to 11), clicked Requires full screen, and chose only landscape modes.
I changed everywhere I could find in the storyboard, but no matter what I do, it is returning 1024x768. when I to an NSLog print from the ViewDidLoad function.
Can someone possibly shed some light on how to use the ipad to its best resolution?
Jerry
In Xcode the size of elements and the screen are measured in points. Each device has a scale factor that is applied to the points which means developers don't have to target specific screen sizes that have the same ratios.
Apple explain it a bit here:
https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
Graphical representation here too: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
We use a custom font face and custom font sizes in our application.
When running the application on an iPhone 6 (haven't tried 6+ yet but I assume it's the same) all fonts look blurry. We also have an internal tool that uses the system font and it looks blurry as well.
Why is that and what is the right approach to get them to render as crisp as they do on an iPhone 5?
Perhaps your labels or drawing points aren't on an exact pixel, but instead on a fractional pixel. To prevent such situations use methods like ceilf(), floorf() and CGRectIntegral().
I have a working SpriteKit app for my iphone 5; however, when I run the same app on my iphone 4* the background image gets clipped and my obstacle height calculations break. I have tried different scaleModes as well as adding a background.png and background#2x.png, but the smaller res picture is not working. I can determine the size of the display and explicitly pick the right image file, but this does not seam as elegant as I would have expected.
Yeah, I believe that in your case you do have to check the size of the display. As inelegant as it may be.
Check this answer out:
iOS not using -568h#2x.png
I need to update an app which was written for the iPhone 4 screen size to work on the iPhone 5. I have read on SO about AutoLayout and so on, but the problem is that each screen in this app is made up of a background image, which then has touchable areas and such drawn on in code. These are positioned absolutely. This isn't the way I would have designed the app, but it's the task I am faced with.
I have two problems to solve:
1) How do I load the correct background image. Do I need to create a separate image size for each and them in code query the device size each time an image is loaded? To give some context, there are well over 100 images.
2) How do I maintain the touchable areas. Is it best to just add the required number of pixels to the bottom of the app? Would this then work, or will I need to query device size and change coords accordingly every time I draw something?
Thank you,
Sam
Autolayout will work in the device is running iOS 6 or higer.
1) Yes you will need a image larger image for all the images in your app. You could overload some methods in a base class to make this more easy to load the correct image.
An other option is to stretch the image, but this is up to you.
2) I would adjust my coordinates to the size of the device.
If Apple would add an other screen size you will run in the same problem again. You should try and create an interface that can grow with the screen.
I'm using a full screen UIWebView to house/render an HTML5 application under iOS. Very much like Cordova/phonegap although I'm not using those. I try to make my webview size match the underlying display. Unfortunately, on retina displays, the value returned by self.view.bounds relies on the UIScreen scaling factor. So I get 1024x768 instead of 2048x1536. Not a huge problem except I then instantiate the UIWebView using the smaller bounds (after adjusting for the status bar) and some things get a bit jaggy. In particular, I use canvas at a couple of points and also rounded borders appear thick. To be clear, this isn't a case of scaled raster resources.
I'm not getting the full resolution of the screen using that UIWebView. Ideally, I'd like to set the screen scale to 1.0 but that doesn't appear to be supported. Any suggestions on how best to get full advantage of the screen?
The problem is most noticeable on the iPhone 5 simulator. I don't have that hardware to test on. iPad/new iPad I think has the problem but the jaggies aren't as noticeable.
Update: The more I look at this, the more I think it may be restricted to canvas.
Solution: In case anyone else gets here. Based on the answer below, I created all of my canvas elements with width and height multiplied by window.devicePixelRatio and then set their style attribute to have the original (device independent) size.
See https://stackoverflow.com/a/7736803/341994. Basically you need to detect that you've got double resolution and effectively double the resolution of the canvas.