From 3bbfb4253747a52ce1be5a0704e90c73f39f5bdc Mon Sep 17 00:00:00 2001 From: stanjovani <140127767+stanjovani@users.noreply.github.com> Date: Sat, 13 Sep 2025 17:03:26 +1000 Subject: [PATCH 1/3] Create Drawing Text and Shapes in SplashKit Created a beginner-friendly tutorial explaining how to draw text and basic shapes using SplashKit in C++. Covers usage of DrawText, FillRectangle, FillCircle, and DrawLine functions. This tutorial is useful for building simple menus, HUD elements, or interface screens in SplashKit-based games. Includes syntax explanations and a full working example. --- Drawing Text and Shapes in SplashKit | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 Drawing Text and Shapes in SplashKit diff --git a/Drawing Text and Shapes in SplashKit b/Drawing Text and Shapes in SplashKit new file mode 100644 index 00000000..5ffc81ac --- /dev/null +++ b/Drawing Text and Shapes in SplashKit @@ -0,0 +1,29 @@ +# Drawing Text and Shapes in SplashKit + +**Author:** Stanoja Jovanovic +**Capstone Project A** +**Last Updated:** Week 8 + +--- + +## 🧭 Overview + +This tutorial introduces how to use SplashKit to draw basic text and shapes on the screen. These techniques are useful for creating user interfaces, loading screens, buttons, menus, and HUDs in SplashKit-based games or applications. + +--- + +## 🧱 What You'll Learn + +- How to draw text using `DrawText` +- How to draw shapes like rectangles, circles, and lines +- How to customize colors, fonts, and positions + +--- + +## 🎨 Drawing Text + +SplashKit provides an easy function to draw text to the screen: + +```cpp +DrawText("Hello, SplashKit!", COLOR_WHITE, "Arial", 24, 100, 100); + From 56093b570f92664e613d8fafae6a5b7a33f5cb2d Mon Sep 17 00:00:00 2001 From: stanjovani <140127767+stanjovani@users.noreply.github.com> Date: Sat, 13 Sep 2025 17:18:41 +1000 Subject: [PATCH 2/3] Update Drawing Text and Shapes in SplashKit Updated and added the rest of the tutorial --- Drawing Text and Shapes in SplashKit | 116 +++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/Drawing Text and Shapes in SplashKit b/Drawing Text and Shapes in SplashKit index 5ffc81ac..460874ed 100644 --- a/Drawing Text and Shapes in SplashKit +++ b/Drawing Text and Shapes in SplashKit @@ -26,4 +26,120 @@ SplashKit provides an easy function to draw text to the screen: ```cpp DrawText("Hello, SplashKit!", COLOR_WHITE, "Arial", 24, 100, 100); +``` +**Parameters:** +- `"Hello, SplashKit!"` – the text +- `COLOR_WHITE` – the text color +- `"Arial"` – the font (must be loaded first) +- `24` – font size +- `100, 100` – X and Y position on screen + +--- + +### πŸ“Œ Don’t forget to load the font first: + +```cpp +LoadFont("Arial", "arial.ttf"); +``` + +⚠️ Make sure `"arial.ttf"` is placed in your project directory or in your resource path. + +--- + +## ⏹️ Drawing Shapes + +### 1. Rectangle + +```cpp +FillRectangle(COLOR_RED, 50, 150, 200, 100); +``` + +This draws a **filled red rectangle** at `(50,150)` with width `200` and height `100`. + +To draw just the outline: + +```cpp +DrawRectangle(COLOR_BLACK, 50, 150, 200, 100); +``` + +--- + +### 2. Circle + +```cpp +FillCircle(COLOR_BLUE, 300, 300, 50); +``` + +This draws a **filled blue circle** at `(300,300)` with a radius of `50`. + +--- + +### 3. Line + +```cpp +DrawLine(COLOR_GREEN, 100, 400, 300, 400); +``` + +This draws a green horizontal line from `(100,400)` to `(300,400)`. + +--- + +## πŸ§ͺ Full Example + +```cpp +#include "splashkit.h" + +int main() +{ + OpenWindow("Drawing Demo", 640, 480); + + LoadFont("Arial", "arial.ttf"); + + while (!WindowCloseRequested("Drawing Demo")) + { + ClearScreen(COLOR_WHITE); + + // Draw Text + DrawText("Main Menu", COLOR_BLACK, "Arial", 32, 220, 30); + + // Draw Shapes + FillRectangle(COLOR_RED, 100, 100, 150, 80); // Play Button + DrawText("Play", COLOR_WHITE, "Arial", 24, 140, 130); + + FillRectangle(COLOR_GRAY, 100, 200, 150, 80); // Exit Button + DrawText("Exit", COLOR_BLACK, "Arial", 24, 140, 230); + + // Draw Line + DrawLine(COLOR_BLACK, 0, 300, 640, 300); + + RefreshScreen(60); + } + + return 0; +} +``` + +--- + +## πŸ’‘ Tips + +- Use `ClearScreen()` before drawing each frame +- Use `RefreshScreen(FPS)` to control rendering speed +- Organize drawing functions into reusable parts (e.g., `DrawMainMenu()`) + +--- + +## βœ… Summary + +With just a few simple functions, you can create functional and visually clear interfaces using SplashKit. Mastering text and shape drawing is an essential first step toward building full UI screens in your games or apps. + +--- + +## πŸš€ Bonus: Try This Next + +- Add mouse input to detect clicks on your rectangles +- Use different fonts and text alignment +- Build a basic title screen or pause menu using these techniques + +--- From f915dc4f7d828d64b74c170c2f49ef06b15e7d69 Mon Sep 17 00:00:00 2001 From: stanjovani <140127767+stanjovani@users.noreply.github.com> Date: Sat, 13 Sep 2025 17:21:00 +1000 Subject: [PATCH 3/3] Delete Drawing Text and Shapes in SplashKit --- Drawing Text and Shapes in SplashKit | 145 --------------------------- 1 file changed, 145 deletions(-) delete mode 100644 Drawing Text and Shapes in SplashKit diff --git a/Drawing Text and Shapes in SplashKit b/Drawing Text and Shapes in SplashKit deleted file mode 100644 index 460874ed..00000000 --- a/Drawing Text and Shapes in SplashKit +++ /dev/null @@ -1,145 +0,0 @@ -# Drawing Text and Shapes in SplashKit - -**Author:** Stanoja Jovanovic -**Capstone Project A** -**Last Updated:** Week 8 - ---- - -## 🧭 Overview - -This tutorial introduces how to use SplashKit to draw basic text and shapes on the screen. These techniques are useful for creating user interfaces, loading screens, buttons, menus, and HUDs in SplashKit-based games or applications. - ---- - -## 🧱 What You'll Learn - -- How to draw text using `DrawText` -- How to draw shapes like rectangles, circles, and lines -- How to customize colors, fonts, and positions - ---- - -## 🎨 Drawing Text - -SplashKit provides an easy function to draw text to the screen: - -```cpp -DrawText("Hello, SplashKit!", COLOR_WHITE, "Arial", 24, 100, 100); -``` - -**Parameters:** -- `"Hello, SplashKit!"` – the text -- `COLOR_WHITE` – the text color -- `"Arial"` – the font (must be loaded first) -- `24` – font size -- `100, 100` – X and Y position on screen - ---- - -### πŸ“Œ Don’t forget to load the font first: - -```cpp -LoadFont("Arial", "arial.ttf"); -``` - -⚠️ Make sure `"arial.ttf"` is placed in your project directory or in your resource path. - ---- - -## ⏹️ Drawing Shapes - -### 1. Rectangle - -```cpp -FillRectangle(COLOR_RED, 50, 150, 200, 100); -``` - -This draws a **filled red rectangle** at `(50,150)` with width `200` and height `100`. - -To draw just the outline: - -```cpp -DrawRectangle(COLOR_BLACK, 50, 150, 200, 100); -``` - ---- - -### 2. Circle - -```cpp -FillCircle(COLOR_BLUE, 300, 300, 50); -``` - -This draws a **filled blue circle** at `(300,300)` with a radius of `50`. - ---- - -### 3. Line - -```cpp -DrawLine(COLOR_GREEN, 100, 400, 300, 400); -``` - -This draws a green horizontal line from `(100,400)` to `(300,400)`. - ---- - -## πŸ§ͺ Full Example - -```cpp -#include "splashkit.h" - -int main() -{ - OpenWindow("Drawing Demo", 640, 480); - - LoadFont("Arial", "arial.ttf"); - - while (!WindowCloseRequested("Drawing Demo")) - { - ClearScreen(COLOR_WHITE); - - // Draw Text - DrawText("Main Menu", COLOR_BLACK, "Arial", 32, 220, 30); - - // Draw Shapes - FillRectangle(COLOR_RED, 100, 100, 150, 80); // Play Button - DrawText("Play", COLOR_WHITE, "Arial", 24, 140, 130); - - FillRectangle(COLOR_GRAY, 100, 200, 150, 80); // Exit Button - DrawText("Exit", COLOR_BLACK, "Arial", 24, 140, 230); - - // Draw Line - DrawLine(COLOR_BLACK, 0, 300, 640, 300); - - RefreshScreen(60); - } - - return 0; -} -``` - ---- - -## πŸ’‘ Tips - -- Use `ClearScreen()` before drawing each frame -- Use `RefreshScreen(FPS)` to control rendering speed -- Organize drawing functions into reusable parts (e.g., `DrawMainMenu()`) - ---- - -## βœ… Summary - -With just a few simple functions, you can create functional and visually clear interfaces using SplashKit. Mastering text and shape drawing is an essential first step toward building full UI screens in your games or apps. - ---- - -## πŸš€ Bonus: Try This Next - -- Add mouse input to detect clicks on your rectangles -- Use different fonts and text alignment -- Build a basic title screen or pause menu using these techniques - ----