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

一、新手引导须要的遮罩效果

一般做新手引导的时候，会把游戏画面变的半黑，然后须要玩家点击的地方就亮起来。经常使用的做法是採用遮罩来实现，可是仅仅能实现方形的，不能不规则图形。以及是全然挖空。做不到渐变效果(除非美术直接出整张资源)。表现效果例如以下：



实事上，我们想做把那个透明框做得更自然一点，更好看一点。

也就是相似火把，点光源的效果。比方以下游戏的画面那样：



比較效果。肯定是相似点光源酷多了。

既然要这种效果，那肯定得出我们图像混合大法了。

二、AS3实现的相似点光源效果

1. 这里是採用一张美术出的具有渐变效果的图片来实现相似点光源的效果的。美术图例如以下：
   
   

   watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VqdW4xMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描写叙述" title="">
   
   实际上。想要更好的效果，美术能够把这个图片做得更精细一些，这里我把角色阴影来做的。

   假设想要实现点光源的动画效果，那么出多几张这个图片，形成动画效果就能够了。

2. 实现使用的API

DisplayObject.blendMode属性
BlendMode 类中的一个值。用于指定要使用的混合模式。

用到了BlendMode类的两个属性

LAYER : String = "layer"
[静态] 强制为该显示对象创建一个透明度组。

ERASE : String = "erase"
[静态] 依据显示对象的 Alpha 值擦除背景。

有看过我之前文章的读者，可能会发现这API眼熟。没错，是我上篇Blog一样的实现原理

页游《火影忍者》角色和背景遮挡半透明效果的实现

使用的API和使用方法一摸一样。

3. 终于实现的效果图：



4.代码下载地址

2DAS3游戏地图角色遮罩和点光源

选择里面的PointLightTest.as运行看效果

三、代码实现过程

package
{
    import flash.display.Bitmap;
    import flash.display.BlendMode;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    /**
     * 地图透明角色測试样例
     * @author sodaChen
     * Date:2017-2-16
     */
    [SWF(width="1274",height="768")]
    public class PointLightTest extends Sprite
    {
        /** 背景 **/
        [Embed(source = "res/alpha/bg.jpg")]
        private var bgClass:Class;
        /** 透明遮罩背景 **/
        [Embed(source = "res/alpha/alphaBg.png")]
        private var alphaBgClass:Class;
        /** 角色 **/
        [Embed(source = "res/alpha/role.png")]
        private var roleClass:Class;
        /** 角色容器 ，用来存放角色和透明图像的**/
        private var roleContainer:Sprite;
        /** 角色层。仅仅放角色 **/
        private var roleLayer:Sprite;

        //点光源图片(这里拿了人物脚底阴影放大来用)
        [Embed(source = "res/alpha/shadow.png")]
        private var shadowClass:Class;

        public function PointLightTest()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE,onStage);
        }
        private function onStage(evt:Event):void
        {
            //加入背景
            addChild(new bgClass());

            //加入角色容器
            roleContainer = new Sprite();
            //强制为该显示对象创建一个透明度组
            roleContainer.blendMode = BlendMode.LAYER;
            addChild(roleContainer);

            //创建角色层，事实上角色能够不用单独容器。可是必须保证alphaBg在全部角色的最上面
            roleLayer = new Sprite();
            roleContainer.addChild(roleLayer);

            //创建角色并加入到角色容器中
            createRole(300,120);
            createRole(230,550);
            //不会被遮挡的角色
            createRole(400,200);

            //依据显示对象的 Alpha 值擦除背景.这个透明图像必须在最顶层。确保以下的角色会被擦出
            var alphaBg:Bitmap = new alphaBgClass();
            alphaBg.blendMode = BlendMode.ERASE;
            roleContainer.addChild(alphaBg);

            /////////////////////////////文本的正式測试代码啦/////////////////////////////
            //新建一个专门做点光源的顶层容器
            var topContainer:Sprite = new Sprite();
            topContainer.mouseEnabled = false;
            //强制为该显示对象创建一个透明度组
            topContainer.blendMode = BlendMode.LAYER;
            addChild(topContainer);
            //创建半透的黑色遮罩
            var mask:Shape = new Shape();
            //颜色能够选自己喜欢的
            mask.graphics.beginFill(0x000000);
            mask.graphics.drawRect(0,0,1274,768);
            mask.graphics.endFill();
            mask.alpha = 0.5;
            topContainer.addChild(mask);

            //制作点光源，事实上就是新手引导里的光亮部分。

效果挺酷的。比遮罩那种一个方形的框好看多了
            var pointBitmap:Bitmap = new shadowClass();
            //依据显示对象的 Alpha 值擦除背景，就是那个半透的黑色遮罩
            pointBitmap.blendMode = BlendMode.ERASE;
            pointBitmap.x = 290; pointBitmap.y = 70;
            pointBitmap.width = 300; pointBitmap.height = 400;
            var role:Sprite = new Sprite();
            role.addEventListener(MouseEvent.MOUSE_DOWN,onMouse);
            role.addEventListener(MouseEvent.MOUSE_UP,onMouse);
            role.addChild(pointBitmap);
            topContainer.addChild(role);

        }
        private function createRole(roleX:int,roleY:int):void
        {
            var role:Sprite = new Sprite();
            var roleBitmap:Bitmap = new roleClass();
            role.x = roleX;
            role.y = roleY;
            role.addChild(roleBitmap);
            roleLayer.addChild(role);
            role.addEventListener(MouseEvent.MOUSE_DOWN,onMouse);
            role.addEventListener(MouseEvent.MOUSE_UP,onMouse);
        }
        private function onMouse(evt:MouseEvent):void
        {
            var role:Sprite = evt.currentTarget as Sprite;
            if(evt.type == MouseEvent.MOUSE_DOWN)
                role.startDrag();
            else
                role.stopDrag();
        }
    }
}