1.创建Unity工程
我们创建一个名为 DrawingBoard 的工程,然后先把必要的工程目录都创建一下:
主要包含了一下几个文件夹:
Scripts :存放我们的代码文件
Scenes :工程默认会创建的,存放场景文件
Shaders : 存放用到的shader文件
Textures :存放贴图文件,我们会在里面放一些简单的笔刷形状
Resources :资源存放
Materials:存放使用到的材质球
2.框架设计
行动之前,需要想好我们想要一种什么样的交互模式?例如,可以是2D场景鼠标直接在屏幕上画线;可以是一个3D场景,控制一个小球在地面上的绘制。先简单的搞一个2D的吧。
PaintManager.cs 用于管理绘画的各种数据、状态、参数
Painter.cs 用于实现绘画输入
由于要实现撤销和重做的功能,所以这里会用到设计模式中的命令模式,这个到时候细讲
3.拼UI界面
- 以 MainCamera 作为UI的摄像机,将MainCamera调为Orthographic(正交)模式,将ClearFlags设置为SolidColor,并将背景色调为白色
- 在Hierarchy面板中创建一个Canvas,并将RenderMode设置为Screen Space - Camera的模式,指定其Camera为 MainCamera
- 在Canvas下面创建一个RawImage,重命名为 Painter,并铺满整个画布:
- 在Resources文件夹下创建一张RenderTexture,重命名为PaintRenderTex,设置其分辨率为1920x1080,并将此RenderTexture指定给上面创建的RawImage
我们后面就是要在这张RenderTexture上作画,指定给RawImage之后就可以实时的在UI界面上显示出来了 - 创建必要的UI组件,如撤销和重做按钮、笔刷调节滑动条、图片保存按钮、调色盘
- 创建过程中如果用到了TMP,则会弹出弹窗让我们导入一些TMP必要的资源,导进来即可,TMP默认是不支持中文的,需要额外导入中文字体,TMP本就不是本文重点,有关TMP的使用,读者可自行到网上查阅资料,本文就都以图标代替了
- 创建完毕,大体长成下面这样,界面大家可以自由发挥,这里贴出UI结构,方便大家看代码的时候比对:
- 这里只是当前阶段的一个大致展示,里面有些节点如ColorPalette和ButtonGroup都分别采用了 VerticalLayoutGroup 和 HorizontalLayoutGroup 进行布局。
- ColorPalette 调色盘,下面的众多ColorItem都用了Button控件
- 界面中使用到的图标来自 iconfont-阿里巴巴矢量图标库,导入到Textures/ui下
在下面的文章我们就开始正式编写代码啦~