限制 Spritekit 游戏中 GUI 元素的比例 [英] Constraining proportions of GUI elements in Spritekit game
问题描述
由于帖子太大，我提前道歉，但是每个尝试过制作某种通用应用程序的人都知道这是非常有问题的东西，所以请对我轻描淡写...
目标
我想要实现的(如上图所示)是在 iPhone 5 和 6 上使用 @2x 资源，并保持应用程序的相同外观.如果可能的话，在不根据检测到的设备手动计算节点的比例和位置属性的情况下完成所有这些工作......简而言之，如何实现该应用程序自动限制元素(和场景)的比例和之间的比例?此外，我希望使用@3x 资产在 iPhone 6+ 上拥有相同的应用外观，但由于简单，我只专注于 iPhone 5 和 6.
我在网上发现有人说这个(下采样)是由 iOS 自动完成的，例如他们建议这样做:
<块引用>"为 iPhone 6 制作@2x 大小的资源，然后 iOS 就可以了为 iPhone 5" 自动缩小尺寸.
但对于 Spritekit 场景，这显然不是真的，或者我遗漏了一些东西.
问题
尽管 iPhone 6 和 iPhone 5 具有相同的纵横比和相同的 PPI，但使用相同的资源与场景大小相比看起来并不相同(与场景大小相比，查看第一张和第二张图像上的菜单精灵)，因为 PPI与像素密度有关，iPhone 6 有更多的空间(更大的对角线，更多英寸)，这意味着它比 iPhone 5 有更多的像素.这就是我的问题所在，我不知道什么是有效的方法处理它.
到目前为止我做了什么
第二张图片对于 GUI 来说不是问题，但对于游戏来说，就我而言是这样，因为我希望在不同设备上具有相同的外观和感觉.只看第一张和第三张图片.
感谢 Skyler Lauren 的 建议，我已经设法在所有 iPhone 5 设备上拥有相同的应用外观无论是在 7.1 或 8.1 系统上，还是在 iPhone 6 上.所以现在的问题是如何调整此代码以适用于使用 @3x 纹理的 iPhone 6+ 以及 iPhone 4s.这是 iPhone 5 和 6 的解决方案:
查看控制器.m
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//固定而不是view.bounds.size场景.scaleMode = SKSceneScaleModeAspectFill;因此，场景在 iPhone 6 尺寸下始终具有固定大小，并且视图大小会根据设备而变化.我正在使用资产目录来启动图像，而不是 xib 文件.图像尺寸为推荐尺寸 - 4s 为 640x960px，5s 为 640x1136px，6 为 750x1334px，6+ 模型为 1242x2208.资产的大小适合 iPhone 6，因此对于该型号，根本没有缩放.
关于4s机型，我在使用上述这种方法时，两边各有两条黑条...
到目前为止，我只在模拟器和 iPhone 6 设备上对此进行了测试(我在设备或模拟器上的第一张图片上看到的效果).
问题
目前，正如我所说的，一切都可以在 iPhone 4s 上运行(由于纵横比不同，有两个黑条)，5、6 使用 @2x 资源，但是如何使用@3x 资源让 iPhone 6+ 上的一切都运行呢?如果我为场景使用 375x667 尺寸，那么一切都定位正确并且比例很好，但质量会受到影响(因为升级@2x)
统一的 GUI 和游戏玩法
据我所知，处理统一的 GUI 和游戏玩法的最佳方法是设置场景大小(无论设备如何)并让 SpriteKit 从那里扩展.
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//固定而不是view.bounds.size场景.scaleMode = SKSceneScaleModeAspectFill;这是 iPhone 6 的点数.由于 SpriteKit 以点数工作，但设备以像素为单位显示，@2x 设备的场景大小将为 750px x 1354px 像素，iPhone 6+ 的场景大小为 1125px x 2031px(以像素为单位的设备为实际 1080 x 1920).
这如何处理资产?
它对 .atlas 文件夹中的 1x 和 2x 资源非常有效.同样，因为所有内容都转换为点，所以您可以在纹理图集中使用 button.png 和 button@2x.png，并且所有 iPhone 的定位和外观都相同.
@3x 呢?
这对 Apple 来说是一个更好的问题.显然 SpriteKit 不支持纹理图集中的 @3x 图像.已经有一些关于 SO 的问题试图解决这个问题.
一个例子……
Spritekit - 不从 SKTextureAtlas 加载 @3x 图像p>
它似乎也没有在 Xcode 6.2 中得到修复.如果您正在阅读本文并想要@3x，那么可能值得向 Apple 提交一份雷达.需要注意的一件事是，我在文档中没有看到任何地方声称纹理图集应该支持@3x(甚至@2x)当它们被支持时，你不必对你的代码做任何更改.只需将 @3x 资产放入您的 .atlas 文件夹即可.
我可以/应该如何处理 @3x 资产?
我的建议是不要担心它并运行@2x 资产.SpriteKit 在缩放图像方面做得不错，而且有很多应用程序不支持 @3x.作为 iPhone 6+ 的拥有者，这只是我现在学会的东西.我希望 Apple 尽快支持 .atlas 文件夹中的 @3x 图像.
警告
您要求除 iPhone 6 之外的所有设备缩小尺寸(并扩大 iPhone 6+)在大多数情况下，您不应该注意到您的艺术(或我的测试中的性能)有很大差异，但作为你知道如果你缩小图像，它们看起来可能会略有不同.还有 4s 上的黑条问题，我暂时没有给你解决方案.
收盘点
如果您设置场景大小并将场景设置为 SKSceneScaleModeAspectFill，您将在所有设备上的应用中获得完全相同的外观和感觉，但是您要求旧设备缩小.就我看来，它节省了大量时间和计划，但缺点很小.
希望对您的应用有所帮助并祝您好运.
I apologize in advance because of huge post, but everybody who ever tried to make some kind of universal app knows that this is pretty problematic stuff, so please be easy on me...
The goal
What I am trying to achieve (shown on image above) is to use @2x assets on both iPhone 5 and 6, and maintain same look of an app. And if possible, to do all that without manually calculating scale and position properties of nodes based on detected device... So in short, how to achieve that app automatically constrain proportions of, and between elements (and scene)? Also I would like to have same look of an app on iPhone 6+ using @3x assets, but because of simplicity I've concentrated only on iPhone 5 an 6.
What I have found on the web is that some people saying that this (downsampling) is done automatically by iOS, for example they suggest this:
"Make @2x assets at the size for iPhone 6, and then iOS will do downscaling automatically for iPhone 5".
But that's obviously not true when it comes to Spritekit scene, or I am missing something.
The problem
Even though iPhone 6 and iPhone 5 have same aspect ratio and same PPI, using the same asset won't look the same compared to the scene size (look menu sprite on 1st and 2nd image compared to the scene size) because PPI are related to pixel density, and iPhone 6 has more space (bigger diagonal, more inches) which means it has more pixels than iPhone 5. And this is where my problem comes from and I don't know what would be an efficient way to handle it.
What I have done so far
The second image is not a problem for GUI, but for a gameplay, in my case it is, because I want same look and feel on different devices. Just look first and third image.
Thanks to Skyler Lauren's suggestion I've managed to have same look of an app across all iPhone 5 devices either on 7.1 or 8.1 systems as well as on iPhone 6. So now, the problem is how to adapt this code to works with iPhone 6+ using @3x textures, as well as on iPhone 4s. Here is the solution for iPhone 5 and 6:
View controller.m
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.scaleMode = SKSceneScaleModeAspectFill;
So the scene always has fixed size at iPhone 6 dimensions and view size is changing according to device. I am using assets catalog for launch images and not xib file. Images are sized at recommended size - 640x960px for 4s, 640x1136px for 5, 750x1334px for 6 and 1242x2208 for 6+ model. Assets are sized for iPhone 6 so for that model there is no scaling at all.
Related to 4s model, when I am using this method described above, there are two black bars from each side...
So far I've tested this only on simulator and iPhone 6 device (what I see looks like on first image either on device or simulator).
Question
For now as I said everything works on iPhone 4s(with two black bars because of different aspect ratios), 5, 6 using @2x assets, but how make everything to work with iPhone 6+ using @3x assets ? If I use 375x667 dimensions for the scene, then everything is positioned properly and has good proportions, but quality suffers (because of upscaling @2x)
Uniform GUI and Game Play
As far as I can tell the best way to handle a uniform GUI and game play is to set your scene size (regardless of device) and let SpriteKit scale from there.
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.scaleMode = SKSceneScaleModeAspectFill;
That is the points for an iPhone 6. Because SpriteKit works in points but devices display in pixels the scene size will be 750px x 1354px pixels for @2x devices and 1125px x 2031px for the iPhone 6+ (the device in pixels is actual 1080 x 1920).
How does this work with assets?
Well it works rather well for 1x and 2x assets in a .atlas folder. Again because everything is converted to points you can have button.png and button@2x.png in a texture atlas and the positioning will be the same and look the same for all iPhones.
What about @3x?
This is a better question for Apple. Apparently SpriteKit does not support @3x images in a texture atlas. There are a few question already on SO that have tried to address this.
One example...
Spritekit - not loading @3x images from SKTextureAtlas
It appears it hasn't been fixed in Xcode 6.2 either. If you are reading this and want @3x it might be worth filing a radar with Apple. One thing to note is that I didn't see anywhere in the docs claiming that texture atlases are suppose to support @3x (or even @2x for that matter) When they are supported you won't have to do any changes to your code. Just throw the @3x assets into your .atlas folders.
What can/should I do about the @3x assets?
My advice is to not worry about it and run @2x assets. SpriteKit does a decent job scaling images and there are a lot of apps out there that don't support @3x. As a fellow iPhone 6+ owner it is just something I have learned to live with at the moment. I hope that Apple supports the @3x images in the .atlas folder very soon.
Warnings
You are asking all devices to scale down with the exception of the iPhone 6 (and scaling up iPhone 6+) In most cases you shouldn't notice a big difference in your art (or performance from my testing), but as you know if you shrink images they may look slightly different. Also there is the black bar issue on the 4s which I don't have a solution for you at the moment.
Closing Points
You will get the exact same look and feel in your app across all devices if you set the scene size and set your scene to SKSceneScaleModeAspectFill however you are asking older devices to scale down. It saves a ton of time and planning with minor draw backs as far as I see it.
Hopefully that helps and the best of luck on your app.
这篇关于限制 Spritekit 游戏中 GUI 元素的比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
