cocos creator实现wordle游戏（二）

熟悉Cocos Creator

  工欲善其事必先利其器，首先我们需要熟悉一下开发工具的使用。打开Cocos Creator进入到我们之前创建的项目，新建的2D项目大概如下图所示：

• 层级管理器：创建和管理游戏的内容节点。在Cocos Creator中所有的控件都被视为节点(node)，在层级管理器中可以清晰的查看场景下的节点，以树形结构展示。

• 资源管理器：创建和管理游戏所用到资源。通常一个游戏所用到的资源就是脚本文件(typescript文件)，音视频，图片，预制体（这个后续详细介绍），场景文件。这里简单介绍一下场景：所谓场景就是承载内容节点的容器，玩家所看到的界面。一个游戏必须要有一个场景，复杂的游戏可能会有多个场景。

• 属性检查器：通常配合层级管理器使用。在层级管理器中选中某个节点后，可以在属性检查器里面查看选中节点的属性，也可以修改该节点的属性。

• 场景编辑器：制作场景，通常配合层级管理器使用。在层级管理器中创建可视化节点（如Label）后，可在场景编辑器中看到该控件，并且可以通过鼠标拖拽的方式设置它的位置。

接下来，我们就开始逐步构建wordle游戏的界面。

必要的基础设置

点击“项目”-->"项目设置"，进入项目设置页面。

高宽设置

  在项目数据中将“设计宽度”设置为“720”，“设计高度”设置为“1280”，勾选“适配屏幕宽度”。因为这个游戏是竖屏游戏也就是设计高度大于设计宽度，所以需要勾选“适配屏幕宽度”，后续在设计游戏界面时配合widget组件基本就可以适配绝大部分手机屏幕了，如下图所示：

引擎选择

  在“功能剪裁”中将不需要的引擎功能去掉，为项目瘦身。因为微信小游戏首包大小需要限制在4M以内，超过4M就需要分包了，总游戏大小也不能超过20M。我们开发的这款游戏是2D游戏，首先就需要去掉3D引擎，然后2D引擎只保留最低配置，如下图所示：

目录创建

  在资源管理器中创建对应游戏资源的存放目录，右键点击“assets”,选择“创建”-->“文件夹”，创建名称为“resources”（注意名称不要写错，因为所有需要被动态加载的资源都必须存放在该文件夹下）。然后右键点击创建好的resources文件夹，在该文件夹下依次创建“prefab”，“scripts”，“sound”，“Texture”文件夹，prefab用于存放预制体文件，scripts用于存放typescript脚本文件，sound用于存放音频文件，Texture用于存放图片文件。文件夹的名称可以根据自己喜好来自行设置，但是为了遵循业界的规范还是建议取以上名称便于识别。最后右键点击“assets”，创建“scene”文件夹，用于存放场景文件。最后创建好的结构如下图所示：

保存场景

  在层级管理器中，右键点击默认创建好的“Main Camera”，选择“删除”将它删除。再 Crtrl + S，将场景文件保存，在保存时将场景名称更改为“game”（你也可以取别的名称），保存的路径就是刚才创建的“scene”文件夹下。如果一切顺利的话，应该会如下图所示：

完成上述配置以后，终于可以开始创建游戏界面了。

游戏界面制作

创建空节点

在层级管理器中右键点击场景“game”，选择“创建”-->"空节点"，如下图所示：

将其命名为“gameRoot”，空节点在场景编辑器中不可见，但是为什么要创建它呢？这里要引入“常驻节点”的概念，在Cocos Creator中，场景下的第一个节点可以设置为“常驻节点”。在多场景游戏中，场景的切换会将场景中的节点释放掉，但是不会释放“常驻节点”。由此可以在此节点上挂载脚本用于实现所有场景都需要的功能，比如说音效播放功能。虽然该游戏只用到了一个场景，但是从长远来说建议还是遵循该设计模式，方便后续的扩展。

新建场景

右键点击场景“game”，选择“创建”-->"UI组件"-->"画布"，如下图所示：

新建画布

右键点击创建好的“Canvas”，选择“创建”-->“2D对象”-->“SpriteSplash(单色)”，创建一个单色的精灵组件，（精灵其实就是图片控件，也不知道为什么会叫精灵，既然业界都是这么叫的我们也就入乡随俗吧）将其命名为“bg”，因为它将作为这个游戏的背景图。创建好后的结构如下：那个Camera是Canvas组件自带的，如果删除它以后将看不到游戏界面了。

创建Camera

左键点击“Camera”，在场景编辑器中可看到大致的画面是这样的：

设置属性

现在我们需要做一些设置，左键点击“bg”，此时在“属性检查器”中就可以看到对应的属性了，设置“ContentSize”宽为720，高为1280，也就是项目设置中的宽和高（单位是像素），如下图所示：

组件默认的颜色是白色，我习惯于将它调整为保护眼睛的“豆沙绿”，点击“Color”右边的白色区域，设置如下：（你也可以设置为其它颜色）

颜色采用RGB方式设置，这里推荐一个拾色器，免费的也不需要安装。

点击那个画笔图标，再点击你看上的颜色就行了。

然后在“属性检查器”最后会有一个“添加组件”按钮，左键点击它：

搜索“widget”组件并添加，做如下配置：

这个配置就会使得bg组件能够在宽度和高度上去自适应目标分辨率，Left，Right可以设置左右边距，Top，Buttom可以设置上下边距。全部设置为0就可以让bg能够全面平铺渲染整个背景了。   最后还需要设置一下“Camera”的大小，顾名思义Camera就是摄像机，它所显示的区域就是我们最终看到的区域，如果它的大小小于bg的大小，那么我们看到的界面就是局部的不完整的。如果它的大小大于bg的大小，我们就会看到黑边。所以需要将Camera的大小设置为bg的大小，但是在“属性检查器中”没有对应的高宽设置，我们只能在“场景编辑器”中以拖拽的形式来设置它的大小，这对于有强迫症的我来说确实很难受，但是没办法。 在“层级管理器”中左键点击“Camera”，此时在“场景编辑器”看到画面如下：

选中左边那个小白点，慢慢的向左拖就会看到Camera的大小在不断变大了，一直拖到和bg大小相等或者差不多为止。一定要慢点，不然很难卡到那个点。