111 lines
4.4 KiB
Markdown
111 lines
4.4 KiB
Markdown
|
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 中使用滤镜功能还是很方便的，实现效果的关键主要是颜色转换矩阵的设置。
|
||
|
|
|
||
|
|
更多效果：[颜色矩阵滤镜](http://edn.egret.com/cn/docs/page/947#颜色矩阵滤镜)
|
||
|
|
|
||
|
|
#### 模糊滤镜
|
||
|
|
|
||
|
|
和颜色转换矩阵类似，使用模糊滤镜也比较简单。实例化一个 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 提高性能。
|
||
|
|
|
||
|
|
使用教程：[模糊滤镜](http://edn.egret.com/cn/docs/page/947#模糊滤镜)
|
||
|
|
|
||
|
|
### 组件实体系统
|
||
|
|
|
||
|
|
Egret ECS 支持库是一套建立在 Egret 引擎之上的横跨游戏与应用的开发流框架,通过场景文件(.scene)组织静态资源构成运行时画面元素,通过编写组件脚本(.ts)扩展运行期间的行为。
|
||
|
|
|
||
|
|
Egret ECS 支持库正在完善中，更多详情请访问：[Egret ECS Support Library](https://github.com/egret-labs/Egret-ECS)
|
||
|
|
|
||
|
|
### 微信视频扩展库
|
||
|
|
|
||
|
|
通过[微信视频扩展库](https://github.com/egret-labs/egret-game-library/tree/master/weixinextension)可以在微信中播放带顶部栏的全屏视频。一般用于游戏过场或者广告营销。
|
||
|
|
|
||
|
|
[微信视频扩展库](https://github.com/egret-labs/egret-game-library/tree/master/weixinextension)使用起来也比较简单:
|
||
|
|
|
||
|
|
```
|
||
|
|
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)
|
||
|
|
```
|
||
|
|
|
||
|
|
具体教程：[微信视频扩展](http://edn.egret.com/cn/docs/page/948)
|
||
|
|
|
||
|
|
### 修复问题
|
||
|
|
|
||
|
|
* 解决 native 下 Shape 遮罩失效问题。
|
||
|
|
* 解决 webgl 下 Shape alpha 为0点击问题。
|
||
|
|
* 解决 RenderTexture 绘制子项有 scrollRect 的显示对象异常问题。
|
||
|
|
* 解决 RenderTexture 绘制有 mask 的显示对象异常问题。
|
||
|
|
* 解决 Shape scale 为0作为遮罩显示异常问题。
|
||
|
|
|
||
|
|
### 获取 Egret Engine
|
||
|
|
|
||
|
|
Windows 安装包下载地址：[点击这里](http://tool.egret-labs.org/EgretEngine/EgretEngine-v3.1.0.exe)
|
||
|
|
Mac 安装包下载地址： [点击这里](http://tool.egret-labs.org/EgretEngine/EgretEngine-v3.1.0.dmg)
|
||
|
|
Egret Engine 2D 源码地址：[点击这里](https://github.com/egret-labs/egret-core/tree/v3.1.0)
|
||
|
|
Egret Engine 3D 源码地址：[点击这里](https://github.com/egret-labs/egret-3d)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|