客户端开发工作总结

1. 动机

在长达8年的前端工作经验后，发现还是不知道想做啥。自己对技术的掌握还是停留在对数据的展示和存储上。因此先对之前的工作中用到的知识做一个抽象的总结，再思考自己应该去掌握什么技术，又想学什么技术。

2. 认知

客户端开发主要工作即开发UI（user interface），与用户交互的界面。软件呈现给用户看到的所有元素，和可操作功能。

2.1 界面的显示/渲染

2.1.1 布局

布局中组要是有一些通用的布局规则，如上中下布局，上下布局等。布局关键在于定位大元素的所在位置。其中网页中很常见。在游戏开发中，通常不用程序布局，由美术或策划设计出各个UI位置即可。

其中具体元素位置的定位则涉及到界面中的关键概念，即绝对和相对概念。

2.1.2 绝对

绝对定位将屏幕看成一个笛卡尔坐标系的某个象限。如以左上角为原点时，程序操作元素锚点（用于定位和旋转的点）的坐标值，实现绝对定位。像元素的绝对大小(宽高)也能涵盖其中，即有固定的宽高。

2.1.3 相对

顾名思义，即相对于什么来定位。如屏幕的左边，或某个元素的某条边。和相对的元素大小，如占比屏幕百分比，相对大小在2Dui中较常用，3D中感觉修改摄像机的缩放即可了。

常见的有：

  居中、上下左右对齐

2.1.4 事件机制

最常见的按钮点击事件，通过用户操作而触发接收了事件的函数。

原理是根据鼠标位置，与2D元素是否相交判断是否操作了某个元素，3D元素则可以根据摄像机和点击位置发出摄像来检测。

2.1.5 常用元素

按钮、列表、文本框

2.1.6 渲染分层

为什么要分层，分层可以显示出元素之间的遮挡关系。

2.1.7  冒泡机制

因为元素有可能被遮挡，当点击某个元素后，被这个元素遮挡的元素也想获得事件时则通过冒泡来实现了。我想到个形象的解释法：如同你在海底游泳，我头顶上有只螃蟹，被碰到就会吐泡泡，另一个游在螃蟹头上的人则可以根据螃蟹是否冒泡来判断我是否摸过螃蟹。用GDI渲染2D界面时，则需要遍历先渲染的每一层的元素来触发冒泡。web上不知道是不是这样实现的，感觉挺复杂的。3D感觉用射线就挺方便的。

2.2 元素从哪来，界面的显示原理

2.2.1 网页界面

即我们编写的HTML

2.2.2 GDI绘制的界面

在DC（模拟的一个坐标系，带有画笔，读图等功能）中用GDI的工具绘制的图形或加载的图片

2.2.3 引擎中

如unity中拼接好的界面预制体，ue中制作好的UMG等

>> 最终都是我们编写的界面标记，最后会通过图形库渲染出来在屏幕上显示。在调用图形库时，在引擎中则由引擎去实现了。

2.3 什么时候显示，界面的生命周期

1. 加载前
2. 显示完成
3. 关闭时

这些通常写入一个UI框架中，方便做统一处理。UI显示前通常还有个需要展示的数据的准备工作，不管是本地数据、服务器下发的通常在界面的控制器里准备完成。常见的两种即MVC和其升级版MVVM。

3. 总结

以上其实就是总结，再简单总结下。做过大量客户端开发工作，工作中编程内容主要是对界面中UI元素的管理和响应事件的逻辑处理，可以熟练的应用各种UI框架以提高生产效率。如果只停留于应用工作技术上的提升不会太大。

4. 个人题外话

接下来想做UE客户端的工作，因为感觉蓝图还挺好用的。再就是UE可能会做游戏相关的比较感兴趣，又是开源的感觉也学不完能做很久。挺羡慕那些明确自己目标的人，要做架构师、动画师啦。自己工作久了发现对架构师什么的都不感兴趣T_T，对动画师优点兴趣但又看不出兴趣有多大，平时几乎不去了解，又没美术基础，也很难从头再来，还是只能走一步看一步了。