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

引言

一文教会你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年游戏主程一起学习设计模式

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

知识付费专栏

相关推荐
To_OC6 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic7 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy7 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志7 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble8 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯9 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜10 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司10 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
kaiking_g11 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js
江华森11 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http