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();
        }
    }
}
时间: 2024-10-06 14:47:50

2D游戏新手引导点光源和类迷雾实现的相关文章

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

最近刚好有做2D游戏的点光源效果,然后就扩展一下,研究了一下战争迷雾的效果.主要是想实现类似魔兽争霸那种人物走动,然后黑色的战争迷雾随着人物的移动渐渐打开的效果.使用具有渐变透明图片作为光源来使得战争迷雾呈现出平滑的效果.本文后面介绍了两个简单的实现方法,效果有细微的差别,有兴趣的同学可以分别研究.最后也有完整展示代码和提供例子下载. 一.常见的战争迷雾效果 早期的红警的战争迷雾大家应该也比较熟悉,不过看起来没那么平滑,应该是采用图块拼出来.可以明显看得出一些方方块块. 可见早期魔兽争霸2也是没

IOS 2D游戏开发框架 SpriteKit

最近发现Xcode自带的2D游戏开发框架SpriteKit可以直接引入到APP中进行混合开发,这就是说可以开发出既带业务应用又带游戏的苹果APP,咋怎么觉得这是一个自己的小发现....呵呵.....,查了下其实人家早有人这样做了........发现这功能我当然很开了,所以下了两个案例准备学学.以前业余时间也学过一下cocos2d-x这样的跨平台游戏框架,也做过小案例,所以感觉这个框架并不麻烦,而且比cocos2d-x简单.并且这框架我不应该像C2D-X那样学了就扔哪里不管了,因为IOS开发正是我

UWP简单示例(三):快速开发2D游戏引擎

准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 写在前面的话 没有什么比重复造轮子更让人心碎的事情了. (如果有,那就是造了两遍) 是否有必要开发游戏引擎? 现在市面上有很多成熟的跨平台游戏引擎,对个人开发者也较为友好 若你是一名C#开发者,可以选择CocosSharp或Unity3D 尤其Unity3D,用它开发2D和3D游戏一样出色 当然,亲自编写一款简单的2D游戏引擎也是一件让人自信感满满的事情

【2D游戏引擎】WIP反思

WIP(Working In Progress)是我初学游戏引擎开发时候开发的一个2D游戏引擎,当时计划为它实现类似Unity一样的编辑器,具有和Unity相似的工作流,但是由于水平不够,走了很多弯路,闭门造车,做了很多错误的设计,导致很多地方反人类和难以维护,加之时间有限,所以已经停止了对它的继续开发.由于停止了开发,又不想把所有资料都全部搞丢,所以把在开发中学到的东西,和一些自己的思考都记录一下.以便后可以参考. 他最后可以实现这些功能,不过实现起来远比成熟的引擎蛋疼得多: 脚本游戏编程 基

《Unity3D/2D游戏开发从0到1》正式出版发行啦

书籍信息:   书籍的名称: <Unity3D/2D 游戏开发从0到1>   书号(ISBN): 978-7-121-26239-5    出版社: 电子工业出版社   发行时间:2015年7月1日 写作背景:    2015年6月30日我收到电子工业出版社张迪老师寄来,正式发行的<Unity3D/2D游戏开发从0到1>书籍.这本凝结着大半年心血的作品让我感慨万千.   本人从事游戏.软件与教学十多年,一直梦想可以进一步服务于全国广大的游戏与软件从业开发人员.14年下半年电子工业出

(十一)Unity5新特性----实战2D游戏

孙广东  2015.7.11 在本教程中,将了解到U5新功能.你通过本教程.您将了解下面内容: Changes in Component Access Physics Effectors Adding Constant Force Audio Mixer 你能够先下载空的资源项目:起始项目.将其解压缩,然后在 Unity 中打开StarterProject\Assets\Scenes\Main.unity 场景. 您应该看到例如以下所看到的内容: 是一个繁星满天的夜晚背景,相机已经设置了.前景包

《Unity3D/2D游戏开发从0到1》正式出版发行

去年个人编写的Unity书籍正式在2015年7月正式发行,现在补充介绍一下个人著作.书籍信息: 书籍的名称: <Unity3D/2D 游戏开发从0到1> 书号(ISBN): 978-7-121-26239-5 出版社: 电子工业出版社 发行时间:2015年7月1日 写作背景: 2015年6月30日我收到电子工业出版社张迪老师寄来,正式发行的<Unity3D/2D游戏开发从0到1>书籍.这本凝结着大半年心血的作品让我感慨万千. 本人从事游戏.软件与教学十多年,一直梦想可以进一步服务于

Unity 2D游戏开发教程之使用脚本实现游戏逻辑

Unity 2D游戏开发教程之使用脚本实现游戏逻辑 使用脚本实现游戏逻辑 通过上一节的操作,我们不仅创建了精灵的动画,还设置了动画的过渡条件,最终使得精灵得以按照我们的意愿,进入我们所指定的动画状态.但是这其中还有一些问题.例如,我们无法使用键盘控制精灵当前要进入的动画状态,而且精灵也只是在原地播放动画而已.但我们希望精灵在进入到PlayerWalkingAnimation状态时,位置应该发生改变. 要解决这些问题,就需要编写脚本.也就是说,要使用脚本来实现动画的播放控制,以及其它一些游戏的逻辑

Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏

Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏 即使是现在,很多初学游戏开发的同学,在谈到Unity的时候,依然会认为Unity只能用于制作3D游戏的.实际上,Unity在2013年发布4.3版本的时候,就开始提供对制作2D游戏的支持了.例如,提供了一些专用于开发2D游戏的Unity工具.现在Unity已经发布了版本4.5,对2D游戏的支持更是完善了不少.为了说明Unity对2D游戏所提供的支持,本章会使用这些在Unity中原生的工具,开发一个简单的2D游戏.本文选自<Unity