cocos creator3.0 学习手册（二）

前言

前一章节搭建好了开发环境，尝试了第一个项目，完成了HelloWorld的控制台打印，简单了解了cocos不包含发布开发的大概过程。
了解了这些之后，可以开始构思自己的想法。首先不管是不是3D游戏，一定需要有2D的操作界面。所以可以先从2D界面入手。
作为一个从BS开发过来学习游戏开发的码农，尽量先找概念上的相似之处。2D界面开发就是很好的一个突破口，用熟悉的HTML、JS、CSS很简单能够实现的界面，看看用游戏引擎如何操作，实现过程中一般会先入为主的用网页制作那一套思路解决，如果遇到不合理或者无法实现的情况再深入思考区别在哪？

目标

1.了解如何设计实现2D页面
2.学习输入框、文本、图片、按钮等UI组件的使用
3.不同分辨率下保证实现效果
所以决定做一个简陋的登录页面，大致希望的效果如下：

当然登录按钮放在最下面是比较舒服的，但是那样太过简单，反正是练手，所以稍微让布局复杂一点点。

登录页面开发

布局设计

分析一下效果图：
红框作为一个整体，框内是满足只有一种对齐方式（水平/垂直），这样就好下手了。

实现

1. 在assets目录下创建scenes，在scenes下面创建新的Scene，命名为Login。
2. 在Login场景中，加入Canvas（画布）。在画布上加入Layout。将Type调整为VERTICAL（垂直对齐）。Layout（自动布局容器）
3. 先添加第一个LOGO元素，里面没有直接的图片对象，而是绑定在Sprite上面，所以加入一个Sprite（精灵），命名为Logo。
4. 从网上随便找张图片，所以我找了baidu的LOGO替一下。选中图片，将它的类型改为sprite-frame（默认为texture）。然后选中刚才的精灵对象，将它的SpriteFrame改为刚才这张图片
   可以看到能在界面上看到这个logo了。但是发现他顶到了最上面，因为我们的分辨率是以1280*720分辨率的，看着调整一下顶部距离（Layout的PaddingTop属性），调成了200。SpacingY（间距）调成了20，多个子元素之间的间距。
5. 然后在layout下面在加一个layout，排在logo后面。简单来说就是把前面分析的可以看做一块的内容给他套进一个layout里，后面就靠自己调整，不做赘述了。
   最后慢慢调整，效果图：
   
   结构图：
   

小结

可能习惯了CSS的FLEX布局还有element的布局构件，这个图形化界面使用起来感觉挺麻烦的，可能直接用代码实现还方便一点（可能资深码农都会有这种感觉）。不过多花点时间，使用图形化界面操作也能拼出自己想要的样子。想要做出理想的样子可能还需要花更多的经历去解决素材和设计的问题。