你知道怎么实现王者荣耀这些英雄的坐骑效果吗?

引言

一文教会你3d游戏角色如何上坐骑。

坐骑 是许多游戏中常见 的一个元素MOBA (多人在线战斗竞技场)游戏中也不例外,如《王者荣耀》中的关羽、庄周、成吉思汗和阿古朵等等。

本文将介绍如何在Cocos Creator 中实现3d游戏角色上坐骑,非常详细

本文源码和源工程在文末获取,小伙伴们自行前往。

1.什么是坐骑?

坐骑 通常是指玩家角色 可以骑乘生物或交通工具

这可以包括各种形式 ,如马、飞龙、机械载具等。

坐骑 在游戏中的作用可以是增加 玩家的移动速度提供 额外的防御或攻击 能力,或者仅仅是为了增加 游戏的趣味性和多样性

我们接着来看。

2.3d游戏角色上坐骑的关键是什么?

以下是3d 游戏角色上坐骑的关键

  • 上下坐骑的控制:需要有便捷的上下坐骑操作,可以是按钮或者屏幕上下滑。
  • 坐骑挂点:需要准确地把角色上的点的位置(一般是屁股),挂载到骑乘点上。
  • 角色控制:角色在上坐骑之后,控制的目标需要修改成坐骑,包括移动、攻击、技能等等。
  • 相机跟随:角色在上坐骑之后,相机的跟随目标需要改成坐骑。
  • 动画和骨骼系统:为了实现角色上下坐骑的平滑过渡,需要精心设计和实现动画系统。

话不多说,一起来看下如何在Cocos Creator中实现3d游戏角色上坐骑。

3.一起来实现3d游戏角色上坐骑

我们根据以下的步骤一步一步来实现3d游戏角色上坐骑:

1.环境

引擎版本:Cocos Creator 3.8.1

编程语言:TypeScript

2.资源准备

首先 我们去菜市场 (Cocos商城),找到阿姨们免费送的 ,来用作我们本次演示效果的资源。

创建项目 并且将模型资源复制进工程:

没错 是我,给主角屁股 上添加一个挂点slot_point,保证屁股坐在坐骑上

然后 给每个坐骑添加一个slot_mount挂点,主角上坐骑后坐的位置:

添加角色控制组件 以及上坐骑前的动画效果组件

想要挂载自定义节点受动画驱动的骨骼 上,必须先在此注册挂点。

简单来说 ,想要上坐骑后角色随着坐骑的动画一起动,就要注册。

这是第一个关键 ,添加一批按钮控制上下坐骑 ,有条件的小伙伴可以实现一下上下滑进行上坐骑。

下面我们一起来注入灵魂。

3.编写代码

这是第二个关键 ,首先我们要明确如何把主角添加到坐骑身上 ,并且保证主角 上的某个点与坐骑 上的某个点位置和旋转一致。

  • 先记录 主角屁股位置和旋转 ,用于下坐骑 时进行恢复,保证下次正常上坐骑
  • 把主角的屁股 先移到坐骑坐点 上,然后把主角移动到屁股上。(???)
  • 把屁股的位置和旋转 重置,使其与坐骑坐点的位置和旋转一致。
  • 把主角的父节点 修改成坐骑坐点 ,把屁股恢复

核心代码如下:

这是第三个关键 ,主角上坐骑之后需要把控制的目标修改成坐骑。

这是第四个关键 ,然后把摄像机的跟随目标也修改成坐骑。

主角下坐骑 的实现比较简单,把该恢复的恢复即可。

这是第五个关键 ,笔者用一个简单的组件实现了主角上坐骑前,坐骑的简单动画。

动画的关键,球坐标计算与变化,含金量高:

4.效果演示

坐骑效果1。

坐骑控制。

下坐骑。

坐骑效果2。

坐骑效果3。

结语

看到这里相信你已经学会 了实现3d游戏角色上坐骑

源码获取方式如下:

  • 通过阅读原文获取。

  • 通过私信 发送"MountDemo"获取。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒,想要个在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui