nicbarker
[Renderer/Raylib] Text disappears when setting padding top or left on container component.
When setting the left/top padding on a component containing text, the text disappears. Setting the right or bottom padding works as expected.
works:
CLAY({.id = CLAY_ID("Container"),
.backgroundColor = {0, 0, 0, 255},
.layout = {.padding = {0, 24, 0, 24}}})
{
CLAY_TEXT(CLAY_STRING("Hello World"),
CLAY_TEXT_CONFIG(
{.fontSize = 64,
.textColor = {255, 255, 255, 255}}));
}
doesn't work:
CLAY({.id = CLAY_ID("Container"),
.backgroundColor = {0, 0, 0, 255},
.layout = {.padding = {1, 0, 0, 0}}})
{
CLAY_TEXT(CLAY_STRING("Hello World"),
CLAY_TEXT_CONFIG(
{.fontSize = 64,
.textColor = {255, 255, 255, 255}}));
}
Hello! That is odd, I just tried both those examples and they appear to work on my machine. What combination of OS / compiler are you running?
Hey, I am having the exact same problem. I am using Debian 12 (Wayland) and gcc 12.2.0
The text also doesn't show when using childAlignment with anything other than X_LEFT or Y_TOP. It's also recursive: Any parent element with left or top padding or childAlignment prevents the text from being rendered Same for Debian 13, gcc 14.2.0 and X11
(I could solve the problem by having both the render commands and all the clay function calls in one file. So it might be a problem if you want to define a layout in a different compilation unit) (don't know if that's actually true or if it's the reason below, I'm just trying different things right now, not proper testing)
Another thing that causes this problem is if you store a Clay_RenderCommandArray in a global variable. It seems the layout must be recreated in every draw loop.
Sorry if I'm stating obvious things that are explained on the main page, I just started using clay myself.
I've been pulling my hair out on this one too. Setting .left or .top padding to anything other than 0 doesn't render text. It doesn't even generate the draw commands. That is this creates two render commands:
Clay_BeginLayout();
CLAY({
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0)
},
.padding = {0, 0, 0, 0}
},
.backgroundColor = {150, 150, 255, 255}
}) {
CLAY_TEXT(CLAY_STRING("Hello Clay"), CLAY_TEXT_CONFIG({ .textColor = {0,0,0,255}, .fontId = 0, .fontSize = 48 }));
}
Clay_RenderCommandArray renderCommands = Clay_EndLayout();
Yet this creates only one:
Clay_BeginLayout();
CLAY({
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0)
},
.padding = {1, 0, 0, 0}
},
.backgroundColor = {150, 150, 255, 255}
}) {
CLAY_TEXT(CLAY_STRING("Hello Clay"), CLAY_TEXT_CONFIG({ .textColor = {0,0,0,255}, .fontId = 0, .fontSize = 48 }));
}
Clay_RenderCommandArray renderCommands = Clay_EndLayout();
Setting .top to >0 has the same effect, yet setting bottom or right work as expected. I'm using Raylib 5.6 should that affect it. Maybe it's something to do with that troublesome measure text function people have been complaining about.
This is on an Ubuntu Linux X11 system and v13.3.0-gcc in a debug build. I have tried CLang 18.1.3 but to no avail. Release builds don't make a difference either, although I've not played with any of the compile flags, just relying on CMake to do the right thing.
For completeness, my minimum reproducible example is:
#define CLAY_IMPLEMENTATION
#include "clay/clay.h"
#include "clay/clay_renderer_raylib.c"
#include "raylib.h"
int main() {
uint64_t totalMemorySize = Clay_MinMemorySize();
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { nullptr, nullptr });
Clay_Raylib_Initialize(2048, 2048, "Clay - Raylib Renderer Example", FLAG_VSYNC_HINT);
Font fonts[1];
int codepoints[128] = {};
for (int i = 0; i < 95; i++) {
codepoints[i] = 32 + i;
}
const char* fontpath = "resources/Inter_24pt-Regular.ttf";
fonts[0] = LoadFontEx(fontpath, 48, codepoints, 128);
SetTextureFilter(fonts[0].texture, TEXTURE_FILTER_BILINEAR);
Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts);
while (!WindowShouldClose()) {
Clay_BeginLayout();
CLAY({
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0)
},
.padding = {1, 0, 0, 0}
},
.backgroundColor = {150, 150, 255, 255}
}) {
CLAY_TEXT(CLAY_STRING("Hello Clay"), CLAY_TEXT_CONFIG({ .textColor = {0,0,0,255}, .fontId = 0, .fontSize = 48 }));
}
Clay_RenderCommandArray renderCommands = Clay_EndLayout();
BeginDrawing();
ClearBackground(WHITE);
Clay_Raylib_Render(renderCommands, fonts);
DrawTextEx(fonts[0], "Hello Raylib", {10.0f, 39.0f}, 48, 0.0f, DARKGRAY);
EndDrawing();
}
Clay_Raylib_Close();
return 0;
}
The "Hello Raylib" renders in the correct font. The "Hello Clay" doesn't render at all unless .padding.left is 0
I ran into this problem, I did find a workaround. I found the raylib-sidebar-scrolling-container was successfully rendering the text with padding on the parent container. I found the key difference being the call to Clay_SetLayoutDimensions in the UpdateDrawFrame method.
I tested it by using the minimum reproducable example above:
#define CLAY_IMPLEMENTATION
#include "clay/clay.h"
#include "clay/clay_renderer_raylib.c"
#include "raylib.h"
int main() {
uint64_t totalMemorySize = Clay_MinMemorySize();
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { nullptr, nullptr });
Clay_Raylib_Initialize(2048, 2048, "Clay - Raylib Renderer Example", FLAG_VSYNC_HINT);
Font fonts[1];
int codepoints[128] = {};
for (int i = 0; i < 95; i++) {
codepoints[i] = 32 + i;
}
const char* fontpath = "resources/Inter_24pt-Regular.ttf";
fonts[0] = LoadFontEx(fontpath, 48, codepoints, 128);
SetTextureFilter(fonts[0].texture, TEXTURE_FILTER_BILINEAR);
Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts);
while (!WindowShouldClose()) {
// This got the "Hello Clay" text rendering ↓
Clay_SetLayoutDimensions((Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() });
Clay_BeginLayout();
CLAY({
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0)
},
.padding = {1, 0, 0, 0}
},
.backgroundColor = {150, 150, 255, 255}
}) {
CLAY_TEXT(CLAY_STRING("Hello Clay"), CLAY_TEXT_CONFIG({ .textColor = {0,0,0,255}, .fontId = 0, .fontSize = 48 }));
}
Clay_RenderCommandArray renderCommands = Clay_EndLayout();
BeginDrawing();
ClearBackground(WHITE);
Clay_Raylib_Render(renderCommands, fonts);
DrawTextEx(fonts[0], "Hello Raylib", {10.0f, 39.0f}, 48, 0.0f, DARKGRAY);
EndDrawing();
}
Clay_Raylib_Close();
return 0;
}
I'm running on Windows 11, compiling with MSVC
