限制Spritekit游戏中GUI元素的比例 [英] Constraining proportions of GUI elements in Spritekit game
问题描述
由于帖子过多，我事先道歉，但是每个尝试制作某种通用应用程序的人都知道这是有问题的东西，所以请对我轻松一点...
目标
我要实现的目标(如上图所示)是在iPhone 5和iPhone 6上都使用@ 2x资源，并保持应用程序的外观.而且，如果可能的话，可以在不基于检测到的设备手动计算节点的比例和位置属性的情况下进行所有操作...简而言之，如何实现该应用程序自动限制元素(和场景)之间以及元素(和场景)之间的比例?另外，我希望使用@ 3x资源在iPhone 6+上的应用具有相同的外观，但是由于简单起见，我只专注于iPhone 5和6.
我在网络上发现的是，有人说这(降采样)是由iOS自动完成的，例如，他们建议这样做:
"将iPhone的@ 2倍资源设置为iPhone 6的大小，然后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和iPhone 6的解决方案:
View controller.m
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.scaleMode = SKSceneScaleModeAspectFill;
因此，场景始终具有固定的iPhone 6尺寸，并且视图尺寸根据设备而变化.我将资产目录用于启动映像，而不是xib文件.图片的大小建议为-640x960px(4s)，640x1136px(5)，750x1334px(6)和1242x2208(6+模型).资产的大小适用于iPhone 6，因此对于该型号，根本没有伸缩性.
与4s模型有关，当我使用上述方法时，每侧都有两个黑条...
到目前为止，我仅在模拟器和iPhone 6设备上进行了测试(我在设备或模拟器上的第一张图片上都看到了这种样子).
问题
就目前而言，正如我所说，一切都可以在使用@ 2x资产的iPhone 4s(带有两个黑条，因为宽高比不同)，5、6上运行，但是如何使用@ 3x资产使一切在iPhone 6+上运行呢? 如果我对场景使用375x667尺寸，则所有位置都正确放置并具有良好的比例，但是质量会受到影响(因为@ 2x会放大)
统一的GUI和游戏玩法
据我所知，处理统一的GUI和游戏的最佳方法是设置场景大小(与设备无关)，然后让SpriteKit从此处缩放.
GameScene *scene = [GameScene sceneWithSize:CGSizeMake(375,677)];//fixed instead of view.bounds.size
scene.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怎么样?
这对苹果公司是一个更好的问题.显然，SpriteKit在纹理图集中不支持@ 3x图像. SO上已经有一些问题试图解决这个问题.
一个例子...
Spritekit-无法从SKTextureAtlas加载@ 3x图像
似乎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屋！
