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

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义