这是一个能够实时对图像内容进行平滑的画板,使用时,用户仅需在画板中绘制出像素风格的图像,那么便可实时得到 Q 版的图像,可用于简单可爱风格的图片制作,下方图片为软件作品示例:
-
开发该应用的初衷:
上一个独立游戏中的物体资源是使用 IPad 的 Procreate 绘制出像素图片,导出后再用自制软件进行批量平滑,因而无法在绘制阶段实时查看平滑效果,妨碍效率,另外附上该独立游戏 h5 版网址:https://juliusjiang.github.io/slime_war/build/web-desktop/
很多人都喜欢画画,但是一提笔就容易被自己刚画的歪歪扭扭的线给打击信心,所以如果不用画线也可以进行美术创作,那对很多人来讲肯定是好事
-
跳过一切直接体验应用:https://juliusjiang.github.io/pixel_round/point_round_h5/build/
![1702191707560](https://private-user-images.githubusercontent.com/33363444/289342585-c5cbbf67-1799-40df-8f57-09e6c3aec274.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5ODYzNzIsIm5iZiI6MTcyMzk4NjA3MiwicGF0aCI6Ii8zMzM2MzQ0NC8yODkzNDI1ODUtYzVjYmJmNjctMTc5OS00MGRmLThmNTctMDllNmMzYWVjMjc0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDEzMDExMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg2MDA0MDFkNDJiMzQ1NzE1NzNiNDUxZDRhMzk5ZWIzMjZkYzEzOTkzODljYzAyMDk1NWRiYmQ2ZDZlNjE0MmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3TzvWF9PY820FCffmP37fbqYuu9FujK2cU3YpudEb88)
以下是 2 个具体的案例,其中左侧为画板图像,右侧为实时平滑后的图像。可以看出来,经过画板的处理,原图像中的锯齿被抹平为连贯的相连直线,图像变得更加柔和
- 案例 1,时髦发型男:
- 案例 2,紫袍巫师:
以下解释中红色块为重点关注目标
-
规则 1:尖角俩侧颜色一致的话,尖角会被该颜色占领
原图中红色块左下角俩侧均为蓝色块:
平滑后红色块左下角被占领:
-
规则 2:符合规则 1 的同时,被占领的形状跟随相邻情况进行变化
原图中红色块左下角被呈 “L” 排布的蓝色块包围:
平滑后红色块左下角被斜三角形占领:
以上 2 个规则为最核心的平滑规则,而且对于旋转、镜像的情况也同样适用。按照以上规则,就能够理解下方图像的变化,那么在使用的时候就知道如何得到自己想要的效果,其中左图为平滑前的原图,右图为平滑后的效果:
-
操作说明:该应用由于目前可操作内容不多,所以不设菜单栏,而是把所有操作平铺在界面,由此界面按钮、参数看起来比较多,但最开始要注意的仅是界面左下角的这 6 个操作,其中标注的字母为快捷键
画笔:使用画笔颜色填充鼠标框选的区域
拾色器:吸取画板中已有颜色作为当前画笔颜色
橡皮擦:清除选框内画笔留下的内容
画笔颜色:调整当前画笔颜色
撤销:撤销上一步的操作
恢复:撤销过量的时候,回退 “撤销”
-
步骤说明:
暂时忽略右侧平滑的效果,每 2 个像素作为 1 个单位,绘制出一个恰当的像素图
此时对应的平滑效果图比较扭曲
最后,以平滑效果为准,不断调整像素图,直到效果达到预期即完成
此时像素图已被修改,对比一开始,很多像素细节已经发生修改,这也是最开始以 2 像素作为 1 个单位的原因
-
空间限制:目前应用数据存储在浏览器本地,所以存储空间大小取决于浏览器,一般使用不会出现问题,但是长时间积累的话会有不确定性,所以有重要成果的时候记得及时 “导出像素图为 png” 以进行文件备份
-
解决平滑后连接处棱角突出的问题
-
扩大平滑的检测范围,兼容更多的角度需要
-
给画板添加更多的操作选项
-
该工程的开发环境为 NodeJS + TypeScript + React + Antd,且涉及大量的 WebGL 内容
-
round_react_creator_h5 是放置源码的核心目录,安装好 NodeJS 后,该目录下运行命令 “npm install” 安装所有依赖项,再运行命令 “npm run start” 即可启动本地调试
-
round_react_creator_electron 是 round_react_creator_h5 对应的 Electron 版本,仅用于发布本地应用,可以忽略
-
平滑后图像效果有棱角突出的感觉,有点类似低面数 3D 模型的效果,所以展示尺寸宜小不宜大
-
该应用的平滑效果最终起到的是辅助作用,它仍然要求用户有基础的美术水平,比如简单的配色以及对元素的抽象
-
发布 h5 以后,须把 index.html 中 script 标签中 js 的路径 "/xxx" 改成 "./xxx",这样才可运行正常,这个问题属于 react,暂时不计划解决