一个简简单单的切换场景的小游戏,怎么能满足得了我呢,所以在看了cocos creator的用户手册和JavaScript的新手教程之后,盘算着做一个稍微复杂一点的小游戏,对,稍微~~
ps:看见蓝色的字就点一点啊,没准藏了个惊吓。
首先呢,依旧是创建一个空项目,这一步不会做的话请点击这里,建立好相应文件夹,需要提早准备一些图片资源,可以去网上下载,并放入你的项目中的存放图片的文件夹中。再创建一个场景,命名为first。先给first场景添加一个背景图,找一张比较大的背景图,直接拖到Canvas下,命名为firstBg,并在右侧的属性检查器中的Node栏中配置好相应的数据,使这张背景图能够在后期用代码实现横向滚动。如:
那条红线往左就是屏幕大小,蓝线框内就是这张背景图的大小。接下来,要做一个主角,随便取一张卡通人物图,把它拖到Canvas中,命名为hero,放在在firstBg的下面,与firstBg同级。层级的规则是:同级的情况下,在层级管理器,越下面的,就在运行后的屏幕上越前面。
接下来,给hero加点料吧。新建一个JavaScript,命名为hero,添加:
这部分的代码是给主角hero添加了,键盘上的WSAD的监听,分别代表上下左右,如果你不能理解的话,可以看看这个例子先。accLeft,accRight,accUp,accDown,是在该方向上是否能移动。moveSpeed指的是hero的移动速度。update是一个实时监听的函数,在里面写了如果在该方向上允许移动,则实时设置this.node的坐标,这个this.node就是主角hero。另外,为了更符合背景图的实际,我给hero在纵向上移动范围做了限制。然后回到first场景,点选hero,添加刚刚写的hero.js,(添加组件/添加用户脚本组件/hero):
设置移动速度为200,完成后,你可以保存一下,然后运行看看了。
那么问题来了,主角可以通过WSAD移动,但是背景图没有动。那么,新建一个javaScript脚本文件命名为bg:
bg.js里的bg和hero是给外部预留的接口,如同上面的moveSpeed。我就在update这个函数下做了一些移动范围的判断,具体的数值你要根据你的背景图大小来设置。如果嫌麻烦,就把背景图大小改成和我一样就得了。然后在firstBg的属性检查器中,添加刚刚写的bg.js脚本文件,再把Canvas下的hero和firstBg拖进来:
之后可以运行看看,屏幕会随着主角移动而移动了。
不过,感觉空荡荡的,是不是应该添加点怪物?将怪物的小图片拖到Canvas中,因为怪物们不能随着主角的移动而移动,所以要把怪物放到firstBg下。下图请忽略置灰的UI。
然后给这些怪物加点动画,新建脚本命名为monster:
上面的代码就预留了monster1,monster2,monster3,boss,box,的外部接口,然后给一些怪物增加了移动动画。把这个脚本应用到firstBg上,再把相应的怪物拖进来:
运行,恩,怪物在动了。然而,主角与怪物碰撞时,什么都没发生,这可不行,总得让它们产生点激情的火花吧?恩,依次给monster1,monster2,monster3,boss,box,还有hero,都添加一个碰撞组件,碰撞组件有三种,矩形,圆形,多边形,试了下,还是多边形比较好一些:
完成如下:
设置hero和box的碰撞组件的Tag为0,其他都为1。以便于区分胜负,碰到box为胜,碰到其他怪物为负。
既然都有胜负了,那么是不是应该有个胜负的弹窗呢?随便搭一个吧,就一个背景图,一个按钮,一个文本:
这个弹窗不能一开始就可以看到吧?所以resultView的属性检查器的那个可见的勾要去掉,在代码中可以用.active = true来显示:
然后新建脚本文件,命名为hit.js:
预留了弹窗和文本的接口。cc.director.getCollisionManager().enabled = true;表示碰撞系统开启。
onCollisionEnter: function (other, self) {
if (self.tag === 0) {
this.view.active = true;
this.label.string = "you win";
} else {
this.view.active = true;
this.label.string = "you lose";
}
}
是碰撞的处理函数,self是被碰到的对象,如果被碰到的东西的tag是0,那个表示碰到了箱子,就赢了;反之,就输了。
然后将这个脚本文件应用到monster1,monster2,monster3,boss,box中:
到这里其实游戏已经差不多完成了。接下来把那个再玩一次的按钮添上脚本文件,不会的话请点击这里:
接下来是实际运行的效果图:
都说问题来自测试,我发现当游戏结束时(碰撞到胜利或者碰撞到怪物失败)hero还能接受WSAD的监听,还有怪物也依旧上下做着缓慢的动作,这个应该是不符合常理的。游戏结束了,hero和怪物们都要停止动作,保持在碰撞到的那一刻。
所以,我想了好久也问了好多人,终于得到了一个比较好的办法。首先在hero.js里cc.class的外面加上:
这段代码意思是:从cocos creator里找到hero这个控件,使它上下左右都不允许移动,移除自身所有的监听,并对外提供了 removeAll这个函数。这样我在别的脚本文件里,想让hero停止移动并移除监听只需要导入hero.js,然后调用removeAll函数就可以了。
同理,给monster.js添加:
最后在hit.js中调用,先导入上两个文件:
然后:
这样,当游戏结束时,hero和怪物们都会停止移动,而且你再按WSAD也对hero无效了。
至于
随便搭一下吧,至于关闭游戏的代码是 cc.director.end();
好了,新一代的菜鸟“神作”就这样完成了。什么?你要代码?好吧,我刚刚学会了用Github Desktop上传项目到Github,点击这里就能下载项目了。如果你真的需要看一些游戏项目的话,请点击这儿和点击那儿。这里有许多大神写的一些游戏项目供参考,当然要看懂的话,你至少需要把cocos creator的用户手册全都看一遍,毕竟大神们是没那么多时间来写对他们来讲很low而对我们来讲很高大上的项目的教程的(摊手)。
如有错误,欢迎指正。如有补充,欢迎告知。
2017-07-24