iPhone Flash 中的不同屏幕尺寸? (获得黑条)
iPhone different screen sizes in flash? (Getting Black Bars)
我是整个编码世界的新手,actionscript 3 是我的第一次真实体验,如果我不能立即理解您的回答,请见谅。
我在 AIR 中使用 Adobe Flash CC 为 iOS 构建了一个 iPhone 应用程序。所有代码都在时间线或单独的 .as 文件中(因此不使用文档 类)。
游戏的核心概念是随机生成的物体从屏幕顶部掉落,用户必须点击它们才能使它们在触及底部之前消失。
我的问题是我的文档大小是 640 x 960
。我认为这适合 iPhone 4(尚未测试)但是当我在我的 iPhone 5s 上测试它时,我在顶部和底部找到了后杠。显然它们有不同的屏幕尺寸,但我希望该应用程序能够 运行 在许多不同尺寸的 iPhone 上。
我花了几个小时在谷歌上搜索这个,但仍然不明白我要做什么。我试过 stage.scaleMode
设置但没有任何变化。我还在包含的文件中添加了一个名为 default-568h@2x.png
的文件(只是一个尺寸为 640 x 1136
的绿色矩形),但这也没有显示。
所以基本上我想知道如何更改我的应用程序和 AS3 代码以允许我的应用程序适应所有不同的尺寸 iPhones?
非常感谢任何帮助。
启动图像
首先,首先,您需要确保项目中包含正确的启动图像。
这是来自 Adobe's website 的 table:
- 默认~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 肖像
- 默认-横向-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 横向
- 默认-横向-812h@3x~iphone.png | iPhone X 2436 x 1125 横向
- 默认-812h@3x~iphone.png | iPhone X 1125 x 2436 纵向
制作完这些图像(并完全按照所示命名)后,将它们包含在您的项目中(它们必须位于 root 通过执行以下操作:
在 FlashPro 中
- 转到您的发布设置
- 转到 AIR 进行 iOS 设置。
- 转到 "General" 选项卡
- 将所有这些图像添加到 "included files" 列表(根目录)
扩展您的内容
- 选项 1,填充和裁剪
如果您不介意稍微裁剪一下您的内容,您可以在应用启动时执行此操作:
stage.scaleMode = StageScaleMode.NO_BORDER
这将缩放您的 swf,使其在保持宽高比的同时填满整个屏幕。很容易计算出需要多少填充才能使此方法适用于各种 iPhones 的纵横比的微小变化。
但是,如果您想允许方向更改(纵向到横向),裁剪可能会过于严重。
- 选项 2 - 响应式设计
尽管如此,适应不同屏幕分辨率和纵横比的最佳方法是让您的应用程序具有响应能力。这涉及应用程序开始时的以下代码:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
现在您的舞台边界 (stage.stageWidth
& stage.stageHeight
) 将是设备的全宽和全高*。 (一些设备在底部或顶部仍然有一个软件工具栏)
然后您可以通过代码定位事物。
如果您想要一种简单的方法来转换您拥有的内容(您绝对不想使用代码来调整大小和对齐所有内容),只需将所有内容放入实例名称为 [=16= 的容器 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;
监听调整大小事件也是一个好主意,以防屏幕尺寸发生变化(例如,您 maximize/restore 在桌面上,或在移动设备上从纵向变为横向)。
您可以通过监听舞台上的调整大小事件来做到这一点:
stage.addEventListener(Event.RESIZE, redrawScreen);
function redrawScreen(e:Event):void {
//resize everything as the window size has changed.
}
你这个编码员负责为不同的屏幕尺寸提供不同的解决方案。您检查设备大小,然后相应地呈现内容。总而言之,这与基于旋转显示不同的内容并没有什么不同。如果您希望有一个神奇的解决方案可以在 AIR 中为您完成所有这些工作,那么您就不走运了,因为 none。
不建议乱用舞台比例模式(您应该始终在移动设备上不使用比例),因为这样您就完全放弃了根据真实物理设备尺寸比较显示对象位置的能力(基本上您不会'不确定你显示的内容是在屏幕上还是完全在屏幕外)。
如果您认为移动开发很容易(不仅仅是使用 AIR,而是使用任何技术)那么抱歉,这不是特别的,因为您必须处理所有这些尺寸。
处理的基本原则:
- 获取实际设备大小。
- 计算实数density/ratio.
- 将该大小与您的应用程序的大小进行比较。 (再次缩放模式为无缩放)
- 提取一般比率(您的应用程序的大小与设备的大小相比)
- 使用该比率来缩放和放置您的主容器(包含您的整个应用程序的容器),困难:缩放并将您的所有 DisplayObject 放置在您的应用程序中。
- 既然保持了应用比率,请用任何东西填充空白space。
- 您的应用在任何设备上都能正确填满整个屏幕。
我是整个编码世界的新手,actionscript 3 是我的第一次真实体验,如果我不能立即理解您的回答,请见谅。
我在 AIR 中使用 Adobe Flash CC 为 iOS 构建了一个 iPhone 应用程序。所有代码都在时间线或单独的 .as 文件中(因此不使用文档 类)。
游戏的核心概念是随机生成的物体从屏幕顶部掉落,用户必须点击它们才能使它们在触及底部之前消失。
我的问题是我的文档大小是 640 x 960
。我认为这适合 iPhone 4(尚未测试)但是当我在我的 iPhone 5s 上测试它时,我在顶部和底部找到了后杠。显然它们有不同的屏幕尺寸,但我希望该应用程序能够 运行 在许多不同尺寸的 iPhone 上。
我花了几个小时在谷歌上搜索这个,但仍然不明白我要做什么。我试过 stage.scaleMode
设置但没有任何变化。我还在包含的文件中添加了一个名为 default-568h@2x.png
的文件(只是一个尺寸为 640 x 1136
的绿色矩形),但这也没有显示。
所以基本上我想知道如何更改我的应用程序和 AS3 代码以允许我的应用程序适应所有不同的尺寸 iPhones?
非常感谢任何帮助。
启动图像
首先,首先,您需要确保项目中包含正确的启动图像。
这是来自 Adobe's website 的 table:
- 默认~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 肖像
- 默认-横向-414w-736h@3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 横向
- 默认-横向-812h@3x~iphone.png | iPhone X 2436 x 1125 横向
- 默认-812h@3x~iphone.png | iPhone X 1125 x 2436 纵向
制作完这些图像(并完全按照所示命名)后,将它们包含在您的项目中(它们必须位于 root 通过执行以下操作:
在 FlashPro 中
- 转到您的发布设置
- 转到 AIR 进行 iOS 设置。
- 转到 "General" 选项卡
- 将所有这些图像添加到 "included files" 列表(根目录)
扩展您的内容
- 选项 1,填充和裁剪
如果您不介意稍微裁剪一下您的内容,您可以在应用启动时执行此操作:
stage.scaleMode = StageScaleMode.NO_BORDER
这将缩放您的 swf,使其在保持宽高比的同时填满整个屏幕。很容易计算出需要多少填充才能使此方法适用于各种 iPhones 的纵横比的微小变化。
但是,如果您想允许方向更改(纵向到横向),裁剪可能会过于严重。
- 选项 2 - 响应式设计
尽管如此,适应不同屏幕分辨率和纵横比的最佳方法是让您的应用程序具有响应能力。这涉及应用程序开始时的以下代码:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
现在您的舞台边界 (stage.stageWidth
& stage.stageHeight
) 将是设备的全宽和全高*。 (一些设备在底部或顶部仍然有一个软件工具栏)
然后您可以通过代码定位事物。
如果您想要一种简单的方法来转换您拥有的内容(您绝对不想使用代码来调整大小和对齐所有内容),只需将所有内容放入实例名称为 [=16= 的容器 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;
监听调整大小事件也是一个好主意,以防屏幕尺寸发生变化(例如,您 maximize/restore 在桌面上,或在移动设备上从纵向变为横向)。
您可以通过监听舞台上的调整大小事件来做到这一点:
stage.addEventListener(Event.RESIZE, redrawScreen);
function redrawScreen(e:Event):void {
//resize everything as the window size has changed.
}
你这个编码员负责为不同的屏幕尺寸提供不同的解决方案。您检查设备大小,然后相应地呈现内容。总而言之,这与基于旋转显示不同的内容并没有什么不同。如果您希望有一个神奇的解决方案可以在 AIR 中为您完成所有这些工作,那么您就不走运了,因为 none。
不建议乱用舞台比例模式(您应该始终在移动设备上不使用比例),因为这样您就完全放弃了根据真实物理设备尺寸比较显示对象位置的能力(基本上您不会'不确定你显示的内容是在屏幕上还是完全在屏幕外)。
如果您认为移动开发很容易(不仅仅是使用 AIR,而是使用任何技术)那么抱歉,这不是特别的,因为您必须处理所有这些尺寸。
处理的基本原则:
- 获取实际设备大小。
- 计算实数density/ratio.
- 将该大小与您的应用程序的大小进行比较。 (再次缩放模式为无缩放)
- 提取一般比率(您的应用程序的大小与设备的大小相比)
- 使用该比率来缩放和放置您的主容器(包含您的整个应用程序的容器),困难:缩放并将您的所有 DisplayObject 放置在您的应用程序中。
- 既然保持了应用比率,请用任何东西填充空白space。
- 您的应用在任何设备上都能正确填满整个屏幕。