当前位置:网站首页>揭秘!价值百万的像素填色解决方案,想开发绘本应用的有福了!
揭秘!价值百万的像素填色解决方案,想开发绘本应用的有福了!
2021-08-08 15:40:36 【wx5d33905354cb6】
魔术橡皮擦
大家好,我是麦芽的香气,一个喜欢解决产品来解决需求的开发者。4年Cocos Creator小游戏、教育App开发,今天给大家分享一些我在工作中积累的小经验Demo。
- 如何获取一个图片的 RGBA 数据,改变这个数据会发生什么?
- 画线和橡皮檫,通过像素画线来解决该痛点(橡皮檫功能,且背景不是纯白底图)
- 给一张图片进行填色,儿童小游戏
本案例Demo 代码已经分享到 Cocos Store 感谢大家的支持!
一、变色原理
在求职面试过程中,大家有没有在被问到这样一个问题:你知道一张1024 * 1024 大小的图占多大内存吗?
再如果不想去,请先移步打开A_Test_Demo,如图:输入X值 = (0-255透明度)将图片部分区域设置其透明度。


不知道大家有没有玩过官方案例里面的截图,如果没有。参考官方案例 demo,有这么一段:
我们从该方法得知,我们返回的 picData 就是一个一维数组,内容如下:
数组的长度为 width * height * 4,也就是一张图片的数据。该数据就可以重新设置一张新图片,代码如下:
二、魔术橡皮擦
注意:如果没看懂 A_Test_Demo 这个 Demo,请不要打开该项目!

该项目铅笔和橡皮檫都是通过 touchMove 的距离大于 5(项目调优值、画线据此值)来获取两个点。
this.startPoint 和 this.endPoint,注意记得转换世界坐标后进行以左上角为起始点来转换。再回到 width * height * 4 再回到我们的 width * height * 4(由上图的test_demo)数组,我们将坐标系换成为左上角来计算。如下图

我们动态获取两点后,在获取 this.startPoint 和 this.endPoint 两点的直线上的点(横线,竖直直线,斜线)下图在讲述斜线两种情况:
OK,当我们获取到相应的点后,在对铅笔线条粗细比如10(动态设置)进行点的叠加。
- 横线:获取该横线点上下加
10 / 2 = 5
个点进去 - 竖线:获取该直线每个点的左右加
10 / 2 = 5
个进去 - 斜线:上图线条1,每个点上下加减;上图线条2,每个点左右加减
10 / 2 = 5
个点,如下图方法:

当获取这些点转换为[R,G,B,A,R,G,B,A,R,G,B,A..............]
的索引铅笔,就改变 RGB 值,橡皮檫就改变 A 的值,那么就实现出了我们的像素画线和橡皮檫功能。
该demo只是学习demo,里面很多值我都固定写死了,同学们想运用到实际demo里面还需要自己好好完善,以及锯齿需要去调优上述getPixel方法,该方法只是启蒙。
三、填色原理
接下来我们移步 tianSe 填色demo,并打开其场景。如果没看懂 A_Test_Demo,和RubberAndDraw 请不要打开该项目。

http://gameview.creator-star.cn/maiyadexiangqi/tianse/index.html
如图: 我们的场景中有大大小小的不标准的图形,我们获取起触摸点。

从该点开始遍历,上左下三个点,上左下,上左下,上右下,上右下等遍历到 RGB 值为椭圆或者正方形等周围的值停止,获取到该坐标值,进行上面 demo1、demo2 再停止。
再次提醒:如果没看懂上述 demo1 和 demo2 请不要看该 demo!请在 Cocos Store 搜索:填色、像素画笔


