TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-04-20 13:18:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix raylib renderer to use pointer to fonts rather than global variable

Browse Source
This commit is contained in:
Nic Barker 2025-02-04 11:41:59 +13:00
parent ebf26532c9
commit 9c99ac7800
5 changed files with 73 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
README.md
View File

@ -50,13 +50,18 @@ static inline Clay_Dimensions MeasureText(Clay_StringSlice text, Clay_TextElemen
} }
// Layout config is just a struct that can be declared statically, or inline // Layout config is just a struct that can be declared statically, or inline
Clay_LayoutConfig sidebarItemLayout = (Clay_LayoutConfig) { Clay_ElementDeclaration sidebarItemConfig = (Clay_ElementDeclaration) {
.sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }, .layout = {
.sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }
},
.backgroundColor = COLOR_ORANGE
}; };
// Re-useable components are just normal functions // Re-useable components are just normal functions
void SidebarItemComponent() { void SidebarItemComponent() {
CLAY(CLAY_LAYOUT(sidebarItemLayout), CLAY_RECTANGLE({ .color = COLOR_ORANGE })) {} CLAY(sidebarItemConfig) {
// children go here...
}
} }
int main() { int main() {
@ -65,6 +70,7 @@ int main() {
uint64_t totalMemorySize = Clay_MinMemorySize(); uint64_t totalMemorySize = Clay_MinMemorySize();
Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize)); Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
// Note: screenWidth and screenHeight will need to come from your environment, Clay doesn't handle window related tasks
Clay_Initialize(arena, (Clay_Dimensions) { screenWidth, screenHeight }, (Clay_ErrorHandler) { HandleClayErrors }); Clay_Initialize(arena, (Clay_Dimensions) { screenWidth, screenHeight }, (Clay_ErrorHandler) { HandleClayErrors });
while(renderLoop()) { // Will be different for each renderer / environment while(renderLoop()) { // Will be different for each renderer / environment
@ -79,13 +85,14 @@ int main() {
Clay_BeginLayout(); Clay_BeginLayout();
// An example of laying out a UI with a fixed width sidebar and flexible width main content // An example of laying out a UI with a fixed width sidebar and flexible width main content
CLAY(CLAY_ID("OuterContainer"), CLAY_LAYOUT({ .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }), CLAY_RECTANGLE({ .color = {250,250,255,255} })) { CLAY({ .id = CLAY_ID("OuterContainer"), .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }, .backgroundColor = {250,250,255,255} }) {
CLAY(CLAY_ID("SideBar"), CLAY({
CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16 }), .id = CLAY_ID("SideBar"),
CLAY_RECTANGLE({ .color = COLOR_LIGHT }) .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16 },
.backgroundColor = COLOR_LIGHT }
) { ) {
CLAY(CLAY_ID("ProfilePictureOuter"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }), CLAY_RECTANGLE({ .color = COLOR_RED })) { CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = COLOR_RED }) {
CLAY(CLAY_ID("ProfilePicture"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}), CLAY_IMAGE({ .imageData = &profilePicture, .sourceDimensions = {60, 60} })) {} CLAY({ .id = CLAY_ID("ProfilePicture"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}, .image = { .imageData = &profilePicture, .sourceDimensions = {60, 60} } }) {}
CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} })); CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} }));
} }
@ -94,7 +101,7 @@ int main() {
SidebarItemComponent(); SidebarItemComponent();
} }
CLAY(CLAY_ID("MainContent"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) }}), CLAY_RECTANGLE({ .color = COLOR_LIGHT })) {} CLAY({ .id = CLAY_ID("MainContent"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) } }, .backgroundColor = COLOR_LIGHT }) {}
} }
// All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout
@ -108,7 +115,7 @@ int main() {
case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: { case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
DrawRectangle( DrawRectangle(
renderCommand->boundingBox, renderCommand->boundingBox,
renderCommand->config.rectangleElementConfig->color); renderCommand->renderData.rectangle.backgroundColor);
} }
// ... Implement handling of other command types // ... Implement handling of other command types
} }
@ -201,11 +208,11 @@ Clay UIs are built using the C macro `CLAY()`. This macro creates a new empty el
Child elements are added by opening a block: `{}` after calling the `CLAY()` macro (exactly like you would with an `if` statement or `for` loop), and declaring child components inside the braces. Child elements are added by opening a block: `{}` after calling the `CLAY()` macro (exactly like you would with an `if` statement or `for` loop), and declaring child components inside the braces.
```C ```C
// Parent element with 8px of padding // Parent element with 8px of padding
CLAY(CLAY_LAYOUT({ .padding = CLAY_PADDING_ALL(8) })) { CLAY({ .layout = { .padding = CLAY_PADDING_ALL(8) } }) {
// Child element 1 // Child element 1
CLAY_TEXT(CLAY_STRING("Hello World"), CLAY_TEXT_CONFIG({ .fontSize = 16 })); CLAY_TEXT(CLAY_STRING("Hello World"), CLAY_TEXT_CONFIG({ .fontSize = 16 }));
// Child element 2 with red background // Child element 2 with red background
CLAY(CLAY_RECTANGLE({ .color = COLOR_RED })) { CLAY({ .color = COLOR_RED })) {
// etc // etc
} }
} }
@ -216,13 +223,13 @@ However, unlike HTML and other declarative DSLs, these macros are just C. As a r
// Re-usable "components" are just functions that declare more UI // Re-usable "components" are just functions that declare more UI
void ButtonComponent(Clay_String buttonText) { void ButtonComponent(Clay_String buttonText) {
// Red box button with 8px of padding // Red box button with 8px of padding
CLAY(CLAY_LAYOUT({ .padding = CLAY_PADDING_ALL(8)}), CLAY_RECTANGLE({ .color = COLOR_RED })) { CLAY({ .layout = { .padding = CLAY_PADDING_ALL(8) }, .backgroundColor = COLOR_RED })) {
CLAY_TEXT(buttonText, textConfig); CLAY_TEXT(buttonText, textConfig);
} }
} }
// Parent element // Parent element
CLAY(CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM })) { CLAY({ .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
// Render a bunch of text elements // Render a bunch of text elements
for (int i = 0; i < textArray.length; i++) { for (int i = 0; i < textArray.length; i++) {
CLAY_TEXT(textArray.elements[i], textConfig); CLAY_TEXT(textArray.elements[i], textConfig);
@ -242,7 +249,7 @@ CLAY(CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
### Configuring Layout and Styling UI Elements ### Configuring Layout and Styling UI Elements
The layout of clay elements is configured with the `CLAY_LAYOUT()` macro. The layout of clay elements is configured with the `CLAY_LAYOUT()` macro.
```C ```C
CLAY(CLAY_LAYOUT({ .padding = { 8, 8, 8, 8 }, .layoutDirection = CLAY_TOP_TO_BOTTOM })) { CLAY({ .layout = { .padding = { 8, 8, 8, 8 }, .layoutDirection = CLAY_TOP_TO_BOTTOM })) {
// Children are 8px inset into parent, and laid out top to bottom // Children are 8px inset into parent, and laid out top to bottom
} }
``` ```
@ -255,7 +262,7 @@ A `Clay_LayoutConfig` struct can be defined in file scope or elsewhere, and reus
// Define a style in the global / file scope // Define a style in the global / file scope
Clay_LayoutConfig reusableStyle = (Clay_LayoutConfig) { .backgroundColor = {120, 120, 120, 255} }; Clay_LayoutConfig reusableStyle = (Clay_LayoutConfig) { .backgroundColor = {120, 120, 120, 255} };
CLAY(CLAY_LAYOUT(reusableStyle)) { CLAY({ .layout = eusableStyle)) {
// ... // ...
} }
``` ```
@ -295,7 +302,7 @@ The function `bool Clay_Hovered()` can be called during element construction or
```C ```C
// An orange button that turns blue when hovered // An orange button that turns blue when hovered
CLAY(CLAY_RECTANGLE(.color = Clay_Hovered() ? COLOR_BLUE : COLOR_ORANGE)) { CLAY(.color = Clay_Hovered() ? COLOR_BLUE : COLOR_ORANGE)) {
bool buttonHovered = Clay_Hovered(); bool buttonHovered = Clay_Hovered();
CLAY_TEXT(buttonHovered ? CLAY_STRING("Hovered") : CLAY_STRING("Hover me!"), headerTextConfig); CLAY_TEXT(buttonHovered ? CLAY_STRING("Hovered") : CLAY_STRING("Hover me!"), headerTextConfig);
} }
@ -316,7 +323,7 @@ void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerI
ButtonData linkButton = (ButtonData) { .link = "https://github.com/nicbarker/clay" }; ButtonData linkButton = (ButtonData) { .link = "https://github.com/nicbarker/clay" };
// HandleButtonInteraction will be called for each frame the mouse / pointer / touch is inside the button boundaries // HandleButtonInteraction will be called for each frame the mouse / pointer / touch is inside the button boundaries
CLAY(CLAY_LAYOUT({ .padding = CLAY_PADDING_ALL(8)}), Clay_OnHover(HandleButtonInteraction, &linkButton)) { CLAY({ .layout = { .padding = CLAY_PADDING_ALL(8)}), Clay_OnHover(HandleButtonInteraction, &linkButton)) {
CLAY_TEXT(CLAY_STRING("Button"), &headerTextConfig); CLAY_TEXT(CLAY_STRING("Button"), &headerTextConfig);
} }
``` ```
@ -686,7 +693,7 @@ void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerD
ButtonData linkButton = (ButtonData) { .link = "https://github.com/nicbarker/clay" }; ButtonData linkButton = (ButtonData) { .link = "https://github.com/nicbarker/clay" };
// HandleButtonInteraction will be called for each frame the mouse / pointer / touch is inside the button boundaries // HandleButtonInteraction will be called for each frame the mouse / pointer / touch is inside the button boundaries
CLAY(CLAY_LAYOUT({ .padding = CLAY_PADDING_ALL(8)}), Clay_OnHover(HandleButtonInteraction, &buttonData)) { CLAY({ .layout = { .padding = CLAY_PADDING_ALL(8)}), Clay_OnHover(HandleButtonInteraction, &buttonData)) {
CLAY_TEXT(CLAY_STRING("Button"), &headerTextConfig); CLAY_TEXT(CLAY_STRING("Button"), &headerTextConfig);
} }
``` ```
@ -732,17 +739,18 @@ Returns a [Clay_ElementId](#clay_elementid) for the provided id string, used for
**Examples** **Examples**
```C ```C
// Define an element with 16px of x and y padding // Define an element with 16px of x and y padding
CLAY(CLAY_ID("Outer"), CLAY_LAYOUT({ .padding = CLAY_PADDING_ALL(16) })) { CLAY({ .id = CLAY_ID("Outer"), .layout = { .padding = CLAY_PADDING_ALL(16) } }) {
// A nested child element // A nested child element
CLAY(CLAY_ID("SideBar"), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 })) { CLAY({ .id = CLAY_ID("SideBar"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 } }) {
// Children laid out top to bottom with a 16 px gap between them // Children laid out top to bottom with a 16 px gap between them
} }
// A vertical scrolling container with a colored background // A vertical scrolling container with a colored background
CLAY( CLAY({
CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 }) .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16 },
CLAY_RECTANGLE({ .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) }) .backgroundColor = { 200, 200, 100, 255 },
CLAY_SCROLL({ .vertical = true }) .cornerRadius = CLAY_CORNER_RADIUS(10),
) { .scroll = { .vertical = true }
}) {
// child elements // child elements
} }
} }
@ -845,7 +853,7 @@ An offset version of [CLAY_ID_LOCAL](#clay_local_id). Generates a [Clay_ElementI
**Usage** **Usage**
`CLAY(CLAY_LAYOUT(...layout config)) {}` `CLAY(.layout = { ..layout config)) {}`
**Lifecycle** **Lifecycle**
@ -957,7 +965,7 @@ CLAY(CLAY_ID("Button"), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .si
### CLAY_RECTANGLE ### CLAY_RECTANGLE
**Usage** **Usage**
`CLAY(CLAY_RECTANGLE(...rectangle config)) {}` `CLAY(...rectangle config)) {}`
**Lifecycle** **Lifecycle**
@ -997,7 +1005,7 @@ The underlying `Clay_RectangleElementConfig` can be extended with new members by
**`.color`** - `Clay_Color` **`.color`** - `Clay_Color`
`CLAY_RECTANGLE({ .color = {120, 120, 120, 255} })` `.backgroundColor = {120, 120, 120, 255} })`
Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout. Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
@ -1021,14 +1029,15 @@ Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_
// Declare a reusable rectangle config, with a purple color and 10px rounded corners // Declare a reusable rectangle config, with a purple color and 10px rounded corners
Clay_RectangleElementConfig rectangleConfig = (Clay_RectangleElementConfig) { .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) }; Clay_RectangleElementConfig rectangleConfig = (Clay_RectangleElementConfig) { .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) };
// Declare a rectangle element using a reusable config // Declare a rectangle element using a reusable config
CLAY(CLAY_RECTANGLE(rectangleConfig)) {} CLAY(rectangleConfig)) {}
// Declare a retangle element using an inline config // Declare a retangle element using an inline config
CLAY(CLAY_RECTANGLE({ .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) })) { CLAY({ .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) })) {
// child elements // child elements
} }
// Declare a scrolling container with a colored background // Declare a scrolling container with a colored background
CLAY( CLAY({
CLAY_RECTANGLE({ .color = { 200, 200, 100, 255 }, .cornerRadius = CLAY_CORNER_RADIUS(10) }) .backgroundColor = { 200, 200, 100, 255 },
.cornerRadius = CLAY_CORNER_RADIUS(10)
CLAY_SCROLL({ .vertical = true }) CLAY_SCROLL({ .vertical = true })
) { ) {
// child elements // child elements
@ -1615,18 +1624,18 @@ Controls whether pointer events like hover and click should pass through to cont
```C ```C
// Horizontal container with three option buttons // Horizontal container with three option buttons
CLAY(CLAY_ID("OptionsList"), CLAY_LAYOUT(.childGap = 16)) { CLAY(CLAY_ID("OptionsList"), .layout = { childGap = 16)) {
CLAY_RECTANGLE(CLAY_IDI("Option", 1), CLAY_LAYOUT(.padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) { CLAY_RECTANGLE(CLAY_IDI("Option", 1), .layout = { padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) {
CLAY_TEXT(CLAY_IDI("OptionText", 1), CLAY_STRING("Option 1"), CLAY_TEXT_CONFIG()); CLAY_TEXT(CLAY_IDI("OptionText", 1), CLAY_STRING("Option 1"), CLAY_TEXT_CONFIG());
} }
CLAY_RECTANGLE(CLAY_IDI("Option", 2), CLAY_LAYOUT(.padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) { CLAY_RECTANGLE(CLAY_IDI("Option", 2), .layout = { padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) {
CLAY_TEXT(CLAY_IDI("OptionText", 2), CLAY_STRING("Option 2"), CLAY_TEXT_CONFIG()); CLAY_TEXT(CLAY_IDI("OptionText", 2), CLAY_STRING("Option 2"), CLAY_TEXT_CONFIG());
// Floating tooltip will attach above the "Option 2" container and not affect widths or positions of other elements // Floating tooltip will attach above the "Option 2" container and not affect widths or positions of other elements
CLAY_FLOATING(CLAY_ID("OptionTooltip"), &CLAY_LAYOUT_DEFAULT, CLAY_FLOATING({ .zIndex = 1, .attachment = { .element = CLAY_ATTACH_POINT_CENTER_BOTTOM, .parent = CLAY_ATTACH_POINT_CENTER_TOP } })) { CLAY_FLOATING(CLAY_ID("OptionTooltip"), &CLAY_LAYOUT_DEFAULT, CLAY_FLOATING({ .zIndex = 1, .attachment = { .element = CLAY_ATTACH_POINT_CENTER_BOTTOM, .parent = CLAY_ATTACH_POINT_CENTER_TOP } })) {
CLAY_TEXT(CLAY_IDI("OptionTooltipText", 1), CLAY_STRING("Most popular!"), CLAY_TEXT_CONFIG()); CLAY_TEXT(CLAY_IDI("OptionTooltipText", 1), CLAY_STRING("Most popular!"), CLAY_TEXT_CONFIG());
} }
} }
CLAY_RECTANGLE(CLAY_IDI("Option", 3), CLAY_LAYOUT(.padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) { CLAY_RECTANGLE(CLAY_IDI("Option", 3), .layout = { padding = CLAY_PADDING_ALL(16)), CLAY_RECTANGLE(.color = COLOR_BLUE)) {
CLAY_TEXT(CLAY_IDI("OptionText", 3), CLAY_STRING("Option 3"), CLAY_TEXT_CONFIG()); CLAY_TEXT(CLAY_IDI("OptionText", 3), CLAY_STRING("Option 3"), CLAY_TEXT_CONFIG());
} }
} }

12
examples/introducing-clay-video-demo/main.c
View File

@ -17,12 +17,10 @@ int main(void) {
.width = GetScreenWidth(), .width = GetScreenWidth(),
.height = GetScreenHeight() .height = GetScreenHeight()
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
Clay_SetMeasureTextFunction(Raylib_MeasureText, 0); Font fonts[1];
Raylib_fonts[FONT_ID_BODY_16] = (Raylib_Font) { fonts[FONT_ID_BODY_16] = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400);
.font = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400), SetTextureFilter(fonts[FONT_ID_BODY_16].texture, TEXTURE_FILTER_BILINEAR);
.fontId = FONT_ID_BODY_16 Clay_SetMeasureTextFunction(Raylib_MeasureText, (uintptr_t)fonts);
};
SetTextureFilter(Raylib_fonts[FONT_ID_BODY_16].font.texture, TEXTURE_FILTER_BILINEAR);
ClayVideoDemo_Data data = ClayVideoDemo_Initialize(); ClayVideoDemo_Data data = ClayVideoDemo_Initialize();
@ -49,7 +47,7 @@ int main(void) {
BeginDrawing(); BeginDrawing();
ClearBackground(BLACK); ClearBackground(BLACK);
Clay_Raylib_Render(renderCommands); Clay_Raylib_Render(renderCommands, fonts);
EndDrawing(); EndDrawing();
} }
} }

17
examples/raylib-multi-context/main.c
View File

@ -40,6 +40,10 @@ int main(void) {
}; };
Clay_Raylib_Initialize(1024, 768, "Introducing Clay Demo", FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT); // Extra parameters to this function are new since the video was published Clay_Raylib_Initialize(1024, 768, "Introducing Clay Demo", FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT); // Extra parameters to this function are new since the video was published
Font fonts[1];
fonts[FONT_ID_BODY_16] = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400);
SetTextureFilter(fonts[FONT_ID_BODY_16].texture, TEXTURE_FILTER_BILINEAR);
uint64_t clayRequiredMemory = Clay_MinMemorySize(); uint64_t clayRequiredMemory = Clay_MinMemorySize();
Clay_Arena clayMemoryTop = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory)); Clay_Arena clayMemoryTop = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
@ -48,6 +52,7 @@ int main(void) {
.height = GetScreenHeight() / 2 .height = GetScreenHeight() / 2
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
ClayVideoDemo_Data dataTop = ClayVideoDemo_Initialize(); ClayVideoDemo_Data dataTop = ClayVideoDemo_Initialize();
Clay_SetMeasureTextFunction(Raylib_MeasureText, (uintptr_t)fonts);
Clay_Arena clayMemoryBottom = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory)); Clay_Arena clayMemoryBottom = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
Clay_Context *clayContextBottom = Clay_Initialize(clayMemoryBottom, (Clay_Dimensions) { Clay_Context *clayContextBottom = Clay_Initialize(clayMemoryBottom, (Clay_Dimensions) {
@ -55,13 +60,7 @@ int main(void) {
.height = GetScreenHeight() / 2 .height = GetScreenHeight() / 2
}, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published }, (Clay_ErrorHandler) { HandleClayErrors }); // This final argument is new since the video was published
ClayVideoDemo_Data dataBottom = ClayVideoDemo_Initialize(); ClayVideoDemo_Data dataBottom = ClayVideoDemo_Initialize();
Clay_SetMeasureTextFunction(Raylib_MeasureText, (uintptr_t)fonts);
Clay_SetMeasureTextFunction(Raylib_MeasureText, 0);
Raylib_fonts[FONT_ID_BODY_16] = (Raylib_Font) {
.font = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400),
.fontId = FONT_ID_BODY_16
};
SetTextureFilter(Raylib_fonts[FONT_ID_BODY_16].font.texture, TEXTURE_FILTER_BILINEAR);
while (!WindowShouldClose()) { while (!WindowShouldClose()) {
dataBottom.yOffset = GetScreenHeight() / 2; dataBottom.yOffset = GetScreenHeight() / 2;
@ -69,8 +68,8 @@ int main(void) {
Clay_RenderCommandArray renderCommandsBottom = CreateLayout(clayContextBottom, &dataBottom); Clay_RenderCommandArray renderCommandsBottom = CreateLayout(clayContextBottom, &dataBottom);
BeginDrawing(); BeginDrawing();
ClearBackground(BLACK); ClearBackground(BLACK);
Clay_Raylib_Render(renderCommandsTop); Clay_Raylib_Render(renderCommandsTop, fonts);
Clay_Raylib_Render(renderCommandsBottom); Clay_Raylib_Render(renderCommandsBottom, fonts);
EndDrawing(); EndDrawing();
} }
} }

