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

引言

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

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

知识付费专栏

相关推荐
问道飞鱼10 分钟前
【前端知识】强大的js动画组件anime.js
开发语言·前端·javascript·anime.js
k093312 分钟前
vue中proxy代理配置(测试一)
前端·javascript·vue.js
傻小胖13 分钟前
React 脚手架使用指南
前端·react.js·前端框架
程序员海军25 分钟前
2024 Nuxt3 年度生态总结
前端·nuxt.js
m0_7482567836 分钟前
SpringBoot 依赖之Spring Web
前端·spring boot·spring
web135085886351 小时前
前端node.js
前端·node.js·vim
m0_512744641 小时前
极客大挑战2024-web-wp(详细)
android·前端
若川1 小时前
Taro 源码揭秘:10. Taro 到底是怎样转换成小程序文件的?
前端·javascript·react.js
潜意识起点1 小时前
精通 CSS 阴影效果:从基础到高级应用
前端·css
奋斗吧程序媛2 小时前
删除VSCode上 origin/分支名,但GitLab上实际上不存在的分支
前端·vscode