微信小游戏实战--cocos creator实现wordle游戏（三）

接着上篇教程微信小游戏实战--cocos creator实现wordle游戏（二）我们继续游戏界面的设计，准确的说上篇教程只是完成了游戏界面的基础设置，同时也介绍了节点创建的步骤。这篇教程才算是正式进入了游戏的界面设计。

先在“Canvas”节点下创建一个“home”空节点并且挂载widget组件，操作方式在上篇教程中已经介绍，这里不再累述。“home”空节点的高宽，widget配置和bg背景节点一样。

完整代码

布局分析

在最开始时，我将界面分解为3部分：顶部的用户头像，昵称显示区域。中间的单词输入区域。底部的键盘区域。对顶部区域做了适配顶端配置，顶部区域做了适配底部的配置，中间区域设置和顶部和底部边距，都是通过widget组件实现的。按照该设计思路，层级管理器中的结构如下：

home，top，midlle，bottom均为空节点并挂载widget组件，它们的widget配置如下：

top: 宽720，高200（打算放两排组件，第一排是用户头像，第二排是其余功能按钮。一排100像素应该够了）

该配置可保证top始终会展示的屏幕的上方。

bottom:宽720，高400 （一个键盘按钮的高度设计为80，4行按钮差320，算上行间距400应该够了）

该配置可以保证bottom始终展示在屏幕的最下方。

设置好这些后，middle的widget组件会默认计算好上下边距：

修改middle的高度，这两项边距也会发生对应的变化。

对于这款游戏来说，这样的设计思路有点问题。对于Iphone 5这种小屏幕的手机还比较适合，在iphone X,12这样的大屏幕下，顶部，底部和中间的距离就会被拉大，显的不那么紧凑不好看。最终我放弃了这个思路，把中间字母输入的控件和底部按钮控件全塞到了top中。最终如下所示：

top的高宽属性和widget的配置还是保持和上面的一致，这样界面基本上就可以适配绝大部分机型了，但是对于iphone 12这种刘海屏还是有点点问题，后面会在代码中做些处理。

内容布局

 确定好布局结构了以后，就可以往里面赛东西了。从上到下依次来。

用户头像，昵称布局

在top节点下再创建一个空节点“head”和一个Label控件“name”，然后再在head空节点下创建两个精灵控件“headimage”，“headborder”。Label控件和精灵控件都在2D对象下。headimage用于显示用户的头像，name用于显示用户的昵称。层级管理器中结构如下：

之所以要将headimage嵌套在空节点head下是因为，Cococs Creator中精灵都是矩形的，而我们要实现的是一个圆圈，所以需要将headimage嵌套在head下，并且再增加一个headborder精灵给头像套一个圈圈。具体的设置步骤如下：

head：高宽为100像素，添加一个MASK遮罩组件，设置遮罩类型为Ellipse椭圆，Segments 64

通过这个配置就可以将head下的headimage精灵的四角遮住，并且呈圆角切割，看上去矩形的图像就被切割为圆形了，但是还是还能看出锯齿。所以headborder精灵就派上用场了，先通过图片处理软件生成一个100 X 100的圆圈图片，然后利用抠图软件将背景扣掉，剩下圆圈即可。还记得上篇教程介绍的资源管理器吗？生成好的图片就需要放在资源管理器中resources->Texture文件夹下，只需要在资源管理器中右键点击Texture文件夹，选择“在资源管理器中”打开这个文件夹了，然后将生成好的图片复制到该文件夹下即可，推荐使用这种方式，因为如果随着你的项目多了起来，每个项目下都有Textrue文件夹，你直接在电脑上去找的话，可能会找到别的项目下的这个文件夹。在Cocos Creator的资源管理器中打开文件夹就不会出现这种问题了。抠图软件网上很多，但是要收费的，这里给大家推荐一个免费的，而且是网页版的不需要安装，点我。这个游戏中用到的图片都很简单，用windows自带的画图软件就可以实现，具体步骤就不再介绍了，比较简单。

headimage和headborder的高宽都是 100，其他属性使用默认的即可，但要注意在层级管理器中顺序，headborder是在headimage下面，这样的话在显示的时候headborder会在headimage上面，这样才能显示出圆圈，当然你也可以在代码里面设置他们的层级来达到这个效果。

headboder中，设置图片为刚才制作好的圆圈图片，设置如下：

资源管理器中，我已经将需要的图片全都制作好了，如下所示：

你也可以直接左键选中“headborder”，拖拽到headborder的Sprite Frame属性中。这里还需要再介绍一下.plist文件，在游戏中可以将一类图片打包成plist文件，达到压缩游戏包大小的目的。同时，plist文件可以加载到精灵控件的 SptiteAtlas属性中，后续在代码里面可以很方便的实现图片切换。上图中的btn_keyborde，btn_middle就是plist文件，看字面意思你应该能猜到btn_keyborde就是键盘按钮上的一组图片，btn_middle就是中间字母输入区域，方块显示的背景图了。