Can't set individual text colors

[benstadin]

It seems only the global color is used, but individual text colors get lost:

glfonsSetColor(fs, glfonsRGBA(0.0, 0.0, 0.0, 255.0)); // This color is used

unsigned int white = glfonsRGBA(255,255,255,255); glfonsRasterize(fs, textIds[6],"DROP THAT SHADOW white", white); // Color is ignored

~Ben

[karimnaaji]

Thanks for the catch! Are you using color per text? Actually for now the color can be set only per text buffer you would create because it's sent as a uniform to the shader.

[benstadin]

I see. Yes, I wanted to style some text individually and give some shadow as in the original fontstash example.

[benstadin]

Is it possible to use two buffers as a workaround? I tried it but didn't have success so far.

[karimnaaji]

Yes, a workaround would be using different buffer, can you share your code so that I can help?

[benstadin]

Sure.

- (void)createFontContext
{
    GLFONSparams params;
    params.useGLBackend = true; // if not set to true, you must provide your own gl backend
    fs = glfonsCreate(512, 512, FONS_ZERO_TOPLEFT, params, nullptr);

    if (fs == NULL) {
        NSLog(@"Could not create font context");
    }

    [self loadFonts];

    fonsSetFont(fs, amiri);

    // set the screen size for font context transformations
    glfonsScreenSize(fs, width, height);

    // create and bind buffer
    glfonsBufferCreate(fs, &textBuffer);

    glfonsBufferCreate(fs, &textBuffer2);

    // generate text ids for the currently bound text buffer
    glfonsGenText(fs, NB_TEXT, textIds);

    glfonsGenText(fs, NB_TEXT, textIds2);

    unsigned int white,black,brown,blue;

    white = glfonsRGBA(255,255,255,255);
    brown = glfonsRGBA(192,128,0,128);
    blue = glfonsRGBA(0,192,255,255);
    black = glfonsRGBA(0,0,0,255);

    // rasterize some text
    fonsSetBlur(fs, 2.5);
    fonsSetSize(fs, 60.0 * dpiRatio);
    fonsSetBlurType(fs, FONS_EFFECT_DISTANCE_FIELD);

    // black text
    fonsSetColor(fs, black);
    fonsSetSpacing(fs, 0.0f);
    fonsSetBlur(fs, 9.0f);
    glfonsRasterize(fs, textIds[5],"DROP THAT SHADOW");

    // shadow for text
    fonsSetColor(fs, white);
    fonsSetBlur(fs, 0);
    glfonsRasterize(fs, textIds2[0],"DROP THAT SHADOW");

    float tx = 10.0 * dpiRatio;
    float ty = 100.0 + (50.0 / 2 * dpiRatio);

    tx = 10.0 * dpiRatio;
    ty = 100.0 + 5 * (50.0 / 2 * dpiRatio);
    glfonsTransform(fs, textIds[0], tx, ty, 0.0, 1.0);
    glfonsTransform(fs, textIds2[0], tx, ty+4.0, 0.0, 1.0);

    // upload rasterized data of currently bound buffer to gpu
    glfonsUpdateBuffer(fs);
}

[karimnaaji]

I quickly made an example of how to use several buffers/colors (https://github.com/tangrams/fontstash-es/commit/d948280498026e98fc1c46998ca7a21665cbf5c0):

The only thing that I see wrong in your code is that the color is set with fonsSetColor (which doesn't modify colors for rendering, and should be marked as deprecated) instead of several times for the different buffers with glfonsSetColor.

Hope it'll help.

[benstadin]

Thanks! Your example helped me understand how to use the buffers correctly. I didn't bind and upload the second buffer.

[karimnaaji]

Glad it helped!

It can get a little verbose if you use a lot of buffers for a lot of different colors. It seems like you'd be using colors for dropped shadows so it should be fine. I might add some built in effects like that directly written in the shader so that it would be easily usable, don't hesitate to share thoughts or any use case you would have!