这个故事始于一个寒冷的春天傍晚，当我想到这个问题时：是否有一种方法可以确定用油漆填充任意几何形状的程度 （即，当前所涂油漆的百分比）？ 是的，因此它不仅速度变慢，而且在最弱的移动设备上以60 fps的速度飞行 。

对于那些不立即明白我在说什么的人，我将说明：光栅方法可以解决问题，而且...不能采用光栅方法。

在第一种情况下，一切都很简单，在YP中已针对每种口味成功研究并实现了洪水填充主题和相关算法。 有一个要填充的像素阵列，有它们的边界。 我们计算淹没的点数，除以总数，然后瞧-我们在出口处珍惜百分比。 但是-具有大量像素（在现代设备上为ppi，您自己知道是哪一个），再加上-如果有很多这样的数字，我们会在每帧中进行大量计算，以令人愉快地加热设备，但无法使灵魂正常运转。

无论如何，处理栅格似乎不像体育人。 目光转向无所不能的垃圾填埋场。 几个令人兴奋的轻松持久编码小时证明了这一假设：您可以使用诸如“ 顶点颜色 ”之类的东西。


我认为值得一提的是，为什么需要从文章开始就使用臭名昭著的阴影。 着色应用程序的主要思想如下：最终图片由一组多边形组成。 该应用程序将依次逐个元素自动地将用户移开 。 因此，直到您完成最后一幅画之前，您都不会继续进行下一幅画。 在我看来，这样的决定非常优雅，诱人，而且鉴于故事中“像素”着色在全球的主导地位，它也很新鲜。

第一步

当然，为了进行完整的着色，有必要创建许多有趣的解决方案。 首先，我希望，对于应用程序的所有多边形性质，颜色都被认为是最栅格的，也就是说， 涂料应在手指下散布 ，或多或少具有逼真的外观。 最初对最高性能的要求在任何地方都没有消失，并且在整个过程中继续造成巨大的积云。

第一步是进行人为细分 （将由一组三角形组成的大型多边形分解为一堆随机的小三角形）。 毕竟，如果我们获得一个顶点数组并在填充时在其中写入顶点颜色，则可以通过该数组的正常通过来确定图形是否被完全填充以及还有哪些未绘制的部分- 与像素算法类似，但具有更大的自由度 。



然后开始了令人兴奋的着色器世界之旅。 如您所知，我无法完全发现所有发现和秘密，但是我要说的是，通过与噪声图和老式的手指相互作用发出的Unity射线交互作用，可以实现笔刷效果，甚至可以使油漆沿手指附近的三角形散布。 使用顶点颜色可以在图形的几乎所有组成部分上省去一种Unity材料 ，因此在完成的程序中绘制调用不会超过5-7（取决于菜单和粒子的存在）。

笔划由通常的Unity Line Renderer进行，在某些图形上诡异地出现故障，向外移动并在关节处显示瑕疵。 这是无法克服的，因此，优先任务是从头开始重写组件。 指纹也是标准的Trail Renderer，但其着色器使用z检查，以使迹线元素不会重叠，从而产生难看的伪像。 背景的“棋盘格”纹理有助于评估被涂上元素的大小 ：它越大，单元格的大小就越小。

不可预期的功能

在测试过程中，结果发现在图的角落经常有空峰，这很难通过视觉确定。 尽管在填充水平为97％时触发切换到下一个元素的触发器起作用，但实际情况是“ 下一步该做什么？ »-占用率从90％到97％-他们经常出现并且引起用户混淆（基本上不超过12岁的用户）。 我不想将触发率设置为低于97％，因为这样会出现“ 我尚未完成但它已经跳了 ”的效果。

所以我很不情愿地遇到了夫人女士 。 想象一下：一个多边形，里面有一堆点，里面有一些“特殊”点，有时是分开的，有时是成组的。 有必要找到并指定最大的“群体”。 这是一个常见的数学问题。 我发现的传统算法都没有出于各种原因出现，我必须自己做。 乱砍，但确实奏效-未上漆的区域开始在美丽的动态圈子中脱颖而出。 为了进行优化，该算法每3秒钟工作一次，并且仅在用户困惑于以“下一步操作”的方式将手指从屏幕上抬起之后才起作用。 看起来很有机。



经过这样的集思广益后，根据测试人员的要求制作不同的“着色线” ，即让用户有机会选择要对元素进行着色的顺序，这只需要一个晚上。 您所需要做的就是确定每个网格的几何中心，并根据需要构建它们：从左到右，从上到下，等等。为了更加清晰，在背景上实现了粒子，这些粒子显示了队列的方向。

UX和UI

我通常喜欢应用程序中受控自动机的想法，因此每个元素都处于居中和缩放比例，以便可以用手指在其上绘制而不必滚动屏幕 。 这种方法的缺点是，并不总是很清楚屏幕上现在显示图形的哪一部分。 事实证明，用户甚至喜欢这么小的挑战，因为它可以训练短期记忆和信息关联-您需要牢记全局。 嗯，有两种方法可以到达“人物的鸟瞰图”-捏手势或按缩放按钮。



根据《 Apple Interface Guidelines》的规定 ，决定将屏幕上的按钮数量减少到最少。 除了菜单中的“ 放大/缩小”按钮和明显的“退出”按钮外，还有一个调色板调用-您可以将画家绘制为您选择的“默认”颜色。

此外，在“鸟瞰”模式下，您可以更改背景渐变（每次单击都是随机生成的）或进入“重新绘制”模式，该模式允许您修复已经绘制过的元素。 是的，我不得不隐藏此功能，但这是合理的-在所有测试中，没有人问过如何做到这一点。

关于调色板

调色板本身被重做了两次。 首先，我只是在屏幕上放置了一定数量的带有颜色的正方形，但是用户要求更多颜色。 我不想在界面中滚动，于是出现了“色调”方案，即，首先用户通过按来选择基色，然后选择其阴影之一。 可以通过按钮或向下滑动来删除调色板。 此外，当它出现在屏幕上时，艺术家的工作空间减少了1/3，因此有必要将当前图形“缩放”为更改后的视口大小。

为了甜

整个图片中缺少的关键环节是奖励 -用户在完成着色过程后会收到的一种视觉心理奖励。 这个想法浮出水面：在加速模式下，图形完全按照用户的方式自动重新绘制，换句话说， 间隔时间为15到20秒 。 这是通过记录用户触摸图形顶点的顺序，然后以延迟（通过协程）“馈送”绘图引擎的形式播放此数据来实现的。 每个网格都重复几次以实现“表现”和“衰减”的效果。



当然，回放过程中的时间间隔会记录在视频文件中 ，并且在进行视觉盛宴后，会提示用户保存/共享新创建的杰作。 幸运的是，仅在春季，Asset Store中出现了一个插件，该插件可让您从屏幕上完全，多平台捕获视频（经过一些自定义），因为从头开始编写这样的工具远远超出了我的编程技能， 但总的来说，我是一名设计师 。