CocosCreator之KUOKUO带你入门3D小游戏-躲避方块

本次引擎2.1.0

编辑工具VSCode

目标:3D小游戏躲避方块

2.1.0版本已经出来好几天了,虽然有些地方还不够完善,

但是毕竟是能写3D游戏了,简单的来写一个,嘻嘻。

console.log(滑稽)

准备好了吗?GO!

新建个工程,然后把画布的大小都减去个0。

没错,减去个零!!!(一会你就知道为啥了)

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第1张图片

 我这里面导入了两个模型文件。

一个是fangkuai(方块)一个是qiuqiu(球球)哈哈。

我们新建一个背景。(单色)

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第2张图片

然后转化为2.5D节点,调整一下大小,颜色。

因为是跑道,我们把长度设置长一些,1000吧。

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第3张图片

在弄两个跑道边界吧。

像这样;

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第4张图片

然后,让我们把它放平。(记得把边界也改为2.5D节点)

 CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第5张图片

然后我们把摄像机配置一下。

我们把颜色勾选,淡蓝色的背景,摄影模式修改Fov=60

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第6张图片

让我们运行一下看看效果:

哦,跑道忘记往前给了,目前是中心对称的。CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第7张图片

这样改一下就好:

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第8张图片

好了,让我们把主角导入(一个球球)

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第9张图片

诶???怎么什么都没有。

因为这就是我开始提到的,这个尺寸比严重失调。不是没放进去,是太小了。

放大50倍:

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第10张图片

好了,让我们把球球放在跑道上。

记录此刻y的坐标值。

y = -16

z轴给-50,因为摄像机的 z 是0,为了看到球球,把球球往正前方移动(z轴负方向)

这样:

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第11张图片

然后看一下效果:

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第12张图片

接下来我们写个move脚本控制小球移动:

绑定在Canvas上。

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第13张图片

嗯,,实现了。

 CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第14张图片

 好了,我们再来做方块,让它在1000像素外随机生成,然后跑过来。

先设置一下属性,让他们两差不多;

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第15张图片

写个kuai_move.js绑定在方块上。

方块的移动脚本:

 CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第16张图片

然后,拖成预制体。

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第17张图片

然后是总控制脚本:绑在Canvas上

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第18张图片

我们在里面写个创造方块的方法:随机x位置;

然后写个计时器,每1秒来一个.

 CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第19张图片

计时器

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第20张图片

哈哈,

先看看效果:

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第21张图片

嗯嗯,感觉还可以。

接下来就是写碰撞检测了。

在预制方块的脚本里:声明zhujue,通过向量计算距离。碰到后游戏暂停

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第22张图片

然后在生成方法那里:

把zhujue给定。

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第23张图片

 

好了,大功告成,我们看一看效果:

 CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第24张图片

哈哈,成功了!

最后,再让我们加入速度更新与Label标签时间显示:

toFixed()截断小数点2位以后的

底下的是时间判断,然后更新计时器时间参数(略有修改)

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第25张图片

看一下界面:

(Label有点模糊,毕竟比例有点小)

CocosCreator之KUOKUO带你入门3D小游戏-躲避方块_第26张图片

Get了没?

觉得不错,给个关注!么么哒。

加我QQ群:(博客里面的项目,群文件里都有哦)

706176551

我们一起学习!

O(∩_∩)O~~

你可能感兴趣的:(CocosCreator之KUOKUO带你入门3D小游戏-躲避方块)