版本：2.4.13，怎么将多个cc.SpriteFrame绘制到一张cc.SpriteFrame上

Creator 2.x
#1

版本：2.4.13，怎么将多个cc.SpriteFrame绘制到一张cc.SpriteFrame上以叠加而不是覆盖的形式，用renderTexture直接这样绘制的话前面绘制的东西会被后面绘制的东西擦除就像这样：
D9$0`QV%BZIAD8H0QK@P7NG

6e693b5b46a3b66010894ebb1973b2c
6e693b5b46a3b66010894ebb1973b2c541×1035 119 KB

我用了的水煮牛肉饭大佬的richtext
https://blog.csdn.net/weixin_42714632/article/details/131019118?spm=1001.2014.3001.5502
image
image715×352 21.1 KB

web端像这样直接drawImage没有任何问题，但是原生端没有drawImage，我应该怎么处理呢？

#2

两个Sprite叠加，就是两个SpriteFrame叠加

#3

在richtext叠加图，需要脚本支持，一般是不支持。可以用两个richtext叠加

#4

这个richtext最终渲染出来的是SpriteFrame，所以只要能将两张SpriteFrame渲染成一张SpriteFrame就行了，向我给出的代码中web端只需要在绘制richtext之前先绘制一下背景this.ctx.drawImage(element, 0, 0, this.viewWidth, this.viewHeight)就可以了，只不过原生端没法this.ctx.drawImage

#5

顶顶，等大佬

#6

如果图片没有合图的话可以用

/**写入动态图 */
function writeToAtlas(rt: dynamicatlas.IRenderTexture, image: Uint8ClampedArray | Uint8Array,
    x: number, y: number, width: number, height: number, premultiplyAlpha: boolean) {
    let objUpdate = rt._texture,
        level = 0,
        flipY = false;
    if (cc.dynamicAtlasManager.textureBleeding) {
        if (width <= 8 || height <= 8) {
            objUpdate.updateSubImage({ image, x: x - 1, y: y - 1, width, height, level, flipY, premultiplyAlpha });
            objUpdate.updateSubImage({ image, x: x - 1, y: y + 1, width, height, level, flipY, premultiplyAlpha });
            objUpdate.updateSubImage({ image, x: x + 1, y: y - 1, width, height, level, flipY, premultiplyAlpha });
            objUpdate.updateSubImage({ image, x: x + 1, y: y + 1, width, height, level, flipY, premultiplyAlpha });
        }
        objUpdate.updateSubImage({ image, x: x - 1, y: y, width, height, level, flipY, premultiplyAlpha });
        objUpdate.updateSubImage({ image, x: x + 1, y: y, width, height, level, flipY, premultiplyAlpha });
        objUpdate.updateSubImage({ image, x: x, y: y - 1, width, height, level, flipY, premultiplyAlpha });
        objUpdate.updateSubImage({ image, x: x, y: y + 1, width, height, level, flipY, premultiplyAlpha });
    }
    objUpdate.updateSubImage({ image, x: x, y: y, width, height, level, flipY, premultiplyAlpha });
}
1赞
#7

这个是做图集？我需要把两张不同的图重叠在一起绘制出来 :sob:

#8

最终目的是啥? 2个sprite重叠也是一样的效果,莫非是为了传递spriteframe的数据到其他地方使用?

#9

小说把文字画到背景上，然后用画出来的这张图做翻页效果

#10

RichText2个图叠一起吗？我记得有Offset的参数

#11

你就理解成把两个图重叠在一起合成一张图

#12

image
image491×998 231 KB
这个是想要的效果，目前只在web端实现了

#13

把文字渲染到一张图上，然后背景作为一张texture，再用shader融合一下

#14

shader要做其他效果，有没有什么办法能像楼上web端那样随便画

#15

这个我提供2个思路：1.修改richtext的源码，img标签计算上提供能叠的计算。修改lineOffset的计算方式。或者自己加一些参数去解析。2.是不修改源码，2层节点，下层放图，上层放richtext，需要先剔除掉img标签，并记录好位置，然后richtext的所有子节点提出取来，找到对应的通过坐标转换放进去。然后按照需要的节点去放图的节点调整位置。都比较麻烦吧。

#16

richtext里面用了canvas，这引擎奇怪的是canvas里面的getContext在原生端能正常用，drawImage在原生端就不能使用。HTMLImageElement和HTMLCanvasElement都能在原生平台用cc.RenderTexture画出来，说明引擎是实现了web端的drawImage，但他就是不给你用，就是玩。而cc.RenderTexture中也倒是有drawTextureAt可以画，但是画两次就会变成我一楼给的那样，然后cc.RenderTexture的bgain和end函数也给移除了，这没有平替的东西真搞不懂为啥要移除掉。还有label和sprite混合合批也是，只能实现web端，原生是一点都改不了。
本来卖点就是跨平台，结果就跨了个寂寞

#17

你可以把两张图的 rgba buffer 取出来
再 用mix的方法 a0.5 + b 0.5 来混合
最后用new Image(finalBuffer,width,height);
再 new cc.Texture2D().initWithData(imageData,xxxx,xxx)

#18

大佬能给个demo吗？我今天上午有这么做过但是画不出来

#19

spriteFrame只是一个套层，底层是texture，texture底层是像素，要渲染为一个spriteFrame，需要合成一个texture。

#20

是的，但是引擎没有给出合的方法 :sob: