You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

238 regels
11 KiB

  1. /*******************************************************************************************
  2. *
  3. * raylib [shaders] example - Rounded Rectangle
  4. *
  5. * Example complexity rating: [] 3/4
  6. *
  7. * Example originally created with raylib 5.5, last time updated with raylib 5.5
  8. *
  9. * Example contributed by Anstro Pleuton (@anstropleuton) and reviewed by Ramon Santamaria (@raysan5)
  10. *
  11. * Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
  12. * BSD-like license that allows static linking with closed source software
  13. *
  14. * Copyright (c) 2025-2025 Anstro Pleuton (@anstropleuton)
  15. *
  16. ********************************************************************************************/
  17. #include "raylib.h"
  18. #if defined(PLATFORM_DESKTOP)
  19. #define GLSL_VERSION 330
  20. #else // PLATFORM_ANDROID, PLATFORM_WEB
  21. #define GLSL_VERSION 100
  22. #endif
  23. //------------------------------------------------------------------------------------
  24. // Declare custom Structs
  25. //------------------------------------------------------------------------------------
  26. // Rounded rectangle data
  27. typedef struct {
  28. Vector4 cornerRadius; // Individual corner radius (top-left, top-right, bottom-left, bottom-right)
  29. // Shadow variables
  30. float shadowRadius;
  31. Vector2 shadowOffset;
  32. float shadowScale;
  33. // Border variables
  34. float borderThickness; // Inner-border thickness
  35. // Shader locations
  36. int rectangleLoc;
  37. int radiusLoc;
  38. int colorLoc;
  39. int shadowRadiusLoc;
  40. int shadowOffsetLoc;
  41. int shadowScaleLoc;
  42. int shadowColorLoc;
  43. int borderThicknessLoc;
  44. int borderColorLoc;
  45. } RoundedRectangle;
  46. //------------------------------------------------------------------------------------
  47. // Module Functions Declaration
  48. //------------------------------------------------------------------------------------
  49. // Create a rounded rectangle and set uniform locations
  50. static RoundedRectangle CreateRoundedRectangle(Vector4 cornerRadius, float shadowRadius, Vector2 shadowOffset, float shadowScale, float borderThickness, Shader shader);
  51. // Update rounded rectangle uniforms
  52. static void UpdateRoundedRectangle(RoundedRectangle rec, Shader shader);
  53. //------------------------------------------------------------------------------------
  54. // Program main entry point
  55. //------------------------------------------------------------------------------------
  56. int main(void)
  57. {
  58. // Initialization
  59. //--------------------------------------------------------------------------------------
  60. const int screenWidth = 800;
  61. const int screenHeight = 450;
  62. const Color rectangleColor = BLUE;
  63. const Color shadowColor = DARKBLUE;
  64. const Color borderColor = SKYBLUE;
  65. InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Rounded Rectangle");
  66. // Load the shader
  67. Shader shader = LoadShader(TextFormat("resources/shaders/glsl%i/base.vs", GLSL_VERSION),
  68. TextFormat("resources/shaders/glsl%i/rounded_rectangle.fs", GLSL_VERSION));
  69. // Create a rounded rectangle
  70. RoundedRectangle roundedRectangle = CreateRoundedRectangle(
  71. (Vector4){ 5.0f, 10.0f, 15.0f, 20.0f }, // Corner radius
  72. 20.0f, // Shadow radius
  73. (Vector2){ 0.0f, -5.0f }, // Shadow offset
  74. 0.95f, // Shadow scale
  75. 5.0f, // Border thickness
  76. shader // Shader
  77. );
  78. // Update shader uniforms
  79. UpdateRoundedRectangle(roundedRectangle, shader);
  80. SetTargetFPS(60);
  81. //--------------------------------------------------------------------------------------
  82. // Main game loop
  83. while (!WindowShouldClose()) // Detect window close button or ESC key
  84. {
  85. // Draw
  86. //----------------------------------------------------------------------------------
  87. BeginDrawing();
  88. ClearBackground(RAYWHITE);
  89. // Draw rectangle box with rounded corners using shader
  90. Rectangle rec = { 50, 70, 110, 60 };
  91. DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
  92. DrawText("Rounded rectangle", rec.x - 20, rec.y - 35, 10, DARKGRAY);
  93. // Flip Y axis to match shader coordinate system
  94. rec.y = screenHeight - rec.y - rec.height;
  95. SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
  96. // Only rectangle color
  97. SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { rectangleColor.r/255.0f, rectangleColor.g/255.0f, rectangleColor.b/255.0f, rectangleColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  98. SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  99. SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  100. BeginShaderMode(shader);
  101. DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
  102. EndShaderMode();
  103. // Draw rectangle shadow using shader
  104. rec = (Rectangle){ 50, 200, 110, 60 };
  105. DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
  106. DrawText("Rounded rectangle shadow", rec.x - 20, rec.y - 35, 10, DARKGRAY);
  107. rec.y = screenHeight - rec.y - rec.height;
  108. SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
  109. // Only shadow color
  110. SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  111. SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { shadowColor.r/255.0f, shadowColor.g/255.0f, shadowColor.b/255.0f, shadowColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  112. SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  113. BeginShaderMode(shader);
  114. DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
  115. EndShaderMode();
  116. // Draw rectangle's border using shader
  117. rec = (Rectangle){ 50, 330, 110, 60 };
  118. DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
  119. DrawText("Rounded rectangle border", rec.x - 20, rec.y - 35, 10, DARKGRAY);
  120. rec.y = screenHeight - rec.y - rec.height;
  121. SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
  122. // Only border color
  123. SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  124. SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
  125. SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { borderColor.r/255.0f, borderColor.g/255.0f, borderColor.b/255.0f, borderColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  126. BeginShaderMode(shader);
  127. DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
  128. EndShaderMode();
  129. // Draw one more rectangle with all three colors
  130. rec = (Rectangle){ 240, 80, 500, 300 };
  131. DrawRectangleLines(rec.x - 30, rec.y - 30, rec.width + 60, rec.height + 60, DARKGRAY);
  132. DrawText("Rectangle with all three combined", rec.x - 30, rec.y - 45, 10, DARKGRAY);
  133. rec.y = screenHeight - rec.y - rec.height;
  134. SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
  135. // All three colors
  136. SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { rectangleColor.r/255.0f, rectangleColor.g/255.0f, rectangleColor.b/255.0f, rectangleColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  137. SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { shadowColor.r/255.0f, shadowColor.g/255.0f, shadowColor.b/255.0f, shadowColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  138. SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { borderColor.r/255.0f, borderColor.g/255.0f, borderColor.b/255.0f, borderColor.a/255.0f }, SHADER_UNIFORM_VEC4);
  139. BeginShaderMode(shader);
  140. DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
  141. EndShaderMode();
  142. DrawText("(c) Rounded rectangle SDF by Iñigo Quilez. MIT License.", screenWidth - 300, screenHeight - 20, 10, BLACK);
  143. EndDrawing();
  144. //----------------------------------------------------------------------------------
  145. }
  146. // De-Initialization
  147. //--------------------------------------------------------------------------------------
  148. UnloadShader(shader); // Unload shader
  149. CloseWindow(); // Close window and OpenGL context
  150. //--------------------------------------------------------------------------------------
  151. return 0;
  152. }
  153. //------------------------------------------------------------------------------------
  154. // Module Functions Definitions
  155. //------------------------------------------------------------------------------------
  156. // Create a rounded rectangle and set uniform locations
  157. RoundedRectangle CreateRoundedRectangle(Vector4 cornerRadius, float shadowRadius, Vector2 shadowOffset, float shadowScale, float borderThickness, Shader shader)
  158. {
  159. RoundedRectangle rec;
  160. rec.cornerRadius = cornerRadius;
  161. rec.shadowRadius = shadowRadius;
  162. rec.shadowOffset = shadowOffset;
  163. rec.shadowScale = shadowScale;
  164. rec.borderThickness = borderThickness;
  165. // Get shader uniform locations
  166. rec.rectangleLoc = GetShaderLocation(shader, "rectangle");
  167. rec.radiusLoc = GetShaderLocation(shader, "radius");
  168. rec.colorLoc = GetShaderLocation(shader, "color");
  169. rec.shadowRadiusLoc = GetShaderLocation(shader, "shadowRadius");
  170. rec.shadowOffsetLoc = GetShaderLocation(shader, "shadowOffset");
  171. rec.shadowScaleLoc = GetShaderLocation(shader, "shadowScale");
  172. rec.shadowColorLoc = GetShaderLocation(shader, "shadowColor");
  173. rec.borderThicknessLoc = GetShaderLocation(shader, "borderThickness");
  174. rec.borderColorLoc = GetShaderLocation(shader, "borderColor");
  175. UpdateRoundedRectangle(rec, shader);
  176. return rec;
  177. }
  178. // Update rounded rectangle uniforms
  179. void UpdateRoundedRectangle(RoundedRectangle rec, Shader shader)
  180. {
  181. SetShaderValue(shader, rec.radiusLoc, (float[]){ rec.cornerRadius.x, rec.cornerRadius.y, rec.cornerRadius.z, rec.cornerRadius.w }, SHADER_UNIFORM_VEC4);
  182. SetShaderValue(shader, rec.shadowRadiusLoc, &rec.shadowRadius, SHADER_UNIFORM_FLOAT);
  183. SetShaderValue(shader, rec.shadowOffsetLoc, (float[]){ rec.shadowOffset.x, rec.shadowOffset.y }, SHADER_UNIFORM_VEC2);
  184. SetShaderValue(shader, rec.shadowScaleLoc, &rec.shadowScale, SHADER_UNIFORM_FLOAT);
  185. SetShaderValue(shader, rec.borderThicknessLoc, &rec.borderThickness, SHADER_UNIFORM_FLOAT);
  186. }