23
examples/raylib-sidebar-scrolling-container/main.c
View File

@ -154,7 +154,7 @@ ScrollbarData scrollbarData = {0};
bool debugEnabled = false; bool debugEnabled = false;
void UpdateDrawFrame(void) void UpdateDrawFrame(Font* fonts)
{ {
Vector2 mouseWheelDelta = GetMouseWheelMoveV(); Vector2 mouseWheelDelta = GetMouseWheelMoveV();
float mouseWheelX = mouseWheelDelta.x; float mouseWheelX = mouseWheelDelta.x;
@ -203,7 +203,7 @@ void UpdateDrawFrame(void)
// currentTime = GetTime(); // currentTime = GetTime();
BeginDrawing(); BeginDrawing();
ClearBackground(BLACK); ClearBackground(BLACK);
Clay_Raylib_Render(renderCommands); Clay_Raylib_Render(renderCommands, fonts);
EndDrawing(); EndDrawing();
// printf("render time: %f ms\n", (GetTime() - currentTime) * 1000); // printf("render time: %f ms\n", (GetTime() - currentTime) * 1000);
@ -227,20 +227,15 @@ int main(void) {
uint64_t totalMemorySize = Clay_MinMemorySize(); uint64_t totalMemorySize = Clay_MinMemorySize();
Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize)); Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors }); Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors });
Clay_SetMeasureTextFunction(Raylib_MeasureText, 0);
Clay_Raylib_Initialize(1024, 768, "Clay - Raylib Renderer Example", FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT); Clay_Raylib_Initialize(1024, 768, "Clay - Raylib Renderer Example", FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT);
profilePicture = LoadTextureFromImage(LoadImage("resources/profile-picture.png")); profilePicture = LoadTextureFromImage(LoadImage("resources/profile-picture.png"));
Raylib_fonts[FONT_ID_BODY_24] = (Raylib_Font) {
.font = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400),
.fontId = FONT_ID_BODY_24,
};
SetTextureFilter(Raylib_fonts[FONT_ID_BODY_24].font.texture, TEXTURE_FILTER_BILINEAR);
Raylib_fonts[FONT_ID_BODY_16] = (Raylib_Font) { Font fonts[2];
.font = LoadFontEx("resources/Roboto-Regular.ttf", 32, 0, 400), fonts[FONT_ID_BODY_24] = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400);
.fontId = FONT_ID_BODY_16, SetTextureFilter(fonts[FONT_ID_BODY_24].texture, TEXTURE_FILTER_BILINEAR);
}; fonts[FONT_ID_BODY_16] = LoadFontEx("resources/Roboto-Regular.ttf", 32, 0, 400);
SetTextureFilter(Raylib_fonts[FONT_ID_BODY_16].font.texture, TEXTURE_FILTER_BILINEAR); SetTextureFilter(fonts[FONT_ID_BODY_16].texture, TEXTURE_FILTER_BILINEAR);
Clay_SetMeasureTextFunction(Raylib_MeasureText, (uintptr_t)fonts);
//-------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------
@ -254,7 +249,7 @@ int main(void) {
Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors }); Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors });
reinitializeClay = false; reinitializeClay = false;
} }
UpdateDrawFrame(); UpdateDrawFrame(fonts);
} }
return 0; return 0;
} }

