Create sprite with repeating rgba without png

cocos2d-x C++
#1

How to create a sprite using a texture without png file and filled with repeating linear rgba? Please provide a full sample. Thanks in advance.

#2
#3

What language is it?

#4

Objective C

#5

Any possible cocos2dx.v3.6 c++ implementation?

#6

yes… I think you will be able easily to port from cocos2d (Obj-c) to cocos2d-x (c++)

#7

The problem is; i can’t :slight_smile: I’m new in c++, i need to be illuminated nowadays :slight_smile:

#8

@hgokturk

This is how i do with Cocos2d-JS

var sprite = new cc.Sprite();
sprite.setTextureRect(cc.rect(0, 0, width, height));
sprite.color = color;

So you may try the same way with Cocos2d-X

#9

Isn’t my post clear?

#10

follow the link How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X

I port to cocos2d-x (c++) for you
read the above link for understand how to create dynamic textures…
and read my code for understand how to code these in the cocos2d-x…

source cocos2d-x 3.6: https://www.dropbox.com/s/gsvkfeod2onf90x/tiny.zip?dl=0
https://www.youtube.com/watch?v=NNXLuCe_xww&feature=youtu.be

Hope this can help you:-)

1 Like
#11

@doanhieuthien thank you very much i appreciate your help :slight_smile:

#12

@doanhieuthien pal could you please explain only the part which creates texture, sprite with linear background? Like this image you know what i mean https://easytweaks.files.wordpress.com/2010/08/green-blend-window.png
It’s drawn repeatedly, beginning with some color and ending with another color.

#13

draw two triangles (0,1,2) and (3,4,5) with two colors as follow…

0,3--------5
 |         |
 |         |
 1--------2,4

set point 0,1,3 with color 1
set point 2,4,5 with color 2

=> repeatedly from left with color 1(0, 1, 3) to right with corlor2 .(5,2,4)

void HelloWorld::DrawStripes(Color4F c1, Color4F c2, float textureWidth, float textureHeight)
{
    Point vertices[6];
    Color4F colors[6];
    
    vertices[0] = Point(0, 0);
    colors[0] = Color4F(c1.r, c1.g, c1.b, c1.a);

    vertices[1] = Point(0, textureHeight);
    colors[1] = Color4F(c1.r, c1.g, c1.b, c1.a);

    vertices[2] = Point(textureWidth, textureHeight);
    colors[2] = Color4F(c2.r, c2.g, c2.b, c2.a);
    
    vertices[3] = Point(0, 0);
    colors[3] = Color4F(c1.r, c1.g, c1.b, c1.a);

    vertices[4] = Point(textureWidth, textureHeight);
    colors[4] = Color4F(c2.r, c2.g, c2.b, c2.a);

    vertices[5] = Point(textureWidth, 0);
    colors[5] = Color4F(c2.r, c2.g, c2.b, c2.a);

    
    this->setGLProgram(ShaderCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));
    
    GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POSITION | GL::VERTEX_ATTRIB_FLAG_COLOR);
    CC_NODE_DRAW_SETUP();
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, vertices);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT, GL_FALSE, 0, colors);
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
}

You can rotate triangles to obtain desired dimensional gradient

Using LayerGradient for quick :slight_smile: :slight_smile: :slight_smile:

for example:
LayerGradient* layer = LayerGradient::create(color1, color2, Point(1, 1));
layer->setContentSize(Size(512, 512);
addChile(layer);

1 Like
#14

@doanhieuthien you know what, you quickly became the most beloved Chinese person in my life thank you :)))

#15

I also try to translate that tutorial to the C++. How did you make gradients? I worked with opengl es 2.0 a bit, and seems that everything is correct, but still it doesn’t work somehow:

float gradientAlpha{0.7f};

cocos2d::Point vertices[4];
cocos2d::Color4F colors[4];
size_t numVertices{0};

vertices[numVertices] = {0, 0};
colors[numVertices++] = {0, 0, 0, 0};

vertices[numVertices] = {width, 0};
colors[numVertices++] = {0, 0, 0, 0};

vertices[numVertices] = {0, height};
colors[numVertices++] = {0, 0, 0, gradientAlpha};

vertices[numVertices] = {width, height};
colors[numVertices++] = {0, 0, 0, gradientAlpha};

for (int i {0}; i < numVertices; ++i)
{
    log("Point: %f, %f", vertices[i].x, vertices[i].y);
    log("Color: %f, %f, %f, %f", colors[i].r, colors[i].g, colors[i].b, colors[i].a);
}

setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));
GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POSITION | GL::VERTEX_ATTRIB_FLAG_COLOR);

CC_NODE_DRAW_SETUP();

glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, vertices);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT, GL_FALSE, 0, colors);
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
glDrawArrays(GL_TRIANGLE_STRIP, 0, static_cast<GLsizei>(numVertices));

Log prints this:

Point: 0.000000, 0.000000
Color: 0.000000, 0.000000, 0.000000, 0.000000
Point: 256.000000, 0.000000
Color: 0.000000, 0.000000, 0.000000, 0.000000
Point: 0.000000, 256.000000
Color: 0.000000, 0.000000, 0.000000, 0.700000
Point: 256.000000, 256.000000
Color: 0.000000, 0.000000, 0.000000, 0.700000

I test with:
Cocos 2d-x 3.13.1, iOS 10.1, iPhone 7 plus

#16

You draw with only triangle. (with rectangle (4 points) you should draw with two triangles.(6 points)).

0,3--------5
 |         |
 |         |
 1--------2,4

set point 1,2,4 with color 1
set point 0,3,5 with color 2