本次引擎2.0.5
编辑工具VSCode
如遇不会某个步骤可以先过一遍之前教程,或者下方评论,感谢支持!
目标:让不听话小方块听话
今天教大家CocosCreator的触摸监听函数;
(游戏内坐标是中心为原点,对于触摸是左下角为原点,需转换)
好了,我们新建一个项目:
然后建个白色背景(Sprite(单色))起名bk,
再建一个红色主角;
我们的主角是怎么不听话的呢?
你点它它就乱跑!
我们给它绑个脚本先:
新建个zhujuejs,哦,记得保存一下场景。
然后我们把脚本绑定在主角上:
打开脚本,让脚本可爱起来。
我们解开onLoad的封印(哈哈),脚本的运行顺序是:onLoad(),然后start(),然后update(dt)
随后update(dt)在游戏的每一帧都调用。
(我们声明一些东西都在onLoad,然后在start中处理。)
好,我们写下一个触摸监听函数:
在onLoad()函数中写下了触摸监听函数,监听的是‘touchstart’,也就是点击开始
(触摸事件有4个:开始时(1次),移动时(n次),在节点中抬起手(1次),在节点外抬起手(1次))
对应的是:
懂了吧,我们来让小方块不听话:
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
this.node.on('touchstart',function(){
//x应该是在-430到430之间运动
this.node.x = -430 + 860*Math.random();
//y应该是在-270到270之间运动
this.node.y = -270 + 540*Math.random();
},this);
},
start () {
},
// update (dt) {},
});
鼠标点下去,它就跑啦~~不听话吧,滑稽!
但是它是瞬间过去的,我们结合动作系统让它飘逸起来。
第一步先加动作:
怎么样,当你点的时候,你会发现,它咻的一下飞出去了。
怎么样?但是不听话的小方块不是好方块。
我们让它听话:
我们改一下监听的动作,监听touchmove。
有的小伙伴问了:我们手指在屏幕上移动时,怎么得到触摸点呢?
这么得到,在function(这里加个event来接受);
但是我们运行的时候会发现节点不在触摸点,这是因为我之前说的,Cocos有两个坐标系,一个触摸的,一个游戏内的。
我们转换一下:
成功是成功了,可是他为什么会抖动加闪烁呢?
哈哈,因为这个:
因为以本节点(主角)为参考,,但主角在动啊!!!!!
那怎么办,找个不动的呗!(主角的父节点是Canvas,不动)
(别告诉我你不会看子节点和父节点,好吧,我简单讲一下,在层级管理器中,默认Canvas是老大,点开它的下拉小三角,那都是它的父节点。同理)
好了,我们以主角的父节点为基准:
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
this.node.on('touchmove',function(event){
var touch_xy = event.getLocation();//获取当前触点位置
//以本节点父节点为参考,转换触摸坐标至游戏坐标
var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
this.node.x = game_xy.x;
this.node.y = game_xy.y;
},this);
},
start () {
},
// update (dt) {},
});
好了,我们的小方块可以听话的跟着触摸点走了呢!
那么下一个问题,怎么回去呢???
简单,加个变量储存就行了。
(给出代码)
cc.Class({
extends: cc.Component,
properties: {
//用于存储坐标
old_xy:null,
},
onLoad () {
//点击后把坐标存好
this.node.on('touchstart',function(){
//this.node.position的用处跟分别给x,y赋值是一样的
this.old_xy = this.node.position;
},this);
//移动
this.node.on('touchmove',function(event){
var touch_xy = event.getLocation();//获取当前触点位置
//以本节点父节点为参考,转换触摸坐标至游戏坐标
var game_xy = this.node.parent.convertToNodeSpaceAR(touch_xy);
this.node.x = game_xy.x;
this.node.y = game_xy.y;
},this);
//触摸结束时
this.node.on('touchend',function(){
//把节点的位置重新给回来
this.node.position = this.old_xy;
},this);
},
start () {
},
// update (dt) {},
});
怎么样,学会了吗?
O(∩_∩)O~~