14
renderers/raylib/clay_renderer_raylib.c
View File

@ -8,13 +8,6 @@
#define CLAY_RECTANGLE_TO_RAYLIB_RECTANGLE(rectangle) (Rectangle) { .x = rectangle.x, .y = rectangle.y, .width = rectangle.width, .height = rectangle.height } #define CLAY_RECTANGLE_TO_RAYLIB_RECTANGLE(rectangle) (Rectangle) { .x = rectangle.x, .y = rectangle.y, .width = rectangle.width, .height = rectangle.height }
#define CLAY_COLOR_TO_RAYLIB_COLOR(color) (Color) { .r = (unsigned char)roundf(color.r), .g = (unsigned char)roundf(color.g), .b = (unsigned char)roundf(color.b), .a = (unsigned char)roundf(color.a) } #define CLAY_COLOR_TO_RAYLIB_COLOR(color) (Color) { .r = (unsigned char)roundf(color.r), .g = (unsigned char)roundf(color.g), .b = (unsigned char)roundf(color.b), .a = (unsigned char)roundf(color.a) }
typedef struct
{
uint32_t fontId;
Font font;
} Raylib_Font;
Raylib_Font Raylib_fonts[10];
Camera Raylib_camera; Camera Raylib_camera;
typedef enum typedef enum
@ -96,7 +89,8 @@ static inline Clay_Dimensions Raylib_MeasureText(Clay_StringSlice text, Clay_Tex
float lineTextWidth = 0; float lineTextWidth = 0;
float textHeight = config->fontSize; float textHeight = config->fontSize;
Font fontToUse = Raylib_fonts[config->fontId].font; Font* fonts = (Font*)userData;
Font fontToUse = fonts[config->fontId];
// Font failed to load, likely the fonts are in the wrong place relative to the execution dir // Font failed to load, likely the fonts are in the wrong place relative to the execution dir
if (!fontToUse.glyphs) return textSize; if (!fontToUse.glyphs) return textSize;
@ -128,7 +122,7 @@ void Clay_Raylib_Initialize(int width, int height, const char *title, unsigned i
// EnableEventWaiting(); // EnableEventWaiting();
} }
void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands) void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands, Font* fonts)
{ {
for (int j = 0; j < renderCommands.length; j++) for (int j = 0; j < renderCommands.length; j++)
{ {
@ -142,7 +136,7 @@ void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands)
char *cloned = (char *)malloc(textData->stringContents.length + 1); char *cloned = (char *)malloc(textData->stringContents.length + 1);
memcpy(cloned, textData->stringContents.chars, textData->stringContents.length); memcpy(cloned, textData->stringContents.chars, textData->stringContents.length);
cloned[textData->stringContents.length] = '\0'; cloned[textData->stringContents.length] = '\0';
Font fontToUse = Raylib_fonts[textData->fontId].font; Font fontToUse = fonts[textData->fontId];
DrawTextEx(fontToUse, cloned, (Vector2){boundingBox.x, boundingBox.y}, (float)textData->fontSize, (float)textData->letterSpacing, CLAY_COLOR_TO_RAYLIB_COLOR(textData->textColor)); DrawTextEx(fontToUse, cloned, (Vector2){boundingBox.x, boundingBox.y}, (float)textData->fontSize, (float)textData->letterSpacing, CLAY_COLOR_TO_RAYLIB_COLOR(textData->textColor));
free(cloned); free(cloned);
break; break;