There is one image1 and one label1 in the view. I set auto layout in IB as
"image1.leading equal label1.leading, multiplier=1, constant = 30"
I thought it would get different visual distance between on iPad and on iPad Retina. But actually they are same.
This is why? Thanks.
iOS uses points to abstract away from the physical pixels of the screen.
In this case, your constant is set to 30 points (not pixels). This is where the scale of a display comes into play.
The iPad has a scale of 1.0 and the iPad retina has a scale of 2.0. The scale is used as a multiplier for points to translate them to pixels when rendering.
Your 30 points is shown as 30 pixels on the iPad (1.0 x 30 = 30) and 60 pixels on the iPad retina, (2.0 x 30 = 60). However, the pixels are more densely packed in the iPad retina, so the physical space occupied by 30 pixels on the iPad and 60 pixels on the retina is the same when measured with a ruler.
Related
This is my first time to make a game with spritekit and swift , and I'm having a problem with a Scene size and the background image for the GameScene and the LaunchScreen. Currently, I'm using a screen size of
let scene = TitleScene(size: CGSize(width: 750, height: 1334))
I prepared 3 background images for the scene , main.png = 750 × 1334
main#2x.png = 640 × 1136, main#3x.png = 960 × 1685
I've read multiple swift game tutorials but I cannot find a solution for supporting the screen sizes for all iphones. When I set the background for the TitleSecen with
var bgImage = SKSpriteNode(imageNamed: "main")
self.addChild(bgImage)
bgImage.position = CGPointMake(self.size.width/2, self.size.height/2)
When I use the script above the screen gets centered and small. What size should I set the image for the background? The image for the LaunchScreen is also strange as well. I've there is a really good tutorial or a example for a noob like me it will be helpful!
I would love to here from you!
First of all, your image sizes are everywhere, and I don't think you understand how Xs work.
Basically, they are the ratios of which the resolution increases based on the device tipe (non-retina, retina, retina HD).
Let's take an example.
You need an image for a button. You support iPhone, from the iPhone 3gs to the 6 Plus. That means you have all 3 types of displays supported.
Your button is 50x50 points. A point = 1 pixel x resolution ratio
the iPhone 3Gs is non retina, it has a ration of 1 (1 pixel in a point), so your image should be 50x50 pixels => image#1x.png = 50x50 pixels
the 4, 4s, 5 and 5s are retina, they have a ration of 2 (2 pixels in a point), so your image should be 100x100 pixels => image#2x.png = 100x100 pixels
the 6 and 6+ are RetinaHD, they have a ratio of 3 (3 pixels in a point), so your image should be 150x150 pixels => image#3x.png = 150x150 pixels
You should read the iOS UI Guidelines
Secondly, in your case, the image is 750 x 1334. So image#2x should be 1500 x 2668 and image#3x 2250 x 4002.
I have this image called image.png - I have created it in the 3 differen't sizes.
image#3x.png - 1001x132px
image#2x.png - 668x88px
image.png - 334x44px
What I dont understand is how come the #2x is 668px in width, when the iPhone 5&5S are only 640px wide?
I have designed the #3x using iPhone 6+ screen size.
Could someone please explain?
Let me explain you the difference between the iPhone screens, so you will understand the need of these #?x suffixes.
The first iPhone, and the two after it (3G and 3GS) had the standard display with dimensions w:320, h:480. With the introducing of iPhone 4, Apple also introduced the so called Retina display, which "packs" 4 physical pixels in 1 logical pixel (also called "point"), i.e.:
Now, even though the pixel dimensions of the iPhone 4 are w:640, h:960 (and iPhone 5/5C/5S w:640, h:1136), you still have screen size of w:320, h:480 points (respectively w:320, h:568 for 5/5C/5S). But because the coordinate system of the display uses points instead of pixels, the dimensions and position in points of all UI elements remains the same for every device.
What about the prefixes?
Now, the ratio between point and pixels is called "scale". UIScreen, UIView, UIImage, and CALayer classes have a property called scale, and when you load image with prefix #2x, the scale will be 2.0 and the display will fit 2x2 bitmap pixels from the image in one point. iPhone 6+ uses the #3x suffix because of the Retina HD display, which has scaling factor 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels (points on the screen).
The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That
means every 23 pixels from the original render have to be mapped to 20
physical pixels. In other words the image is scaled down to
approximately 87% of its original size.
(source).
Required image sizes
For example if you want to have an image of green circle in a black square with dimensions w:100, h:100, you will need two more images: one with dimensions w:200, h:200 and one with w:300, h:300, as the system will scale them according to the suffix.
Where to go next
Here is some stuff to read (if I didn't explain it right or easy to understand). My advice: check the link above and the official Apple documentation for further knowledge:
Apple documentation: Supporting high-res devices
Apple documentation: Points vs. Pixels
#2x is using for retina display, like iphone 4, 4s, 5, 5s, 6, ipads ....
The image has 668px in width, I think it use for a view that could have extra area for view, like horizontal scroll view, tutorial pages, or for ipad ... ... or something like that ..
And yes, you're right about the width of retina display, it is just 640px.
Hope this may help.
I designed an image on Adobe Illustrator that has H: 100 px and W: 2000 px. When the device is in landscape left, this asset should run across the bottom the of screen and completely cover it from end to end.
As far as I know, the iPhone 6+ is 1080 x 1920. An asset with the width of two thousand should comfortably fit on the bottom, so I must be missing something big here.
I used Prepo to covert my 3x (the one with width of 2000), into 2x and 1x.
The figures are as follows:
3x: 2001 x 102
2x: 1334 x 68
1x: 667 x 34
This set:
Fits: 5s, 5, 4s
Too Short: iPad Retina, iPad Air, iPad 2, 6+, 6
I'm assuming I'm missing some critical aspect of image xcassets because I'm sort of at a loss.
Thank you, and I'm happy to update this with any other details needed.
First thing...
The iPad Air resolution is 2048x1536 and so your image of 2001 pixel width will not fit. Also, iPhone 6+ resolution is 1242x2208 so again that won't fit.
Second...
You shouldn't only be relying on the image size to fit to the screen. You haven't shown what the image is but I imagine that something of that size will be some sort of gradients or something that spreads across the bottom of the screen.
In that case you should be using a sliced image that will resize to be any size regardless of the device resolution.
Third...
If you do rely on the image size then what guarantee do you have that in the future there will not be a device with an even bigger resolution that will break the image again?
Hint... The near future is guaranteed to have a device with a bigger resolution that will break your display.
Summary
Use a resizable image that will stretch to the required size no matter what it is.
Use something like AutoLayout so that the frame of the image view is set by the screen size rather than being set by the image size.
I am trying to convert IOS points to real length(inches).
Im testing this on the New iPad. according to the spec. its width is 7.31 inches and in xcode it has 768 Points, which means it has 768/7.31 = 105 points per inch (horizontally).
From the calculation, a 105-point horizontal line should be displayed as 1 inch on physical screen.
However, when i draw on the screen and measure the distance its shorter that calculated.
Am I missing something here?
Thanks,
From the specs, the 7.31 inches is the total width of the device, not the screen. There is a bezel around the screen to allow the user to hold the iPad without touching interface controls on the screen.
Also, if scroll down a bit, you'll see that the screen is
2048-by-1536 resolution at 264 pixels per inch (ppi)
I want to create blocks for a iphone/ipad) game. I want to use same model so i need screen sizes for coding.
For example iPhone has 320 pixels in X coordinate. we have 8 blocks, so 320/8 = 40 iphone has 480 pixels in Y coordinate. we have 12 blocks, so 480/12 = 40
ipad has 768 pixels in X coordinate. we have 8 blocks, so 768/8=96
ipad has 1024 pixels in Y coordinate. we have 12 blocks, so 1024/12=8
But i want to ask to program for pixels. It understands which device is running so define pixels otomatically. How can i do it?
You could simply ask for the UIApplication's window size.
[UIApplication sharedApplication].keyWindow.bounds
Keep in mind that the value returned here is measured in points not pixels. That means that the size is the same regardless of resolution (i.e. an iPhone 3G screen and an iPhone 4 screen measure the same even though the iPhone 4 has twice as many pixels)
For non-retina screens one point = one pixel. On retina screens you would need to check for the screen's scale to determine the conversion to pixels.