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

原创 2018年04月16日 20:17:41
无聊时想自己写个像素的游戏玩玩,想到可能会用到类似黑暗环境下玩家拿着灯的情况就写个玩玩(实际上看了下百度没找到对应的玩意, 可能是我找的姿势不对)

思路:  使用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 cyj
	2018.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


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jie1137815160/article/details/79965566

大众点评的吃包子小人等待效果的实现

-
  • 1970年01月01日 08:00

基于egret的点光源光线效果的实现

先上效果图 白色区域为光线区域,黑色区域为阴影区域,光源可以自定义坐标,同时可以添加位图作为光源样式。 代码实现主要包含两个函数,一个是计算光源产生的射线与个图形相交的坐标:getIntersec...
  • J_Giving
  • J_Giving
  • 2017-08-03 16:14:53
  • 196

Unity2D实现贴图凹凸感并接受实时光照效果

先看最终效果: 我们的原图是一个3D模型的截图: 这一效果是通过Shader实现的: (Shader代码来自国外博客:http://www.thomas-joncorpu...
  • LeoHiJack
  • LeoHiJack
  • 2015-07-03 16:47:09
  • 4552

【Cocos2d-x】视线和光线:如何创建 2D 视觉范围效果

【Cocos2d-x】视线和光线:如何创建 2D 视觉范围效果 云里来.雾里去 Android客户端下载:sight_and_light-debug.rar ...
  • llb19911212
  • llb19911212
  • 2014-10-21 20:40:32
  • 1112

2D游戏平滑的迷雾战争效果

最近刚好有做2D游戏的点光源效果,然后就扩展一下,研究了一下战争迷雾的效果。主要是想实现类似魔兽争霸那种人物走动,然后黑色的战争迷雾随着人物的移动渐渐打开的效果。使用具有渐变透明图片作为光源来使得战争...
  • sujun10
  • sujun10
  • 2017-03-08 09:51:40
  • 3129

2D游戏新手引导点光源和类迷雾实现

一、新手引导需要的遮罩效果一般做新手引导的时候,会把游戏画面变的半黑,然后需要玩家点击的地方就亮起来。常用的做法是采用遮罩来实现,但是只能实现方形的,不能不规则图形,以及是完全挖空,做不到渐变效果(除...
  • sujun10
  • sujun10
  • 2017-02-24 09:50:27
  • 1787

2D的RPG游戏人物角色移动代码(以egret游戏引擎、TypeScript语言为例)

一般2D的RPG人物移动有三种: (一)背景固定,角色移动 (二)角色固定,背景移动 (三)角色移动,背景动态移动 第一种在移动端的游戏比较少见,但在PC端的模拟类游戏比较常见,因为屏幕较大,背景固定...
  • a727911438
  • a727911438
  • 2016-10-15 11:02:54
  • 2601

cocos2d-x颜色混合模式完成光照效果

使用Cocosd-x3.2的颜色混合功能和裁剪功能完成光照效果,简单易用,效果图如下: 代码://底图,光照图(一般是有透明度的白色图) 光移动的时间,循环次数 Node * HelloWorl...
  • xjw532881071
  • xjw532881071
  • 2015-04-16 16:12:28
  • 1789

2DSprite添加Light照射(Unity3D开发之十六)

今天项目中需要用到黑夜灯光照射,由于普通的2DSprite使用的材质是不接收光反射的。所以我们必须修改Sprite Renderer的材质。第一步,建立工程下面是我建立的工程,你会发现Point l...
  • yanghuiliu
  • yanghuiliu
  • 2015-05-06 12:11:13
  • 4138

【Egret】 2D 使用中的一些疑难解决技巧!

1.问题:声音在ios上无法播放 解决方法:①首先需要预加载一个声音 ②然后目前只有点击之后才能播放声音,不能默认播放 2.问题:滚动条问题 ...
  • arvin0
  • arvin0
  • 2016-03-23 10:55:58
  • 3682
收藏助手
不良信息举报
您举报文章:Egret 2d 实现黑暗下光照效果
举报原因:
原因补充:

(最多只允许输入30个字)