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

2024-02-12 09:08

本文主要是介绍2D游戏新手引导点光源和类迷雾实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

一般做新手引导的时候,会把游戏画面变的半黑,然后需要玩家点击的地方就亮起来。常用的做法是采用遮罩来实现,但是只能实现方形的,不能不规则图形,以及是完全挖空,做不到渐变效果(除非美术直接出整张资源)。表现效果如下:
这里写图片描述
实事上,我们想做把那个透明框做得更自然一点,更好看一点。
也就是类似火把,点光源的效果。比如下面游戏的画面那样:
这里写图片描述
比较效果,肯定是类似点光源酷多了。
既然要这样的效果,那肯定得出我们图像混合大法了。

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

  1. 这里是采用一张美术出的具有渐变效果的图片来实现类似点光源的效果的。美术图如下:
    这里写图片描述
    实际上,想要更好的效果,美术可以把这个图片做得更精细一些,这里我把角色阴影来做的。
    如果想要实现点光源的动画效果,那么出多几张这个图片,形成动画效果就可以了。
  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();elserole.stopDrag();}}
}

这篇关于2D游戏新手引导点光源和类迷雾实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/702236

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组