如何看待 HTML5 开源游戏引擎 Egret,HTML5 游戏开发的前景如何

html-css09

如何看待 HTML5 开源游戏引擎 Egret,HTML5 游戏开发的前景如何,第1张

以传统目光来看,PC端HTML5在前端应用被人熟知,但移动互联的兴起,让HTML5可以跨平台使用,具体的可以总结为,一次开发多次利用,这对于搭载 系统的硬件设备适配和开发公司成本节省都是福音!目前很多方面制约移动互联网的发展,HTML5都将一一解决这些问题,手机应用和网页之间的区别也将越来 越少。当然我们学习HTML5开发,不仅仅是能应用在web上,我们也还可以做其他的,例如手机游戏开发,也可以做应用程序开发等都可以,移动互联网时代的到来对HTML5的侧重,高度注重移动端,这不但符合目前企业需求,更是未来的发展趋势。

由于HTML5的富媒体化与富应用化,目前还没有一门前端的开发语言能取代HTML5的主流开发地位,HTML5成为了唯一个支持Android、Windows Phone 、Mac、iPhone、iPad、PC等主流平台的跨平台语言。HTML5不仅可以为用户提供数量大、种类丰富、体验效果更好的应用,还可以为企业节省大量成本投入,让开发更加便捷。毫无疑问,至少在10年之内,HTML5会是Web应用的最佳解决方案,移动互联网领域的主宰者。从事HTML5相关开发工作,就业前景一片光明。

HTML5是一种技术。

Egret是一套完整的HTML5游戏开发解决方案。Egret中包含多个工具以及项目。Egret Engine是一个基于TypeScript语言开发的HTML5游戏引擎,该项目在BSD许可证下发布。使用Egret Engine开发的游戏可发布为HTML5版本,运行于浏览器之中。同时,也可以发布为iOS、Android和WindowsPhone原生程序。

1.draw 这里参数描述了当前画面渲染时候drawcall的次数

2.cost 包含四个参数 enterframe阶段的开销

引擎updateTransform开销

引擎draw开销

html5中canvas draw的开销

3 fps 当前画面的帧屏

x y scalex和y alpha 透明度 rotation旋转

0x+颜色

bitmap 位图

shape 矢量图

textfield

textinput 文本

shape绘制图形

xxx.mask

hitTestPoint(x, y, true)

return boolean

true是看 与图形是否重合

anchorOffsetX anchorOffsetY位置

sprite 算是一个轻量级的显示对象

添加也就是 a.addChild(b)

删除也就是 a.removeChild(b)

在删除的时候,需要注意一点,如果a不是this,而是一个容器或者其他的,那么我们需要先判断它是否存在,如果存在才能进行删除操作。

深度管理就像是一个队列,但是更像是z-序列号这种东西。

Egret中容器的深度都是从0开始的,当一个显示对象第一个被添加到容器中时,它的深度值为0。这个显示对象也处于容器的最底层。当我们添加第二个显示对象的时候,他的深度值为1,并且在第一个显示对象上方。如果两个显示对象发生了相交,那么我们可以从视觉上看到,第二个显示对象遮挡住第一个显示对象。

当我们想讲某一个显示对象添加到一个指定深度的时候,我们需要使用 addChildAt 方法。这个操作很像排队时插队的想象。

使用 addChildAt 方法也非常的容易,具体使用方法如下:

容器.addChildAt( 显示对象, 深度值 )

交换不同对象深度的功能Egret为开发者提供了两个方法。一个是 swapChildren 方法,另外一个是 swapChildrenAt 方法。

两个方法使用方式少有不同,但效果相同,具体使用方法如下:

容器.swapChildren( 显示对象, 显示对象 )

容器.swapChildrenAt( 深度值, 深度值 )

当我们将一个显示对象添加到显示列表中后,我们还可以手动重设这个显示对象的深度。

实现显示对象深度重置的方法是 setChildIndex ,使用方法如下:

容器.setChildIndex( 显示对象, 新的深度值 )

event dispatcher

egret 事件机制包括4个步骤:

按照上方面顺序 依次执行

注册侦听器使用事件发送者的 addEventListener() 将相应的事件分配给侦听器

Egret中有专门的触摸事件类,使用触摸事件时,默认需要打开显示对象的触摸开关,即将 touchEnabled 设置为 true 。

简单的可以绘制矩形、圆形、直线和曲线,参考这个即可:

访问 shp 的 graphics 属性会返回一个 Graphics 对象,操作此对象中的绘图方法即可实现绘图。

调用 beginFill 方法是设置我们矩形的填充颜色,这里我们将填充颜色设置为红色(颜色值0xff0000 ps:0x+color的16进制 ),同时将alpha设置为1,表示完全不透明。

调用 drawRect 方法设置我们矩形的形状,我们绘制了一个 100*200 的矩形。

调用 endFill 方法表示结束当前绘制操作。

具体api参考 egret api

具体api参考 egret api

通常情况下,游戏中或多或少都会带有一些缓动动画。例如界面弹出,或者道具飞入飞出的特效等等。在制作这些缓动动画的时候我们仅仅 希望简单的办法实现这种移动或者变形缩放的效果。Egret中的 Tween 缓动动画类就为我们提供了相关的功能。

具体api参考 egret api

egret自身提供了一个timer计时器。

Timer 的使用方法非常简单,我们只需要关心两个属性,三个方法和两个事件即可。

具体api参考 egret api