CocosCreator + 在线角色扮演社区(1) 简易教程

http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc
New: 教程司令部已经更新了教程 往后不再使用链式的教程结构

由于这次的代码量偏多 (实际上是因为代码写成一团了= =)
所以介绍会分为3个部分来介绍

建议先看完之前简易系列教程涉及的内容 本次介绍不涵盖已经在简易系列中讲过的步骤

本次的介绍将分为三部分 后两部分将在后面的帖子中涉及

第一部分 也就是这一篇帖子涉及的

我们将介绍如何应用Animation + ActionCallback + Astar(A星寻路) + ConvertTo45(45度坐标转换)

实现人物和地图的移动

首先先直观地感受一下功能吧 整个项目的代码在这里, 请先进行下载 http://pan.baidu.com/s/1jGURm8e,1 http://pan.baidu.com/s/1i4cuO6L,1

下载后解压

然后打开CocosCreator -> 打开其他项目 -> 路径选到有 assert 的目录下 -> 选择文件夹 -> 然后等待CocosCreator加载项目

加载完成后 就 运行来看一下效果吧

画布左上角会显示的偏移 而右上角有一个服务器回传 这是下一次介绍的内容 然后大家试着点击一下画布看一下吧 这里就不演示移动的功能了

后面我们开始吧

这次我只做个代码的介绍 后面会讲如何拷贝一个项目 然后大家自己再折腾吧 有什么问题回帖 我就不从头写代码了

首先我们将背景添加进来 在canvas下新建精灵 Sprite 重命名为ground

然后呢 将我们准备好的ground添加到资源管理器image文件夹下 选中层级管理器中的ground 将资源管理器中的ground扔到属性检查器里的Sprite栏下SpriteFrame中

然后点击CocosCreator左上角的移动工具 先粗略调一下位置 使入口的瓦片对准中心位置 然后再到属性检查器中细调具体的位置 (希望加入和ps一样的功能 按方向键调整一个像素 按shift + 方向键调整10个像素) 最后我的调出来是 -688 504 不是很困难

然后呢 就是写移动脚本啦

我们的的整个移动脚本的思路是 鼠标点击的位置 转换成-> 45度的坐标 -> 根据45度的坐标 利用A星算法找到一条路径 -> 动画依据这个路径移动

比方说

红色箭头方向为X正方向 蓝色箭头方向为Y正方向 我们起始偏移量为(0,0) 然后 我们点击了绿色箭头指的白色瓦片, 那么我们到达白色瓦片需要的总偏移就为 (-2, -3) (X上沿负方向2个单位 ,Y上沿负方向3个单位) 到这里 就完成了坐标的转换

然后就要找到一条路径 让我们走到那里 这里就需要算出一条路径 然后控制动画走就行了

思路大概就是这样 那我们再进一步看一下 如何实现 鼠标的点击 -> 45度坐标

那具体的思路大概是这个样子的

我们先看一下我们有什么 我们有正常XY轴下 鼠标点击位置和屏幕中间位置的XY差值 只要 (event.getLocationX - visibleSize.width/2, event.getLocationY - visibleSize.height/2) 就能得到了

那我们的目标是 得到在45度XY下的坐标差值 在这里 就是输出 (-3,-6)

然后就还差一个正常XY下和45度XY下的转换了 其实很简单

正常XY下 向正常X轴正方向移动一个瓦片 相当于45度下 沿45度X轴正方向移动一个瓦片 再沿45度Y轴正方向移动一个瓦片

同样的道理 向正常Y轴正方向移动一个瓦片 相当于45度下 沿45度X轴正方向移动一个瓦片 再沿45度Y轴负方向移动一个瓦片

oldX = newX + newY oldY = newX - newY

那么算法就很明了了 那么oldX oldY 的一个单位的计算 只要之前的像素差 除以瓦片的宽 高就可以了 这里是 64 48 最后把小数截断成整数就行了

代码在myUitl.js convertTo45 里

后面就要通过这个45度坐标差值 找到一条路径 供动画使用 这里算出来的路径是一串数组 每个单位存着一个瓦片的偏移方向 比如 {-1,0},{-1,1},{-1,0}] 对应的就是 :arrow_lower_left::arrow_lower_left:

这里不详细讲A星计算路径的原理 后面有链接 我的代码是按照这个链接下面的*A星算法总结 依葫芦画瓢写出来的 http://www.cocos.com/docs//doc/tutorial/show?id=1532

然后我们就已经拿到了一个路径数组了 里面有动画需要的移动信息

后面来看一下怎么用这个路径数组来移动地图吧

然后看到 myGround.js toMove() 其实就是递归地拿路径数组 将45度的XY坐标转换成正常的XY坐标(之前坐标的逆运算) 然后向那个方向移动就行了
这里注意 沿斜线移动的时间要比沿直线的长 40% 不然动画不均匀

然后是添加人物行走的动画 这里不再赘述 请参考之前的教程

然后添加最后一个东西吧 我们在onload中添加鼠标的监听

到这里 已经完成了初步的动画寻路功能

后面讲一下这段代码 自己怎么折腾

很简单 在项目路径下拷贝一份就可以了 搞坏了就把之前的项目再打开来

代码还有各种bug 由于精力有限 不能逐个修复 在注释中已经写上了目前的一些尝试 可以自行参考

下一篇将结合node.js实现多端同步的登录和离线

http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc
http://www.cocoachina.com/bbs/read.php?tid-458736.html

3赞

牛逼!狂顶!:2::2::2:

:2::2:mark日后细看