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

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

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

实事上，我们想做把那个透明框做得更自然一点，更好看一点。
也就是类似火把，点光源的效果。比如下面游戏的画面那样：

比较效果，肯定是类似点光源酷多了。
既然要这样的效果，那肯定得出我们图像混合大法了。

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

这里是采用一张美术出的具有渐变效果的图片来实现类似点光源的效果的。美术图如下：

实际上，想要更好的效果，美术可以把这个图片做得更精细一些，这里我把角色阴影来做的。
如果想要实现点光源的动画效果，那么出多几张这个图片，形成动画效果就可以了。
实现使用的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();elserole.stopDrag();}}
}

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

2d游戏和 3d游戏的区别
2D游戏和3D游戏的主要区别一.总结一句话总结:2D中的单位就是贴图,3D中的单位还有高 1. 3D 和 2D 游戏的区别主要体现在呈现画面和文件体积上: 2. 借助 3D 引擎可以提升 2D 游 ...
2D游戏和3D游戏的主要区别
游戏的体现形式最主要是 2D 和 3D.最近比较流行的 AR/VR 等,都是属于 3D 类的体现形式. 最初的游戏,2D 是绝对的主流.虽然现如今 3D 游戏大行其道,但是 2D 游戏还是 ...
Unity 2D游戏开发教程之使用脚本实现游戏逻辑
Unity 2D游戏开发教程之使用脚本实现游戏逻辑使用脚本实现游戏逻辑通过上一节的操作,我们不仅创建了精灵的动画,还设置了动画的过渡条件,最终使得精灵得以按照我们的意愿,进入我们所指定的动画状态. ...
Android 2D游戏引擎AndEngine快速入门教程
Android 2D游戏引擎AndEngine快速入门教程介绍:AndEngine是一款知名的Android 2D游戏引擎.该引擎代码开源,并且可以免费使用.本书详细讲解如何使用AndEngine引 ...
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏即使是现在,很多初学游戏开发的同学,在谈到Unity的时候,依然会认为Unity只能用于制作3D游戏的.实际上,Unity在2013年发布 ...
Unity 2D游戏开发快速入门（内部资料）
Unity 2D游戏开发快速入门(内部资料) 试读样张:http://pan.baidu.com/s/1hqh5oqw Unity 2D游戏开发快速入门4 前言 Unity是一款综合的游戏开发工具 ...
Unity 4.x 2D游戏开发基础教程
淘宝网店购买地址:http://item.taobao.com/item.htm?spm=686.1000925.1000774.13.0Il2aP&id=39546154468 试读文档下载 ...
bada 2D游戏编程之十——关键帧动画原理
bada 2D游戏编程之十--关键帧动画原理前面提到的逐帧动画有一个关键的缺点就是需要为动画中的每一帧都提供一张单独的图片,由于每一帧的图片都需要单独提供,制作起来比较麻烦,图片量也比较大.用关键帧 ...
《Java 2D游戏编程入门》—— 1.5 创建一个主动渲染的窗口
本节书摘来异步社区<Java 2D游戏编程入门>一书中的第1章,第1.5节,作者:[美]Timothy Wright(莱特),更多章节内容可以访问云栖社区"异步社区"公 ...
mPaaS 月度小报｜为采购而生，全新资源包上架；前端 2D 游戏化互动入门指南
简介:文末福利大放送,速来~ 本月亮点速览技术干货所有前端都要看的 2D 游戏化互动入门基础 mPaaS 动态资源包上新:除了折扣更是便捷小程序市场开放公测,复刻超级 App 模型开发者活动 ...

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

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

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

三、代码实现过程

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

最新文章

热门文章