画图和填色适配CCC 2.X版本——(我失业的那些日子2)

事情是这个样子的。在我发布了 使用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。 :rofl:

没想到CCC 2.X 的平台差异性居然如此之大。此时已经是晚上10点了。平常这个时候,楼主已经躺在床上看小姐姐跳舞了。

不得已,我只能再次询问AI。这次他给出了一个用 gl.xxxx 的代码。这种底层的代码,让我大受震惊。询问他是从哪里得来的。它直接给我列出来了几个github上的文件。当然这个时候AI已经在胡说八道了,它列出的文件里根本没有这几句。不过我搜索了其中几条代码。居然在 RenderTexture 的 readPixel 函数里找到了原型。

这次的我灵感迸发。决定使用 RenderTexture 来实现这个功能。首先使用 RenderTexture 来读取当前整个屏幕的像素值,然后使用 readPixel 函数读取到指定区域的像素值就搞定啦。胜利的曙光就在眼前了。当我写完代码后一运行。果然顺利的读取到了像素值。但是这个图像怎么是上下颠倒的。 :rofl:

这里我们可以直接把rgba数组重新排序一下就好了呗。不过在js里搞这种操作,怕不是效率要爆炸。机制的我决定先把精灵设置一下scaleY = -scaleY。然后rt之后,再重新设置回来不就好了吗。

至此,2.X 版本的适配终于完成啦。store链接如下
https://store.cocos.com/app/detail/8258

(如果你还没有看到2.X版本可供下载,说明还在审核阶段。请耐心等待一下)

连载回顾:

追文更新:

2赞

会不会是你的画作影响了你的销量 :rofl:

画图的游戏在20-22年巅峰过,现在的感觉不行了,或者说如果你现在才做这类产品,基本赚不到钱了,没有市场,就没有技术需求 :rofl:

https://store.cocos.com/app/detail/3468

大佬,这个版本升级一下??
感觉很好用的样子,但高版本没办法用

卖9.9试试

看起来很牛逼的样子,我也建议升级 :hugs:

有没有那种涂到一个一个小格子的像素上的那种,up可能不知道这种画板demo,cocos技术派以前就整过一版了。

文笔不错,建议起号进军网络小说行业 :smile:

建议cocos拍短剧,拉你做编导,出圈,然后3,2,1上链接,拉新一波cocoser,不然商城这么多插件源码怎么卖出去

我都好几年没摸插件开发了。你现在用的哪个高版本,用不了啊。留言一下,我最近有空了,再适配一下

涂到一个个小格子的那种。有点类似store上的这款。其实你在这个基础上改改。应该可以很方便的实现的。
https://store.cocos.com/app/detail/8074

我默默的看了一下,这个现在还可以用,入口ccc以来下的第一个插件,一直用到现在

试了一下,是可以用.
应该是另外一个.seek-miss
之前试用的是seek-miss.现在这个seek-pro是可以用的.
这个seek-pro应该是最近才免费的.

那我可太感动了。不瞒你说。这个插件是我写的第一个Cocos插件。那个时候都没有AI,插件文档也等于没有。我摸索了2天。写了一个这个玩意。没想到居然有人一直默默在使用。哈哈哈哈哈。快加入我的QQ群: 485674798