整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5游戏沙龙:优化提升HTML5游戏品质和体验

2月27日,借着HTML5移动游戏大会的余温,Egret白鹭引擎在贝塔咖啡举办了主题为“HTML5游戏开发优化之路”第一期技术分享沙龙。继续与开发者、运营商、渠道等行业各界一道,分享HTML5移动游戏开发实践中的优化之道。 白鹭时代作为国内首屈一指的HTML5移动游戏开发引擎、工具与运行时提供商,其一线核心技术人员参与了本次沙龙,除此之外,还邀请了业内从事HTML5游戏领域资深人士作为嘉宾一起探讨交流。沙龙中的交流与探讨,汇聚了HTML5行业前景展望、Egret开发实践、以及大家在HTML5游戏中的开发分享总结等目前行业各界关注的内容。在如此寒冷的冬季,白鹭时代为HTML5移动游戏行业点燃了一份激情。

沙龙伊始,Egret白鹭引擎联合创始人马鉴为大家介绍了HTML5移动游戏领域新生态。马鉴认为,如今大型的原生游戏发展缓慢,主要在于发行模式的固化,一定程度限制了整个市场更上一层楼。开发商面对渠道和发行为王的大环境,面临越来越艰难的选择。而未来移动游戏的发展趋势,应该是HTML5生态与移动App共赢的状态。现在众多的开发商、发行商、渠道商都开始在这个领域大力投入,使得HTML5前景持续看俏,应用触角更伸展至手机、平板、电视甚至可穿戴移动设备等各类连网装置,为HTML5移动游戏市场带来了莫大商机。

随后,Egret白鹭引擎社区技术经理张鑫磊(A闪)为大家带来了主题为《Egret打造高性能HTML5游戏》的分享内容。介绍了Egret白鹭引擎在本月发布的最新版本1.5中对性能优化的新功能。其中涉及到引擎的脏矩形、弹性跑道模型、模块化编译等相关技术。同时,借助Egret Runtime可加速Egret HTML5游戏,让HTML5游戏在移动端拥有接近原生性能与品质。

紧接着,Egret白鹭引擎高级研发经理张晨为大家介绍了Egret最新的开发工具:Egret Wing与EgretVS。通过Egret Wing可以快速开发游戏界面,使用Egret Wing与EgretVS搭配使用可快速提高游戏开发效率,让游戏开发变得简单高效。

临近沙龙尾声,来自Egret社区的开发者代表张宇,结合他在使用Egret白鹭引擎开发游戏的一些实战经验进行了分享;网易前端工程师魏阳(小恐龙)通过简单的优化技巧,包括混色,碰撞检测,横版适配和效率优化等,教现场的大家用HTML5做一款效率与效果并存的打飞机游戏;最后压轴嘉宾来自HTML5游戏创业者起源天泽的CEO谭凯,带来“Canvas优化技巧,不仅是程序的工作,更是团队的配合,其中缩小分辨率,禁用旋转,双重刷新是几个重要的优化手段,结合美术射击来使用,会极大的提升游戏的质量和体验”的精彩分享。

移动互联网市场,APP派和Web分成两大阵营争斗已久。App素以良好的用户体验迅速俘获用户芳心,沐浴无尽恩宠。然而,原生APP受制于跨平台开发和运行的难题,其发展的极限已经浮现,在移动游戏领域同样如此。HTML5技术的兴起,特别是白鹭时代携引擎、工具和运行时到来,让移动游戏拥有了面向HTML5技术转型的基础。

白鹭时代此前发布的全新的Egret Engine 1.5引擎,以及一系列的开发工具和运行时,不但继续强化了HTML5移动游戏的开发服务,同时让基于Egret Engine(白鹭引擎)开发的移动游戏,具备了媲美原生App游戏的用户体验。相信在不久的将来,HTML5移动游戏,与原生的App游戏,将会成为两大主流,为广大用户,带来更加多样化,同时更具体验感的移动游戏。

关于Egret Engine:

Egret Engine(白鹭引擎)是白鹭时代推出的一款基于TypeScript语言构建的开源免费的移动游戏引擎。通过白鹭引擎,开发者可以快速地创建可以运行在手机App的WebView或浏览器中的HTML5移动游戏,也可以编译输出成基于Android、iOS、Windows Phone的跨平台原生移动游戏。

白鹭引擎官网:http://www.egret-labs.org/

事Web前端开发,HTML5语言是绕不开的话题,学好HTML5语言对于从事Web前端开发的人非常重要。那么,在广州Web前端培训班学习的人要如何学好HTML5语言呢?下面,小编就给大家分享一下。

1、基础

如果之前接触HTML4,可以尝试着去学习HTML5,如果没有基础建议去w3cshool官网了解一下HTML、css(css3)及JavaScript等知识。

2、建立逻辑思维

HTML5基础打好后,逻辑思维是下一步晋级必须面对的问题,这个阶段也许新手会感到复杂和棘手,但是如果你能迎难而上坚持下来不断自我总结,这是成为大牛必须经历的过程。

3、多跟后端交流

了解一下服务器开发,做前端总是要跟服务器配合的,你要是完全不懂后端,我可以说你的工作会遇到很多问题而且这些问题是完全无法避免的。

4、多实践

你跟大牛的其实不是技术的差别,而是一个项目和一百个项目经验的差别,每做一个项目比你单纯去看一本书实用得多,有机会要多尝试各种类型的开发,不断打破自己的舒适区。

