Cocos 2d-js 虚拟摇杆

虚拟摇杆是在手机格斗游戏中经常看到的一个东西，用来控制人物的8个方向的行走，今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆...

// 虚拟摇杆类型
var ROCKER_TYPE = ROCKER_TYPE || {};
ROCKER_TYPE.DEFAULT = "DEFAULT";// 默认类型
ROCKER_TYPE.AUTO = "AUTO";      // 自动类型
ROCKER_TYPE.HIDE = "HIDE";      // 隐藏类型
ROCKER_TYPE.OPACITY = 255;      // 不透明类型// 方向（0表示原点，从1开始，顺时针方向定义出方向）
var ROCKER_DIRECTION = ROCKER_DIRECTION || {};
ROCKER_DIRECTION.RIGHT          = "RIGHT";      // 向右
ROCKER_DIRECTION.RIGHT_UP       = "RIGHT_UP";   // 右上
ROCKER_DIRECTION.UP             = "UP";         // 向上
ROCKER_DIRECTION.LEFT_UP        = "LEFT_UP";    // 左上
ROCKER_DIRECTION.LEFT           = "LEFT";       // 向左
ROCKER_DIRECTION.LEFT_DOWN      = "LEFT_DOWN";  // 左下
ROCKER_DIRECTION.DOWN           = "DOWN";       // 向下
ROCKER_DIRECTION.RIGHT_DOWN     = "RIGHT_DOWN"; // 右下
ROCKER_DIRECTION.ORIGIN         = "ORIGIN";     // 原点// 方向数组
var ROCKER_DIRECTION_ARRAY = [ROCKER_DIRECTION.RIGHT,ROCKER_DIRECTION.RIGHT_UP,ROCKER_DIRECTION.UP,ROCKER_DIRECTION.LEFT_UP,ROCKER_DIRECTION.LEFT,ROCKER_DIRECTION.LEFT_DOWN,ROCKER_DIRECTION.DOWN,ROCKER_DIRECTION.RIGHT_DOWN,ROCKER_DIRECTION.ORIGIN
];// 8个方向的角度数组
var ROCKER_ANGLE_ARRAY = [22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5];// 摇杆精灵
var Rocker = cc.Sprite.extend({_baseNode        : null,      // 底盘[节点]_knobNode        : null,      // 把手[节点]_touchListener   : null,      // 触摸事件[监听器]_radius          : 0,         // 摇杆的可移动半径_angle           : 0,         // 角度_velocity        : cc.p(0, 0),// 速度_callback        : null,      // 回调函数_direction       : ROCKER_DIRECTION.ORIGIN, // 方向_type            : ROCKER_TYPE.DEFAULT,     // 摇杆类型ctor: function(baseTexture, knobTexture, type){this._super();// 加载[底盘和摇杆精灵]this.loadBaseAndKnob(baseTexture, knobTexture);// 加载[配置]this.loadConfig(type);// 注册[监听器]this.registerEvent();// 调度器[触发callback回调函数]this.scheduleUpdate();return true;},onExit : function(){this.unRegisterEvent();this._super();},// 注册[触摸事件监听器]registerEvent : function(){this._touchListener = cc.EventListener.create({event           : cc.EventListener.TOUCH_ONE_BY_ONE,target          : this,swallowTouches  : true,onTouchBegan    : this.onTouchBegan,onTouchMoved    : this.onTouchMoved,onTouchEnded    : this.onTouchEnded});cc.eventManager.addListener(this._touchListener, this);},// 卸载[触摸事件监听器]unRegisterEvent : function(){cc.eventManager.removeListener(this._touchListener);},update : function(dt){if (this._direction != ROCKER_DIRECTION.ORIGIN) {this.onCallback();  // 触发回调函数}},// 加载精灵[_baseNode和_knobNode]loadBaseAndKnob : function(baseTexture, knobTexture){this._baseNode = new cc.Sprite(baseTexture);this._knobNode = new cc.Sprite(knobTexture);this.addChild(this._baseNode);this.addChild(this._knobNode);},// 加载配置[半径_radius和类型type等]loadConfig : function(type){this._radius = this._baseNode.getContentSize().width / 2;if (type !== undefined){if (isNaN(type)){this._type = type;if (this._type == ROCKER_TYPE.HIDE){this.setVisible(false);}}else{this._type = ROCKER_TYPE.OPACITY;this.setCascadeOpacityEnabled(true); // 开启子节点透明度关联this.setOpacity(type);}}},onTouchBegan: function (touch, event) {var target = this.target;var knob = target._knobNode; // 获取把手var locationInNode = knob.convertToNodeSpace(touch.getLocation());var size = knob.getContentSize();var rect = cc.rect(0, 0, size.width, size.height);if (target._type == ROCKER_TYPE.DEFAULT){ // 默认类型if (!cc.rectContainsPoint(rect, locationInNode)) {return false;}}else { // 非默认类型if (target._type == ROCKER_TYPE.AUTO){target.setVisible(true);}target.setPosition(touch.getLocation());}return true;},onTouchMoved: function (touch, event) {// 节点获取var target = this.target;touch.getDelta()var knob = target._knobNode;// 触摸点转为摇杆的本地坐标var locationInNode = target.convertToNodeSpace(touch.getLocation());target.onUpdate(locationInNode); // 角度、方向、速度等更新// 长度获取[当前触摸点相对摇杆中心点]var length = cc.pLength(locationInNode);var radians = cc.degreesToRadians(target._angle);// 限制把手和原点的距离不能超过摇杆的半径if ( length > target._radius){var x = Math.cos(radians) * target._radius;var y = Math.sin(radians) * target._radius;knob.setPosition(cc.p(x, y));}else{knob.setPosition(locationInNode);}},onTouchEnded: function (touch, event) {var target = this.target;if (target._type == ROCKER_TYPE.AUTO){target.setVisible(false);}target.reset();         // 重置target.onCallback();    //  触发回调函数},// 更新[角度、方向、速度]onUpdate : function(pos){// 更新[角度]this.onUpdateAngle(pos);// 更新[方向]this.onUpdateDirection(pos);// 更新[速度]this.onUpdateVelocity();},// 更新[角度]onUpdateAngle: function(pos){this._angle = cc.radiansToDegrees(cc.pToAngle(pos));if (this._angle < 0) {this._angle += 360;}},// 更新[方向]onUpdateDirection : function(){for (var i = 1; i < ROCKER_ANGLE_ARRAY.length; i++) {this._direction = ROCKER_DIRECTION_ARRAY[0]; // 默认向右if (this._angle >= ROCKER_ANGLE_ARRAY[i - 1] && this._angle < ROCKER_ANGLE_ARRAY[i]) {this._direction = ROCKER_DIRECTION_ARRAY[i];break;}}},// 更新[速度]onUpdateVelocity : function(){this._velocity.x = this._knobNode.getPositionX() / this._radius;this._velocity.y = this._knobNode.getPositionY() / this._radius;},// 重置reset : function(){this._knobNode.setPosition(0, 0);this._angle = 0;this._velocity = cc.p(0, 0);this._direction = ROCKER_DIRECTION.ORIGIN;},// 触发[回调函数]onCallback : function(){(this._callback && typeof(this._callback) === "function") && this._callback(this._velocity);},setCallback : function(callback){this._callback = callback;},
});var testLayer = cc.Layer.extend({rocker:null,cocosIcon:null,ctor:function(){this._super(cc.color(150,150,150));this.loadCocosIcon();this._init();return true;},loadCocosIcon(){var node = new cc.Sprite(res.cyan_block);this.addChild(node);this.cocosIcon = node;node.setPosition(cc.winSize.width/2,cc.winSize.height/2);},_init(){var node = new Rocker(res.control_base,res.control_knob,ROCKER_TYPE.DEFAULT);this.addChild(node);node.setCallback(function(vec){this.cocosIcon.x+=vec.x*5;this.cocosIcon.y+=vec.y*5;}.bind(this));node.setPosition(100,100);}
})var testScene = cc.Scene.extend({onEnter:function(){this._super();var layer = new testLayer();this.addChild(layer);}
})

