事情是这个样子的。在我发布了 使用Cocos实现的画图和填色方案——(我失业的那些日子1) 帖子之后。跟帖的朋友倒是不少。他们个个长的又好看,说话又好听。都说楼主的帖子大有文采,是写代码的程序员里文笔最好的。在他们的称赞下,楼主也飘飘然了起来。
当然夸归夸,单子他们是一个都不下的啊。耐心等待了两天,果然如同晓衡说说的一样——“你这个东西,卖不出去的。”
终于就在第三天的下午,有人添加了我的QQ号。
“大佬,你这个资源会支持 2.X 吗?”
“哎,不瞒你说。到现在一个单都没有呢。我怀疑这个东西过于简单了,大家都不想付钱吧。”我回复说:“如果我适配了2.X,但是只有你一个人下单,我这也是纯亏的啊。”
虽然表面上不想花时间去适配2.X。但是我的内心里却思索起来。可能是我的策略不对。毕竟我这个资源的功能是是纯2D的。会不会是这个功能的目标人群大部分都是用2.X版本的呢?但我现在只支持3.X版本,那自然不会有成交量了。
想到这里,我便立刻打开电脑。开始适配起来2.X版本。
老实讲,我大概有五年的时间没有下载过2.X的引擎了。怎么导入类型我都忘记了。不过在询问了AI几句,这些问题还是很快就解决了。
画图的方案很好解决,只要把 Uint8Array 的数据上传给Texture2D就好。在2.X的Texture2D上本来就有这种现成的接口。而填色方案就比较费事了。
要填色的话首先要获取当前精灵上的Texture2D的rgba数据。在3.X上通过询问AI,我很方便的找到了相关的代码。并且在四个平台(原生iOS,原生Android, web,微信小游戏)都可以正常运行的。而在2.X上则不存在相关接口。
于是我还是咨询AI,这个该怎么做。AI给出的第一版方案是这个样子的(伪代码)
let canvas =document.createElement("canvas");
let ctx = canvas.getContain("2d");
ctx.drawImage(texture2D.getElementObj(), 0, 0);
let data = ctx.getImage(width, height);
这个方案在网页上可以正常运行。但是在微信小游戏上,获取的data里全是0。于是我又咨询AI在微信小游戏上这个怎么做。AI告诉我在微信小游戏上得用微信自己的API去创建canvas。相关代码如下(伪代码)
let canvas = wx.createCanvas();
let image = wx.createImage();
//使用 texture2D 的原始路径:assets/xxxx/xxxx/xxxxx.png去创建image
image.src = texture2D.nativeUrl;
image.onload = ()=>{
let ctx = canvas.getContain("2d");
ctx.drawImage(image, 0, 0);
let data = ctx.getImage(width, height);
}
OK ,AI给的办法确实是对的。所以相关代码需要修改成如下形式
if(微信小游戏){
}
else {
}
接下我们继续验证原生平台(这里楼主因为家境贫寒,没有iOS设备,只能使用Android手机来测试)。果然在原生上这段代码又报错了。
let canvas =document.createElement("canvas");
let ctx = canvas.getContain("2d");
ctx.drawImage(texture2D.getElementObj(), 0, 0);
let data = ctx.getImage(width, height);
ctx没有drawImage函数。实际上我在原生平台打印了一下ctx的属性列表。里边没有任何的web环境下相关API。 
没想到CCC 2.X 的平台差异性居然如此之大。此时已经是晚上10点了。平常这个时候,楼主已经躺在床上看小姐姐跳舞了。
不得已,我只能再次询问AI。这次他给出了一个用 gl.xxxx 的代码。这种底层的代码,让我大受震惊。询问他是从哪里得来的。它直接给我列出来了几个github上的文件。当然这个时候AI已经在胡说八道了,它列出的文件里根本没有这几句。不过我搜索了其中几条代码。居然在 RenderTexture 的 readPixel 函数里找到了原型。
这次的我灵感迸发。决定使用 RenderTexture 来实现这个功能。首先使用 RenderTexture 来读取当前整个屏幕的像素值,然后使用 readPixel 函数读取到指定区域的像素值就搞定啦。胜利的曙光就在眼前了。当我写完代码后一运行。果然顺利的读取到了像素值。但是这个图像怎么是上下颠倒的。 
这里我们可以直接把rgba数组重新排序一下就好了呗。不过在js里搞这种操作,怕不是效率要爆炸。机制的我决定先把精灵设置一下scaleY = -scaleY。然后rt之后,再重新设置回来不就好了吗。
至此,2.X 版本的适配终于完成啦。store链接如下
https://store.cocos.com/app/detail/8258
(如果你还没有看到2.X版本可供下载,说明还在审核阶段。请耐心等待一下)
连载回顾:
追文更新:

