Cocos Creator 入门篇-拖拽小游戏(一)

栏目: 后端 · 发布时间: 6年前

内容简介:Cocos Creator的官方文档还是非常友好的,有中英文两个版本。官方文档地址:今天主要先带大家简单熟悉一下Cocos Creator的开发流程。

Cocos Creator的官方文档还是非常友好的,有中英文两个版本。

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

官方文档地址: docs.cocos.com/creator/man…

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

~~~接下来我们来完成简单的拖拽小游戏吧

完整代码

github.com/taoxhsmile/…

开发工具

  1. Cocos Creator
  2. Visual Studio Code

Visual Studio Code配置文档地址 docs.cocos.com/creator/man…

正文

1、使用Cocos Creator创建一个新项目

Cocos Creator 入门篇-拖拽小游戏(一)

2、在assets中创建一个场景,取名“Drag”

Cocos Creator 入门篇-拖拽小游戏(一)

3、双击我们的场景。

4、准备一张图片素材,并放到assets中。

Cocos Creator 入门篇-拖拽小游戏(一)

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

Cocos Creator 入门篇-拖拽小游戏(一)

6、创建一个js文件

Cocos Creator 入门篇-拖拽小游戏(一)

7、把js添加到场景下

Cocos Creator 入门篇-拖拽小游戏(一)

8、用Visual Studio Code打开我们的项目

Cocos Creator 入门篇-拖拽小游戏(一)

9、编写脚本,在properties增加一个属性carNode

***
properties: {
    carNode: {
        type: cc.Node,
        default: null
    }
},
***
复制代码

10、回到Cocos Creator,发现刚添加的属性已经出现在了编辑器中。

Cocos Creator 入门篇-拖拽小游戏(一)

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

Cocos Creator 入门篇-拖拽小游戏(一)

12、回到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;
    });
},
***
复制代码

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

Cocos Creator 入门篇-拖拽小游戏(一)

14、试着拖动一下小车试试小车是不是已经可以动起来了

15、有同学可能已经发现小车现在会被拖动到屏幕外边,我们可以试着加一个限定条件限定小车只能在屏幕内拖动试试,以下是实现代码:

***
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;
    });
},
***
复制代码

16、回到Cocos Creator点击“刷新”按钮,然后再试试看现在小车是不是只能再屏幕内拖动了


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网站项目管理

网站项目管理

[美] 阿什利·弗里德莱因 / 李保庆、杨磊、王增东 / 电子工业出版社 / 2002-11 / 32.00元

这本书全方位地介绍了如何建立和最终交付一个具有很高商业价值的成功网站,讲解从项目管理的角度入手,撇开烦琐的技术细节,更加关注Web项目实施中诸如成本、进度、工作范围等问题,涉及了一个商业网站在实施过程中可能遇到的所有管理细节。书内附国际一流网站开发专家的深邃见解;涵盖了网络项目管理的关键原则及案例研究;通过友情链接,还为读者提供了模板、论坛、术语表、相关链接以及有关因特网知识的测验题。一起来看看 《网站项目管理》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具