手游新手引导功能（圆形和矩形遮罩）

最新推荐文章于 2024-05-15 11:16:30 发布
最新推荐文章于 2024-05-15 11:16:30 发布
阅读量1.3k 收藏 8
点赞数 1
分类专栏： 手游开发 UGUI 文章标签： 游戏 游戏开发 unity3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19666459/article/details/106489759
版权

在游戏开发中经常会做新手引导功能，这是我目前在的公司一款手游产品
引导功能会遇到以下几个问题
1：圆形，矩形遮罩
2：事件穿透
3：业务需求（强引导/弱引导）
现在市面上的手游引导可分为强引导，弱引导
我根据策划需求制作的是弱引导 ，在策划配置的触发情况下出现引导，也就是说1引导和2引导之前没有强关联性，便于玩家自由操作
先看下游戏效果图如下
在这里插入图片描述
在这里插入图片描述
上面两张是具体的效果图，下面是遮罩shader根据目标GameObject大小切割成圆形/矩形
在这里插入图片描述
在这里插入图片描述
在本项目中UI层使用的是xlua 后面代码基本以lua 展示

第一点：圆形/矩形shader遮罩

Shader “UIMask/GuideRoundAndRectangleMask”
{
Properties
{
[PerRendererData] _MainTex(“Sprite Texture”, 2D) = “white” {}
_Color(“Tint”, Color) = (1,1,1,1)

	_StencilComp("Stencil Comparison", Float) = 8
	_Stencil("Stencil ID", Float) = 0
	_StencilOp("Stencil Operation", Float) = 0
	_StencilWriteMask("Stencil Write Mask", Float) = 255
	_StencilReadMask("Stencil Read Mask", Float) = 255
	_ColorMask("Color Mask", Float) = 15

	[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0

	_Center("Center", vector) = (0, 0, 0, 0)
	_Radius("Radius", Range(0,2000)) = 1000
	_MaskType("Mask Type",Float) = 0  // 0 圆 1 矩形
	_Rectangle("Rectangle",Vector) = (0,0,0,0)
}

	SubShader
	{
		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
			"PreviewType" = "Plane"
			"CanUseSpriteAtlas" = "True"
		}

		Stencil
		{
			Ref[_Stencil]
			Comp[_StencilComp]
			Pass[_StencilOp]
			ReadMask[_StencilReadMask]
			WriteMask[_StencilWriteMask]
		}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest[unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask[_ColorMask]

		Pass
		{
			Name "Default"
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_ALPHACLIP

			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color : COLOR;
				float2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				UNITY_VERTEX_OUTPUT_STEREO

			};

			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;

			float _Radius;
			float2 _Center;
			float _MaskType;
			float4 _Rectangle;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				UNITY_SETUP_INSTANCE_ID(IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
				OUT.worldPosition = IN.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;

				OUT.color = IN.color * _Color;
				return OUT;
			}
			sampler2D _MainTex;
			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

				if (_MaskType == 0) {
					if (distance(IN.worldPosition.xy, _Center.xy) <= _Radius)
					{
						color.a = 0;
					}
				}
				else {
					//UnityGet2DClipping这个函数实现了判断2D空间中的一点是否在一个矩形区域中
					if (UnityGet2DClipping(IN.worldPosition.xy, _Rectangle))
					{
						color.a = 0;
					}
				}
				return color;

			}
		ENDCG
		}
	}

}
在shader 中标注的很清楚，我们对圆形遮罩定义圆心和半径，根据 (distance(IN.worldPosition.xy, _Center.xy) <= _Radius) 计算 区域是否透明
这里提供lua 调用C#代码设置shader数据代码

/// <summary>
/// 设置圆形点击遮罩
/// </summary>
/// <param name="targetGo"></param>
/// <param name="maskCenterGo"></param>
/// <param name="circleValue"></param>
public void SetCircleGuideMask(GameObject targetGo,GameObject maskCenterGo,float circleValue,float x=0f,float y=0f)
{
    // 设置事件透传对象
    gameObject.GetComponent<EventPermeate>().target = targetGo.gameObject;
    //设置聚焦pos
    Vector3 newV3 = GetScreenPoint(maskCenterGo);
    var center = new Vector4(newV3.x+x, newV3.y+y, newV3.z, 0f);
    material.SetFloat("_MaskType", 0f);
    material.SetVector("_Center", center);
    // 设置半径
    material.SetFloat("_Radius", circleValue);
}

