Egret 2d 实现黑暗下光照效果

无聊时想自己写个像素的游戏玩玩，想到可能会用到类似黑暗环境下玩家拿着灯的情况就写个玩玩（实际上看了下百度没找到对应的玩意, 可能是我找的姿势不对）

思路：使用blendMode 的 egret.BlendMode.ERASE 新建一个舞台大小的黑框A, 在A中扣个圆圈B，圆圈B用渐变填充。so easy!!!

先来几张图看看效果。。。。

1.先画上方框A(粉红猪小妹的颜色)，圆圈B(绿色的)

2.圆圈B使用渐变填充后效果

3.方框A, 和圆圈B 都使用ERASE后效果：

在呈上代码：

/**黑暗下点亮灯光效果类Made by cyj   2018.04.16
**/
module cyj {export class LightMask extends egret.Sprite{private cirleLight:egret.Shape;private lightMatrix:egret.Matrix;public constructor() {super();this.blendMode = egret.BlendMode.ERASE;this.graphics.beginFill(0xcc00cc);this.graphics.drawRect(0, 0, 500, 500);this.graphics.endFill();this.lightMatrix = new egret.Matrix();this.cirleLight = new egret.Shape();this.cirleLight.blendMode = egret.BlendMode.ERASE;this.addChild(this.cirleLight);}//设置光圈的位置public setLightPos(posx:number, posy:number){this.cirleLight.x = posx;this.cirleLight.y = posy;}//设置背景框的大小public setMaskSize(maskW:number, maskH:number){this.graphics.clear();this.graphics.beginFill(0xcc00cc);this.graphics.drawRect(0, 0, maskW, maskH);this.graphics.endFill();}//设置光圈的大小public setLightValue(light:number){this.lightMatrix.createGradientBox(light*2, light*2, 0, -light, -light);this.cirleLight.graphics.clear();this.cirleLight.graphics.beginGradientFill(egret.GradientType.RADIAL, [0xffffff, 0xd3d3d3,0x888888, 0x000000], [1,0.9, 0.2,0],[0, 50, 180, 255], this.lightMatrix);//这个渐变的参数是自己调的，可能不太理想，谁有好的参数可以留言，谢谢啦。//this.cirleLight.graphics.beginFill(0x00cc00);this.cirleLight.graphics.drawCircle(0, 0, light);this.cirleLight.graphics.endFill();}}
}

调用：Main.ts

/**Made by cyj2018.04.16
**/
class Main extends egret.DisplayObjectContainer {private maskLight:cyj.LightMask = new cyj.LightMask();//背景图private bg:egret.Bitmap;public constructor() {super();this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);}private onAddToStage(event: egret.Event) {this.bg = new egret.Bitmap();this.addChild(this.bg);this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.handleTouchMove, this);//加载图片资源var imgloader:egret.ImageLoader = new egret.ImageLoader();imgloader.addEventListener(egret.Event.COMPLETE, this.handleBgImageLoaded, this);imgloader.load("resource/images/bg.png");}private handleBgImageLoaded(event:egret.Event){var imgload:egret.ImageLoader = event.currentTarget;var bmd:egret.BitmapData = imgload.data;this.bg.bitmapData = bmd;this.maskLight.setMaskSize(this.stage.stageWidth, this.stage.stageHeight);this.maskLight.setLightValue(200);this.addChild(this.maskLight);this.maskLight.x = 0;this.maskLight.y = 0;}//移动光圈位置private handleTouchMove(e:egret.TouchEvent){this.maskLight.setLightPos(e.stageX, e.stageY);}}

是不是So Easy!!!

另外推荐个好听的音乐：http://121.196.196.20/music.php

Egret 2d 实现黑暗下光照效果相关推荐

白鹭php源码,egret 2D引擎源码分析(二) 创建播放器
本帖最后由 fightingcat 于 2016-7-16 00:26 编辑上一篇讲到了引擎的入口runEgret为每一个播放器标签(就是index.html中看到的那个之前web.WebPlay ...
egret与php相连,JavaScript_Mac OS X 系统下安装和部署Egret引擎开发环境，概述 Egret基于TypeScript开 - phpStudy...
Mac OS X 系统下安装和部署Egret引擎开发环境概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对 ...
白鹭安装node_Mac OS X 系统下安装和部署Egret引擎开发环境
概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对于基础支持工具进行安装.需要安装的软件如下: Node.j ...
手把手教你架构3d游戏引擎pdf_白鹭引擎团队即将发布 Egret Pro，并公布后续路线图...
各位开发者好. 春节前,白鹭引擎团队发布了 Egret3D 1.4,引入了大量新特性.上周,白鹭引擎团队发布了 5.2.14 版本,修复了多个白鹭引擎2D渲染器相关的 BUG,接下来我们会在下周继续发 ...
Unity 2D光照（2D Light）和阴影（Shadow Caster 2D）
前言在上一篇我们简单了了解了Unity 2D动画的实现,在这一篇中,我们来学一下Unity的2D Light,给我们的2D动画添加上光照效果,简单的效果图如下: 首先先分享一个B站上别人翻译了的视频 ...
Egret 游戏开发：投篮
前段时间为了推广一个新的公众号,开发了一款名为「投篮达人」(已下线)的小游戏,发布上线之后得到了不错的效果,成功为公众号吸引了很多粉丝.下面就来跟大家分享下开发这款游戏的历程. 需求分析游戏本身其实 ...
使用Direct3D渲染2D图素
> > 使用Direct3D渲染2D图素 2001-09-22 中国游戏开发者.CN 图片及源代码请登陆下面网站: 合作翻译: 中国游戏开发者.CN – mays htt ...
Starling 2D框架简介
本系列是对Introducing Starling pdf的翻译,下文是对adobe开发人员中心的一片日志的转载,地址为http://www.adobe.com/cn/devnet/flashplay ...
Unity3D_(游戏)2D坦克大战像素版
2D坦克大战像素版游戏规则: 玩家通过上.下.左.右移动坦克,空格键发射子弹敌人AI出身时朝向己方大本营(未防止游戏快速结束,心脏上方三个单位障碍物设为刚体) 当玩家被击杀次数>=3 ...

Egret 2d 实现黑暗下光照效果

Egret 2d 实现黑暗下光照效果相关推荐

最新文章

热门文章