对于零基础的学员如何才能在短时间内成为一名合格的Web前端开发?参加培训班无疑是最高效便捷的方式,千锋广州Web前端开发培训课程结合时下流行技术,三大阶段帮助学员从基础到进阶:

1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局,WebApp页面布局,还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。

2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能,实现网站上的交互效果,以及模块化应用等,实现完整的前端工程。

3、Web前端框架、混合开发(Hybrid,RN)、大数据可视化。主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架、大数据可视化等。学习目标是可以独立完成相应的项目,如微信场景,应用Vue.js/Ionic/React.js等框架开发WebApp,微信小程序项目开发,以及各类混合应用项目开发等。

上周分享的“企业移动化诉求与开发者之间的矛盾”一文中,与大家分享了跨平台技术的解决之道,而本文将进一步介绍跨平台技术的分类,并深度揭示APICloud混合开发技术的技术原理。

快速阅读:怎么办?企业移动化诉求与开发者之间的矛盾能调和吗

跨平台技术的分类

目前跨平台技术领域分为两个发展方向:

第一个是HTML5 + Native混合方向;

第二个是中间语言编译方向,其中APICloud和小程序都属于前者。

HTML5 + Native混合,也就是我们通常所说的混合开发。

这种模式的开发主体是HTML5,但整个app的架构是Native架构:通过HTML5快速实现app的UI布局、产品业务逻辑,在开发过程中涉及HTML5无法实现或者体验不好的功能,则借助Native模块来实现。

混合开发在保证app渲染效率和用户体验的同时,能够降低app开发成本和复杂度,提高app开发效率。

中间语言编译方向,代表产品为React Native(RN),Xamarin以及Google刚刚发布的Flutter。

如何理解中间语言编译?

以RN为例,传统的app开发,要求开发者使用Android和iOS原生技术-Java、Object-C、C/C++等进行开发,而RN的开发过程则要求开发者使用JS进行编码输出app,但在app执行过程中,JS又映射回到安卓和iOS原生层面执行。借助JS快速实现编码,翻译为原生代码执行,这就是中间语言编译方向。

Xamarin则要求使用微软自己的语言C#,对于大部分开发者而言,C#的学习成本比较高且Xamarin需要付费使用,因此它目前在国内应用比较少。Flutter的开发语言为Dart,它是谷歌发明的编程语言,这个语言很有趣,它的语法类似于C语言,又将JS和Java的一些设计思想以及语法规则融合了进去。Dart语言在此前应用比较少,可参考的资料不多,开发者上手需要一个过程。

Html5到跨平台app应用

每一项新兴技术的出现和流行,都是为了规模化的去统一解决一系列复杂问题,APICloud选择混合开发方向,目的是希望借助HTML5降低app开发复杂度,提高app开发效率。

通过工程化的实践手段,我们首先设计了一个app开发引擎。简单的向大家介绍一下这个引擎的架构:

整个引擎基于Android和iOS系统的原生技术架构

最上层为app应用层,涉及到业务以及功能相关的部分,要求开发者使用HTML + CSS进行UI布局和渲染,功能和业务逻辑则通过JS实现,这是app开发者直接参与的地方。

第二层则是API层,API层核心的功能是桥接和管理,负责JS与Java,JS与Object-C之间的通讯,管理API的分发,以及一些JS-Framework的加载和执行。

引擎与模块的API通过这里向开发者开放

接下来是引擎,引擎主要负责应用的消息命令管理、事件管理、模块管理、以及UI渲染。

我们通过将Android和iOS系统的原生窗口机制抽象出来,再模拟原生的方式实现了一个新的窗口系统,由Widget/Window/Frame/UI Model构成,形成混合渲染能力,使得app性能和体验接近原生。

引擎通过开放模块机制,支持动态载入模块,丰富和增强app功能,满足各式各样的需求。

最底下则是OS层,OS层中主要涉及Android和iOS系统之间一些不同的特性,是我们要花大量时间精力进行适配和抽象的地方。

除此之外,一个app还应当具备符合Android和iOS原生app的生命周期特性,例如:如何启动,启动流程以及生命周期事件分发等。

以下是app开发引擎对app生命周期管理的主要处理流程。

引擎触发app的生命周期同原生app一致,触发点来自用户

用户点击桌面的某个图标,或者点击手机状态栏的某个通知,系统会将这个事件分发到对应的app,引擎在收到这个事件后开始初始化。

初始化的过程为:原生窗口系统初始化,展示启动页->HTML5运行环境初始化->加载模块运行环境->事件及消息队列管理初始化->根窗口开始渲染,之后开始加载HTML5页面,这个HTML5页面是整个app的入口。

App启动完毕后进入等待状态,由用户的点击等事件驱动打开新的窗口,加载新的模块,UI更新等。

通过app开发引擎,初步达到了使用HTML5 + Native混合开发,提高开发效率的目的,然而实践过程远比想象的要复杂,为此APICloud在专产品层面付出了非凡的努力。

在浩瀚的人类文明中,得益于计算机的迅速发展和技术的广泛应用,拉开了第三次工业革命的新篇章,与此同时信息技术成为拉动经济的重要增长点。

在移动互联网时代,app开发技术无疑是行业发展的重要驱动力,企业对于产品快速落地与灵活迭代的迫切需求,则使跨平台开发技术广泛应用;而APICloud通过拥有核心知识产权的混合app开发技术,进一步帮助企业快速实现移动互联网布局,并以生态之力为开发者提供全面的技术服务。