本帖最后由 云里雾里 于 2017-9-17 17:55 编辑
上周发了个贴 关于屏幕适配问题 有些小伙伴还是有这需求的。由于本人最近在研究u3d方面的东西,时间不多。今天上午抽个时间快速说下。
直接进入主题。
官方给我们提供的方案有如下几种:
showAll 模式
showAll 模式就是保持宽高比，显示全部内容。缩放后应用程序内容向较宽方向填满播放器窗口，另一个方向的两侧可能会不够宽而留有黑边。在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。
目前的手机屏幕大部分都是16:9的，所以指定一个设计宽高尺寸，就可以在大部分移动设备有相接近的体验，这时使用 showAll 模式是一个比较简单的适配模式。noScale 模式
noScale 模式顾名思义，就是不对内容进行任何缩放，保持原始的1:1比例，然后直接把舞台对齐到浏览器的左上角。即使在更改播放器窗口大小时，它仍然保持不变。如果播放器窗口比内容小，则可能进行一些裁切。在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始终跟播放器窗口大小保持一致。noBorder 模式
noBorder 和之前版本的缩放模式是不一样的，原来的 noBorder 模式现在叫 fixedWidth ，后面会有说明。
noBorder 模式会根据屏幕的尺寸等比缩放内容，缩放后应用程序内容向较窄方向填满播放器窗口，不会有黑边存在，另一个方向的两侧可能会超出播放器窗口而被裁切，只显示中间的部分。
在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。exactFit 模式
exactFit 模式是不保持原始宽高比缩放应用程序内容，缩放后应用程序内容正好填满播放器窗口。简单的说就是不按照原来内容的比例，直接拉伸，暴力填充整个屏幕。在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时外部传入的应用程序内容尺寸。fixedWidth 模式
fixedWidth 模式是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变。在此模式下，舞台宽度(stage.stageWidth)始终等于初始化时外部传入的应用程序内容宽度。舞台高度(stage.stageHeight)由当前的缩放比例与播放器窗口高度决定。
fixedWidth 就是老版本中的 noBorder 模式，是一般做游戏推荐的模式。宽度固定了，高度随屏幕自适应，可以获得最好的显示效果。fixedHeight 模式
fixedHeight 模式保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始高度不变，宽度可能会改变。在此模式下，舞台高度(stage.stageHeight)始终等于初始化时外部传入的应用程序内容高度。舞台宽度(stage.stageWidth)由当前的缩放比例与播放器窗口宽度决定。
fixedHeight 是新增的一种缩放模式，和 fixedWidth 相反，高度固定，宽度随屏幕自适应。
在 Egret Engine 2.5.6 中新增了 fixedNarrow 和 fixedWide 两种缩放模式。在新增的屏幕缩放模式下，首先会填满屏幕不留黑边，缩放后可以保持原始的宽高比例不变，等比的缩放程序内容，缩放后应用程序向设定的方向来填满播放器窗口。舞台的高度和宽度由当前的缩放比例与播放器视口决定，可以根据舞台的高度和宽度来自适应布局。这两种缩放模式简单可以理解为fixedWidth和fixedHeight的高级封装，显示效果与那两种模式类似，但是决定缩放比例的方向不是定死的，而是根据内容距离屏幕的边距宽窄来决定。在这两种模式下可以比较方便的布局 UI。fixedNarrow 模式
保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器视口，应用程序内容的较窄方向可能会不够宽而填充。
在此模式下，舞台高度(Stage.stageHeight)和舞台宽度(Stage.stageWidth)由当前的缩放比例与播放器视口宽高决定。fixedWide 模式
保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器视口，应用程序内容的较宽方向的两侧可能会超出播放器视口而被裁切。
在此模式下，舞台高度(Stage.stageHeight)和舞台宽度(Stage.stageWidth)由当前的缩放比例与播放器视口宽高决定。
对于我们小伙伴来说,要适应各种手机尺寸,肯定是要求游戏内容不被拉伸,内容要显示全，且没有黑边。所以上面的几种模式我们只能选择:1.fixedWidth[size=1.5em] 2.fixedHeight[size=1.5em]
fixedNarrow 这种模式不知道会不会存在黑边,本人没做测试，如果不存在 那么也是可取的。
好，那么下面我们来说说以前3种模式如何来调整游戏内容来进行适配。其实我想截下图 来说的更详细点，但是时间不多 只能尽量用文字来描述了。
上面可选模式 我们随便取一个来说 由于原理一样 其他2种也可按照下面的描述举一反三了。
关于fixedWidth的适配，其原理就是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变。就是说游戏部分的宽度始终是填满播放器窗口的，但是其垂直方向的内容 可能因为原始宽高比 舞台高要大于垂直方向的内容 那么就用用一些非游戏部分的东西来填充这个差值 或者舞台高要小于垂直方向的内容 那么我们游戏部分垂直方向的内容就会有部分会显示不全 显然这样看上去游戏内容就不是我们想要的。
1.针对于舞台高要大于垂直方向的内容 我们怎么调整呢？
(1)首先游戏有一个背景bg 我们直接让其跟舞台高宽比将其进行缩放 铺满整个舞台 背景bg会变形 但是给人的感觉不强烈，也不会太在意。
(2)第二点强调下 我这里针对的是eui项目 eui在属性面板是可以固定游戏内容位置的。譬如说左上 右上 左下 右下的游戏内容 我们就可以再eui属性面板中去直接设置了其位置了，对于用代码生成的 那么我们设置其位置的时候 就要用舞台的宽和高为基准去设置其坐标。对于其中间的游戏部分 我们可以用一个组group来作为父容器 让父容器在舞台垂直 和 水平保持居中。 那么我们这种情况的适配就OK了。
(3)egret.Event.RESIZE 这个事件得加上 这个事件是舞台尺寸或UI组件尺寸发生改变来进行调度的 开发的时候 我们有时候切换不同的屏幕的尺寸 那么这个事件会被调度 再去执行上面(1)(2)的步骤。当然不加上也没关系 我们在手机浏览器打开的时候 是不会去改变其尺寸的 不过一些测试同学 经常会开多个窗口进行测试 难免会改变屏幕的的尺寸
为了解决他们说的这个问题 这个事件就要加上了。
2.针对于舞台高要小于垂直方向的内容 我们怎么调整呢？
也就是说游戏部分的内容垂直方向显示不全,
(1)我们还是要将游戏背景bg进行全屏铺满
(2)group组的内容以一定的比例进行缩放让group组全部显示且在舞台垂直 和 水平保持居中。
(3)egret.Event.RESIZE 这个事件得加上 这个事件是舞台尺寸或UI组件尺寸发生改变来进行调度的 开发的时候 我们有时候切换不同的屏幕的尺寸 那么这个事件会被调度 再去执行上面(1)(2)步。当然不加上也没关系 我们在手机浏览器打开的时候 是不会去改变其尺寸的 不过一些测试同学 经常会开多个窗口进行测试 难免会改变屏幕的的尺寸
为了解决他们说的这个问题 这个事件就要加上了。
以上就是适配的解决方案。也是我认为较好的方式。分享给大家。
有些同学不太喜欢看文字 直接看图直接了当 不好意思了哈。
适配问题 很多同学都觉得麻烦 确实有点麻烦 需要自己去动态的做调整。官方给的模式 直接用 达不到我们的效果 所以还是花点时间去尝试吧 也不是什么难的问题。 不懂得可以拍砖留言。谢谢。