• 264路胡乱发车,投诉一月依然如故。 2019-04-21
  • 铁路也是减员增效的问题、8万亿的企业债务、没理由搞大锅饭、还涨工资高工资。铁路自动化做好了、裁员量是惊人的。 2019-04-21
  • 徐征泽的专栏作者中国国家地理网 2019-04-13
  • 长颈鹿在中国高纬度地区成功繁育 小鹿刚出生一米八 2019-04-05
  • 回复@老老保老张工:你肯定有咱无法企及的本事!比如你可以不要脸,咱就不行。 2019-04-05
  • 目前的缓和,是美国中期选举特郎普需要外交得分。 2019-03-31
  • 熊孩子不小心把弟弟锁进快递柜 消防5分钟破拆 2019-03-31
  • 五台山公安分局开展山西公安便民平台上线宣传活动--黄河新闻网 2019-03-20
  • 女司机连撞9辆车 下车借火淡定抽烟称:我故意的黄衣女子黑色轿车-要闻 2019-03-18
  • 国家发改委:粤港澳大湾区规划纲要很快就会出台 2019-03-10
  • 飞利浦佛山照明欧普照明六大品牌LED灯管深度评测(上) 2019-02-22
  • 数读习近平五年下团组 2019-02-13
  • 常州一收储地块闲置多年 变成垃圾堆放地 2019-02-13
  • 汪洁的专栏作者中国国家地理网 2019-02-08
  • 证监会集中督办8起股市“黑嘴”相关案件 2019-02-08
  • 游戏观察 游戏产业媒体
    手机端下载
    当前位置:今天吉林11选5开奖走势 > 新闻 > 研发资讯 > 正文

    吉林市十一选五开奖:开发者分享HTML5游戏开发过程中的二三事

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

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

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

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

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

      一、适配方案

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

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

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

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

      最终效果如图:

    约束比例缩放

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

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

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

      方案优势:该方案可以解决方案一种空白区域的问题,在移动设备上显示更加美观。

      该方案的最终效果如图:

    全屏铺满

      这个方案实现较方案一来说更加复杂,并且最终效果不好把控。容易造成不同比例屏幕下UI出现重叠,超出边界等问题。如果处理不好,最终效果反而不如方案一。

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

      二、元素布局方式

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

      白鹭引擎中的约束功能:

    约束功能

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

      三、UI标准

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

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

      作者:Luiu

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

    游戏观察

    聚焦极有价值的游戏产业资讯。打造有影响力的游戏产业媒体。

    第十九届游交会5月20日在杭州滨江区举办,现已开启报名
  • 264路胡乱发车,投诉一月依然如故。 2019-04-21
  • 铁路也是减员增效的问题、8万亿的企业债务、没理由搞大锅饭、还涨工资高工资。铁路自动化做好了、裁员量是惊人的。 2019-04-21
  • 徐征泽的专栏作者中国国家地理网 2019-04-13
  • 长颈鹿在中国高纬度地区成功繁育 小鹿刚出生一米八 2019-04-05
  • 回复@老老保老张工:你肯定有咱无法企及的本事!比如你可以不要脸,咱就不行。 2019-04-05
  • 目前的缓和,是美国中期选举特郎普需要外交得分。 2019-03-31
  • 熊孩子不小心把弟弟锁进快递柜 消防5分钟破拆 2019-03-31
  • 五台山公安分局开展山西公安便民平台上线宣传活动--黄河新闻网 2019-03-20
  • 女司机连撞9辆车 下车借火淡定抽烟称:我故意的黄衣女子黑色轿车-要闻 2019-03-18
  • 国家发改委:粤港澳大湾区规划纲要很快就会出台 2019-03-10
  • 飞利浦佛山照明欧普照明六大品牌LED灯管深度评测(上) 2019-02-22
  • 数读习近平五年下团组 2019-02-13
  • 常州一收储地块闲置多年 变成垃圾堆放地 2019-02-13
  • 汪洁的专栏作者中国国家地理网 2019-02-08
  • 证监会集中督办8起股市“黑嘴”相关案件 2019-02-08
  • 澳洲幸运10在那开奖 福彩北京赛车pk10官网 时时彩计划稳定版 彩票走势图大全8200 五分彩走势图怎么看 北京快中彩开奖公告 北京快3 北京赛车刷返点技巧 58彩票软件 天吉彩票论坛 重庆时时彩平台 中福中奖规则 河内五分彩是哪里的 中原风采22选5开奖结果 欢乐生肖走势图 (混合过关)竞彩奖金计算器