至此摇杆已经封装完毕，在屏幕上可以实现有色方块根据摇杆的方向去移动。

Cocos 2d-js 虚拟摇杆相关推荐

cocos 2d - js
cocos2d - js 知识整理目录结构 index.html main.js代码 project.json文件启动流程导演节点节点常用基本属性节点坐标场景图层Layer 精灵Spr ...
《Cocos Creator游戏实战》虚拟摇杆实现
虚拟摇杆实现摇杆布局实现摇杆功能实现用摇杆控制主角该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成摇杆. 插件地址:http ...
unity中的2D虚拟摇杆和3D虚拟摇杆
源代码链接https://github.com/hiramtan/HiJoystick_unity 如何使用可以从此链接下载最新的unity package: 完成功能 2D虚拟摇杆 3D虚拟摇杆 ...
Unity用UGUI做虚拟摇杆
一.首先点击UI创建两个Image,将Image的Source Image改成自己想要的Texture即可,然后在Canvas下创建一空物体,将两个Image放在空物体下作为他的子对象: 然后为可以拖 ...
如何有趣地「做人」？Cocos 即将推出虚拟角色编辑器
元宇宙热潮之下,被视为"实现元宇宙的必要元素之一"的虚拟人火了.近两年,国内虚拟人项目呈现井喷态势,IDC 预计,到 2026 年中国 AI 数字人市场规模将达到 102.4 亿元 ...
微信小程序之虚拟摇杆练习
这段时间研究了一下微信小程序,对小程序有了大概的了解,由于项目需要做一个虚拟摇杆,查了一下发现跟小程序相关的教程非常少,更别说是具体的一些功能实现如虚拟摇杆,所以还是自己动手做一个吧. 本教程适合对微 ...
EasyTouch中虚拟摇杆的使用EasyJoystick
unity3d自带的虚拟摇杆显然没有EasyTouch好用首先下载这个插件 http://pan.baidu.com/s/1hqJAbTa 下载完成后.导入到unity,可以看看里面的案例找到这个 ...
在d3中使用2D.js获取图形间的交点
在d3中并不没有什么方法能直接获取到两条line.path或两个其他图形的交点,所以我们借助2D.js帮助我们计算交点. 2D.js From kevlindev 以两条线的为例获取svg中两条li ...
cocos 2d CCSprite 触摸识别非常有用！！！！！
cocos 2d 中的CCSprite 无法识别触摸操作,需要自定义类. 解决思想:找到触摸发生的那个点,判断其是否在sprite的矩形区域内完整代码如下: //MySprite.h文件 #impo ...

Cocos 2d-js 虚拟摇杆

Cocos 2d-js 虚拟摇杆相关推荐

最新文章

热门文章