diff --git a/examples/SDL2-video-demo/CMakeLists.txt b/examples/SDL2-video-demo/CMakeLists.txt index 96d278e1..ace85924 100644 --- a/examples/SDL2-video-demo/CMakeLists.txt +++ b/examples/SDL2-video-demo/CMakeLists.txt @@ -23,6 +23,15 @@ FetchContent_Declare( ) FetchContent_MakeAvailable(SDL2_ttf) +FetchContent_Declare( + SDL2_image + GIT_REPOSITORY "https://github.com/libsdl-org/SDL_image.git" + GIT_TAG "release-2.8.4" + GIT_PROGRESS TRUE + GIT_SHALLOW TRUE +) +FetchContent_MakeAvailable(SDL2_image) + add_executable(SDL2_video_demo main.c) target_compile_options(SDL2_video_demo PUBLIC) @@ -32,6 +41,7 @@ target_link_libraries(SDL2_video_demo PUBLIC SDL2::SDL2main SDL2::SDL2-static SDL2_ttf::SDL2_ttf-static + SDL2_image::SDL2_image-static ) if(MSVC) diff --git a/examples/SDL2-video-demo/main.c b/examples/SDL2-video-demo/main.c index 79800977..3bcd24d2 100644 --- a/examples/SDL2-video-demo/main.c +++ b/examples/SDL2-video-demo/main.c @@ -13,6 +13,8 @@ const int FONT_ID_BODY_16 = 0; Clay_Color COLOR_WHITE = { 255, 255, 255, 255}; +SDL_Surface *sample_image; + void RenderHeaderButton(Clay_String text) { CLAY( CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}), @@ -111,9 +113,18 @@ static Clay_RenderCommandArray CreateLayout() { }) ) { // Header buttons go here + CLAY( + CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}), + CLAY_BORDER_ALL({ 2, COLOR_WHITE }) + ) { + CLAY( + CLAY_LAYOUT({ .padding = { 8, 8, 8, 8 }}), + CLAY_IMAGE({ sample_image, { 23, 42 } }) + ) {} + } CLAY( CLAY_ID("FileButton"), - CLAY_LAYOUT({ .padding = { 16, 8 }}), + CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}), CLAY_RECTANGLE({ .color = { 140, 140, 140, 255 }, .cornerRadius = 5 @@ -278,6 +289,10 @@ int main(int argc, char *argv[]) { fprintf(stderr, "Error: could not initialize TTF: %s\n", TTF_GetError()); return 1; } + if (IMG_Init(IMG_INIT_PNG) < 0) { + fprintf(stderr, "Error: could not initialize IMG: %s\n", IMG_GetError()); + return 1; + } TTF_Font *font = TTF_OpenFont("resources/Roboto-Regular.ttf", 16); if (!font) { @@ -289,6 +304,8 @@ int main(int argc, char *argv[]) { .font = font, }; + sample_image = IMG_Load("resources/sample.png"); + SDL_Window *window = NULL; SDL_Renderer *renderer = NULL; if (SDL_CreateWindowAndRenderer(800, 600, SDL_WINDOW_RESIZABLE, &window, &renderer) < 0) { @@ -352,6 +369,7 @@ int main(int argc, char *argv[]) { quit: SDL_DestroyRenderer(renderer); SDL_DestroyWindow(window); + IMG_Quit(); TTF_Quit(); SDL_Quit(); return 0; diff --git a/examples/SDL2-video-demo/resources/sample.png b/examples/SDL2-video-demo/resources/sample.png new file mode 100644 index 00000000..2c008286 Binary files /dev/null and b/examples/SDL2-video-demo/resources/sample.png differ diff --git a/renderers/SDL2/README b/renderers/SDL2/README index 582e4dbd..d962c421 100644 --- a/renderers/SDL2/README +++ b/renderers/SDL2/README @@ -1,7 +1,5 @@ Please note, the SDL2 renderer is not 100% feature complete. It is currently missing: -- Border rendering -- Image rendering - Rounded rectangle corners Note: on Mac OSX, SDL2 for some reason decides to automatically disable momentum scrolling on macbook trackpads. @@ -10,4 +8,4 @@ You can re enable it in objective C using: ```C [[NSUserDefaults standardUserDefaults] setBool: YES forKey: @"AppleMomentumScrollSupported"]; -``` \ No newline at end of file +``` diff --git a/renderers/SDL2/clay_renderer_SDL2.c b/renderers/SDL2/clay_renderer_SDL2.c index 0a0785ac..30eb8a4c 100644 --- a/renderers/SDL2/clay_renderer_SDL2.c +++ b/renderers/SDL2/clay_renderer_SDL2.c @@ -1,8 +1,11 @@ #include "../../clay.h" #include #include +#include #include +#define CLAY_COLOR_TO_SDL_COLOR_ARGS(color) color.r, color.g, color.b, color.a + typedef struct { uint32_t fontId; @@ -93,10 +96,55 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren SDL_RenderSetClipRect(renderer, NULL); break; } + case CLAY_RENDER_COMMAND_TYPE_IMAGE: { + SDL_Surface *image = (SDL_Surface *)renderCommand->config.imageElementConfig->imageData; + + SDL_Texture *texture = SDL_CreateTextureFromSurface(renderer, image); + + SDL_Rect destination = (SDL_Rect){ + .x = boundingBox.x, + .y = boundingBox.y, + .w = boundingBox.width, + .h = boundingBox.height, + }; + + SDL_RenderCopy(renderer, texture, NULL, &destination); + break; + } + case CLAY_RENDER_COMMAND_TYPE_BORDER: { + Clay_BorderElementConfig *config = renderCommand->config.borderElementConfig; + + if (config->left.width > 0) { + SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->left.color)); + SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x, boundingBox.y + config->cornerRadius.topLeft, config->left.width, boundingBox.height - config->cornerRadius.topLeft - config->cornerRadius.bottomLeft }); + } + + if (config->right.width > 0) { + SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color)); + SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + boundingBox.width - config->right.width, boundingBox.y + config->cornerRadius.topRight, config->right.width, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight }); + } + + if (config->right.width > 0) { + SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color)); + SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + boundingBox.width - config->right.width, boundingBox.y + config->cornerRadius.topRight, config->right.width, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight }); + } + + if (config->top.width > 0) { + SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color)); + SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + config->cornerRadius.topLeft, boundingBox.y, boundingBox.width - config->cornerRadius.topLeft - config->cornerRadius.topRight, config->top.width }); + } + + if (config->bottom.width > 0) { + SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->bottom.color)); + SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + config->cornerRadius.bottomLeft, boundingBox.y + boundingBox.height - config->bottom.width, boundingBox.width - config->cornerRadius.bottomLeft - config->cornerRadius.bottomRight, config->bottom.width }); + } + + break; + } default: { fprintf(stderr, "Error: unhandled render command: %d\n", renderCommand->commandType); exit(1); } } } -} \ No newline at end of file +}