基于Unity简单绘图系统

这系列文章主要是记录博主在互动媒体课程中的收获和体会

这篇文章记载的是博主再互动媒体课程中最后一个大作业的过程与体会,如有不妥之处还望看官们批评指正。

这一次我们要完成的是一个简单的绘画app,要求体现出码绘的特点以及和传统绘画的差别。

拿到题目的时候有些纠结,手头上能做到可视化的语言有C++的OpenGl,matlab的GUI,课程中学习到的p5.js,还有C#的Unity。显然,选择何种语言取决于我们想要做到的效果。matlab是首先被我排除的,虽然界面设计会非常方便,但是实时扑捉鼠标位置绘图之类的并不是它的强项;接下来排除的是OpenGL,界面设计上能出效果,但是一些交互控件的绘画和书写的效率很低,也不适用;p5和unity都是完成这次任务的好选择。虽然看到很多同学运用p5做的风生水起,我最后还是选择使用最近一直在学习的unity进行制作。一方面是我更加了解unity,一方面是我是在对于p5的“找坐标点绘制图形”有些心理阴影(在之前的学习中花费了大量的时间结果却差强人意)。所以最后选择的是unity。

作为一个unity入门选手,我还是收集了不少资料才开始动工的,这里要感谢CSDN的博主神码编程,他的程序和一些想法给了我很大的启发,我也使用一些他提供的素材。博主的主页连接会在结尾po出。

说了这么多前言看官们大概听腻了,我先放一下最终的运行效果。

基于Unity简单绘图系统_第1张图片

基础界面完成的主要功能有:画板显示 笔刷样式选择 笔刷大小选择 笔刷颜色选择 取色器 保存 背景颜色选择 清屏 和特殊效果选择。了解Unity的人可能知道, 这些线束出来的按钮、图片和滑槽,在unity编辑器里面是可以通过拖动到2d画布的方式来设计界面的,这也正是我没有选择p5的便捷之处(当然,控制他们的脚本和相关参数的调整还是不能偷懒的)

因为unity的代码又碎又小,所以我这里不准备全部贴出,主要做逻辑的介绍和效果的展示。

首先是一系列笔刷相关参数的设置,这些都作为变量挂在了画图的主脚本里,点击各个图片会触发变量更换,从而实现参数传递到画图函数中 下面展示一下这些参数的效果

基于Unity简单绘图系统_第2张图片

因为画点密集的原因,笔刷图案的区别可能不是很明显,不过后面的特效部分会有明显的展示。

上面完成的可以说是基础绘画也能做到的,倒不如说就是基础会话一定会做的:先挑选画笔,或大或小,或圆或扁;接着蘸取颜料,黑白五彩;最后按心中所想画出线条。到这里我们做到的绘画样式、体验都与传统绘画无二,区别只是用鼠标代替手而已。

不过值得一提的是,这里的绘制并不是使用的像p5使用的画点,而是使用了unity的实时材质渲染RenderTexture和混合材质所用的函数Graphic.Blit,通过不断的将笔刷纹理、颜色绘制到一张RenderTexture保存下来,并重复显示,就能完整保存下来自己的绘画痕迹。 因为unity虽然有着LineRenderer和GL这种方便画线的功能,但是并不支持笔刷的相关设置,这里要再次感谢神码博主编写的Shader渲染器和相关介绍,此着色器的主要功能是将之前的Texture与最新的笔刷已经纹理再混合成一张新的图片。毕竟菜鸟博主还没有学习到着色器编写的部分。

接着说说我觉得只有码绘才能做到的地方。常规的随机和噪声带来的画面无规律变动大家都能想到,我要说的是一些或许会被忽略,然而实实在在是码绘才能做到的东西。

改变背景

