CocosCreator3D微信小游戏入门RunningBall（二）：动画

最新推荐文章于 2021-06-25 18:33:49 发布

BigBear023

最新推荐文章于 2021-06-25 18:33:49 发布

阅读量933

点赞数 2

分类专栏： CocosCreator3D 文章标签： CocosCreator3D 3D小游戏微信小游戏教程入门

本文链接：https://blog.csdn.net/zzx023/article/details/102759352

版权

CocosCreator3D微信小游戏入门：RunningBall（二）

上一节我们完成了小球的基本操作，成功的使得小球也动了起来。接来下我们继续完成关卡的胜负判断。

这个小游戏的胜负情况如下：

小球到达终点：胜利
小球跌落到地面下：失败

需要我们完成的有几个东西：
1.终点
2.失败的判定
3.结束的UI界面

接下来我们一个个来实现

##终点FinishPlane
终点和上一节中提到的地面是一样的，我们同样也是使用Plane模型，只是它显示的贴图不同。
更改Z轴的缩放为0.5
在这里插入图片描述

接下来在资源管理器中右键选择创建一个Material资源
在这里插入图片描述

点击这个Material资源，在右边的属性检查器中修改它的Effect属性为builtin-unit,Technique属性为0 - opaque,勾选上Pass 0中的USE TEXTURE属性。
然后将我们的贴图赋值给MainTexture属性
在这里插入图片描述

完成后点击右上方的绿色小勾按钮，保存我们的设置
在这里插入图片描述

接着我们把这个制作好的Material资源给到FinishPlane的ModelComponent组件中的Material属性
在这里插入图片描述

这样子我们就将这个FinishPlane的贴图更换好了，可以在场景编辑器中看到这样子的一个plane：
在这里插入图片描述

Creator3D的材质系统比较复杂，由于这里只是一个入门文档，就不详细解释了。有兴趣的可以研读一下官方文档。

失败判定节点LosePlane

失败判定节点要做的事情很简单，如果小球跌落，也就是小球的Y轴坐标低于一定的值，则我们认为游戏失败。
不需要做显示，同时也不需要进行碰撞的检测，因此我们在场景中创建一个空节点Empty Node就足矣.
在这里插入图片描述

结束界面

在开始编写UI界面前，我们需要先调整整个项目的Design resolution的尺寸，也就是我们的Canvas的尺寸。
点击顶部菜单中的Project -> Project Settings选项，打开项目设置面板
在这里插入图片描述

将Design resolution属性的width和height改为640和960
在这里插入图片描述

ps:这里编辑器有个BUG，就是更改的width和height并不会保存下来，每次打开项目都需要重新设计?，不过这个问题下一个版本就会修复，无伤大雅。

接着我们在Canvas节点下创建一个Sprite节点，这个节点就是结束界面的根节点。
在这里插入图片描述

创建完成后将节点的SpriteComponent组件的Color属性改为黑色即可
在这里插入图片描述

给这个节点添加两个组件，一个是WidgetComponent组件，另外一个是BlockInputEventComponent组件
在这里插入图片描述

WidgetComponent组件是用来做自适应的，而BlockInputEventComponent组件是用来屏蔽触摸事件，只让在这个根节点以及上层的节点相应触摸事件，这样就避免了在结束界面时，我们还会操作到小球或者是其他的一些控件

WidgetComponent组件的属性设置如下：
在这里插入图片描述
这样可以保证不管在什么分辨率下，我们的这个界面的根节点是平铺整个屏幕的

接着我们在这个根节点下添加2个Sprite节点和3个Button节点。
注意Button节点创建后，我们将里面的Label子节点删除掉，因为我们不会用到它
2个Sprite节点分别用来显示“YOU WIN！”和“YOU LOSE！”这两张图片资源
3个Button分别显示“Next”，“Again？”，“Return”这3个按钮的资源
都是在SpriteComponent组件下对SpriteFrame属性进行设置：
在这里插入图片描述

图片资源的话只需要将资源从文件夹中拖到编辑器中的资源管理器下面就可以导入了。
需要注意的是，我们这里SpriteCompoennt组件用来显示用的图片资源，需要的是SpriteFrame类型的资源，因此在资源导入后我们还要讲资源的Type属性改为sprite-frame
可以在资源管理器中复选多个资源同时进行修改
在这里插入图片描述

Button控件除了需要修改SpriteComponent中的SpriteFrame属性，还需要修改ButtonComponent组件下的NormalSprite,PressedSprite,HoverSprite,DisabledSprite属性
在这里插入图片描述

整个UI界面的操作和CocosCreator2D基本上是一模一样的，有Creator2D经验的同学可以很快上手

拼接界面的过程中，可以将场景编辑器切换到2D模式，这样操作会很方便
在这里插入图片描述

最终我们拼接的界面如下所示：
在这里插入图片描述

Global.ts脚本

在开始界面的逻辑编写之前，我们先写一个全局对象，用来储存游戏的一些全局数据
新建一个TS脚本，命名为Global.ts

最低0.47元/天解锁文章

BigBear023

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CocosCreator3D微信小游戏入门RunningBall（二）：动画

CocosCreator3D微信小游戏入门：RunningBall（二）上一节我们完成了小球的基本操作，成功的使得小球也动了起来。接来下我们继续完成关卡的胜负判断。这个小游戏的胜负情况如下：小球到达终点：胜利小球跌落到地面下：失败需要我们完成的有几个东西：1.终点2.失败的判定3.结束的UI界面接下来我们一个个来实现##终点FinishPlane终点和上一节中提到的地面是...
复制链接

扫一扫