zoukankan      html  css  js  c++  java
  • 摇杆控制角色移动

    摇杆控制角色移动

    1. stick监听cc.Node.EventType.TOUCH_MOVE事件,获取stick移动的坐标和朝向,限制移动的范围
    2. 根据stick的朝向,每帧更新player的位置和方向
    • 摇杆的效果
    • player根据摇杆的方向移动
      还要根据摇杆的状态改变player的朝向

    第一次做
    创建空节点,把摇杆要用到的两个图片放进去

    1. 摇杆效果:
      用脚本实现,绑定脚本到joystick节点上
      需要绑定那个要点击的stick

    首先得到并转化坐标
    然后要实现鼠标在哪里点击,中间那个stick就跟到哪里

    结束的时候返回到开始的位置
    接下来控制中间stick的移动范围(几何计算)

    //stick.js
    cc.Class({
        extends: cc.Component,
    
        properties: {
            stick:cc.Node,
            max_r:135,
            //半径,根据用的图片确定
        },
    
        
    
        onLoad () {
        	this.start_pos = cc.v2(0,0);
        	this.stick.setPosition(this.start_pos);
    
        	this.dir = cc.v2(0,0);
        	//内部弹起
        	this.stick.on(cc.Node.EventType.TOUCH_END,function(e){
        		this.stick.setPosition(cc.v2(0,0));
        	},this);
    
        	//外部弹起
        	this.stick.on(cc.Node.EventType.TOUCH_CANCEL,function(e){
        		this.stick.setPosition(cc.v2(0,0));
        	},this);
    
        	this.stick.on(cc.Node.EventType.TOUCH_MOVE,function(e){
        	var w_pos = e.getLocation();  //获取鼠标移动的坐标
        	//把屏幕坐标转换为相对于父节点的坐标
        	var pos = this.node.convertToNodeSpaceAR(w_pos);
        	var len = pos.mag();  //模长
    
        	this.dir.x = pos.x/len;     //cos
        	this.dir.y = pos.y/len;     //sin
    
        	if(len > this.max_r){  //模长大于半径,证明已经出了圆
        		pos.x = pos.x/len * this.max_r;
        		pos.y = pos.y/len * this.max_r;
        	}
        	//实现将stick移动到鼠标点击的位置
        	this.stick.setPosition(pos);
        	},this);
    
    
        },
    
        start () {
    
        },
    
        update (dt) {},
    });
    

    player:
    如果stick动的范围很小,忽略
    计算x,y方向速度分量,sx,sy,然后节点位置变化

    接下来需要解决鼠标移动停止后,player运动不停止的问题
    还有一个就是鼠标向哪个方向运动,player要朝向哪个方向

    player.js
    var stick = require("stick");
    cc.Class({
        extends: cc.Component,
    
        properties: {
           stick:{
            type:stick,
            default:null,
           },
           speed:150,
        },
    
    
        onLoad () {},
    
        start () {
    
        },
    
        update (dt) {
            if(this.stick.dir.mag()<0.5){
                return;
            }
    
            var vx = this.speed * this.stick.dir.x;  //x方向分量
            var vy = this.speed * this.stick.dir.y;
    
            var sx = vx * dt;
            var sy = vy * dt;
    
            var r = Math.atan2(this.stick.dir.y,this.stick.dir.x); //弧度
            var degree = r * 180 / Math.PI; //角度
    
            degree = degree - 90;
    
            this.node.angle = degree;
    
            this.node.x += sx;
            this.node.y += sy;
        },
    });
    
  • 相关阅读:
    BZOJ 3506 机械排序臂 splay
    BZOJ 2843 LCT
    BZOJ 3669 魔法森林
    BZOJ 2049 LCT
    BZOJ 3223 文艺平衡树 splay
    BZOJ 1433 假期的宿舍 二分图匹配
    BZOJ 1051 受欢迎的牛 强连通块
    BZOJ 1503 郁闷的出纳员 treap
    BZOJ 1096 ZJOI2007 仓库设计 斜率优化dp
    BZOJ 1396: 识别子串( 后缀数组 + 线段树 )
  • 原文地址:https://www.cnblogs.com/serendipity-my/p/12941818.html
Copyright © 2011-2022 走看看