Cocos-2d 3.x 八方向虚拟摇杆的实现

最新推荐文章于 2025-01-24 14:29:33 发布
最新推荐文章于 2025-01-24 14:29:33 发布
阅读量486 收藏 2
点赞数 1
分类专栏： cocos2d-x
本文详细介绍如何在Cocos2d-x中实现一个八方向的虚拟摇杆，并通过角度判断来控制游戏角色移动的方向及速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 八方向虚拟摇杆的实现
准备工作: 我们需要两张图片，一张是摇杆的，一张是摇杆背景的图片
           
           


            将这两张图片拷贝到工程的Resouce目录下， 接下来我们开始编码了.

       打开我们的工程
       创建一个摇杆类继承自Layer
 JoyStick.hpp
     
#ifndef JoyStick_hpp
#define JoyStick_hpp
 
#include "cocos2d.h"
 
class JoyStick : public cocos2d::Layer
{
public:
    virtual bool init() override;
    
    CREATE_FUNC(JoyStick);
    
};
 
#endif

JoyStick.cpp
#include "JoyStick.hpp"
 
USING_NS_CC;
 
bool JoyStick::init()
{
    if (!Layer::init()) {
        return false;
    }
    
    /*1. 创建摇杆的背景*/
    Sprite* rocker_bg = Sprite::create("joystickBg.png");
    rocker_bg->setPosition(Vec2(150,150));
    addChild(rocker_bg);
    
    /*2. 创建摇杆*/
    Sprite* rocker = Sprite::create("joystick.png");
    rocker->setPosition(Vec2(150,150));
    addChild(rocker);
    
    return true;
}

然后在HelloWorld.cpp中将我们的摇杆层添加到场景中
先引入头文件   #include "JoyStick.hpp"
在HelloWorld::init() 函数中添加以下代码
 JoyStick* rocker = JoyStick::create();
 rocker->setPosition(Vec2::ZERO);
 addChild(rocker);

之后开始运行吧， 是不是已经看到有摇杆的雏形了？  我们继续

        


摇杆摇杆， 那我们怎么能让它动起来呢？ 我们为该方法添加触摸事件, 接下来修改我们的源码。
JoyStick.hpp
#ifndef JoyStick_hpp
#define JoyStick_hpp
 
#include "cocos2d.h"
 
class JoyStick : public cocos2d::Layer
{
public:
    virtual bool init() override;
    
    CREATE_FUNC(JoyStick);
    
    virtual void onEnter() override;
    virtual void onExit() override;
    
    virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event) override;
    virtual void onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event) override;
    virtual void onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event) override;
    
private:
    cocos2d::EventListenerTouchOneByOne* listener;  /*定义为成员变量，方便移除监听*/
    cocos2d::Sprite* rocker;  /*方便获取*/
    cocos2d::Sprite* rocker_bg;  /*方便获取*/
    
};
 
#endif 

JoyStick.cpp
#include "JoyStick.hpp"
 
USING_NS_CC;
 
bool JoyStick::init()
{
    if (!Layer::init()) {
        return false;
    }
    
    /*1. 创建摇杆的背景*/
    rocker_bg = Sprite::create("joystickBg.png");
    rocker_bg->setPosition(Vec2(150,150));
    addChild(rocker_bg);
    
    /*2. 创建摇杆*/
    rocker = Sprite::create("joystick.png");
    rocker->setPosition(Vec2(150,150));
    addChild(rocker);
    
    return true;
}
 
/*当前对象被加入到父类节点上会调用该方法*/
void JoyStick::onEnter()
{
    /*首先调用父类的onEnter方法*/
    Layer::onEnter();
    
    /*开启单点触摸的监听, 可以用auto*/
    listener = EventListenerTouchOneByOne::create();
    
    /*可以使用lambda表达式来创建，但那样看起来太乱, 这里我们还是使用回调函数*/
    listener->onTouchBegan = CC_CALLBACK_2(JoyStick::onTouchBegan, this);
    listener->onTouchMoved = CC_CALLBACK_2(JoyStick::onTouchMoved, this);
    listener->onTouchEnded = CC_CALLBACK_2(JoyStick::onTouchEnded, this);
    
    /*注册监听*/
    Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    
}
 