targetGo 是点击业务界面的按钮对象，maskCenterGo 是显示圆形遮罩中心点对象，circleValue 是圆半径，x，y 屏幕中心点偏移，GetScreenPoint（go）是获取go在屏幕坐标

 private Vector3 GetScreenPoint(GameObject go)
    {
        var target = go.GetComponent<RectTransform>();
        if (target == null) return Vector3.zero;
        Canvas canvas = getUICanvas();
        Vector3[] corners = new Vector3[4];
        target.GetWorldCorners(corners);
        var diameter = Vector2.Distance(WordToCanvasPos(canvas, corners[0]), WordToCanvasPos(canvas, corners[2])) / 2f;
        float x = corners[0].x + ((corners[3].x - corners[0].x) / 2f);
        float y = corners[0].y + ((corners[1].y - corners[0].y) / 2f);
        Vector3 center = new Vector3(x, y, 0f);
        Vector2 position = Vector2.zero;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, center, canvas.GetComponent<Camera>(), out position);
        center = new Vector3(position.x, position.y, 0f);
        return center;
    }

C# 设置矩形遮罩

/// <summary>
/// 设置矩形点击遮罩
/// </summary>
/// <param name="targetGo"></param>
/// <param name="maskCenterGo"></param>
/// <param name="circleValue"></param>
public void SetRectangleGuideMask(GameObject targetGo, GameObject maskCenterGo)
{
    // 设置事件透传对象
    gameObject.GetComponent<EventPermeate>().target = targetGo.gameObject;
    RectTransform rec = maskCenterGo.GetComponent<RectTransform>();
    Vector3[] _corners = new Vector3[4];
    rec.GetWorldCorners(_corners);
    Canvas canvas = getUICanvas();
    Vector2 pos1 = WordToCanvasPos(canvas,_corners[0]);//选取左下角
    Vector2 pos2 = WordToCanvasPos(canvas,_corners[2]);//选取右上角
    if(material==null)
    {
        material = GetComponent<Image>().material;
        if (material == null)
        {
            Debug.LogError("GuideMask.cs material == null ");
            return;
        }
    }
    material.SetVector("_Rectangle", new Vector4(pos1.x, pos1.y, pos2.x, pos2.y));
    material.SetFloat("_MaskType", 1f);
}

矩形相关参数我就不一一解释了 和圆形代码参数类似

第二点：事件穿透

这里策划提出的需求是不克隆拷贝引导玩家要点击的按钮，我的做法是将

GetComponent<EventPermeate>().target = targetGo.gameObject

进行事件穿透，只触发目标的点击事件，
EventPermeate.cs源码如下:

public class EventPermeate : MonoBehaviour,IPointerClickHandler,IPointerDownHandler, IPointerUpHandler
{
    [HideInInspector]
    public GameObject target;

    public void OnPointerDown(PointerEventData eventData)
    {
        PassEvent(eventData, ExecuteEvents.pointerDownHandler);
    }
    public void OnPointerUp(PointerEventData eventData)
    {
        PassEvent(eventData, ExecuteEvents.pointerUpHandler);
    }
    public void OnPointerClick(PointerEventData eventData)
    {
        PassEvent(eventData, ExecuteEvents.submitHandler);
        PassEvent(eventData, ExecuteEvents.pointerClickHandler);
    }
    public void PassEvent<T>(PointerEventData data, ExecuteEvents.EventFunction<T> function)
        where T : IEventSystemHandler
    {
        List<RaycastResult> results = new List<RaycastResult>();
        EventSystem.current.RaycastAll(data, results);
        GameObject current = data.pointerCurrentRaycast.gameObject;
        for (int i = 0; i < results.Count; i++)
        {
            if (target == results[i].gameObject)
            {
                ExecuteEvents.Execute(results[i].gameObject, data, function);
                break;
            }
        }
    }
}

