了解不同分辨率屏幕的图像尺寸

Question

了解不同分辨率屏幕的图像尺寸

4

我很难将有关@1x，@2x和@3x图像大小的所有信息整合在一起。我一直在使用XCode中的场景编辑器，场景大小为1334x750（iPhone 6屏幕的像素尺寸）。因此，当我为该场景中的精灵调整图像大小时，@2x所使用的大小是否应该与此相同？

根据文档中的说明，CGSize使用点而不是像素，因此，如果我的图像是CGSize（宽度：50，高度：50），那么这是否独立于场景编辑器中的场景大小？

最终问题：CGSize尺寸如何转换为我以像素为单位导出@1x，@2x和@3x的图像？导出时PPI应该是多少？

- claassenApps

@claassentApps，如果我的回答切中要点，请勾选“接受答案”。谢谢。 - Faiz Fareed

@FaizFareed，我认为这并不完全回答了我的问题——我的问题更多地是关于给定CGSize（以点为单位）需要导出什么大小（以像素为单位），以及导出时应该使用多少像素每英寸。当然，我还没有机会听你发布的视频，但我没有使用AutoLayout，而是在SpriteKit中使用场景编辑器。 - claassenApps

@FaizFareed，你离回答这个问题还有很长的路要走。这个问题涉及到带着视网膜屏幕不加警告地推出的欺骗本质，并且这种影响在Xcode中持续存在，每次新的屏幕特性被保密直到发布后都会产生后果，并且这种人为问题所造成的计算方式和武断态度。 - Confused

@Confused，我刚看到了你的评论 - 谢谢。所以如果我的场景编辑器屏幕大小设置为750x1334（iPhone 6-'@2x'大小），并且我在场景编辑器中相应地调整我的图像大小为100x100点，然后我创建一个需要该大小图像的类使用CGSize（width:100，height:100），那么我的'@1x'分辨率图像是否应该生成为50x50像素，因为我是在750x1334'(@2x')大小下设计的，而我的'@2x'分辨率是否应该生成为100x100像素？我想我很难描述我的问题。 - claassenApps

我怀疑@bobby关于StoryBoard或Interface Builder中1x是尺寸的说法是错误的...只有当你首先为iPhone 3GS或iPad mini第一代，或iPad 2或更早版本设计时才是正确的。 - Confused

显示剩余2条评论

4个回答

1

这个概念很简单。在Storyboard或Interface Builder中的尺寸应该是@1x格式下你资源的大小。

视网膜显示（或iPhone 6+ @3x尺寸）并不意味着你有比以前更多的空间，它意味着你可以在之前绘制1像素的地方绘制2（或3）个像素。

因此对于一个50x50像素的图像视图，你应该有3个资源： - Image@1x.png（50x50像素） - Image@2x.png（100x100像素） - Image@3x.png（150x150像素）

- CZ54

感谢您的帖子。CGSize（使用点）抽象了像素的概念吗？- 如果CGSize为50x50点，对于“@1x”，使用50x50像素，“@2x”，使用100x100像素，“@3x”，使用150x150像素？PPI如何适应所有这些？ - claassenApps

是的确如此。CGSize(50,50)在所有类型的屏幕上看起来完全相同。至于第二部分，这就是视网膜的魔力，在相同英寸空间内绘制两倍的像素。 - CZ54

@CZ54，兄弟，你能帮我看一下我的问题吗？http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices - May Phyu

我知道这已经有点老了，但这个答案需要微调。iPhone 6 Plus的显示面积比iPhone 6和iPhone 5更大，简单来说，如果你在这3个设备上都安装了同一个应用程序并将它们放在一起，那么图像在视觉上应该是相对相同大小的。 - Knight0fDragon

1

假设您在资产库中创建了一张图像，由3组相同的图像组成，@1x.png 大小为 50x50 像素，@2x.png 大小为 100x100 像素 和 @3x.png 大小为 150x150 像素。

您不需要担心在storyboard中使用哪一个（因为storyboard会自动使用@1x.png），以及针对像iPhone6、iPhone7或iPad这样的目标设备使用哪一个（因为按默认编程所有硬件都会找到它们所需的像素相关的图片，包括@1x.png、@2x.png和@3x.png）。

如需进一步的说明，请参阅自动布局编程指南，您还可以查看苹果关于自动布局的教程视频。

自动布局的奥秘 part1

自动布局的奥秘part2。

- Faiz Fareed

兄弟，你能否帮我看一下我的问题：http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices？ - May Phyu

1

@1x和@2x曾经与iPhone 4推出时的视网膜图形更改有关。

iPhone 3GS是320x480，iPhone 4是640x960。这意味着每英寸的点数实际上是相同的，但ppi加倍了，因此出现了@2x。当iPhone 5推出时，唯一变化的是高度，因此对于宽度，ppi保持不变，没有问题。

然后我们遇到了6和6+。此时，苹果说算了吧，尝试保持与先前iPhone相关的ppi，而无需保留先前的可用区域或为更大的设备提供更大的屏幕像素。现在@2x失去了其原始含义。

但是，为了真正使我们困惑，他们制作了iPhone SE，它回到了iPhone 5的ppi屏幕尺寸，因此@2x再次有意义。

基本上，在考虑@2x图形时，请考虑第一个iPhone的分辨率大小。

现在，你需要做出选择。你可以为你的应用程序提供更多/更少的可用区域，你可以将额外的可用区域加入黑盒子，或者你可以进行缩放并且会因为游戏像素不再与屏幕像素1：1而产生某种程度的质量损失。

- Knight0fDragon

你能帮我查看一下我的问题吗？http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices，兄弟？ - May Phyu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Brownsword · Accepted Answer

Xcode可以处理矢量图像，因此如果您能够将图像导出为PDF（例如在Sketches导出面板中，导出格式之一是PDF），则可以忘记@2X和@3X图像。因此，请创建@1X的艺术品并将其导出为PDF，在Xcode中将图像添加到Assets.xcassets时，可以将图像的"Scales"属性设置为"Single Scale"。 Xcode将在构建时从您的矢量PDF生成所需的@2X和@3X图像。