egret-docs-master/Engine2D/update/update310
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
573990c0e636e.png fist commit 2024-06-19 13:32:32 +08:00
573990c11bb31.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎,它解决了 HTML5 性能问题及碎片化问题,灵活地满足开发者开发 2D 或 3D 游戏的需求,并有着极强的跨平台运行能力。

在 Egret Engine 的本次更新中,提供了若干新的功能,同时我们吸收开发者的意见修复若干问题。下面介绍 Egret Engine 3.0.8 到 Egret Engine 3.1.0 之间的更新详情。

Egret Engine 2D

在 Egret Engine 2D 的本次更新中,提供了新的滤镜功能,组件实体系统,第三方库——微信扩展播放视频内容。同时吸收开发者的意见修复一些问题。下面列出的是 3.0.8 到 3.1.0 的更新详情。

滤镜

在 Egret Engine 3.1.0 开始提供 WebGL 渲染的颜色矩阵滤镜和模糊滤镜。颜色矩阵滤镜在游戏中常用来在战斗中将“怪物”“灰掉”等功能。模糊滤镜可以实现显示对象的模糊效果。

颜色矩阵滤镜

在 Egret 中使用颜色转换矩阵比较简单,通过新增的 ColorMatrixFilter 即可实现。

var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);
//颜色矩阵数组
var colorMatrix = [
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0,0,0,1,0
];

var colorFlilter = new egret.ColorMatrixFilter(colorMatrix);
hero.filters = [colorFlilter];

首先我们新建了一个显示对象,然后新建了一个颜色转换矩阵 ColorMatrixFilter,并通过显示对象的 filters 属性来设置滤镜。显示对象的 filters 属性包含当前与显示对象关联的每个滤镜对象的索引数组。

灰度效果对比:

在 Egret 中使用滤镜功能还是很方便的,实现效果的关键主要是颜色转换矩阵的设置。

更多效果:颜色矩阵滤镜

模糊滤镜

和颜色转换矩阵类似,使用模糊滤镜也比较简单。实例化一个 BlurFilter 并将其保存到显示对象的 filters 属性中即可。其中示例化 BlurFilter 有两个参数,即为 x 、y 方向的模糊度。

var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);

var blurFliter = new egret.BlurFilter( 1 , 1);
hero.filters = [blurFliter];

模糊效果对比:

需要注意的是模糊滤镜对性能的开销比较大,普通显示对象可以开启 cacheAsBitmap 提高性能。

使用教程:模糊滤镜

组件实体系统

Egret ECS 支持库是一套建立在 Egret 引擎之上的横跨游戏与应用的开发流框架,通过场景文件(.scene)组织静态资源构成运行时画面元素,通过编写组件脚本(.ts)扩展运行期间的行为。

Egret ECS 支持库正在完善中,更多详情请访问:Egret ECS Support Library

微信视频扩展库

通过微信视频扩展库可以在微信中播放带顶部栏的全屏视频。一般用于游戏过场或者广告营销。

微信视频扩展库使用起来也比较简单:

var video = new weixinextension.FullScreenVideo();
//载入视频
video.load('resource/video/mp4.mp4');
//设置封面图
video.poster = "resource/video/bg.jpg";
//显示视频
video.show();
video.addEventListener(egret.Event.COMPLETE,()=>{
    console.log('play complete');
    video.close();
},this)

具体教程:微信视频扩展

修复问题

  • 解决 native 下 Shape 遮罩失效问题。
  • 解决 webgl 下 Shape alpha 为0点击问题。
  • 解决 RenderTexture 绘制子项有 scrollRect 的显示对象异常问题。
  • 解决 RenderTexture 绘制有 mask 的显示对象异常问题。
  • 解决 Shape scale 为0作为遮罩显示异常问题。

获取 Egret Engine

Windows 安装包下载地址:点击这里 Mac 安装包下载地址: 点击这里 Egret Engine 2D 源码地址:点击这里 Egret Engine 3D 源码地址:点击这里