第三点：业务需求

策划定了两张表，cfg_noviceGuideBase,引导基础表，cfg_noviceGuideStep引导分步表
在这里插入图片描述
id ：引导的主键ID，skip ：该引导触发后延迟几秒显示跳过按钮 防止用户引导中卡死，condition：该引导触发条件，parameter：参数，priority：优先级，firstStep：引导触发后开始的第一步id 关联到-cfg_noviceGuideStep。
对于：引导分步表
在这里插入图片描述
在这里插入图片描述
我们的引导有断线重连的概念 – 玩家进行引导ID为1，步骤1002 时手机突然断网掉线/或没电关机、再次上线 ID为1的引导是否继续、从哪个步骤开始 由nextStep和key 决定在这里插入图片描述
下面开始说明lua 代码相关
在这里插入图片描述
GuideManager.lua 引导功能管理代码负责引导启动与UI预制体交互的，
GuideActionFactory.lua 输出引导行为工厂代码 根据业务需要有如下UI 表现方式
在这里插入图片描述
下面lua代码是引导行为基类

local ActionBase = INew:new({
	actionType=nil,
	guideStep=nil,
	actionParaDict=nil,
	paraDict=nil,
	showFingle=false,
	textDes = nil,
	fingerType = nil,
	actionWaitTime = 0.2,
	actionCompleteTime = 0.3,
	})
function ActionBase:Init(guideStep,paraDict)
	self.guideStep=guideStep
	self.paraDict=paraDict
	if self.guideStep:IsKeyStep() then
		--GuideManager.StoryStepMgr.ReqNewbieMsg(self.guideStep.stepID)
	end
	self.textDes = self.paraDict.language
	self.fingerType = self.paraDict.fingerDirection
	self.effectData = self.paraDict.behaviorParameter
	self:OnInit(guideStep,paraDict)
end
function ActionBase:SetSkipShow()
	if not self.paraDict.nextStep then 
		GuideManager.SetUIsSkipBtnState(false)
	end
end
function ActionBase:GetTxtDesAndPos()
	if not self.textDes or self.textDes == "-1" then
		return nil
	end
	local tab = string.split(self.textDes,';')
	local posTab = string.split(tab[2],':')
	return tab[1],Vector2.New(tonumber(posTab[1]),tonumber(posTab[2]))
end
function ActionBase:GetFingerData()
	if not self.fingerType or self.fingerType =="-1"then
		return nil
	end
	local pos = self.paraDict.fingerCoordinate
	local posTab = string.split(pos,':')
	return self.fingerType,Vector2.New(tonumber(posTab[1]),tonumber(posTab[2]))
end
function ActionBase:GetStepId()
	return self.paraDict.id
end
function ActionBase:OnInit(guideStep,paraDict)
end
function ActionBase:AddLisnter()
end
function ActionBase:RemoveLisnter()
end
function ActionBase:Action()
	self:ImmediatelyAction()
	uiManager:DelegateLuaFunctionToUnityInvoke(function()
		self:WaitAction()
	end,self.actionWaitTime)
end
function ActionBase:ImmediatelyAction()
end
function ActionBase:WaitAction()
end
function ActionBase:DispatchCompleteMessage()
	EventManager.Dispatch(GlobalsConst.GuideEventID.EVENT_COMPLETE_CONDITION_LOCAL_COMPLETE,{stepID = self.guideStep.stepID})
end
function ActionBase:OnActionComplete()
	self:OnImmediatelyActionComplete()
	self:SetSkipShow()
	uiManager:DelegateLuaFunctionToUnityInvoke(function()
	self:OnWaitActionComplete()
	end,self.actionCompleteTime)
end
function ActionBase:OnWaitActionComplete()
end
function ActionBase:OnImmediatelyActionComplete()

end
function ActionBase:Exit()
	self:OnExit()
end
function ActionBase:OnExit()
end

GuideOpenConditionFactory.lua 引导触发条件工厂类，根据业务需要有如下条件：
在这里插入图片描述
触发条件基类如下：

local ConditionBase = INew:new({
	guidManager = nil,
	conditionType = nil,
	guideId=nil,
	conditionParaDict=nil,
	isPass = false
	})