版权声明
本文为[wx5d33905354cb6]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_14459992/3312831
边栏推荐
- Fourth in the world! Wang Sicong installed a server "readily". Netizen: trench is inhuman
- [Tencent classroom] creator zero foundation immortal practice is online!
- 跟着华为,学数字化转型(3):模式创新
- 记一次接口慢查排查
- Follow Huawei and learn digital transformation (3): mode innovation
- Record an interface slow check and troubleshooting
- @Autowired的这些骚操作,你都知道吗?
- ss -h命令
- @Do you know all these operations of Autowired?
- 使用Yolo v5进行目标检测
猜你喜欢
-
Yazid的新生舞会(线段树)
-
当creator遇上protobufjs|孕育
-
Identify and stop the process that‘s listening on port 8080 or configure this application to listen
-
为什么要推荐大家学习字节码?
-
揭秘!价值百万的像素填色解决方案,想开发绘本应用的有福了!
-
[PyTroch系列-11]:PyTorch基础 - 张量Tensor元素的排序
-
[PyTroch系列-12]:PyTorch基础 - 张量Tensor线性运算(点乘、叉乘)
-
【环境篇】第 3 节 • Navicat 环境安装
-
预训练语言模型的前世今生 - 从Word Embedding到BERT
-
讲道理,只要你是一个爱折腾的程序员,毕业找工作真的不需要再花钱培训!
随机推荐
- 华南理工 | 基于生成式的低比特无数据量化
- 微信小程序授权位置和用户信息权限(防止用户禁止后无法使用位置信息)
- 一行代码快速实现今日头条 网易新闻焦点图自动循环轮播效果
- 因果涌现:数学理论揭示整体怎样大于部分之和
- 年收入百万美元AI科学家的烦恼
- API《为什么奥运会以五色环为标志?》数据源接口
- 用一张草图创建GAN模型,新手也能玩转,朱俊彦团队新研究入选ICCV 2021
- UIUC | 用于语言模型的课程学习
- SS - H command
- Target detection using Yolo V5
- Yazid's freshman ball (thread tree)
- When creator meets protobufjs 𞓜
- 我敢肯定!你还没用过一款代码神器,只属于Creator的用户!
- 小程序页面跳转&&文章详情页的实现&&markdown格式转化为wxml显示在小程序页面里
- 49个项目管理过程ITTO整理(详细)
- 49个项目管理过程ITTO整理(详细-文字版)
- 只是想虐下春丽,一不小心撸了台游戏机...
- Cocos论坛九问九答
- Identify and stop the process that‘s listening on port 8080 or configure this application to listen
- 超详细的I/O多路复用概念、常用I/O模型、系统调用等介绍
- Why recommend learning bytecode?
- SAP Commerce Cloud UI 的用户会话管理
- 以太坊 交易 data字段 内容是什么
- SAP CRM Fiori 应用 My Note 里创建 Note 失败的一个原因分析
- 当creator遇上protobufjs|pbkiller填坑历险记
- Uncover the secret! Millions of pixel color filling solutions. Blessed are those who want to develop picture book applications!
- [pytroch series - 11]: pytorch basis - ordering of tensor tensor elements
- [pytroch series - 12]: pytorch basis tensor tensor linear operation (point multiplication, cross multiplication)
- [environment] section 3 • Navicat environment installation
- The past and present life of pre training language model - from word embedding to Bert
- Make sense, as long as you are a tossing programmer, you really don't need to spend money on training to find a job after graduation!
- South China Technology | low bit no data quantization based on generative
- Wechat applet authorizes location and user information permissions (to prevent users from being unable to use location information after prohibition)
- One line of code can quickly realize the automatic circular rotation effect of today's headlines and Netease News focus map
- Causal emergence: mathematical theory reveals how the whole is greater than the sum of parts
- The troubles of AI scientists with an annual income of millions of dollars
- API "why is the Olympic Games marked by five color rings?" Data source interface
- Create a GaN model with a sketch, which can be played by novices. The new research of Zhu Junyan's team was selected into iccv 2021
- UIUC | course learning for language model
- I'm sure! You haven't used a code artifact yet. It only belongs to creator users!