100个Cocos实例之双摇杆(57/100)

引言

Cocos游戏开发中如何使用双摇杆

哈喽大家好,经过了漫长的假期,不知道小伙伴们都回到了自己的工作岗位了吗?

是的 你没有看错,笔者居然更新了 ,从本篇开始,笔者会恢复给小伙伴们更新实用的Cocos游戏开发文章谢谢大家 的积极捧场的热情,也欢迎小伙伴们积极提供素材和思路

言归正传 ,今天笔者重点为大家介绍一下Cocos游戏开发中如何使用双摇杆

本文100个Cocos实例 中的第57 篇,希望能在职业生涯结束之前能顺利更新完成,话不多说,我们开始吧。

文末有本文相关的源工程,有需要的小伙伴们自行前往哦!

什么是双摇杆

双摇杆控制 是现在游戏中特别是射击类、动作类游戏中常见的交互方式。

通常由两个虚拟摇杆组成:左侧 移动摇杆控制角色移动,右侧攻击摇杆控制攻击方向或技能释放方向。

这种控制方案为移动设备提供了接近主机游戏手柄的操作体验。

前期准备

1.创建/打开项目

首先 ,我们使用Cocos Dashboard创建或者打开我们的游戏项目。

2.资源准备

美术小伙伴的小伙伴,可以找小伙伴帮忙提供一下素材,没有 美术小伙伴的小伙伴可以去到各个AI小伙伴那里看看。

本文 实例主要是通过坦克的操控 来展示双摇杆的实现,左摇杆 主要是用来控制坦克的移动 ,而右摇杆 则是控制炮筒的方向,即攻击方向,素材比较简单,如下:

3.UI编辑

导入 美术素材到项目中,简单拼接一下 ,直到看起来有点像坦克即可,注意区分坦克身体和炮筒部分。

与此同时 ,往项目中导入2个 虚拟摇杆,有现成可以用现成的,没有现成的小伙伴可以自己实现一个,也比较简单。

写代码

1.摇杆部分

摇杆的实现 比较简单,首先是在初始化中,对关键的事件 进行监听,其中包括触摸开始、触摸移动、触摸结束以及触摸取消

触摸开始部分,主要记录一下当前触摸信息,保证是同一次触摸。

紧接着是触摸移动的部分。

这部分 是摇杆实现的关键部分,通过玩家的触摸,修改游标的位置 ,进行一些列的计算,把最终通过摇杆运动把方向和距离 派发出去,让订阅者根据参数进行相应的游戏操作(示例中的移动坦克,改变攻击方向 ),这里我们为了区分双摇杆,把不同摇杆的节点名字也派发出去。

最后是 触摸的结束/取消处理,包括派发移动结束的时间和将摇杆的游标回到正中心的处理。

2.应用部分

首先是初始化部分,我们需要监听由摇杆派发出来的移动和移动结束的事件,做对应处理。

摇杆移动过程中的处理:

炮筒控制摇杆 移动的方向就是炮的方向,我们可以直接通过this._pao.angle = degree; 进行设置。

坦克移动控制摇杆 则通过this._tankeshen.angle = degree;修改坦克身移动方向,于此同时标记this._isMoving = true;正在移动,在update方法中不断更新坦克位置。

update方法中,主要实现坦克的移动以及坦克炮弹的发射。

效果演示

首先是控制坦克移动

接着是控制炮筒的攻击方向

最后是双摇杆同时操作

结语

以上 就是Cocos游戏开发中如何使用双摇杆 的详细文章,相信小伙伴们通过对文章的阅读都已经学会了。

本文源工程 可通过私信 发送 TwinStick 获取。

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

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

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

推荐专栏:

知识付费专栏

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

100个Cocos实例

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

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

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

相关推荐
前端不太难3 小时前
从 Navigation State 反推架构腐化
前端·架构·react
前端程序猿之路4 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
大布布将军4 小时前
⚡️ 深入数据之海:SQL 基础与 ORM 的应用
前端·数据库·经验分享·sql·程序人生·面试·改行学it
川贝枇杷膏cbppg4 小时前
Redis 的 RDB 持久化
前端·redis·bootstrap
JIngJaneIL4 小时前
基于java+ vue农产投入线上管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
天外天-亮5 小时前
v-if、v-show、display: none、visibility: hidden区别
前端·javascript·html
jump_jump5 小时前
手写一个 Askama 模板压缩工具
前端·性能优化·rust
be or not to be5 小时前
HTML入门系列:从图片到表单,再到音视频的完整实践
前端·html·音视频
90后的晨仔6 小时前
在macOS上无缝整合:为Claude Code配置魔搭社区免费API完全指南
前端
沿着路走到底6 小时前
JS事件循环
java·前端·javascript