UE5 - 制作《塞尔达传说》中林克的技能 - 15 - 技能基础框架与十字准星

发布于：2025-06-26 ⋅ 阅读:(22) ⋅ 点赞:(0)

让我们继续《塞尔达传说》中林克技能的制作！！！
本章节的核心目标：技能基础框架与十字准星
先让我们看一下完成后的效果：

15_十字准星

1.技能基础框架

1.1 基本思路

  以下操作流程，以遥控炸弹为例。

  1. 打开技能面板

    • 按下键盘Tab键，触发ZSCharBase.ToggleUIAction，进而激活ZSCharBase.ToggleUI_Started() 方法，技能面板随即显示在屏幕中。

  2. 选择遥控炸弹技能

    • 在展开的技能面板里，通过鼠标点击遥控炸弹图标，UIRuneSelection.SelectRune(Name, RuneType) 方法被调用，将遥控炸弹的技能类型赋值给 ZSCharBase.ActiveRune，完成技能选定。

  3. 准备技能释放

    • 按下键盘R后
      • ZSCharBase.PrepareRuneAction触发ZSCharBase.PrepareRune_Started() 执行；
      • ZSCharBase.PrepareRune_Started() 通知 ZSCharBase.ToggleRuneActivity() ，开始执行生成炸弹等施法前准备逻辑。
      • ZSCharBase.ToggleRuneActivity() 调用ZSCharBase.CrosshairAndCameraMode()
      • ZSCharBase.CrosshairAndCameraMode() 触发ZSLayout.HandleCrosshairDisplay() 和 CameraOffset。在屏幕中央显示十字准星，辅助玩家瞄准；另一方面调整摄像机位置和视角。

  4. 技能释放

    • 根据具体的技能（ActiveRune）执行其对应的逻辑。

1.2 准备技能释放

  在玩家选择技能后，按下键盘R进入技能准备阶段。这一过程涉及输入绑定、状态切换后UI反馈的协同工作。

1.2.1 输入绑定实现

通过EnhancedInputComponent将输入动作与处理函数绑定：

// Skill
EIComp->BindAction(PrepareRuneAction, ETriggerEvent::Started, this, &AZSCharBase::PrepareRune_Started);
EIComp->BindAction(CastRuneAction, ETriggerEvent::Started, this, &AZSCharBase::CastRune_Started);
  • PrepareRuneAction： 绑定到PrepareRune_Started函数，负责技能准备阶段的初始化。
  • CastRuneAction： 绑定到CastRune_Started函数，负责技能释放的执行逻辑。

1.2.2 技能准备流程

当PrepareRune_Started被触发时，执行以下核心逻辑：

void AZSCharBase::PrepareRune_Started(const FInputActionValue& val)
{
    // 激活当前技能的选中
    ToggleRuneActivity();
}

void AZSCharBase::ToggleRuneActivity()
{
    // 没有选中技能，则直接返回
    if (ActiveRune == ERunes::R_EMAX) return;

    // 显示/隐藏 十字准星 和 更改摄像机的位置
    bFlipFlopCrosshair = !bFlipFlopCrosshair;
    CrosshairAndCameraMode(bFlipFlopCrosshair);

    // 将角色的移动模式 - 设置回正常行走
    LocomotionManager(EMovementTypes::MT_Walking);

    // 根据选中的技能 执行逻辑
    switch (ActiveRune)
    {
    case ERunes::R_RBB:
        GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Yellow, "Spawn remote bomb BOX!!");
        // 实际项目中会生成炸弹对象并进入放置模式
        break;
    case ERunes::R_RBS:
        GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Yellow, "Spawn remote bomb SPHERE!!");
        break;
    // 其他技能类型...
    }
}

流程说明：

  1. 状态校验： 检查是否有选中的技能（ActiveRune）
  2. UI/摄像机调整： 通过CrosshairAndCameraMode方法切换十字准星显示状态并调整摄像机视角。
  3. 移动模式重载： 确保角色处于正常行走状态。
  4. 技能预加载：根据选中的技能类型执行对应准备逻辑。

1.3 释放技能

 在完成技能准备后，玩家通过输入触发技能释放。

void AZSCharBase::CastRune_Started(const FInputActionValue& val)
{	
	// 根据选中的技能 执行逻辑
	switch (ActiveRune)
	{
	case ERunes::R_EMAX:
		break;
	case ERunes::R_RBB:
		GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Red, "Trigger remote bomb BOX!!");
		break;
	case ERunes::R_RBS:
		GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Red, "Trigger remote bomb SPHERER!!");
		break;
	case ERunes::R_Mag:
		break;
	case ERunes::R_Stasis:
		break;
	case ERunes::R_Ice:
		break;
	default:
		break;
	}
}

流程说明：

  1. 技能类型判断： 根据ActiveRune确定当前选中的技能。
  2. 效果执行： 执行对应技能的释放逻辑（如炸弹爆炸、时停效果等）。
  3. 状态重置： 后续处理。

