Cocos Creator 入门篇-拖拽小游戏（一）

前言

Cocos Creator的官方文档仍是很是友好的，有中英文两个版本。

【强烈建议】 初学者先把官方文档看一遍。里面还包含了不少demo。

官方文档地址 ：http://docs.cocos.com/creator/manual/zh/。

今天主要先带你们简单熟悉一下Cocos Creator的开发流程。

～～～接下来咱们来完成简单的拖拽小游戏吧

完整代码

https://github.com/taoxhsmile/Cocos-Creator-demo1

开发工具

1. Cocos Creator
2. Visual Studio Code

Visual Studio Code配置文档地址http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html

正文

一、使用Cocos Creator建立一个新项目

二、在assets中建立一个场景，取名“Drag”

三、双击咱们的场景。

四、准备一张图片素材，并放到assets中。

五、把素材拖动到层级管理器中，并放到Canvas节点下

六、建立一个js文件

七、把js添加到场景下

八、用Visual Studio Code打开咱们的项目

九、编写脚本,在properties增长一个属性carNode

***
properties: {
    carNode: {
        type: cc.Node,
        default: null
    }
},
***

十、回到Cocos Creator，发现刚添加的属性已经出如今了编辑器中。

十一、将小车节点拖动到该属性值的位置

十二、回到Visual Studio Code，为小车节点添加拖动事件

***
onLoad () {
    //获取小车节点
    let { carNode } = this;
    //添加变量判断用户当前鼠标是否是处于按下状态
    let mouseDown = false;
    //当用户点击的时候记录鼠标点击状态
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有当用户鼠标按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //获取鼠标距离上一次点的信息
        let delta = event.getDelta();
        //移动小车节点
        carNode.x = carNode.x + delta.x;
        carNode.y = carNode.y + delta.y;
    });
    //当鼠标抬起的时候恢复状态
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

1三、切回到Cocos Creator，点击“运行”按钮，Cocos Creator会帮你打开浏览器而且加载当前游戏

1四、试着拖动一下小车试试小车是否是已经能够动起来了

1五、有同窗可能已经发现小车如今会被拖动到屏幕外边，咱们能够试着加一个限定条件限定小车只能在屏幕内拖动试试，如下是实现代码:

***
onLoad () {
    //获取小车节点
    let { carNode } = this;
    //添加变量判断用户当前鼠标是否是处于按下状态
    let mouseDown = false;
    //当用户点击的时候记录鼠标点击状态
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有当用户鼠标按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //获取鼠标距离上一次点的信息
        let delta = event.getDelta();
        //增长限定条件
        let minX = -carNode.parent.width / 2 + carNode.width / 2;
        let maxX = carNode.parent.width / 2 - carNode.width / 2;
        let minY = -carNode.parent.height / 2 + carNode.height / 2;
        let maxY = carNode.parent.height / 2 - carNode.height / 2;
        let moveX = carNode.x + delta.x;
        let moveY = carNode.y + delta.y;
        //控制移动范围
        if(moveX < minX){
            moveX = minX;
        }else if(moveX > maxX){
            moveX = maxX;
        }
        if(moveY < minY){
            moveY = minY;
        }else if(moveY > maxY){
            moveY = maxY;
        }
        //移动小车节点
        carNode.x = moveX;
        carNode.y = moveY;
    });
    //当鼠标抬起的时候恢复状态
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

1六、回到Cocos Creator点击“刷新”按钮，而后再试试看如今小车是否是只能再屏幕内拖动了

注意点

1. 若是想在手机上看到效果图，须要把对应的鼠标事件改为touch事件

by:Tao