内容简介:Cocos Creator的官方文档还是非常友好的,有中英文两个版本。官方文档地址:今天主要先带大家简单熟悉一下Cocos Creator的开发流程。
Cocos Creator的官方文档还是非常友好的,有中英文两个版本。
【强烈建议】 初学者先把官方文档看一遍。里面还包含了很多demo。
官方文档地址: docs.cocos.com/creator/man… 。
今天主要先带大家简单熟悉一下Cocos Creator的开发流程。
~~~接下来我们来完成简单的拖拽小游戏吧
开发工具
- Cocos Creator
- Visual Studio Code
Visual Studio Code配置文档地址 docs.cocos.com/creator/man…
正文
1、使用Cocos Creator创建一个新项目
2、在assets中创建一个场景,取名“Drag”
3、双击我们的场景。
4、准备一张图片素材,并放到assets中。
5、把素材拖动到层级管理器中,并放到Canvas节点下
6、创建一个js文件
7、把js添加到场景下
8、用Visual Studio Code打开我们的项目
9、编写脚本,在properties增加一个属性carNode
*** properties: { carNode: { type: cc.Node, default: null } }, *** 复制代码
10、回到Cocos Creator,发现刚添加的属性已经出现在了编辑器中。
11、将小车节点拖动到该属性值的位置
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会帮你打开浏览器并且加载当前游戏
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点击“刷新”按钮,然后再试试看现在小车是不是只能再屏幕内拖动了
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Cocos Creator 入门篇-拖拽小游戏(一)
- 基于eui的白鹭引擎H5小游戏入门总结
- Cocos Creator 入门篇-描摹小游戏(描摹数字,描摹英语字母)
- Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)
- 微信小游戏 - 初体验
- 2018年小游戏开发总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。