如何用pos求函数(自学 Cocos JS 之 让小公举走起来)

快鱼网 17 0

先上效果图

在Creator编辑器中布局UI

上图是操作流程图

新建场景Checkpoint在场景中增加地图空节点mapmap节点添加TiledMap组件把资源包中的地图文件拖到TiledMap组件上在场景中添加主角空节点herohero节点添加DragonBones组件把资源包中的主角的骨架文件和贴图集文件分别拖到对应的位置上把hero节点拖到map节点里设置地图的锚点是(0, 0)将Player脚本拖到Canvas里把map节点和hero节点分别拖到脚本对应的变量上

至此UI布局结束,现在讲讲里面的逻辑

hero节点拖到map节点里是为了让hero和map在同一坐标系里map的锚点设置成(0, 0)是为了方便坐标计算Player脚本概述

这个是今天的重头戏,约200多行的代码,花了一个多小时写的可能结构不太好,请见谅。欢迎各种批评指正,谢谢。

onLoad函数

这个函数只做了一件事,就是在Canvas节点上注册了一个TOUCH_END事件,且执行了该事件的回调函数

目的是确定主角下一步的移动方向

就是在鼠标或者手指抬起的时候,判断点击屏幕的位置(x, y)距离屏幕中心点的最远距离为主角下一步的移动方向

start函数

这个函数做了如下事情

处理地图,把不需要的图层隐藏设置主角缩到原始大小的0.4倍设置主角初始动作设置主角初始坐标保存每个地图格子的宽高像素值,用于后面计算移动moveCheck函数

这个函数的目的是判断下一个格子是否可以走

有两种条件不可移动

在移动中下个坐标格是阻挡

阻挡是在Tield Map Editor(地图编辑器)里增加了Terrain图层,用图块集里的图块填满整张地图,图块集里的每一个图块给一个TerrainID的属性,如果TerrainID是999表示阻挡,如下图。

moveBegin函数

这个函数目的是根据方向计算下个目标格子的坐标,且播放移动动画,当动画播放一定帧数后执行moveEnd函数

这里用了一个计时器,每20ms执行一次 执行25次 每次移动 nextPos / 25 的像素坐标,计数器执行完自动删除。

moveEnd函数

这个函数就是用来在移动结束之后恢复待机动画的

setMovePos函数

这个函数只调用了一次,就是在start函数里调用,计算了主角的坐标和地图的坐标

setMovePosDelt函数

这个函数就是根据传入的增量移动,设置主角坐标,设置地图坐标

结语

经过这一通的操作,最终实现开头动画的效果

因为时间仓促代码确实没好好整理,也可能有BUG

欢迎交流指正

谢谢

标签: 函数

抱歉,评论功能暂时关闭!