【制作100个unity游戏之26】unity2d横版卷轴动作类游戏7（附带项目源码）

最终效果

在这里插入图片描述

系列导航

文章目录

最终效果
系列导航
前言
血条能量条UI
- 配置画布
- 绘制血条能量条UI 头像框
延迟虚血
源码
完结

前言

欢迎来到【制作100个Unity游戏】系列！本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第26篇中，我们将探索如何用unity制作一个unity2d横版卷轴动作类游戏，我会附带项目源码，以便你更好理解它。

本节主要是实现人物血条和延迟虚血

血条能量条UI

配置画布

UI适配新的输入系统
在这里插入图片描述
选择我们自己创建的新输入系统

配置画布参数

绘制血条能量条UI 头像框

具体可以看我之前的文章：unity实现延迟虚血，掉血缓冲的血条效果
在这里插入图片描述

新增CharacterEventSO，定义角色事件的ScriptableObject类

[CreateAssetMenu(menuName = "Event/CharacterEventSO")]
public class CharacterEventSO : ScriptableObject {public UnityAction<Character> OnEventRaised;// 定义角色事件被触发时的UnityAction// 触发角色事件的方法public void RaiseEvent(Character character){OnEventRaised?.Invoke(character);// 触发事件并传入角色参数}
}

添加SO配置
在这里插入图片描述

修改Character，触发生命值变化事件，通知UI更新显示

public UnityEvent<Character> OnHealthChanged;// 生命值变化时触发的事件private void Start()
{currentHealth = maxHealth;// 初始化当前生命值为最大生命值OnHealthChanged?.Invoke(this);// 触发生命值变化事件，通知UI更新显示
}public void TakeDamage(Attack attacker)
{//。。。OnHealthChanged?.Invoke(this);// 触发生命值变化事件，通知UI更新显示
}

配置
在这里插入图片描述
新增PlayerStatBar，玩家状态条类，用于显示玩家状态信息


public class PlayerStatBar : MonoBehaviour {public Image healthImage;//生命值显示的图片public Image healthDelayImage;//生命值缓冲显示的图片public Image powerImage;//力量条显示的图片//当接收到生命值变化百分比时更新生命值显示public void OnHealthChanged(float persentage){healthImage.fillAmount = persentage;// 更新生命值显示的填充比例}
}

配置
在这里插入图片描述

新增管理UI界面的类UIManager，响应角色生命值事件的方法，更新玩家状态条显示

// 管理UI界面的类
public class UIManager : MonoBehaviour {public PlayerStatBar playerStatBar;// 玩家状态条[Header("事件监听")]public CharacterEventSO healthEvent;// 角色生命值事件private void OnEnable() {healthEvent.OnEventRaised += OnHealthEvent;// 当启用时订阅生命值事件}private void OnDisable() {healthEvent.OnEventRaised -= OnHealthEvent;// 当禁用时取消订阅生命值事件}// 响应角色生命值事件的方法，更新玩家状态条显示private void OnHealthEvent(Character character){var persentage = character.currentHealth / character.maxHealth;// 计算当前生命值百分比playerStatBar.OnHealthChanged(persentage);// 更新玩家状态条显示}
}

配置
在这里插入图片描述
效果

延迟虚血

修改PlayerStatBar

private void Update(){if(healthDelayImage.fillAmount > healthImage.fillAmount){healthDelayImage.fillAmount -= Time.deltaTime * 0.8f;}
}

效果
在这里插入图片描述

源码

源码不出意外的话我会放在最后一节

完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！

好了，我是向宇，https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者，出于兴趣爱好，最近开始自学unity，闲暇之余，边学习边记录分享，站在巨人的肩膀上，通过学习前辈们的经验总是会给我很多帮助和启发！php是工作，unity是生活！如果你遇到任何问题，也欢迎你评论私信找我，虽然有些问题我也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~

在这里插入图片描述