function ConditionBase:Init(guidManager,guideId,paraDict)
	self.guidManager = guidManager
	self.guideId=guideId
	self.conditionParaDict=paraDict
	self:OnInit(self.guideId,self.conditionParaDict)
end
function ConditionBase:OnInit(guideStep,paraDict)
end
function ConditionBase:IsPass()
	return self.isPass
end
function ConditionBase:AddLisnter()
end
function ConditionBase:RemoveLisnter()
end
function ConditionBase:EnoughScene()
end
function ConditionBase:Exit()
	self:OnExit()
end

GuideStep.lua 是每一个分步的具体操作，就不一一细说了
GuideStepManager.lua 是一个大步下管理若干个分步的管理类
示例工程(2017 unity工程)
guidePackage

FloydsUix
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
guidePackage.unitypackage
09-07
unity3d手游使用shader 制作新手引导功能（圆形和矩形遮罩），C#代码事件事件穿透。根据策划配置 引导
Unity Shader实现新手引导遮罩镂空效果
12-20
这两天实现了下新手引导需要的遮罩镂空shader效果，记录一下。 1、圆形镂空shader代码：     //计算片元世界坐标和目标中心位置的距离 float dis = distance(IN.worldPosition.xy, _Center.xy); //过滤掉距离小于（半径-过渡范围）的片元 clip(dis - (_Radius - _TransitionRange)); //优化if条件判断，如果距离小于半径则执行下一步，等于if(dis < _Radius) fixed tmp = step(dis, _Radius); //计算过渡范围内的alpha值 color.a *=
【Android】实现新手引导遮罩蒙层效果
最新发布
full courage的博客
05-15 691
新功能引导页面，不是app启动时的启动页，而是对新功能页面的某一个按钮或者控件进行高亮，显示一些提示信息，直接在页面上层弹出遮罩蒙层，引导新手用户一步步地熟悉操作，可能一页也可能有多页，部分引导区域还需要做到事件的穿透，部分不穿透
游戏功能模块——新手引导
静风霁
07-06 8992
新手引导 流程图 数据 代码 后续更新
新手引导设计（一)
zhush_2005的博客
06-06 1123
新手引导
Unity3D Shader 引导遮罩,支持圆形、矩形、圆角矩形框
weixin_44802051的博客
02-07 2405
unity3D新手引导遮罩，支持圆形,矩形框,圆角矩形框。图形位置和大小可以根据控件的位置和大小调节，通用所有分辨率设备。黄色区域遮挡，只有白色区域可以点穿。
lua两点角度运算
书生的博客
05-04 3043
-- 根据两点求夹角 function getAngleByPos(p1, p2) local p = {}; p.x = p2.x - p1.x; p.y = p2.y - p1.y; local r = math.atan2( p.y, p.x ) * 180 / math.pi; return r end -- 计算原点到目标点的夹角弧度 function UtilsCal...
lua--平面两点间的距离
u010434924的专栏
06-26 6920
--平面两点间的距离 function mapshopwidget.twoPointToDistance(x1,y1,x2,y2) return math.sqrt(math.pow((y2-y1),2)+math.pow((x2-x1),2)) end
向量距离(Distance)
qq_42898629的博客
10-31 9199
向量是一个有向线段，计算两个向量之间的距离，其实就是计算两个点之间的距 离。 在 Unity 引擎内，我们可以直接通过 Vector3.Distance(v1, v2)来得到 两个向量之间的距离。 数学公式: 例: 公式解析: 1.求两个向量之间的距离，本质就是求两个点之间的距离； 2.用其中的一个点与另外一个点进行相减，本质是两个向量中每个分量的相减运算，最终得到一个新的...
unity3D 新手引导遮罩，支持圆形和矩形框
06-05
本教程将探讨如何在Unity3D中实现一个新手引导系统，特别关注于使用遮罩技术来创建圆形和矩形框的引导效果。遮罩功能使得我们可以控制用户交互的区域，只允许用户在特定区域内进行操作，其余部分则被黑色遮挡，提供...
2DAS3游戏地图角色遮罩和新手引导点光源的实现
02-23
两部分运用例子用AS3实现的 1.角色移动到场景的建筑下面会，会出现角色被档住的部分实现半透明的处理 2.新手引导里类似点光源的效果，指定的部分亮渐变亮起来，其他的黑色半透
论手游新手引导的正确姿势
07-30
论手游新手引导的正确姿势，可以下载参考，欢迎大家下载
Unity新手引导-shader遮罩（完整资源工程）
11-21
本"Unity新手引导-shader遮罩（完整资源工程）"是一个专门为初学者设计的学习项目，它将帮助你理解和实践Shader遮罩技术。在这个工程中，你将会找到一个经过整合和修正的DEMO场景，可以直接运行查看效果，这使得学习...
UGUI新手引导反向遮罩.unitypackage
07-14
UGUI做的反向遮罩，导入资源资源包即可使用，适应于新手引导及各种场合，有什么需要请在下方留言，更多有趣资源请关注我的博客
Unity 光圈遮罩聚焦ui引导
07-08
在Unity引擎中，"光圈遮罩聚焦...通过理解并熟练运用遮罩、光圈效果和UI引导技术，开发者可以创造出更具吸引力和互动性的游戏或应用界面。在实际项目中，可以根据需求调整和优化这些技术，以满足特定的视觉和交互设计。
UGUI 制作新手引导，屏幕遮罩，点击穿透
qq_37302769的博客
01-16 1134
新手引导，UGUI，遮罩镂空，矩形剪裁
xLua中调用C#中操作方法（无返回值，没有ref out修饰参数 最终修改参数值得方法）
qq_36174615的博客
02-06 1297
本人小白，最近在用xLua重构C#代码中遇到了难题，如下： Vector3[] V3Arr = new Vector3[4] RectTransform.GetWorldCorners(V3Arr) 就是这样一个方法，Unity官方文档介绍，首先实例化一个Vector3类型的数组，作为参数传入到方法中，执行方法后将调用实例的RectTransform四个点的世界坐标填充到数组中。顺序依次为左下、...
GameFramWork框架下XLUA使用的无限列表
qq_37297537的博客
06-08 832
GameFramWork框架下XLUA使用的无限列表GitHub原文件地址网上查找到的Scrollview扩展文件，支持无限列表组件脚本源码（这是我修改后的，直接复制吧）操作步骤如果没有使用lua脚本，直接注释或者删除下面的代码和我一样用了XLua+GameFramWork框架的话LuaFormDelegate类中添加EelegatesGensBridge添加委托XLuaCustomExport中加入MyScrollViewlua 的main函数里引用一下具体每个窗口类中获取到组件，然后添加 this:On
unity 新手引导 遮罩
08-01
Unity新手引导遮罩是一种常见的界面设计元素，用于引导新手玩家了解游戏界面和操作。它通常被用于高亮显示特定的界面元素，并给予玩家相应的提示。 Unity中提供了一些内置的方法来创建新手引导遮罩。首先，开发人员可以使用UGUI（Unity的用户界面系统）来创建游戏界面，之后可以添加一张透明的图片作为新手引导的遮罩层。然后，可以使用Unity的2D或3D特效来绘制遮罩层所遮挡住的界面元素。这些特效可以使被遮挡的区域变得模糊或是使其颜色变暗，以突出要引导的界面元素。 在引导过程中，可以根据玩家操作的进度来动态地更新遮罩层的位置和形状。例如，当玩家点击一个按钮时，可以使遮罩层逐渐展开，直到完全显示该按钮为止。还可以使用动画效果来增强引导的效果，如淡入淡出或平滑移动的效果。 同时，为了提供更多的交互性，可以为遮罩层添加响应玩家操作的功能。比如，在遮罩层上添加一个按钮，当玩家点击该按钮时，遮罩层可以自动更新到下一个引导步骤，或者直接跳转至其他相关的功能界面。 总之，Unity的新手引导遮罩是一个非常实用的功能，可以帮助开发人员创建出更具吸引力和易于理解的游戏体验。它不仅可以引导玩家了解游戏的操作流程，还可以提供更好的用户体验，使玩家更容易上手游戏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值