HTML5游戏总结：分辨率对游戏布局设计的影响

使用tangide已经制作了近10款游戏应用了. @H_502_7@

@H_502_7@
@H_502_7@

在制作的过程中渐渐了解到了做好屏幕自适应的重要性.@H_502_7@

如何让游戏,应用在不同分辨率 不同屏幕比的设备上均能拥有较好的表现力直接影响到了产品的可用性.@H_502_7@

于是对场景的分割和设计就是一门必须要研究的课题了. 本文就来分享下我的经验.@H_502_7@

@H_502_7@

@H_502_7@

1: 目标群体分析@H_502_7@

现在做的游戏和应用都是为了在手机端运行的,先来了解一下各种主流手机分辨率与屏幕比例.@H_502_7@

@H_502_7@

IPhone屏幕分辨率分好多种,但主要比例就分2种,@H_502_7@

一类是4S的 3:2分辨率@H_502_7@

IPhone 4S (960x640)@H_502_7@

@H_502_7@

一类是16:9 和伪16:9(5S)@H_502_7@

IPhone 5S( 1136x640), @H_502_7@

@H_502_7@

IPhone6(1334×750), @H_502_7@

IPhone6 plus(1920×1080) . @H_502_7@

@H_502_7@

安卓军团浩浩荡荡 分辨率种类无数多..想想都实在头疼,但好在当今主流手机和各家的旗舰都是使用16:9(和各种伪16:9)比例.@H_502_7@

三星S6(2560x1440)@H_502_7@

小米note (1920x1080)@H_502_7@

华为P8(1920x1080)@H_502_7@

魅族MX5(1920x1080)@H_502_7@

调皮的魅族MX4 Pro(2560x1536)伪@H_502_7@

@H_502_7@

列完之后一看,结果还是比较乐观的. 只要能在IP4S 和 5S上同时正常显示,那么大多手机都可以通吃了.@H_502_7@

@H_502_7@

@H_502_7@

2: 实际情况分析@H_502_7@

我的画布选择使用伪16:9的 800X480.习惯而已. 其他尺寸也可以.(新手请勿模仿用)@H_502_7@

那么在设计页面布局的时候 我是不是要按照这个分辨率和比例来设计呢?@H_502_7@

@H_502_7@

并不是! @H_502_7@

那为什么不是? why不是? @H_502_7@

@H_502_7@
@H_502_7@

接下来让我们来看看:@H_502_7@

我要做的游戏都是放在微信上分享的. 我们来瞧瞧在微信里的画面@H_502_7@

IPhone4S@H_502_7@

@H_502_7@@H_502_7@

@H_502_7@

IPhone5S@H_502_7@

@H_502_7@
@H_502_7@

@H_502_7@

我了个去. 屏幕上面有一大坨黑边!@H_502_7@

@H_502_7@
@H_502_7@

@H_502_7@

没错我们做的是H5网页游戏 不是客户端,@H_502_7@

通常都不会全屏显示的,手机自己的状态栏占用了一定空间,微信的标题栏也占用了一定空间.@H_502_7@

经过我的目测 在4S 和 5S上 整个黑框部分占用的高度都是128像素@H_502_7@

@H_502_7@

所以如果我还按照16:9的比例去设计界面的布局 那最终显示出来的效果肯定和设计的不太一样.@H_502_7@

@H_502_7@

@H_502_7@

3: 信息整理@H_502_7@

在IPhone4S上 打开微信 进入H5应用或游戏 实际可使用的区域分辨率为832x640@H_502_7@

换算得出比例1.3@H_502_7@

在IPhone5S上 打开微信 进入H5应用或游戏 实际可使用的区域分辨率为1008x640@H_502_7@

换算得出比例:1.575@H_502_7@

@H_502_7@

这2个比值都和16:9的 1.7777778有差异.@H_502_7@

如果是在更高分辨率的手机上运行 那个黑边占屏幕的比例又会低一些.@H_502_7@

总而言之,这个黑边会让实际屏幕比值更小,@H_502_7@

@H_502_7@

对设计者开发者的实际影响效果如下图所示:@H_502_7@

@H_502_7@
@H_502_7@

可以看出画面的Y方向会变得紧凑,尤其是在4S上 已经接近正方形了.@H_502_7@

5S上也缩水了不少.@H_502_7@

@H_502_7@

4: 总结
@H_502_7@

不要按照16:9 去设计一个位置定死的界面!@H_502_7@

@H_502_7@

没错 ! 结论就是这么简(cai)单(guai)@H_502_7@

@H_502_7@

@H_502_7@

5: 位置属性设置建议@H_502_7@

上面几点解释了一个元素很多且按照16:9的分辨率去设计的页面为什么会出现所有图片都被压缩,@H_502_7@

或者很多元素显示不全,界面显示不全,背景显示不全的问题. 或是在制作阶段实现完美 搬到微信上玩儿时则出现各种不好的体验.@H_502_7@

@H_502_7@

看到这里 我们该如何设计界面这个问题的答案已经可以揭晓了.@H_502_7@

@H_502_7@

1: 在控件的x,y,h,w属性设定上尽可能避免使用"固定" @H_502_7@

2: 分布于屏幕顶端和低端的控件 应根据实际情况使用"顶部位置不变",或"底部位置不变".@H_502_7@

3: 分布与屏幕2侧的空间和按钮应 更具实际情况使用"左侧位置不变",或"右侧位置不变".@H_502_7@

4: 屏幕中间的同类型有交互关系的控件应使用同一种布局方式.如 x"缩放",y"缩放",w"缩放",h"与宽度保持比例" @H_502_7@

5: 背景图片应使用@H_502_7@

@H_502_7@@H_502_7@

@H_502_7@

在页面复杂 元素很多而且互相有影响的情况下 界面自适应的调试是很复杂的. @H_502_7@

必须对每一种控件需要做的事情有深刻的认识才能更好的去设置他们的位置. 做到在不同比例和分辨率的兼容.@H_502_7@

上5个基本设置方法可以满足绝大多数情况的需求.@H_502_7@