老时时彩360开奖结果 360彩票老时时彩开奖号码 老时时彩360开奖号码 老时时彩是什么 老时时彩2011081901 重庆老时时彩彩开奖360 中国福利彩票老时时彩开奖结果查询 老时时彩复试多少个 老时时彩开奖结果记录 360老时时彩冷热统计 江西老时时彩360 重庆老时时彩计划软件 如何看老时时彩走势 老时时彩规则 老时时彩开奖网页 中国福彩老时时彩 老时时彩现场开奖号码 老时时彩走势图表360 老时时彩360安全代购 老时时彩360走势图解 网易彩票老时时彩 老时时彩开奖k线图 老时时彩360后一计划 360老时时彩杀号定胆 360彩票网老时时彩走势图 360重庆老时时彩综合走势图 360老时时彩开奖结果 重庆时时彩投注老时时彩技巧 360重庆老时时彩综合走势图 老时时彩开奖百度走势图 老时时彩手机走势图APP 重庆老时时彩一星 老时时彩预测杀号 老时时彩号码 老时时彩五星012路 老时时彩万能后二计划 老时时彩第20110829 重庆老时时彩开奖号码 360彩票老时时彩历史开奖号码 福利彩票老时时彩玩法 老时时彩历史遗漏号码 老时时彩360基本走势 老时时彩开奖号码结果 老时时彩即时开奖 老时时彩投注平台 360老时时彩杀号 重庆老时时彩毒胆技巧 老时时彩几点开始 重庆老时时彩五星走势 老时时彩冷热走势图
游戏观察 游戏产业媒体
手机端下载
当前位置:游戏观察 > 新闻 > 研发资讯 > 正文

开发者分享HTML5游戏开发过程中的二三事

2019-03-02 10:00 来源:游戏观察

  游戏观察3月2日消息,最近跟的一款项目是HTML5手游,在这个项目中遇到并解决了诸多问题,也学习到了很多项目开发过程中需要注意的事情。这个项目自立项到现在已经过了5个多月,如今项目研发已经过了早期的忙乱阶段,于是借此机会梳理下思绪,为了能够更好的完成以后的工作。如果能给想进入HTML5这个领域的新团队一些参考,那也是一件极好的事情。

  这款项目是我们团队接到的第一款HTML5类型的游戏合约,在此前团队一致在致力于传统回?#29616;?#25163;游研发。因此团队可以说在这个领域几乎是从零开始(当然一开始的时候我们不这么觉得),所以在研发进行到中期的时候遇到了很多影响效率的问题。

  其中影响最大的问题之一就是——界面适配

  HTML5手游这个品类说白了就是把页游装进一个壳里,本质上他还是一个页游,拥有很多页游的特性。它是在页游框架的基础上,将UE对移动设备做了优化。因此该类游戏在后期将会根据渠道需求发行多个版本,包括直接在网页运行(电脑网页和手机网页)、在手机端运行、在平板电脑设备上运行。这样就会带来一个?#29616;?#30340;问题——兼容性问题。由于HTML5跨平台的特性,很容易产生兼容问题。最明显的一个就是界面适配问题,最基本的要做到UI在不同长宽比的屏幕下均能完全展示,在这个基础上再考虑对主流长宽比的屏幕进行特殊处理,优化用户体验。

  一、适配方案

  界面适配的方案一:约束比例缩放(主流方案)

  方案描述:该是保持界面中元素的相对位置不变,在不同长宽比的屏幕中进行整体缩放。

  这种方案会将界面分为上中下3个区域,将中间的主要区域视作一个窗口根据屏幕比例进行缩放。在缩放的过程中保证窗口长宽比不变,保持长或者宽任意一个维?#26085;?#28385;屏幕就可,不?#22771;?#25972;体铺满屏幕。

  方案优势:处理简单,且最终效果还可以。可以保证UI在不同长宽比的屏幕下均能完全展示,并且UI布局不变。

  最终效果如图:

约束比例缩放

  图中黑色部分为空白区域,虽然对界面的美观有一定影响,但是影响不大。如果把中间的区域设计为窗口的样式,会使界面看起来更自然。

  界面适配方案二:全屏铺满

  方案描述:该方案同样要将界面分为上中下3个区域,只是对中间那块主要区域采用了不同的处理方式。这种方案会要求中间区域?#35013;?#38138;满屏幕,所有处于该?#35013;?#19978;的元素坐标需要根据界面的长宽比进行计算,并且界面中的列表,底框等元素的大小也要根据屏幕的长宽比进行计算。

  方案优势:该方案可以解决方案一种空白区域的问题,在移动设备上显示更?#29992;?#35266;。

  该方案的最终效果如图:

全屏铺满

  这个方案实现?#25103;?#26696;一?#27492;?#26356;加复杂,并且最终效果不好把控。容?#33258;?#25104;不同比例屏幕下UI出现重叠,超出边界等问题。如果处理不好,最终效果反而不如方案一。

  从目前市面上的HTML5游戏来看,基本采用方案一就可满足当前用户需求。采用方案二会增加项目研发时长,并?#20197;?#21152;人力成本。

  二、元素布局方式

  我们这个项目使用的是白鹭引擎,在该引擎的UI编辑器中有个约束坐标的功能。使用该功能,可以将元素的坐标相对屏幕四边或者中心进行约束,确保缩放后界面布局随之改变。建议界面中的元素更多的采用约束的?#38382;劍?#32780;不是绝对坐标。

  白鹭引擎中的约束功能:

约束功能

  为什么建议使用约束的?#38382;?#21602;?这是因为约束的方案更有利于保证界面中元素的边距,居中,四边对齐等布局。这样当用户在两个相?#24179;?#38754;之间切换时,相同的元素位置也相同。不会出现切换时由于相同元素坐标的微小差异造成的晃动?#23567;?#24182;且该方案更方便约定团队成员在拼界面时的规范,只需要约定相同元素的边距,元素互相之间的间距等。再者,如果采?#23186;?#38754;适配方案一时使用约束功能的话,后期若要改为方案二,也会更加方便一些。

  三、UI标准

  规定UI标准对于保证UI的最终效果十分重要。在项目开始之初,就需要设计好界面中的通用控件的样式和规格,包括通用按钮、列表、标签等。并?#20063;?#21516;功能标签的字体大小、色值、样式(加粗、描边)等也要?#22411;?#19968;的标准。除了以上这些控件的规格和样式,还需要规定游?#20998;?#21508;种弹窗的样式和规格,否则必然会出现弹框大小参差不齐,影响UI美观。

  UI就是游戏的脸面,是给用户留下第一印象最直观的内容。因此UI中的各个细节必须保证统一美观,这样才能给用户留下好印象。

  作者:Luiu

本网站所?#21344;?#30340;资料来源于互联网公开信息或网友自助投稿,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵?#25913;?#30693;识产权的资料,请与我们取得联系,本站会在3个工作日内删除。
老时时彩开奖号码