本次要做的是一个最简单的跑酷类游戏，无需使用Tiled（地图编辑器），spine（骨骼动画编辑器）。也是做了这个小游戏才发现游戏其实已经发展的很成熟了。
我们可以看到，元素很简单，背景主要有远景、中景，通过设置不同的速度来实现现实中跑动的效果。主要的逻辑实现部分是在前景的任务和障碍物。由于没有使用物理引擎，所以是直接使用CocosCreator的碰撞检测实现的。主人公可以跳跃越过障碍物，撞开障碍物，收集金币。按住屏幕，hero跳起，按的时间长一些，主人公的跳跃也会高一些，自然一些的话还是需要简单的物理公式的。正常情况下hero是在x轴上是没有速度的，一种情况是当障碍物挡住hero时会有一个和障碍物同样的速度模拟阻挡的效果，还有一种情况是阻挡产生之后hero产生了位置上的移动，需要一个速度回到原位置。由于CocosCreator提供了碰撞检测之后的回调函数，所以我们可以很轻松的在回调中做一些相关 *** 作，比如让碰到的金币消失之类的。
有位同事做过cocos2d-x的开发，使用的c++，向他请教了一些基础了知识，但是细节上跟cocosCreator相差恨远，因为cocosCreator是用cocos2d-js框架并配合可视化的编辑器来实现的。由于是先调研的Unity3D，对这种脚本的方式还是比较能够接受的。其核心思想是在组件，在编辑器中制作精灵和动画，然后通过脚本组件来控制其逻辑实现，各种功能都组件化，当我们需要给精灵添加一个功能的时候，就是向其添加一个组件。在这个小游戏的制作过程中用的组件的数量也是有限的，主要是使用了：
编辑器给我们提供了方便的拖拽界面，直接将我们需要使用的导入，就会自动生成精灵文件（但是用过Unity3D之后，还是感觉Unity3D的功能集成度更高一些，而且还可以做3D）。
在编写脚本的时候也是不能脱离编辑器的，在编写脚本的时候着实是让我这个ios程序员有点摸不到头脑了，JS的使用方式有点让我不太适应，没有了xcode的提示功能，写起来还是有些费劲的。JS也是边学边写，不过得益于官方的Demo几乎把所有组件都写了一遍，所以就照着葫芦画瓢。写的时候就发现，其实引擎并没有帮我们做很多的工作（Unity3D可以直接在编辑器里设置物理属性，不过听说下个版本的CocosCreator也会有）。在编写脚本的过程中，最复杂的就是hero脚本的编写，需要检测碰撞和处理hero跳跃过程中的不同状态。碰撞检测的话需要自己计算碰撞发生的位置，当做矩形碰撞器来处理的，只计算x轴和y轴的碰撞。x轴发生碰撞的话，hero有一个和障碍物一样的速度，y轴碰撞一直持续的话就是调整hero的y轴的位置，让其在障碍物的顶部。跳跃的过程中完成动画的切换。
与CocosCreator编辑器不同的是，这个编辑器是我写的一个生成障碍物的一个app，可以方便让产品配置障碍物的位置。主要的实现思路是使用UICollectionView，界面非常的简单,主要是配合CocosCreator脚本的实现，需要将颗粒状的障碍物连成一个长的条状，所以需要将界上的障碍物颗粒结构化一下，取到障碍物的最底部的颗粒的位置，然后连接在一起的高度，这样的话就是对每一列的统一种类的障碍物进行深度优先搜索，记录最低点和搜索过的深度，这样的生成的JSON文件在CoCosCreator脚本里就可以直接使用了。buttonclick:function(event){
let exportJson = {};
let sysInfo = windowwxgetSystemInfoSync();
//获取微信界面大小
let width = sysInfoscreenWidth;
let height = sysInfoscreenHeight;
windowwxlogin({
success: (res) => {
if (rescode) {
consolelog("rescode:", res);
exportJsoncode = rescode;//向服务端传递code用于获取微信小游戏的用户唯一标识
windowwxgetSetting({
success (res) {
consolelog(resauthSetting);
if (resauthSetting["scopeuserInfo"]) {
consolelog("用户已授权");
windowwxgetUserInfo({
success(res){
consolelog(res);
exportJsonuserInfo = resuserInfo;
//此时可进行登录 *** 作
}
});
}else {
consolelog("用户未授权");
let button = windowwxcreateUserInfoButton({
type: 'text',
text: '',
style: {
left: 0,
top: 0,
width: width,
height: height,
backgroundColor: '#00000000',//最后两位为透明度
color: '#ffffff',
fontSize: 20,
textAlign: "center",
lineHeight: height,
}
});
buttononTap((res) => {
if (resuserInfo) {
consolelog("用户授权:", res);
exportJsonuserInfo = resuserInfo;
//此时可进行登录 *** 作
buttondestroy();
}else {
consolelog("用户拒绝授权:", res);
}
});
}
}
})
}else{
consolelog('登录失败！' + reserrMsg)
}
},
});
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）