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

引言

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

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

知识付费专栏

相关推荐
_.Switch40 分钟前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光44 分钟前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   44 分钟前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   1 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web1 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常1 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇2 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr2 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho3 小时前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常4 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js