CocosCreator2.4 物体跟随鼠标或触摸点

前言

项目需求鼠标点击要有效果，移动要跟随，但是看了文档发现坐标系转换会有问题，于是记录下。

效果

注意事项

使用cc.sys.platform来判断平台，保证PC和手机效果一致。

不同平台也要监听不同的事件，PC平台的事件类型是cc.Event.EventMouse手机平台是cc.Event.EventTouch。

使用event.getLocation()之后有两种方式转换坐标

// 手动转换坐标方式
let mouseWorldPos=cc.v3(mousePos.x-cc.winSize.width/2,mousePos.y-cc.winSize.height/2) ;

// 使用cocos方法转换坐标方式
 let mouseWorldPos=this.node.convertToNodeSpaceAR(cc.v3(mousePos.x,mousePos.y));

源码

将需要跟随的Node拖放到FollowItem上

const {ccclass, property} = cc._decorator;

@ccclass
export default class MouseTest extends cc.Component {

    @property(cc.Node)
    followItem: cc.Node = null;


    /**
     * 当物体开启
     *
     * @protected
     * @memberof MouseTest
     */
    protected onEnable(): void {
        //监听手势
        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.on(cc.Node.EventType.MOUSE_DOWN, this.ClickDown, this);
        }else{
            this.node.on(cc.Node.EventType.TOUCH_START, this.ClickDown, this);
        }


        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.on(cc.Node.EventType.MOUSE_UP, this.ClickUp, this);
        }else{
            this.node.on(cc.Node.EventType.TOUCH_END, this.ClickUp, this);
        }

    }

    ClickDown(event){
        console.log("ClickDown");
        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.on(cc.Node.EventType.MOUSE_MOVE, this.ClickMove, this);
        }else{
            this.node.on(cc.Node.EventType.TOUCH_MOVE, this.TouchMove, this);
        }
    }
    ClickUp(event){
        console.log("ClickUp");
        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.off(cc.Node.EventType.MOUSE_MOVE, this.ClickMove, this);
        }else{
            this.node.off(cc.Node.EventType.TOUCH_MOVE, this.TouchMove, this);
        }
    }
    
    /**
     * 鼠标移动
     *
     * @param {cc.Event.EventMouse} event
     * @memberof MouseTest
     */
    ClickMove(event:cc.Event.EventMouse){
        console.log("ClickMove");
        //这里拿到当前坐标
        let mousePos=event.getLocation();

        // 手动转换坐标方式
        let mouseWorldPos=cc.v3(mousePos.x-cc.winSize.width/2,mousePos.y-cc.winSize.height/2) ;
        // 使用cocos方法转换坐标方式
        // let mouseWorldPos:cc.Vec3=this.node.convertToNodeSpaceAR(cc.v3(mousePos.x,mousePos.y));
        this.followItem.position=mouseWorldPos;
    }

    /**
     * 触摸点移动
     *
     * @param {cc.Event.EventTouch} event
     * @memberof MouseTest
     */
    TouchMove(event:cc.Event.EventTouch){
        console.log("TouchMove");
        //这里拿到当前坐标
        let touchPos=event.getLocation();
        
        // 手动转换坐标方式
        let mouseWorldPos=cc.v3(touchPos.x-cc.winSize.width/2,touchPos.y-cc.winSize.height/2) ;
        // 使用cocos方法转换坐标方式
        // let mouseWorldPos:cc.Vec3=this.node.convertToNodeSpaceAR(cc.v3(mousePos.x,mousePos.y));
        this.followItem.position=mouseWorldPos;
    }

    /**
     * 当物体隐藏
     *
     * @protected
     * @memberof MouseTest
     */
    protected onDisable(): void {
        //移除监听
        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.off(cc.Node.EventType.MOUSE_DOWN, this.ClickDown, this);
        }else{
            this.node.off(cc.Node.EventType.TOUCH_START, this.ClickDown, this);
        }

        if (cc.sys.platform==cc.sys.DESKTOP_BROWSER) {
            this.node.off(cc.Node.EventType.MOUSE_UP, this.ClickUp, this);
        }else{
            this.node.off(cc.Node.EventType.TOUCH_END, this.ClickUp, this);
        }
    }
}