我们会说,画画改变背景谁不会啊,涂色不就好了。是的,我们可以绕过想保留的内容把其他部分换个颜色,但是如果画面都是很复杂的线条块面,剔除涂色不是一件很花时间的事情吗?还记得我上面提到的没有使用画点而是使用RenderTexture吗,这对于我们改变背景颜色来说是极大的助力,我们只需要更改摄像机背景颜色就足够了,甚至变更成透明也不是难事。
清屏也是一样的道理。传统绘画里如果使用铅笔还好,可以慢慢擦掉;如果是用的是很难消除的水彩水粉,那可就只能更换画布了。

基于Unity简单绘图系统_第3张图片

调色板

没错,这个很多人在ps里面习以为常的东西,其实是非常“数码”的产物啊!只要你稍微接触过调色你就会知道,在现实的传统绘画中想要用已有的几种颜色调制出自己想要的颜色是多么困难的事情,有时候甚至花费大量时间也没法满意;但是这一切在程序员和设计师们发明了调色板之后都迎刃而解了。这里我新建了一个场景,通过像素点的计算得到渐变图片,再通过坐标获取来获取相应坐标值的颜色来做到一个取色的效果,并且运用在我们的绘画中。因为保存在别的变量里,使用者还可以在选择的颜色和预制颜色中来回切换,就像ps里面的前景色后景色一样。调色板还可以随机摇颜色,增强互动趣味性(gif里面没有包含)。

基于Unity简单绘图系统_第4张图片

基于Unity简单绘图系统_第5张图片

保存作品

同样是数码的特殊功能,大家不难理解吧。因为神奇的RenderTexture,我甚至能做到分开保存取色器颜色的线条和预制颜色的线条,可以说的分图层的功能。想我在学习水彩水粉的时候,多希望现实中也有图层这种东西,可以分开保存分开更改。而且因为是Texture保存成的png,所以背景透明的话也可以保存成透明的哦。

特殊效果

最后就是展示一下我通过调试得到的几个比较有意思的绘画效果,也是传统绘画很难模仿出来的效果(这次是传统难模拟码绘了)

第一个是还原到正常笔触,效果同上不表;

第二个是根据速度来画线,速度快的地方会呈现虚线的形态,能够让人很直观的感受到绘画者当时运笔的速度,是一种“静态的动态”。在这个模式下,笔刷的差别也可以看得很清楚。

基于Unity简单绘图系统_第6张图片

第三个是我本人最喜欢的速度线,除了画笔痕迹,还会沿着每个点绘制时候的速度矢量绘制出泼洒效果的速度线非常炫酷直观,绝对是手绘无法做到的有趣效果,而且特别好看。这就是物理意义上速度矢量的表现,不可不谓不动态。
好看到我自己都玩了好久

基于Unity简单绘图系统_第7张图片

第四个是画出看起来随机实际上是计算得出的小段直线线段,模拟一些细碎固体的效果很好,比如羽毛之类的,主要是突出码绘的随机性,这也是传统绘画没有的优势,毕竟有随机才有乐趣嘛。

基于Unity简单绘图系统_第8张图片

最后一个可以算是融合前两个的产物,但是在绘制的时候观看会有一种 士兵端着枪在警戒四周或者扫射子弹的有趣效果。静态呈现的时候差别不大的图片;但是码绘在动态绘制时能够给人带来无限遐想,而是传统绘画的绘画过程是很难带给人们这种想象的。

基于Unity简单绘图系统_第9张图片

这次编写的绘画系统内容基本上就是这些了,代码和工程文件我会择日上传,有兴趣的朋友可以自行下载。

对于码绘和传统绘画的差异和优势,我在前面也讲得差不多了。很多现在科技带给我们的熟悉便捷其实都是过去的我们所不曾拥有的,这就是我在做完这次作业之后最大的感想。同时我现在也彻底体会到码绘所不同于传统绘画的魅力,希望有兴趣的朋友们都去试一下这种与众不同的创作形式,体会科技与互动媒体带给我们的改变。

参考资料:

  1. Shader和基本布局思路.
  2. 神码编程的主页,带给我很多新知识.
  3. Unity的官方文档,学习Unity的好帮手.

你可能感兴趣的:(互动媒体技术)