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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jie1137815160/article/details/79965566
无聊时想自己写个像素的游戏玩玩,想到可能会用到类似黑暗环境下玩家拿着灯的情况就写个玩玩(实际上看了下百度没找到对应的玩意, 可能是我找的姿势不对)

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


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页