ios - iPhone在闪存中的不同屏幕尺寸？ (获取黑条)

Question

我是整个编码世界的新手，actionscript 3 是我第一次真正的体验，如果我不能马上理解你的答案，很抱歉。

我在 AIR for iOS 中使用 Adob​​e Flash CC 构建了一个 iPhone 应用程序。所有代码要么在时间线中，要么在单独的 .as 文件中(因此不使用文档类)。

游戏的核心概念是随机生成的物体从屏幕顶部掉落，用户必须点击它们才能让它们在触到底部之前消失。

我的问题是我的文档大小是 640 x 960 .我认为这适合 iPhone 4(还没有测试过)，但是当我在 iPhone 5s 上测试它时，我会在顶部和底部得到回条。显然它们具有不同的屏幕尺寸，但我希望该应用程序能够在许多不同尺寸的 iPhone 上运行。

我花了几个小时在谷歌上搜索这个，但仍然不明白我的意思是什么。我试过玩stage.scaleMode设置，但没有任何变化。我还添加了一个名为 default-568h@2x.png 的文件(只是一个尺寸为 640 x 1136 的绿色矩形)在包含的文件中，但这也没有显示。

所以基本上我想知道如何更改我的应用程序和 AS3 代码以允许我的应用程序适合所有不同尺寸的 iPhone？

任何帮助将不胜感激。

Answer 1

发射图像

首先，首先，您需要确保项目中包含正确的启动图像。

这是来自 Adobe's website 的表格:

默认~iphone.png | iPhone 4(非视网膜)640 x 960 肖像

默认@2x~iphone.png | iPhone 4、4s 640 x 960 肖像

默认-568h@2x~iphone.png | iPhone 5、5c、5s 640 x 1136 肖像

默认-375w-667h@2x~iphone.png | iPhone 6/7/8 750 x 1334 肖像

默认-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 1242 x 2208 肖像

Default-Landscape-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 横向

Default-Landscape-812h@3x~iphone.png | iPhone X 2436 x 1125 横向

默认-812h@3x~iphone.png | iPhone X 1125 x 2436 纵向

一旦您制作了这些图像(并完全按照所示命名)，通过执​​行以下操作将它们包含在您的项目中(它们必须在您的应用程序的 根目录 中):

在 FlashPro 中

转到您的发布设置

转到 AIR for iOS 设置。

转到“常规”选项卡

将所有这些图像添加到“包含文件”列表(根)

扩展您的内容

选项 1，填充和裁剪

如果您不介意稍微裁剪您的内容，您可以在应用启动时执行此操作:

stage.scaleMode = StageScaleMode.NO_BORDER

这将缩放您的 swf，使其充满整个屏幕，同时保持纵横比。很容易计算出需要多少填充才能使此方法适用于各种 iPhone 的纵横比的微小变化。

但是，如果您想允许方向更改(纵向到横向)，裁剪可能会过于严重。

选项 2 - 响应式设计

但是，适应不同屏幕分辨率和纵横比的最佳方法是让您的应用程序响应。这涉及应用程序开头的以下代码:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align     = StageAlign.TOP_LEFT;

现在您的舞台边界( stage.stageWidth & stage.stageHeight)将是设备的全宽和全高*。 (有些设备在底部或顶部仍然有一个软件工具栏)

然后，您可以通过代码定位事物。

如果您想要一种简单的方法来转换您拥有的内容(您不想使用代码来调整大小和完全对齐所有内容)，只需将所有内容放入实例名称为 container 的容器 MovieClip 中。 ，然后您可以像这样调整大小和位置:

//scale the container as big as possible while still fitting entirely in the screen:

//figure out which dimension should match the stage (widht or height)
if(container.width - stage.stageWidth >= container.height - stage.stageHeight){
    container.width = stage.stageWidth;
    container.scaleY = container.scaleX;
}else {
    container.height = stage.stageHeight
    container.scaleX = container.scaleY;
}

//center it on the screen:
container.x = (stage.stageWidth - container.width) * 0.5;
container.y = (stage.stageHeight - container.height) * 0.5;

监听调整大小事件也是一个好主意，以防屏幕大小发生变化(例如，您在桌面上最大化/恢复，或者在移动设备上从纵向变为横向)。

你可以通过监听舞台上的 resize 事件来做到这一点:

stage.addEventListener(Event.RESIZE, redrawScreen);

function redrawScreen(e:Event):void {
    //resize everything as the window size has changed.
}