2.选中技能后的屏幕十字准星

  在技能使用的流程里，当完成技能选定并进入准备释放阶段时，屏幕十字准星的呈现是关键环节，它为玩家瞄准提供了直观指引。以下围绕十字准星的UI设计与功能触发流程展开说明。

2.1 十字准星的UI设计

在这里插入图片描述
说明：

  • 创建了一张图片控件，命名为：IMG_Crosshair。
  • 控件位于屏幕中央，尺寸如图所示。

2.2 十字准星的显示控制逻辑

  技能准备阶段，十字准星的显示/隐藏由蓝图逻辑控制，核心围绕HandleCrosshairDisplay函数展开，对应蓝图节点如下：
在这里插入图片描述
流程拆解：

  1. 触发入口：HandleCrosshairDisplay函数作为控制准星显隐的核心接口，接收Display布尔参数（True:显示，False：隐藏）。
  2. 逻辑判断： 通过Select节点，依据Display参数的值，选择显示准星或是隐藏准星。
  3. 显隐执行：
    • 当Display为True时，蓝图执行可视分支，通过SET节点将IMG_Crosshair控件的可视性设为可见，十字准星随即出现在屏幕中央。
    • 当Display为False时，执行隐藏分支，将IMG_Crosshair控件设为不可见，准星从屏幕消失。

3.摄像机偏移与技能瞄准模式切换

3.1（蓝图）添加时间轴

  1. 创建时间轴

    • 在BP_Player的蓝图中添加一个时间轴组件，并重命名为TL_CameraOffset。
    • 用途：控制摄像机偏移的动画过渡效果。

  2. 配置浮点型轨道与关键帧

    • 添加浮点型轨道，设置轨道的长度为0.2秒。
    • 添加两个关键帧：
      • 关键帧1： 时间 0.0， 值 0.0 （起始状态）
      • 关键帧2： 时间 0.2， 值 1.0 （结束状态）
    • 插值方式：选择自动（Auto） 以实现平滑过渡。

  3. 蓝图逻辑实现（附节点图）
    通过以下蓝图节点，将时间轴与摄像机偏移进行关联：
    在这里插入图片描述

    节点逻辑说明：

    • Camera Offset 自定义事件： 作为触发入口，接收Camera Target Offset 参数。
    • TL_CameraOffset 时间轴： 驱动Alpha值从0->1渐变（对应0.2秒过渡）。
    • Lerp（Vector）插值： 用于Alpha控制摄像机偏移的线性过渡，最终通过Set插槽偏移应用到Camera Boom组件。
       

    关键作用：

      时间轴TL_CameraOffset 让摄像机偏移从0到1平滑过渡（0.2秒完成），避免偏移突变，提升操作手感。后续调整轨道长度或关键帧值，可直接修改偏移的动画速度和幅度。

3.2（蓝图）时间轴与瞄准模式联动实现

  1. 核心功能说明
     当触发技能瞄准（如遥控炸弹准备）时，需要同步完成两大关键动作：

    • 摄像机偏移动画（通过TL_CameraOffset时间轴实现）。
    • 十字准星显示+模式切换（通过Switch rune active mode蓝图逻辑实现）

  2. 时间轴配置（回顾）
     在BP_Player蓝图中：

    1. 添加TL_CameraOffset时间轴，配置0.2秒浮点轨道（关键帧0->0.0、0.2->1.0）。
    2. 通过Lerp 插值 + Set插槽偏移，驱动摄像机平滑过渡（具体见3.1 添加时间轴）。

  3. 瞄准模式切换蓝图解析（新增逻辑）
     技能瞄准的完整逻辑，还需要配合准星显示和模式状态切换，对应蓝图如下：
    在这里插入图片描述

    节点逻辑拆解

    • Event CrossshariAndCameraMode：技能瞄准的总触发入口（按下R键准备释放技能时调用）。
    • Sequence节点：并行执行两个分支逻辑：
      • 分支1（准星显示）：
        • 检查Layout Ref的有效性->转换为UI_ZSLayout ->调用Handle Crosshair Display，控制准星显示/隐藏
      • 分支2（摄像机偏移）：
        • 通过Select节点判断状态->调用Camera Offset事件，传递偏移参数（如Z轴偏移45.0），联动TL_CameraOffset时间轴执行偏移动画
           

    传递45°参数说明

    • 体验层： 让摄像机形成 [ 45°俯视瞄准视角 ]，即覆盖足够瞄准区域，又保留角色空间感。
    • 技术层： 通过Y/Z轴偏移 + 时间轴渐变，实现视角平滑转换；

第15部分完成啦！！
十分感谢大家的阅读、点赞、收藏！！
如果有不足之处，有错误地方，欢迎大家在评论区讨论、批评、指正！！！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布