Creating Texture with Data and Rendering it

Hi,

I need to generate a texture with data based on colors defined by the user (in the component inspector).

I have created a custom Component who has 4 properties (Colors) and it extends from cc.Sprite.
To render the texture that I need I’m doing the follow.

on the start() method of the Component:

    let size = this.node.getContentSize();
    let newTexture = new cc.Texture2D();
    let data = TextureUtils.createQuadData(...... ,size.width, size.height);
    newTexture.initWithData(data, 4, size.width, size.height);
    newTexture.handleLoadedTexture();
    let newSprite = new cc.SpriteFrame(newTexture, new cc.Rect(0, 0, size.width, size.height), false
    ,cc.Vec2.ZERO, size);

Where TextureUtils.createQuadData returns an Uint8Array with the data of the texture

    createQuadData(width, height) {
    let data = new Uint8Array(width * height * 4);
    for(let i= 0; i<width; i++) {            
        for(let n= 0; n<height; n++) {
            //R
            data[i*width*4+n*4+0] = 255;
            //G
            data[i*width*4+n*4+1] = 255;
            //B
            data[i*width*4+n*4+2] = 255;
            //A
            data[i*width*4+n*4+3] = 255;
        }
    }
    return data;
}

I don’t know if this is the right way to render a texture in a Sprite (since is not working). But basically what I need is to render in the scene the texture with the data (For now I’m just creating a White texture but Eventually I will change it to the right values).
I’m creating a tool to generate UI for another project, and we’re using Cocos Creator only to visualize how the UI will look, so is not needed to play the Scene and is not needed to add Gameplay logic. The objective is only to visualize how the Sprite (with the created texture) will look in a canvas, then I’m exporting the assets and a generating a JSON with the format of the Scene into another project.

Regards

You are correct, I tested with code below and it work

cc.Class({

extends: cc.Component,
properties: {
},
start() {
    let size = cc.size(200, 200);
    let newTexture = new cc.Texture2D();
    let data = this.createQuadData(size.width, size.height);
    newTexture.initWithData(data, 4, size.width, size.height);
    newTexture.handleLoadedTexture();
    let spriteFrame = new cc.SpriteFrame(newTexture, new cc.Rect(0, 0, size.width, size.height), false
        , cc.Vec2.ZERO, size);

    let node = new cc.Node();
    let spriteComponent = node.addComponent(cc.Sprite);
    spriteComponent.spriteFrame = spriteFrame;
    this.node.addChild(node);
},

createQuadData(width, height) {
    let data = new Uint8Array(width * height * 4);
    for (let i = 0; i < width; i++) {
        for (let n = 0; n < height; n++) {
            //R
            data[i * width * 4 + n * 4 + 0] = 255;
            //G
            data[i * width * 4 + n * 4 + 1] = 255;
            //B
            data[i * width * 4 + n * 4 + 2] = 255;
            //A
            data[i * width * 4 + n * 4 + 3] = 255;
        }
    }
    return data;
}

});

Thanks for checking my code!

In fact yes, it worked but only when you test the scene (Playing it). But what I need is to see the generated texture in the Scene (in Editor context), not when playing.
There is a way to do that? How I can render the texture so I can see it in the Scene (Editor context).

Regards

I fixed it forcing the renderer to set the sprite frame:

    let size = this.node.getContentSize();
    let newTexture = new cc.Texture2D();
    let data = TextureUtils.createQuadData(size.width, size.height);
    newTexture.initWithData(data, 4, size.width, size.height);
    let newSprite = new cc.SpriteFrame(newTexture, new cc.Rect(0, 0, size.width, size.height), false, cc.Vec2.ZERO, size);
    this.spriteFrame = newSprite;
    this._sgNode.setSpriteFrame(newSprite);
    this._sgNode.setVisible(true);  

That update the renderer in the Scene.

regards.

1 Like