/*当前对象从父类上移除时会调用该方法*/
void JoyStick::onExit()
{
    /*从分发中心移除注册的监听*/
    Director::getInstance()->getEventDispatcher()->removeEventListener(listener);
    
    /*最后调用父类的onExit()方法*/
    Layer::onExit();
}
 
bool JoyStick::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
    /*当触摸开始的时候， 如果触摸点的位置和我们中心点位置的距离 < 圆的半径 我们才能Move*/
    
    /*获取圆心点和半径*/
    float radius = rocker_bg->getContentSize().width / 2;
    Vec2 center = rocker_bg->getPosition();
    
    if (touch->getLocation().distance(center) > radius ) {
        return false;
    } else {
        rocker->setPosition(Vec2(touch->getLocation()));
        return true;
    }
    
}
 
void JoyStick::onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
    /*当触摸移动的时候， 如果触摸点的位置和我们中心点位置的距离 < 圆的半径 */
    
    /*获取圆心点和半径*/
    float radius = rocker_bg->getContentSize().width/2;
    Vec2 center = rocker_bg->getPosition();
    /*获取触摸点位置*/
    Vec2 touch_pos = touch->getLocation();
    float dis = touch_pos.distance(center);
    float angle = acos ( (touch_pos.x - center.x)/dis );
    
    if ( dis <= radius ) {
        rocker->setPosition( Vec2(touch_pos) );
    } else {
        /*如果在上半圆*/
        if ( touch_pos.y >  center.y ) {
            rocker->setPosition(Vec2( center.x + radius*cos(angle), center.y + radius*sin(angle) ));
        } else {
            rocker->setPosition(Vec2 (center.x + radius*cos(angle), center.y - radius*sin(angle)) );
        }
    }
    
    
}
 
void JoyStick::onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
    /*在结束触摸时，将摇杆归为圆点位置*/
    rocker->setPosition(rocker_bg->getPosition());
}


哈哈， 现在我们的摇杆顺利的动起来了！！
接下来我们要判定一下摇杆运动的方向


这是八方向摇杆的角度判定， 弄清楚这个之后， 我们来编码吧

我们先准备一张帧动画的文件， 来测试我们摇杆的判定是否能让它动起来，或者一张图片也行。

我们要让精灵移动的距离和我们的摇杆力度相同

首先定义一个枚举
/*定义摇杆方向的枚举*/
typedef enum direction
{
    STAY = 0,
    UP,
    DOWN,
    LEFT,
    RIGHT,
    R_UP, //右上
    R_DOWN,
    L_UP,
    L_DOWN
    
}RDIRECTION;

判定当前角度的方向
void JoyStick::checkDirection(float angle)
{
    /*右方向*/
    if (angle >= -M_PI/8.0 && angle <= M_PI/8.0) {
        dir = RIGHT;
    }
    /*右边走 -八分之派 到 八分之派*/
    if (angle >= -(M_PI/8.0) && angle <= M_PI/8.0) {
        dir = RIGHT;
    }
    /*右上方向 八分之派 到 八分之三派*/
    else if( angle >= M_PI/8.0 && angle < 3*M_PI/8.0) {
        dir = R_UP;
    }
    /*上方向 八分之三派 到 八分之五派*/
    else if( angle >= 3*M_PI/8.0 && angle <= 5*M_PI/8.0) {
        dir = UP;
    }
    /*左上方向 八分之5派 到 八分之七派*/
    else if( angle > 5*M_PI/8.0 && angle < 7*M_PI/8.0) {
        dir = L_UP;
    }
    /*左方向*/
    else if( (angle >= 7*M_PI/8.0 && angle <= M_PI) || (angle <= -7*M_PI/8.0 && angle >= -M_PI)){
        dir = LEFT;
    }
    /*左下方向*/
    else if( angle > -7*M_PI/8.0 && angle < -5*M_PI/8.0) {
        dir = L_DOWN;
    }
    /*下方向*/
    else if( angle >= -5*M_PI/8.0 && angle <= -3*M_PI/8.0) {
        dir = DOWN;
    }
    /*右下方向*/
    else if( angle > -3*M_PI/8.0 && angle < -M_PI/8.0 ) {
        dir = R_DOWN;
    }
    
}

在onTouchMoved方法中我们调用该方法， 但是注意了，反余弦值没有负数，所以我们要判定，如果触摸点在圆点下方的时候传-angle过去判定方向
    /*获取圆心点和半径*/
    float radius = rocker_bg->getContentSize().width/2;
    Vec2 center = rocker_bg->getPosition();
    /*获取触摸点位置*/
    Vec2 touch_pos = touch->getLocation();
    float dis = touch_pos.distance(center);
    angle = acos ( (touch_pos.x - center.x)/dis );
    if (touch_pos.y > center.y) {
        checkDirection(angle);
    } else {
        checkDirection(-angle);
    }
然后在主场景中就可以使用我们这个摇杆啦， 可以看到我们的精灵是按照摇杆的力度移动距离的


源码下载地址: https://github.com/Kevin20166/JoyStick

--------------------- 
作者：JKevin2016 
来源：CSDN 
原文：https://blog.csdn.net/JKevin2016/article/details/52885137 
版权声明：本文为博主原创文章，转载请附上博文链接！

cocos creator 3.x实现手机虚拟操作杆
baidu_38766085的博客
06-01 1344
在许多移动游戏中，虚拟操纵杆是一个重要的元素，用于控制角色或物体的移动。本文将介绍如何在Unity中实现虚拟操纵杆，提供了一段用于移动控制的代码。我们将讨论不同类型的虚拟操纵杆，如固定和跟随，以及如何在实际游戏中使用这些操纵杆。点击查看。
cocos-creator-joystick::joystick: Cocos Creator Joystick Demo 虚拟摇杆
05-07
cocos-creator-joystick Cocos Creator 虚拟摇杆样例 for Cocos Creator 3.0 for TypeScript (Cocos Creator 2.x) for JavaScript (Cocos Creator 2.x) 中文文档 | 在线预览: 使用 下载 通过文件导入 Cocos Creator v3.x -> 文件 -> 资源导出... -> 选择 -> assets/demo.fire Cocos Creator v3.x -> 文件 -> 资源导入... 通过 Git git clone https://github.com/YunYouJun/cocos-creator-joystick.git 将其作为项目，通过 Cocos Creator v3.x 打开。 你可以在 demo 场景中查看样例。 主菜单：开发者 ->
CocosCreater3.x角色移动之摇杆
最新发布
weixin_63883707的博客
01-24 511
3.x相较于2.x，获取一节点相之于另一节点的相对坐标，不需要先将节点本地坐标转换成世界坐标，再转换为另一节点的父母节点下的本地坐标了。3.x可以直接获取节点的世界坐标，并直接设置其世界坐标，相对应的本地坐标也随之改变，这样修改后人性化很多。对应之前的那篇文章cocoscreater角色移动之摇杆-CSDN博客本文章采用完全相同的逻辑，但编辑器版本是3.8.5的，api也是相对应的。
cocos2dx-lua 笔记 >方向控制 v1
weixin_30764137的博客
09-18 153
一直想找个现成的虚拟摇杆方向控制的插件，但是没有找到，所以就写了一个简单的先用着， 注：并没有按下按钮的动画效果 --[[ 控制层 --]] local CtrlLayer = class('CtrlLayer', function() return display.newLayer('CtrlLayer') end) --方向按钮的size ...
关于cocos2dx虚拟摇杆的lua实现
xlbboy的博客
07-25 1701
看到网上不少虚拟摇杆的代码，但是都是在c++里面实现，非常不方便，所以我自己把c++的代码移植到lua里面 local VitrualController = class("VitrualController", cc.Layer) function VitrualController:ctor(app, name) if self.onCreate then self:on
2D / 3D摇杆控制角色移动（原理讲解 + 源码分享）CocosCreator
bcswkl_的博客
08-22 4583
2D / 3D摇杆控制角色移动（原理讲解 + 源码分享）CocosCreator 源码在末尾 前言 一年前我在Cocos论坛发了一篇封装2D摇杆的文章，因为对角色移动和转向这些逻辑都写在了摇杆脚本里面，有个小伙伴提出了宝贵的建议，我认为他说的很对，就重新整理下再加个3D版本的摇杆。 2D摇杆 效果 如何使用 节点的结构 吸取了上次的教训，这次分两个脚本实现2D摇杆 Joystick放在parent节点（摇杆背景和摇杆中心点父节点）上 Player放在角色上 Joystick.ts import {
SneakyInput Cocos2d-x 2.x版本
04-09
在Cocos2d-x 2.x中集成SneakyInput，开发者可以轻松创建虚拟摇杆和按键，使得在触屏设备上实现类似传统游戏手柄的操作成为可能。这对于移动平台的游戏，尤其是动作、冒险和角色扮演游戏，具有极高的实用价值。 在VS...
cocos2d-x 摇杆
12-09
【cocos2d-x 摇杆】是游戏开发中常用的一种交互元素，它允许玩家通过虚拟摇杆来控制游戏对象的移动。在cocos2d-x这个2D游戏开发框架下，摇杆的实现涉及到多个组件和技术。下面将详细阐述cocos2d-x摇杆的实现原理和...
Cocos2d-x虚拟摇杆实现精灵运动与朝向控制
在Cocos2d-x中实现虚拟摇杆，一般需要以下几个步骤： 1. 设计摇杆的UI界面，包括摇杆的头部（可以滑动的部分）和底座（固定的部分）； 2. 为摇杆头部添加触摸事件监听，监听用户的拖动操作； 3. 在拖动事件中计算...
蓝牙四轴虚拟摇杆，油门控制
02-26
android 四轴上的蓝牙模块通信 虚拟摇杆，油门，可用于游戏、遥控小车、四轴控制 手机蓝牙编程实时遥控各种单片机学习资料 eclipse源码
cocos-creator人物8方向示例更换角色
04-26
使用动画模块简单演示了人物8方向的行动，以及切换角色。
pixijs手游-虚拟键盘demo
02-26
现在很多手游都有虚拟按钮–尤其是那些需要操作高的。那么我们也要紧跟时代步伐，开发一个虚拟按钮插件。http://blog.csdn.net/cdnight/article/details/50751832
cocos2dx3.0 虚拟摇杆 joystic
08-04
根据李华明的的cocos2dx 虚拟摇杆，改写成3.0版本，另有摇杆的使用方法 还有很多欠缺，希望哪位朋友看完之后能够给我宝贵的意见！
Unity笔记:虚拟摇杆思路
云端马匪的博客
06-09 857
一、基本组件装配1.大圆是滑动范围，小圆是手柄。小圆是大圆的子物体。  2.大圆组件挂一个脚本，继承ScrollRect，设置一个滑动半径，允许水平和垂直滑动。  滑动半径R：可以直接用大圆的半径 也可超出或者小于一点点RectTransform类里有类变量rect，rect可以获得矩形的长宽。锚点四个雪花在一起时，sizeDelta就是矩形的长宽 详细见 Anchor Pivot RectTra...
Cocos2d-x3.2实现虚拟摇杆多点触摸
Cocos2d-x,Android,IOS,游戏，HTML5开发/交流/学习/资源 沈大海
09-10 3859
本文重点不是虚拟摇杆，而是多点触摸， 一个Layer控制
Cocos Creator方向与角度转换
local_752的专栏
11-19 9797
1、让一个对象朝着他的方向移动 cc.Node节点的rotation是一个角度，因此，我们为了实现这个目标，首先要根据rotation求出他的dir方向，就好办了。示例代码: update(dt){ //由于Math函数接受的是孤度，所以我们先节节点的旋转转化为弧度 var angle = this.node.rotation / 180 * Math.PI; //合成基于 X正方向的方向向量 var dir = cc.v2(Math.co...
Cocos Creater 3.x 中怎么实现虚拟摇杆
weixin_47410581的博客
03-04 1205
Cocos Creater 3.x 实现虚拟摇杆
Unity关于2D角色序列帧8个方向动作资源优化
热门推荐
u012740992的专栏
12-18 1万+
前提：这里使用的是Unity内置的Animator制作2D序列帧动画，不介绍制作过程。 在用Unity制作2D游戏时，如果动画是用图片序列帧来做，那么有的游戏一个角色动作通常会有八个方向，所以一套动作的图片资源是非常多的。 有些角色动作如向左走和向右走的图片是左右镜像对称的，因此可以只用向左走反转Y轴坐标180度来表示向右走的动作。 如此算来，可以省去8个方向中的3个有镜像对称
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值