Используемые инструменты

• Qt Creator - это специализированная кроссплатформенная интегрированная среда разработки (IDE), созданная специально для работы с фреймворком Qt, но подходящая и для обычной разработки на C и C++
• MinGW (сокращение от Minimalist GNU for Windows) - это набор программных инструментов с открытым исходным кодом, который позволяет компилировать приложения, написанные на языках C и C++, для работы в операционной системе Windows. По сути, это порт популярного компилятора GCC (GNU Compiler Collection) и набора утилит GNU (таких как make) под Windows
• CMake - это кроссплатформенная система автоматизации сборки программного обеспечения. Важно понимать, что CMake сам по себе не является компилятором. Это "генератор генераторов" или мета-система сборки

Установка MinGW

• Скачайте MinGW GCC любой актуальной версии на странице: https://winlibs.com/
• Например, я скачал MinGW GCC 13.1, выбрав этот архив:
  
• Извлеките архив в текущую папку, например, в корень диска C
• Переименуйте извлечённую папку. Например, дайте ей имя mingw64_13.1
• Зайдите в папку mingw64_13.1/bin и скопируйте путь C:\mingw64_13.1\bin
• Добавьте путь C:\mingw64_13.1\bin в переменную окружения PATH

Установка CMake

• Скачайте и установите CMake. Ищите cmake-x.x.x-windows-x86_64.msi в списке
• Нажимайте кнопки Next > Next > Finish
• Откройте консоль (CMD) и проверьте запускается ли CMake:
  

  Bash
  1 cmake --version

• Если CMake не найден, то добавьте путь к C:\Program Files\CMake\bin в переменную окружения PATH

Установка Qt Creator

• Скачайте установщик Qt Creator по ссылке: https://github.com/qt-creator/qt-creator/releases Листайте вниз до раздела Assets и ищите установщик qtcreator-windows-x64-msvc-x.y.z.msi, где x.y.z - это версия Qt Creator
• После первого запуска Qt Creator автоматически найдёт пути к MinGW и CMake, которые были добавлены в переменную окружения PATH

Создаём первый CMake-проект на C или C++

• Запустите Qt Creator
• Выберите в меню: File > New Project...
• Слева выберите Non-Qt Project, а справа выберите либо проект для C, либо проект для С++:
  
• После нажатия на кнопку Choose... вам нужно будет дать название проекту и указать папку, где будет создан проект:
  
• После нажатия на кнопку Next нужно оставить CMake и нажать на кнопку Next:
  
• Поставьте галочки Debug и Release и нажмите на кнопку Next:
  
• Далее, нажмите на кнопку Finish:
  
• Будет создан проект:
  
• Вы можете собрать его запустить его на исполнение, нажав на кнопку в форме зелёного треугольника в нижнем левом углу экрана:
  
• Либо, вы можете поставить точку останова, кликнув рядом с номером строки:
  
• Нажмите на зелёный треугольник с жуком, чтобы запустить режим отладки:
  
• Программа запустится и остановится на строке, где вы поставили точку останова:
  
• Нажимайте клавишу F10 (Step over) или F11 (Step Into), чтобы выполнять строку за строкой. "Step Over" - не заходит в функцию, а "Step Into" заходит в функцию
• На нижней панели есть кнопки для продолжения выполнения программы до следующей точки останова, для остановки отладки и т. д.:
  

Миниатюры

• finish-text-sdl3-c.zip
• finish-text-sdl3-cpp.zip

Установка инструментов

• Установите CMake и MinGW 13.1 по пошаговой инструкции: Установка CMake и MinGW 13.1
• Скачайте следующие архивы библиотек:
  • SDL3-devel-3.4.2-mingw.zip
  • SDL3-3.4.2-win32-x64.zip
  • SDL3_ttf-devel-3.2.2-mingw.zip
  • SDL3_ttf-3.2.2-win32-x64.zip
• Извлеките содержимое архивов выше в какую-нибудь общую папку, например, с именем "libs" на C:
  
• Примечание. Эти архивы я скачал с официальных репозиториев на вкладках Release: SDL3 3.4.2 и SDL3_ttf 3.2.2. Я сократил глубину вложенность папок в архивах со словом "devel" в имени.
• Пути к папкам с "win32-x64" в именах нужно добавить в переменную окружения Path. В этих папках лежат SDL3.dll и SDL3_ttf.dll. Добавьте пути к этим папкам в Path:
  • C:\libs\SDL3-3.4.2-win32-x64
  • C:\libs\SDL3_ttf-3.2.2-win32-x64
• Установите редактор кода или IDE, например: Notepad++ или VSCode. Я использую Sublime Text 4 и Qt Creator

Настройка и запуск стартового проекта

• Скачайте стартовый проект: start-text-sdl3-c.zip
• Примечание. Этот стартовый проект был создан по пошаговой инструкции: Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
• Извлеките пример из архива:
  
• Код стартового примера:
  
  main.c
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 #define SDL_MAIN_USE_CALLBACKS 1 // Использовать функции обратного вызова вместо main() #include <SDL3/SDL.h> #include <SDL3/SDL_main.h>   // Мы будем использовать этот рендерер для рисования в этом окне каждый кадр static SDL_Window *window = NULL; static SDL_Renderer *renderer = NULL;   // Эта функция запускается один раз при старте SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     if (!SDL_Init(SDL_INIT_VIDEO))     {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("Рендерер SDL3", 400, 300, 0, &window, &renderer))     {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       SDL_SetRenderVSync(renderer, 1);       return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается, когда происходит новое событие (ввод мыши, нажатие клавиш и т.д.) SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT)     {         return SDL_APP_SUCCESS; // Завершаем программу, сообщая ОС об успехе     }     return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается один раз за кадр и является сердцем программы SDL_AppResult SDL_AppIterate(void *appstate) {     SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255); // Цвет заливки холста     SDL_RenderClear(renderer); // Начинаем с чистого холста - заливаем холст указанным выше цветов       // Выводим результат на экран     SDL_RenderPresent(renderer);       return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается один раз при завершении работы void SDL_AppQuit(void *appstate, SDL_AppResult result) {     // SDL3 автоматически освободит все ресурсы подсистем (окна, рендереры) при выходе }

  CMakeLists.txt
  
  

  Bash

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 cmake_minimum_required(VERSION 3.21) project(start-text-sdl3-c)   # Устанавливаем стандарт C set(CMAKE_C_STANDARD 17) set(CMAKE_C_STANDARD_REQUIRED ON)   # Задаем название будущего приложения (в Windows это будет app.exe, а # в вебе было бы app.js / app.wasm) add_executable(app)   # Указываем точное местоположение конфигурационных файлов библиотек # Имя переменной должно строго соответствовать: НазваниеБиблиотеки_DIR set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )   # Проверяем наличие библиотек в системе # Если она не будет найдены, CMake прервет настройку с ошибкой # REQUIRED - переводится, как "обязательно" или "требуется" find_package(SDL3 REQUIRED)   # Привязываем библиотеки к нашему приложению target_link_libraries(app PRIVATE SDL3::SDL3)

  config-exe.bat
  
  

  Bash
  1 2 cmake -G "MinGW Makefiles" -S . -B dist/win ^ -DCMAKE_BUILD_TYPE=Debug

  build-exe.bat
  
  

  Bash
  1 2 3 cd dist\win cmake --build . cd ..\..

  run-exe.bat
  
  

  Bash
  1 dist\win\app

• Откройте папку примера в каком-нибудь текстовом редакторе - например, в Sublime Text 4 (ST4), Notepad++, VS Code и т.д. В ST4 можно открыть проекта, набрав в консоли из папки проекта: "subl ." (без ковычек). Либо откройте проект в Qt Creator - для этого в левом верхнем углу Qt Creator нажмите "Fire" > "Open File or Project..." и выберите файл "CMakeLists.txt" из папки скаченного проекта
• Откройте файл "CMakeLists.txt" и убедитесь, что путь к библиотеке SDL3 такой же как у вас и при необходимости измените его на ваш путь:
  

  Bash
  1 set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")

• Откройте консоль в текущей папке и поочерёдно введите команды для конфигурирования, сборки и запуска EXE:
  

  Bash
  1 2 3 config-exe build-exe run-exe

• Будет запущено приложение, которое создаёт окно с помощью библиотеки SDL3 и заливает холст заданным цветом с помощью SDL3 Renderer:
  
• Мы настроили и протестировали корректный запуск стартового примера

Подключение библиотеки SDL3_ttf

• Откройте файл "CMakeLists.txt" в редакторе кода
• Добавьте создание переменной SDL3_ttf_DIR с значением пути, куда вы распаковали архив "SDL3_ttf-devel-3.2.2-mingw":
  

  Bash
  1 set(SDL3_ttf_DIR "C:/libs/SDL3_ttf-devel-3.2.2-mingw/lib/cmake/SDL3_ttf")

• Добавьте команду find_package для SDL3_ttf:
  

  Bash
  1 2 3 # Загружаем настройки пакетов (параметры компиляции и пути к заголовкам) find_package(SDL3 REQUIRED) find_package(SDL3_ttf REQUIRED)

• Добавьте привязку библиотеки SDL3_ttf к своему приложению:
  

  Bash
  1 2 # Привязываем библиотеки к нашему приложению target_link_libraries(app PRIVATE SDL3_ttf::SDL3_ttf SDL3::SDL3)

• В результате получается следующий файл "CMakeLists.txt":
  
  CMakeLists.txt
  
  

  Bash

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 cmake_minimum_required(VERSION 3.21) project(finish-text-sdl3-c)   # Устанавливаем стандарт C set(CMAKE_C_STANDARD 17) set(CMAKE_C_STANDARD_REQUIRED ON)   # Задаем название будущего приложения (в Windows это будет app.exe, а # в вебе было бы app.js / app.wasm) add_executable(app)   # Указываем точное местоположение конфигурационных файлов библиотек # Имя переменной должно строго соответствовать: НазваниеБиблиотеки_DIR set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3") set(SDL3_ttf_DIR "C:/libs/SDL3_ttf-devel-3.2.2-mingw/lib/cmake/SDL3_ttf")   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )   # Проверяем наличие библиотек в системе # Если она не будет найдены, CMake прервет настройку с ошибкой # REQUIRED - переводится, как "обязательно" или "требуется" find_package(SDL3 REQUIRED) find_package(SDL3_ttf REQUIRED)   # Привязываем библиотеки к нашему приложению target_link_libraries(app PRIVATE SDL3_ttf::SDL3_ttf SDL3::SDL3)

Загрузка TTF-файла и вывод текста на холст

• Скачайте бесплатный шрифт: LiberationSans-Regular.zip
• Примечание. Шрифт был взять по ссылке
• Извлеките архив с файлом шрифта в новую папку "assets/fonts" внутри проекта
• Откройте в редакторе кода файл "src/main.c"
• Подключите заголовок "SDL_ttf.h" в начале файла:
  

  C
  1 2 3 4 #define SDL_MAIN_USE_CALLBACKS 1 // Использовать функции обратного вызова вместо main() #include <SDL3/SDL.h> #include <SDL3/SDL_main.h> #include <SDL3_ttf/SDL_ttf.h>

• После создания переменной-указателя "renderer" добавьте переменную-указатель "textTexture" для текстуры, на которую будет рисоваться текст
• Сразу, чтобы не забыть освободить ресурс, добавьте удаление текстуры в функцию SDL_AppQuit() и добавьте завершить работу SDL3_ttf:
  

  C
  1 2 3 4 5 6 7 8 9 10 11 12 // Эта функция запускается один раз при завершении работы void SDL_AppQuit(void *appstate, SDL_AppResult result) {     if (textTexture)     {         SDL_DestroyTexture(textTexture);     }       TTF_Quit();       // SDL3 автоматически освободит все ресурсы подсистем (окна, рендереры) при выходе }

• В функции SDL_AppInit() после вызова SDL_Init() добавьте инициализацию библиотеки SDL3_ttf:
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Эта функция запускается один раз при старте SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     if (!SDL_Init(SDL_INIT_VIDEO))     {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!TTF_Init())     {         SDL_Log("Couldn't initialize TTF: %s", SDL_GetError());         return SDL_APP_FAILURE;     }

• После вызова функции включения вертикальной синхронизации SDL_SetRenderVSync() добавьте код загрузки файла-шрифта и создания текстуры для текста:
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13     SDL_SetRenderVSync(renderer, 1);       TTF_Font *font = TTF_OpenFont("assets/fonts/LiberationSans-Regular.ttf", 28);     if (!font)     {         SDL_Log("TTF_OpenFont failed: %s", SDL_GetError());         return SDL_APP_FAILURE;     }     SDL_Color textColor = (SDL_Color) { 245, 240, 220 };     SDL_Surface *surface = TTF_RenderText_Blended(font, "Равносторонний треугольник", 0, textColor);     texture = SDL_CreateTextureFromSurface(renderer, surface);     SDL_DestroySurface(surface);     TTF_CloseFont(font);

• В цикле рисования, то есть в функции SDL_AppIterate(), добавьте код рисования текста:
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // Эта функция запускается один раз за кадр и является сердцем программы SDL_AppResult SDL_AppIterate(void *appstate) {     // Устанавливаем позицию, в которой хотим нарисовать текст     float x = 10.f;     float y = 30.f;       // Создаем прямоугольник для хранения размеров текстуры     SDL_FRect rect;     SDL_GetTextureSize(textTexture, &rect.w, &rect.h);     rect.x = x;     rect.y = y;       // Очищаем экран     SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255); // Цвет заливки холста     // Начинаем с чистого холста - заливаем холст указанным выше цветов     SDL_RenderClear(renderer);       // Отрисовываем текст     SDL_RenderTexture(renderer, textTexture, NULL, &rect);       // Выводим результат на экран     SDL_RenderPresent(renderer);       return SDL_APP_CONTINUE; // Продолжаем работу программы }

• Запустите сборку командой "build-exe" и запустите приложение командой "run-exe". Текст выводится на экран:
  
• Текущий код для вывода текста:
  
  main.c
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 #define SDL_MAIN_USE_CALLBACKS 1 // Использовать функции обратного вызова вместо main() #include <SDL3/SDL.h> #include <SDL3/SDL_main.h> #include <SDL3_ttf/SDL_ttf.h>   // Мы будем использовать этот рендерер для рисования в этом окне каждый кадр static SDL_Window *window = NULL; static SDL_Renderer *renderer = NULL; static SDL_Texture *textTexture = NULL;   // Эта функция запускается один раз при старте SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     if (!SDL_Init(SDL_INIT_VIDEO))     {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!TTF_Init())     {         SDL_Log("Couldn't initialize TTF: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("Рендерер SDL3", 400, 300, 0, &window, &renderer))     {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       SDL_SetRenderVSync(renderer, 1);       TTF_Font *font = TTF_OpenFont("assets/fonts/LiberationSans-Regular.ttf", 28);     if (!font)     {         SDL_Log("TTF_OpenFont failed: %s", SDL_GetError());         return SDL_APP_FAILURE;     }     SDL_Color textColor = (SDL_Color) { 245, 240, 220 };     SDL_Surface *surface = TTF_RenderText_Blended(font, "Равносторонний треугольник", 0, textColor);     textTexture = SDL_CreateTextureFromSurface(renderer, surface);     SDL_DestroySurface(surface);       return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается, когда происходит новое событие (ввод мыши, нажатие клавиш и т.д.) SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT)     {         return SDL_APP_SUCCESS; // Завершаем программу, сообщая ОС об успехе     }     return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается один раз за кадр и является сердцем программы SDL_AppResult SDL_AppIterate(void *appstate) {     // Устанавливаем позицию, в которой хотим нарисовать текст     float x = 10.f;     float y = 30.f;       // Создаем прямоугольник для хранения размеров текстуры     SDL_FRect rect;     SDL_GetTextureSize(textTexture, &rect.w, &rect.h);     rect.x = x;     rect.y = y;       // Очищаем экран     SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255); // Цвет заливки холста     // Начинаем с чистого холста - заливаем холст указанным выше цветов     SDL_RenderClear(renderer);       // Отрисовываем текст     SDL_RenderTexture(renderer, textTexture, NULL, &rect);       // Выводим результат на экран     SDL_RenderPresent(renderer);       return SDL_APP_CONTINUE; // Продолжаем работу программы }   // Эта функция запускается один раз при завершении работы void SDL_AppQuit(void *appstate, SDL_AppResult result) {     if (textTexture)     {         SDL_DestroyTexture(textTexture);         textTexture = NULL;     }       TTF_Quit();       // SDL3 автоматически освободит все ресурсы подсистем (окна, рендереры) при выходе }

Рисуем координатные оси и правильный треугольник

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

#define SDL_MAIN_USE_CALLBACKS 1 // Использовать функции обратного вызова вместо main()
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
#include <SDL3_ttf/SDL_ttf.h>
 
// Мы будем использовать этот рендерер для рисования в этом окне каждый кадр
static SDL_Window *window = NULL;
static SDL_Renderer *renderer = NULL;
static SDL_Texture *textTexture = NULL;
static TTF_Font *font = NULL;
 
// Текстуры для подписей вершин
static SDL_Texture *coordTextures[3] = { NULL, NULL, NULL };
 
// Вспомогательная функция для создания текстуры из строки
SDL_Texture* CreateTextTexture(const char* text, SDL_Color color)
{
    SDL_Surface *surface = TTF_RenderText_Blended(font, text, 0, color);
    SDL_Texture *tex = SDL_CreateTextureFromSurface(renderer, surface);
    SDL_DestroySurface(surface);
    return tex;
}
 
// Эта функция запускается один раз при старте
SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[])
{
    if (!SDL_Init(SDL_INIT_VIDEO))
    {
        SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }
 
    if (!TTF_Init())
    {
        SDL_Log("Couldn't initialize TTF: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }
 
    if (!SDL_CreateWindowAndRenderer("Рендерер SDL3", 400, 300, 0, &window, &renderer))
    {
        SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }
 
    SDL_SetRenderVSync(renderer, 1);
 
    TTF_Font *font = TTF_OpenFont("assets/fonts/LiberationSans-Regular.ttf", 28);
    if (!font)
    {
        SDL_Log("TTF_OpenFont failed: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }
    SDL_Color textColor = (SDL_Color) { 245, 240, 220 };
    SDL_Surface *surface = TTF_RenderText_Blended(font, "Равносторонний треугольник", 0, textColor);
    textTexture = SDL_CreateTextureFromSurface(renderer, surface);
    SDL_DestroySurface(surface);
    TTF_CloseFont(font);
 
    return SDL_APP_CONTINUE; // Продолжаем работу программы
}
 
// Эта функция запускается, когда происходит новое событие (ввод мыши, нажатие клавиш и т.д.)
SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
{
    if (event->type == SDL_EVENT_QUIT)
    {
        return SDL_APP_SUCCESS; // Завершаем программу, сообщая ОС об успехе
    }
    return SDL_APP_CONTINUE; // Продолжаем работу программы
}
 
// Эта функция запускается один раз за кадр и является сердцем программы
SDL_AppResult SDL_AppIterate(void *appstate)
{
    int winW, winH;
    SDL_GetWindowSize(window, &winW, &winH);
 
    // Очистка экрана
    SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255);
    SDL_RenderClear(renderer);
 
    // Отрисовка текста (в обычных координатах: Y вниз)
    float tw, th;
    SDL_GetTextureSize(textTexture, &tw, &th);
    SDL_FRect textRect = { (winW - tw) / 2.0f, 20.0f, tw, th };
    SDL_RenderTexture(renderer, textTexture, NULL, &textRect);
 
    // Центр координат: середина по X, и чуть ниже текста по Y
    float originX = winW / 2.0f;
    float originY = winH / 2.0f + 40.0f;
 
    // Вспомогательная функция для перевода наших координат в экранные
    // Экранное_X = originX + наш_X
    // Экранное_Y = originY - наш_Y (минус, так как в SDL Y растет вниз, а нам нужно вверх)
 
    // Рисуем оси
    // Ось X
    SDL_SetRenderDrawColor(renderer, 180, 80, 80, 255);
    SDL_RenderLine(renderer, originX - 150, originY, originX + 150, originY);
    // Ось Y
    SDL_SetRenderDrawColor(renderer, 80, 180, 80, 255);
    SDL_RenderLine(renderer, originX, originY + 100, originX, originY - 120);
 
    // Рисуем правильный треугольник
    float a = 150.0f; // Сторона треугольника
    float h = a * SDL_sqrtf(3.0f) / 2.0f;
    float r_in = h / 3.0f;         // Расстояние от центра до основания
    float r_out = 2.0f * h / 3.0f; // Расстояние от центра до вершины
 
    // Координаты вершин относительно центра (0,0), где Y смотрит вверх
    SDL_FPoint trianglePoints[4] = {
        { originX - a / 2.0f, originY + r_in }, // Лево-низ (в SDL это +r_in, т.к. экранный Y вниз)
        { originX + a / 2.0f, originY + r_in }, // Право-низ
        { originX, originY - r_out },           // Вершина (в SDL это -r_out, чтобы была вверху)
        { originX - a / 2.0f, originY + r_in }  // Замыкаем
    };
 
    SDL_SetRenderDrawColor(renderer, 245, 240, 220, 255); // Светло-кремовый
    SDL_RenderLines(renderer, trianglePoints, 4);
 
    SDL_RenderPresent(renderer);
    return SDL_APP_CONTINUE;
}
 
// Эта функция запускается один раз при завершении работы
void SDL_AppQuit(void *appstate, SDL_AppResult result)
{
    if (textTexture)
    {
        SDL_DestroyTexture(textTexture);
    }
 
    TTF_Quit();
 
    // SDL3 автоматически освободит все ресурсы подсистем (окна, рендереры) при выходе
}

Подписи координат вершин треугольника

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

#define SDL_MAIN_USE_CALLBACKS 1
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
#include <SDL3_ttf/SDL_ttf.h>
#include <stdio.h>
 
static SDL_Window *window = NULL;
static SDL_Renderer *renderer = NULL;
static SDL_Texture *textTexture = NULL;
static TTF_Font *font = NULL;
static SDL_Texture *coordTextures[3] = { NULL, NULL, NULL };
 
static const float TRIANGLE_A = 280.0f; // Длина стороны треугольника
static const float AXIS_X_LEN = 200.0f; // Половина длины оси X
static const float AXIS_Y_LEN = 180.0f; // Длина осей вверх/вниз
 
SDL_Texture *CreateTextTexture(const char *text, SDL_Color color)
{
    SDL_Surface *surface = TTF_RenderText_Blended(font, text, 0, color);
    SDL_Texture *tex = SDL_CreateTextureFromSurface(renderer, surface);
    SDL_DestroySurface(surface);
    return tex;
}
 
SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[])
{
    if (!SDL_Init(SDL_INIT_VIDEO))
        return SDL_APP_FAILURE;
    if (!TTF_Init())
        return SDL_APP_FAILURE;
 
    // Увеличили окно для большого треугольника
    if (!SDL_CreateWindowAndRenderer("Рендерер SDL3", 500, 500, 0, &window, &renderer))
        return SDL_APP_FAILURE;
 
    SDL_SetRenderVSync(renderer, 1);
 
    // Загружаем шрифт с базовым размером
    font = TTF_OpenFont("assets/fonts/LiberationSans-Regular.ttf", 20);
    if (!font)
        return SDL_APP_FAILURE;
 
    SDL_Color titleColor = { 245, 240, 220, 255 };
    SDL_Color coordColor = { 200, 200, 200, 255 };
 
    // Создаем заголовок
    TTF_SetFontSize(font, 28);
    textTexture = CreateTextTexture("Равносторонний треугольник", titleColor);
 
    // Рассчитываем и создаем подписи координат
    TTF_SetFontSize(font, 20); // Размер для координат
    float h = TRIANGLE_A * SDL_sqrtf(3.0f) / 2.0f;
    float r_in = h / 3.0f;
    float r_out = 2.0f * h / 3.0f;
 
    char buf[64];
    // Лево-низ
    sprintf(buf, "(%.1f, %.1f)", -TRIANGLE_A / 2.0f, -r_in);
    coordTextures[0] = CreateTextTexture(buf, coordColor);
    // Право-низ
    sprintf(buf, "(%.1f, %.1f)", TRIANGLE_A / 2.0f, -r_in);
    coordTextures[1] = CreateTextTexture(buf, coordColor);
    // Верх
    sprintf(buf, "(0.0, %.1f)", r_out);
    coordTextures[2] = CreateTextTexture(buf, coordColor);
 
    return SDL_APP_CONTINUE;
}
 
SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
{
    if (event->type == SDL_EVENT_QUIT)
        return SDL_APP_SUCCESS;
    return SDL_APP_CONTINUE;
}
 
SDL_AppResult SDL_AppIterate(void *appstate)
{
    int winW, winH;
    SDL_GetWindowSize(window, &winW, &winH);
 
    SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255);
    SDL_RenderClear(renderer);
 
    // Отрисовка заголовка
    float tw, th;
    SDL_GetTextureSize(textTexture, &tw, &th);
    SDL_FRect textRect = { (winW - tw) / 2.0f, 20.0f, tw, th };
    SDL_RenderTexture(renderer, textTexture, NULL, &textRect);
 
    // Оси координат
    float originX = winW / 2.0f;
    float originY = winH / 2.0f + 50.0f; // Центр системы координат
 
    SDL_SetRenderDrawColor(renderer, 180, 80, 80, 255); // Мягкий красный
    SDL_RenderLine(renderer, originX - AXIS_X_LEN, originY, originX + AXIS_X_LEN, originY);
 
    SDL_SetRenderDrawColor(renderer, 80, 180, 80, 255); // Мягкий зеленый
    SDL_RenderLine(renderer, originX, originY + AXIS_Y_LEN, originX, originY - AXIS_Y_LEN);
 
    // Расчет точек треугольника
    float h = TRIANGLE_A * SDL_sqrtf(3.0f) / 2.0f;
    float r_in = h / 3.0f;
    float r_out = 2.0f * h / 3.0f;
 
    SDL_FPoint pts[4] = {
        { originX - TRIANGLE_A / 2.0f, originY + r_in },
        { originX + TRIANGLE_A / 2.0f, originY + r_in },
        { originX, originY - r_out },
        { originX - TRIANGLE_A / 2.0f, originY + r_in }
    };
 
    SDL_SetRenderDrawColor(renderer, 245, 240, 220, 255);
    SDL_RenderLines(renderer, pts, 4);
 
    // Отрисовка подписей
    for (int i = 0; i < 3; i++)
    {
        float cw, ch;
        SDL_GetTextureSize(coordTextures[i], &cw, &ch);
        // Увеличили отступ (offset), чтобы крупный текст не налипал на вершины
        float offset = 15.0f;
        SDL_FRect cRect = {
            pts[i].x - cw / 2.0f,
            pts[i].y + (i == 2 ? -ch - offset : offset),
            cw, ch
        };
        SDL_RenderTexture(renderer, coordTextures[i], NULL, &cRect);
    }
 
    SDL_RenderPresent(renderer);
    return SDL_APP_CONTINUE;
}
 
void SDL_AppQuit(void *appstate, SDL_AppResult result)
{
    SDL_DestroyTexture(textTexture);
    for (int i = 0; i < 3; i++)
        SDL_DestroyTexture(coordTextures[i]);
    TTF_CloseFont(font);
    TTF_Quit();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

cmake_minimum_required(VERSION 3.21)
project(finish-zoom-text-sdl3-c)
 
# Задаем название будущего приложения (в Windows это будет app.exe, а
# в вебе было бы app.js / app.wasm)
add_executable(app)
 
# Устанавливаем стандарт C
set(CMAKE_C_STANDARD 17)
set(CMAKE_C_STANDARD_REQUIRED ON)
 
# Указываем точное местоположение конфигурационных файлов библиотек
# Имя переменной должно строго соответствовать: НазваниеБиблиотеки_DIR
set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")
set(SDL3_ttf_DIR "C:/libs/SDL3_ttf-devel-3.2.2-mingw/lib/cmake/SDL3_ttf")
 
# Добавляем исходный код к проекту
target_sources(app
    PRIVATE
    src/main.c
)
 
# Проверяем наличие библиотек в системе
# Если она не будет найдены, CMake прервет настройку с ошибкой
# REQUIRED - переводится, как "обязательно" или "требуется"
find_package(SDL3 REQUIRED)
find_package(SDL3_ttf REQUIRED)
 
# Привязываем библиотеки к нашему приложению
target_link_libraries(app PRIVATE SDL3_ttf::SDL3_ttf SDL3::SDL3)

1
2

cmake -G "MinGW Makefiles" -S . -B dist/win ^
-DCMAKE_BUILD_TYPE=Debug

1
2
3

cd dist\win
cmake --build .
cd ..\..

1

dist\win\app

Миниатюры

Вложения

	SDL3-devel-3.4.2-mingw.zip (2.65 Мб, 94 просмотров)
	SDL3-3.4.2-win32-x64.zip (1.10 Мб, 76 просмотров)
	SDL3_ttf-devel-3.2.2-mingw.zip (2.63 Мб, 95 просмотров)
	SDL3_ttf-3.2.2-win32-x64.zip (979.6 Кб, 93 просмотров)
	LiberationSans-Regular.zip (206.0 Кб, 55 просмотров)
	start-text-sdl3-c.zip (3.0 Кб, 52 просмотров)
	finish-text-sdl3-c.zip (210.0 Кб, 273 просмотров)
	finish-text-sdl3-cpp.zip (210.1 Кб, 262 просмотров)

• finish-rectangles-sdl3-c.zip
• finish-rectangles-sdl3-cpp.zip

Настройка окружения

• Установите CMake и MinGW 13.1 по пошаговой инструкции: Установка CMake и MinGW 13.1
• Скачайте библиотеку SDL3 по ссылке: SDL3-devel-3.4.2-mingw.zip
• Примечание. Эту библиотеку в собранном виде я скачал по этой ссылке с официальной страницы со сборками под разные платформы. Но я немного сократил путь к вложенным папкам
• Скачайте архив с динамической библиотекой SDL3.dll: SDL3-3.4.2-win32-x64.zip
• Примечание. Этот архив я скачал по этой ссылке с официальной страницы.
• Извлеките содержимое архивов выше в какую-нибудь общую папку, например, с именем "libs" на C:
  
• Путь к SDL3.dll (C:\libs\SDL3-3.4.2-win32-x64) добавьте в переменную окружения Path:
  
• Примечание 1. Диалоговое окно с Path можно открыть, если нажать Win + R и набрать команду:
  

  Bash
  1 sysdm.cpl ,3

• Примечание 1. ",3" означает, что будет открыта третья вкладка в диалоговом окне настроек:
  
• Нажмите на кнопку "Environment Variables..." и добавьте скопированный путь в Path

Создание проекта

• Скачайте стартовый проект: start-rectangles-sdl3-c.zip
• Примечание. Этот стартовый проект был создан по пошаговой инструкции: Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
• Извлеките пример из архива:
  
• Откройте папку примера в каком-нибудь текстовом редакторе - например, в Sublime Text 4, Notepad++, VS Code и т.д.
• Откройте файл "CMakeLists.txt" и убедитесь, что путь к библиотеке SDL3 такой же как у вас и при необходимости измените его на ваш путь:
  

  Bash
  1 set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")

• Откройте консоль в текущей папке и поочерёдно введите команды для конфигурирования, сборки и запуска EXE:
  

  Bash
  1 2 3 config-exe build-exe run-exe

• Будет запущено приложение. Мы протестировали корректный запуск стартового примера

Добавляем прямоугольники на холст

• Откройте файл по ссылке: examples/renderer/05-rectangles/rectangles.c
• Комментарии в этом файле на английском языке. Переведём комментарии на русский с помощью ИИ. Например, откройте промпт Gemini. Напишите следующий текст в промпт (после текста вставьте скопированный код):
  

  Переведи комментарии на русский, но код не меняй. Не переводи вывод в консоль. Вот код:

• Здесь мы можем может изучать пример по переведённым на русский комментариям. Там нужно найти в примере строчку, где рисуется прямоугольник командой SDL_RenderFillRect() и посмотреть, как она вызывается - с какими параметрами:
  
  src/main.c
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 /*  * Этот пример создает окно и рендерер SDL, а затем рисует  * несколько прямоугольников в каждом кадре.  *  * Этот код является общественным достоянием. Смело используйте его в любых целях!  */   #define SDL_MAIN_USE_CALLBACKS 1  /* использовать колбэки вместо main() */ #include <SDL3/SDL.h> #include <SDL3/SDL_main.h>   /* Мы будем использовать этот рендерер для отрисовки в этом окне каждый кадр. */ static SDL_Window *window = NULL; static SDL_Renderer *renderer = NULL;   #define WINDOW_WIDTH 640 #define WINDOW_HEIGHT 480   /* Эта функция запускается один раз при старте. */ SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     SDL_SetAppMetadata("Example Renderer Rectangles", "1.0", "com.example.renderer-rectangles");       if (!SDL_Init(SDL_INIT_VIDEO)) {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("examples/renderer/rectangles", WINDOW_WIDTH, WINDOW_HEIGHT, SDL_WINDOW_RESIZABLE, &window, &renderer)) {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }     SDL_SetRenderLogicalPresentation(renderer, WINDOW_WIDTH, WINDOW_HEIGHT, SDL_LOGICAL_PRESENTATION_LETTERBOX);       return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается, когда происходит новое событие (ввод мыши, нажатие клавиш и т.д.). */ SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT) {         return SDL_APP_SUCCESS;  /* завершаем программу, сообщая ОС об успехе. */     }     return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается один раз за кадр и является сердцем программы. */ SDL_AppResult SDL_AppIterate(void *appstate) {     SDL_FRect rects[16];     const Uint64 now = SDL_GetTicks();     int i;       /* заставим прямоугольники увеличиваться и уменьшаться в течение нескольких секунд. */     const float direction = ((now % 2000) >= 1000) ? 1.0f : -1.0f;     const float scale = ((float) (((int) (now % 1000)) - 500) / 500.0f) * direction;       /* как вы можете видеть здесь, рендеринг рисует поверх того, что было нарисовано ранее. */     SDL_SetRenderDrawColor(renderer, 0, 0, 0, SDL_ALPHA_OPAQUE);  /* черный, непрозрачный */     SDL_RenderClear(renderer);  /* начинаем с чистого холста. */       /* Прямоугольники состоят из набора координат X и Y, а также ширины и        высоты. (0, 0) — это верхний левый угол окна, и чем больше числа, тем        ниже и правее уходит точка. Это не совсем то, как работает геометрия, но это        стандарт для 2D-графики. */       /* Давайте нарисуем один прямоугольник (точнее, квадрат). */     rects[0].x = rects[0].y = 100;     rects[0].w = rects[0].h = 100 + (100 * scale);     SDL_SetRenderDrawColor(renderer, 255, 0, 0, SDL_ALPHA_OPAQUE);  /* красный, непрозрачный */     SDL_RenderRect(renderer, &rects[0]);       /* Теперь давайте нарисуем несколько прямоугольников одним вызовом функции. */     for (i = 0; i < 3; i++) {         const float size = (i+1) * 50.0f;         rects[i].w = rects[i].h = size + (size * scale);         rects[i].x = (WINDOW_WIDTH - rects[i].w) / 2;  /* центрируем. */         rects[i].y = (WINDOW_HEIGHT - rects[i].h) / 2;  /* центрируем. */     }     SDL_SetRenderDrawColor(renderer, 0, 255, 0, SDL_ALPHA_OPAQUE);  /* зеленый, непрозрачный */     SDL_RenderRects(renderer, rects, 3);  /* рисуем три прямоугольника за раз */       /* это были контуры прямоугольников. Вы также можете рисовать *заполненные* прямоугольники! */     rects[0].x = 400;     rects[0].y = 50;     rects[0].w = 100 + (100 * scale);     rects[0].h = 50 + (50 * scale);     SDL_SetRenderDrawColor(renderer, 0, 0, 255, SDL_ALPHA_OPAQUE);  /* синий, непрозрачный */     SDL_RenderFillRect(renderer, &rects[0]);       /* ...а также заполнить целую пачку прямоугольников сразу... */     for (i = 0; i < SDL_arraysize(rects); i++) {         const float w = (float) (WINDOW_WIDTH / SDL_arraysize(rects));         const float h = i * 8.0f;         rects[i].x = i * w;         rects[i].y = WINDOW_HEIGHT - h;         rects[i].w = w;         rects[i].h = h;     }     SDL_SetRenderDrawColor(renderer, 255, 255, 255, SDL_ALPHA_OPAQUE);  /* белый, непрозрачный */     SDL_RenderFillRects(renderer, rects, SDL_arraysize(rects));       SDL_RenderPresent(renderer);  /* выводим всё это на экран! */       return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается один раз при завершении работы. */ void SDL_AppQuit(void *appstate, SDL_AppResult result) {     /* SDL сама очистит за нами окно и рендерер. */ }

• Временно удалите код из "src/main.c" и замените его на код выше
• Соберите проект командой "build-exe" и запустите EXE командой "run-exe". Будет показана анимация из заполненных и пустых прямоугольников:
  
• После тестирования официального примера верните обратно код стартового примера нажатием на Ctrl+Z
• В стартовом примере вывод ошибок в консоль на русском. Лучше выводить на английском, чтобы во консоли гарантировано отображалось без проблем с кодировкой. Замените вывод на английский:
  

  C

  1 2 3 4 5 6 7 8 9 10 11     if (!SDL_Init(SDL_INIT_VIDEO))     {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("Прямоугольники на SDL3", 400, 300, SDL_WINDOW_RESIZABLE, &window, &renderer))     {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }

• Мы можем посмотреть, как рисуются прямоугольники в запущенном примере и повторить, но сначала удалите код из стартового примера, который меняет цвет фона:
  

  C

  1 2 3 4 5 6     const double now = ((double)SDL_GetTicks()) / 1000.0;  /* конвертируем миллисекунды в секунды. */     /* выбираем цвет для кадра, который будем рисовать. Трюк с синусоидой заставляет цвета плавно сменять друг друга. */     const float red = (float) (0.5 + 0.5 * SDL_sin(now));     const float green = (float) (0.5 + 0.5 * SDL_sin(now + SDL_PI_D * 2 / 3));     const float blue = (float) (0.5 + 0.5 * SDL_sin(now + SDL_PI_D * 4 / 3));     SDL_SetRenderDrawColorFloat(renderer, red, green, blue, SDL_ALPHA_OPAQUE_FLOAT);  /* новый цвет, полная непрозрачность. */

• Вместо этого кода напечатайте строку кода, которая вы:
  

  C
  1 SDL_SetRenderDrawColorFloat(renderer, 0.2f, 0.2f, 0.2f, SDL_ALPHA_OPAQUE_FLOAT);

• Добавьте код рисования двух прямоугольников:
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /* Эта функция запускается один раз за кадр и является сердцем программы. */ SDL_AppResult SDL_AppIterate(void *appstate) {     SDL_SetRenderDrawColorFloat(renderer, 0.2f, 0.2f, 0.2f, SDL_ALPHA_OPAQUE_FLOAT);       /* очищаем окно цветом отрисовки. */     SDL_RenderClear(renderer);       SDL_FRect rect1;     rect1.x = 100;     rect1.y = 50;     rect1.w = 200;     rect1.h = 60;     SDL_SetRenderDrawColor(renderer, 255, 0, 0, SDL_ALPHA_OPAQUE);     SDL_RenderFillRect(renderer, &rect1);       SDL_FRect rect2;     rect2.x = 50;     rect2.y = 200;     rect2.w = 100;     rect2.h = 50;     SDL_SetRenderDrawColor(renderer, 0, 255, 0, SDL_ALPHA_OPAQUE);     SDL_RenderFillRect(renderer, &rect2);       /* выводим свежеочищенный результат на экран. */     SDL_RenderPresent(renderer);       return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }

• Измените метаданные в начале функции SDL_AppInit():
  

  C
  1 2 3 4 /* Эта функция запускается один раз при старте. */ SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     SDL_SetAppMetadata("Example Renderer Rectangles", "1.0", "com.example.renderer-rectangles");

• Выставите размер окна поменьше, чем было раньше в функции создания окна:
  

  C
  1 2 3 4 5 6     if (!SDL_CreateWindowAndRenderer("Прямоугольники на SDL3", 400, 300, SDL_WINDOW_RESIZABLE, &window, &renderer))     {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }     SDL_SetRenderLogicalPresentation(renderer, 400, 300, SDL_LOGICAL_PRESENTATION_LETTERBOX);

• Соберите проект командой "build-exe" и запустите EXE командой "run-exe". Выводится два прямоугольника с разными координатами, размерами и разных цветов:
  
• Если вы откроете "Диспетчер задач", то вы увидите большую нагрузку на GPU если у вас интегрированная карта:
  
• Чтобы существенно на порядок снизить нагрузку на GPU включим вертикальную синхронизацию после команды создания окна:
  

  C
  1 SDL_SetRenderVSync(renderer, 1);

• Результат - GPU загружен значительно меньше, как и CPU:
  

Сборка в Release

• Отключаем показ консоли. Для этого открываем файл "CMakeLists.txt" и добавляем WIN32 здесь:
  

  Bash
  1 add_executable(app WIN32)

• EXE собранный в Debug режиме весит 83.6 KB (лежим этот EXE в папке "dist/win")
• Открываем файл "config-exe.bat" и меняем Debug на Release:
  
  config-exe.bat
  
  

  Bash
  1 2 cmake -G "MinGW Makefiles" -S . -B dist/win ^ -DCMAKE_BUILD_TYPE=Release

• Проводим конфигурирование командой "config-exe" и сборку командой "build-exe" и мы видим, что в папке "dist/win" лежит EXE весом 62.3 KB
• Чтобы распространять программу, нужно к EXE подложить SDL3.dll весом 2.66 MB. Эта DLL лежит в папке "C:\libs\SDL3-3.4.2-win32-x64", которую мы добавили в Path
• Для разработки, лучше использовать режим Debug, то есть после сборки в релиз лучше вернуть настройку в config-exe.bat обратно в Debug:
  
  config-exe.bat
  
  

  Bash
  1 2 cmake -G "MinGW Makefiles" -S . -B dist/win ^ -DCMAKE_BUILD_TYPE=Debug

Сборка созданного примера в Qt Creator

• Скачайте и установите Qt Creator: https://github.com/qt-creator/qt-creator/releases
• Запустите Qt Creator, набрав в поиске программ "Qt Creator"
• В левом верхнем углу нажмите "Fire" > "Open File or Project..."
• В открывшемся диалоговом окне перейдите в папку "start-rectangles-sdl3-c" и выберите файл "CMakeLists.txt"
• Проект будет открыт в Qt Creator. Вы может запустить проект на выполнение нажав зелёный треугольник в левом нижнем углу
• Поставьте точку остановка, кликнув мышкой слева от номера строки кода и нажмите зелёный треугольник с жуком в левом нижнем углу. Запустится отладка по шагам. Вы можете нажимать кнопки на панели инструментов - например, кнопку для выполнения кода без захода внутрь функции или с заходом внутрь функции

Переделываем C-проект в C++-проект

• Сделайте копию папки проекта выше и переименуйте папку, написав на конце названия "-cpp" вместо "-с", например: "start-rectangles-sdl3-cpp"
• В этом новом проекте удалите папку "dist", если вы собирали проект командами: "config-exe" и "build-exe"
• Удалите папку "build", если вы собирали проект до копирования папки с помощью Qt Creator
• Откройте папку "start-rectangles-sdl3-cpp" в каком-нибудь редакторе кода, например, в Sublime Text 4, Nodepad++, либо в IDE Qt Creator ("File" > "Open File or Project" -> выберите файл "CMakeLists.txt")
• В редакторе кода или IDE откройте файл "CMakeLists.txt" для редактирования
• Измените имя проекта в строке:
  
  Было:
  

  Bash
  1 project(start-rectangles-sdl3-c)

  Стало:
  

  Bash
  1 project(start-rectangles-sdl3-cpp)

• Замените стандарт C на стандарт C++:
  
  Было:
  

  Bash
  1 2 3 # Устанавливаем стандарт C set(CMAKE_C_STANDARD 17) set(CMAKE_C_STANDARD_REQUIRED ON)

  Стало:
  

  Bash
  1 2 3 # Устанавливаем стандарт C++ set(CMAKE_CXX_STANDARD 20) set(CMAKE_CXX_STANDARD_REQUIRED ON)

• Измените расширение файла исходного кода:
  
  Было:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.c )

  Стало:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.cpp )

• Переименуйте файл "src/main.c" в "src/main.cpp"
  
• Введите следующие команды в консоли для конфигурирования, сборки и запуска EXE:
  
  

  Bash
  1 2 3 config-exe build-exe run-exe

Миниатюры

Вложения

	SDL3-devel-3.4.2-mingw.zip (2.65 Мб, 272 просмотров)
	SDL3-3.4.2-win32-x64.zip (1.10 Мб, 132 просмотров)
	start-rectangles-sdl3-c.zip (3.6 Кб, 117 просмотров)
	finish-rectangles-sdl3-c.zip (3.5 Кб, 267 просмотров)
	finish-rectangles-sdl3-cpp.zip (3.5 Кб, 268 просмотров)

• hello-sdl3-c.zip
• hello-sdl3-cpp.zip

• Установите CMake и MinGW 13.1 по пошаговой инструкции: Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
• Скачайте библиотеку SDL3 по ссылке: SDL3-devel-3.4.2-mingw.zip
• Примечание. Эту библиотеку в собранном виде я скачал по этой ссылке с официальной страницы со сборками под разные платформы. Но я немного сократил путь к вложенным папкам
• Скачайте архив с динамической библиотекой SDL3.dll: SDL3-3.4.2-win32-x64.zip
• Примечание. Этот архив я скачал по этой ссылке с официальной страницы.
• Извлеките содержимое архивов выше в какую-нибудь общую папку, например, с именем "libs" на C:
  
• Путь к SDL3.dll (C:\libs\SDL3-3.4.2-win32-x64) добавьте в переменную окружения Path:
  
• Примечание. Диалоговое окно с Path можно открыть, если нажать Win + R и набрать команду:
  

  Bash
  1 sysdm.cpl ,3

• Примечание. ",3" означает, что будет открыта третья вкладка в диалоговом окне настроек:
  
• Создайте новую пустую папку под названием "hello-sdl3-c"
• Откройте эту папку в текстовом редакторе - например, в Sublime Text 4, Notepad++, VS Code и т.д.
• Создайте внутри этой папки файл "CMakeLists.txt" и скопируйте в него следующий код:
  
  CMakeLists.txt
  
  

  Bash
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 cmake_minimum_required(VERSION 3.21) project(hello-world-c)   # Задаем название будущего приложения (в Windows это app.exe, а в вебе было бы app.js / app.wasm) add_executable(app)   # Устанавливаем стандарт C set(CMAKE_C_STANDARD 11)   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )

• В проекте создайте папку "src", а в папке "src" файл "main.c"
• Перейдите по этой ссылке на официальный пример "clear.c" и скопируйте содержимое файла "clear.c"
• Вставьте содержимое файла "clear.c" в промпт ИИ, например, Gemini и попросите в промпте:
  
  

  Переведи комментарии на русский не меняя код

• Скопируйте полученный код и вставьте его в файл "src/main.c"
  
  main.c
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 /*  * Этот пример создает окно и рендерер SDL, а затем очищает  * окно разным цветом каждый кадр, так что в итоге вы получите окно,  * цвет которого плавно меняется.  *  * Этот код является общественным достоянием. Используйте его для любых целей!  */   #define SDL_MAIN_USE_CALLBACKS 1  /* использовать функции обратного вызова вместо main() */ #include <SDL3/SDL.h> #include <SDL3/SDL_main.h>   /* Мы будем использовать этот рендерер для рисования в этом окне каждый кадр. */ static SDL_Window *window = NULL; static SDL_Renderer *renderer = NULL;   /* Эта функция запускается один раз при старте. */ SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     SDL_SetAppMetadata("Example Renderer Clear", "1.0", "com.example.renderer-clear");       if (!SDL_Init(SDL_INIT_VIDEO)) {         SDL_Log("Не удалось инициализировать SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("examples/renderer/clear", 640, 480, SDL_WINDOW_RESIZABLE, &window, &renderer)) {         SDL_Log("Не удалось создать окно/рендерер: %s", SDL_GetError());         return SDL_APP_FAILURE;     }     SDL_SetRenderLogicalPresentation(renderer, 640, 480, SDL_LOGICAL_PRESENTATION_LETTERBOX);       return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается, когда происходит новое событие (ввод мыши, нажатие клавиш и т.д.). */ SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT) {         return SDL_APP_SUCCESS;  /* завершаем программу, сообщая ОС об успехе. */     }     return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается один раз за кадр и является сердцем программы. */ SDL_AppResult SDL_AppIterate(void *appstate) {     const double now = ((double)SDL_GetTicks()) / 1000.0;  /* конвертируем миллисекунды в секунды. */     /* выбираем цвет для кадра, который будем рисовать. Трюк с синусоидой заставляет цвета плавно сменять друг друга. */     const float red = (float) (0.5 + 0.5 * SDL_sin(now));     const float green = (float) (0.5 + 0.5 * SDL_sin(now + SDL_PI_D * 2 / 3));     const float blue = (float) (0.5 + 0.5 * SDL_sin(now + SDL_PI_D * 4 / 3));     SDL_SetRenderDrawColorFloat(renderer, red, green, blue, SDL_ALPHA_OPAQUE_FLOAT);  /* новый цвет, полная непрозрачность. */       /* очищаем окно цветом отрисовки. */     SDL_RenderClear(renderer);       /* выводим свежеочищенный результат на экран. */     SDL_RenderPresent(renderer);       return SDL_APP_CONTINUE;  /* продолжаем работу программы! */ }   /* Эта функция запускается один раз при завершении работы. */ void SDL_AppQuit(void *appstate, SDL_AppResult result) {     /* SDL сама очистит окно и рендерер за нас. */ }

• Здесь вы можете копировать функции и строки кода в ИИ, например, в Gemini и просить объяснить простыми словами, что делает код. Читайте комментарии в коде выше. Код в итоге покажет окно, а фон холста будет плавно менять цвет. На официальном репозитории много примеров для начинающих в папке examples, которые необходимо изучать с помощью ИИ, а чтобы ИИ вам доходчиво объяснял, просите его объяснять простыми словами
  
• Перейдите в папку "C:\libs" и скопируйте следующий путь:
  
  
  
• Вставьте этот пусть в файл "CMakeLists.txt", создав переменную SDL3_DIR, и замените обратные косые черты на прямые, вот так:
  
  

  Bash
  1 set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")

• Добавьте команду поиска библиотеки и команду для линковки:
  
  

  Bash
  1 2 3 4 5 6 7 # Проверяем наличие библиотек в системе # Если она не будет найдены, CMake прервет настройку с ошибкой # REQUIRED - переводится, как «обязательно» или «требуется» find_package(SDL3 REQUIRED)   # Привязываем библиотеки к нашему приложению (настройка линковки и путей include) target_link_libraries(app PRIVATE SDL3::SDL3)

• В итоге получился файл:
  
  CMakeLists.txt
  
  

  Bash

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 cmake_minimum_required(VERSION 3.21) project(hello-sdl3-c)   # Задаем название будущего приложения (в Windows это будет app.exe, а в вебе было бы app.js / app.wasm) add_executable(app)   # Устанавливаем стандарт C set(CMAKE_C_STANDARD 11)   # Указываем точное местоположение конфигурационных файлов библиотек # Имя переменной должно строго соответствовать: НазваниеБиблиотеки_DIR set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-mingw/lib/cmake/SDL3")   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )   # Проверяем наличие библиотек в системе # Если она не будет найдены, CMake прервет настройку с ошибкой # REQUIRED - переводится, как «обязательно» или «требуется» find_package(SDL3 REQUIRED)   # Привязываем библиотеки к нашему приложению (настройка линковки и путей include) target_link_libraries(app PRIVATE SDL3::SDL3)

• Откройте консоль в папке проекта и введите команду конфигурирования проекта:
  
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

  , где элементы команды означают следующее:
  
  • cmake - команда CMake
  • -G "MinGW Makefiles" - используем MinGW
  • -S . - указываем, что источник "Source", то есть файл CMakeLists.txt находится в текущей папке
  • -B dist/win - указываем куда сохранять конфигурационные файлы и для этого мы указываем, что нужно создать папку "dist/win"
  • -DCMAKE_BUILD_TYPE=Debug - указываем, что сборка будет отладочная. Она больше чем Release, но Debug собирается быстрее (хотя для Desktop разницы в скорости сборки для маленьких проектов нет, а для WebAssembly разница огромная - пара секунд для Debug и 15 и более секунд на Release)
• Введите команды для сборки приложения в EXE:
  

  Bash
  1 cd dist\win

  Bash
  1 cmake --build .

• Создан EXE с именем "app.exe". Для его запуска здесь же в открытой консоли введите команду:
  

  Bash
  1 app

• Появится окно, где фон холста будет плавно переливаться разными цветами
• Примечание. Теперь вы можете менять код и сохранять на Ctrl+S, а в консоли достаточно будет нажать кнопку-стрелку вверх, чтобы выбрать команду "cmake --build ." и нажать Enter. Команда конфигурирования выполняется только один раз. Если вы куда-то перенесёте папку "hello-world-c" или переименуете её, то нужно будет удалить папку "dist" и сделать конфигурирование снова той же командой:
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

• Создайте три батника, чтобы проще было делать конфигурирование, сборку и запуск приложения:
  
  config-exe.bat
  
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

  build-exe.bat
  
  

  Bash
  1 2 3 cd dist\win cmake --build . cd ..\..

  run-exe.bat
  
  

  Bash
  1 dist\win\app

• Теперь можно набирать очень быстро команды:
  
  

  Bash
  1 config-exe

  Bash
  1 build-exe

  Bash
  1 run-exe

• После первого запуска команд их можно выбирать клавишами-стрелками в CMD. Например, изменили что-то в коде и клавишами-стрелками в CMD выбрали "build-exe", а после сборки выбрали "run-exe"

Сборка созданного примера в Qt Creator

• Скачайте и установите Qt Creator версии 18 по ссылке. Установщик вы найдёте в списке "Assets"
• Запустите Qt Creator, набрав в поиске программ "Qt Creator"
• В левом верхнем углу нажмите "Fire" > "Open File or Project..."
• В открывшемся диалоговом окне перейдите в папку "hello-sdl3-c" и выберите файл "CMakeLists.txt"
• Проект будет открыт в Qt Creator. Вы может запустить проект на выполнение нажав зелёный треугольник в левом нижнем углу
• Поставьте точку остановка, кликнув мышкой слева от номера строки кода и нажмите зелёный треугольник с жуком в левом нижнем углу. Запустится отладка по шагам. Вы можете нажимать кнопки на панели инструментов - например, кнопку для выполнения кода без захода внутрь функции или с заходом внутрь функции

Переделываем Си-проект в C++

• Сделайте копию папки "hello-sdl3-c" и переименуйте её в "hello-sdl3-cpp"
• В этом новом проекте удалите папку "dist"
• Откройте папку "hello-sdl3-cpp" в каком-нибудь редакторе кода, например, в Sublime Text 4, Nodepad++, либо в IDE Qt Creator ("File" > "Open File or Project" -> выберите файл "CMakeLists.txt")
• В редакторе кода или IDE откройте файл "CMakeLists.txt" для редактирования
• Измените имя проекта в строке:
  
  Было:
  

  Bash
  1 project(hello-sdl3-c)

  Стало:
  

  Bash
  1 project(hello-sdl3-cpp)

• Замените стандарт Си на стандарт C++:
  
  Было:
  

  Bash
  1 set(CMAKE_C_STANDARD 11)

  Стало:
  

  Bash
  1 2 3 # Устанавливаем стандарт C++ set(CMAKE_CXX_STANDARD 20) set(CMAKE_CXX_STANDARD_REQUIRED ON)

• Измените расширение файла исходного кода:
  
  Было:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.c )

  Стало:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.cpp )

• Переименуйте файл "src/main.c" в "src/main.cpp"
  
• Введите следующие команды в консоли для конфигурирования, сборки и запуска EXE:
  
  

  Bash
  1 2 3 config-exe build-exe run-exe

Миниатюры

Вложения

	SDL3-devel-3.4.2-mingw.zip (2.65 Мб, 230 просмотров)
	hello-sdl3-c.zip (3.4 Кб, 293 просмотров)
	hello-sdl3-cpp.zip (3.4 Кб, 287 просмотров)
	SDL3-3.4.2-win32-x64.zip (1.10 Мб, 152 просмотров)

Установка системы сборки CMake

1. Скачайте и установите CMake. Ищите cmake-x.x.x-windows-x86_64.msi в списке
2. Нажимайте кнопки Next > Next > Finish
3. Откройте консоль (CMD) и проверьте запускается ли CMake:
   

   Bash
   1 cmake --version

4. Если CMake не найден, то добавьте путь к C:\Program Files\CMake\bin в переменную окружения PATH

Установка MinGW 13.1

• Перейдите по ссылке: https://winlibs.com/
• Прокрутите страницу вниз и найдите пункт "GCC 13.1.0 (with POSIX threads)"
• Найдите подпункт "without LLVM/Clang/LLD/LLDB"
• Нажмите на ссылку Zip archive:
  
• Скаченный архив лучше извлечь в корень диска C, выбрав "Extract Here" (Извлечь сюда), чтобы на диске C была папка "mingw64"
• Переименуйте "mingw64" в "mingw64_13.1"
• Добавьте путь к папке "C:\mingw64_13.1\bin" в переменную окружения Path
• Примечание. Диалоговое окно с Path можно открыть, если нажать Win + R и набрать команду:
  

  Bash
  1 sysdm.cpl ,3

• Примечание. ",3" означает, что будет открыта третья вкладка в диалоговом окне настроек:
  
• Проверьте, что MinGW доступен. Для этого откройте новую консоль, чтобы не неё загрузилась актуальная переменная среды Path. Открыть консоль можно через Win + R и ввода команды:
  

  Bash
  1 cmd

• В открывшемся терминале введите команду:
  

  Bash
  1 gcc --version

• Будет выведена версия GCC - 13.1.0:
  

  Bash
  1 2 3 4 gcc (MinGW-W64 x86_64-ucrt-posix-seh, built by Brecht Sanders) 13.1.0 Copyright (C) 2023 Free Software Foundation, Inc. This is free software; see the source for copying conditions.  There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE

Сборка "Hello World!" примера на Си из консоли

• Создайте где-нибудь новую пустую папку под названием "hello-world-c"
• Откройте эту папку в текстовом редакторе - например, в Sublime Text 4, Notepad++ или VS Code
• Создайте внутри этой папки файл "CMakeLists.txt" и скопируйте в него следующий код:
  
  CMakeLists.txt
  
  

  Bash

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 cmake_minimum_required(VERSION 3.21) project(hello-world-c)   # Устанавливаем стандарт C. Этот код обязательно должен быть до вызова add_executable(app) set(CMAKE_C_STANDARD 11) set(CMAKE_C_STANDARD_REQUIRED ON)   # Задаем название будущего приложения (в Windows это будет app.exe, а в вебе было бы app.js / app.wasm) add_executable(app)   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )

• В проекте создайте папку "src", а в папке "src" файл "main.c" и скопируйте в него код:
  
  main.c
  
  

  C
  1 2 3 4 5 6 7 #include <stdio.h>   int main() {     printf("Hello World!\n");     return 0; }

• Откройте консоль в папке проекта и введите команду конфигурирования проекта:
  
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

  , где элементы команды означают следующее:
  
  • cmake - команда CMake
  • -G "MinGW Makefiles" - используем MinGW
  • -S . - указываем, что источник "Source", то есть файл CMakeLists.txt находится в текущей папке
  • -B dist/win - указываем куда сохранять конфигурационные файлы и для этого мы указываем, что нужно создать папку "dist/win"
  • -DCMAKE_BUILD_TYPE=Debug - указываем, что сборка будет отладочная. Она больше чем Release, но Debug собирается быстрее (хотя для Desktop разницы в скорости сборки для маленьких проектов нет, а для WebAssembly разница огромная - пара секунд для Debug и 15 и более секунд на Release)
• Введите команды для сборки приложения в EXE:
  

  Bash
  1 cd dist\win

  Bash
  1 cmake --build .

• Создан EXE с именем "app.exe". Для его запуска здесь же в открытой консоли введите команду:
  

  Bash
  1 app

• В консоль будет выведен текст "Hello World!"
• Примечание. Теперь вы можете менять код и сохранять на Ctrl+S, а в консоли достаточно будет нажать кнопку-стрелку вверх, чтобы выбрать команду "cmake --build ." и нажать Enter. Команда конфигурирования выполняется только один раз. Если вы куда-то перенесёте папку "hello-world-c" или переименуете её, то нужно будет удалить папку "dist" и сделать конфигурирование снова той же командой:
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

• Создайте три батника, чтобы проще было делать конфигурирование, сборку и запуск приложения:
  
  config-exe.bat
  
  

  Bash
  1 cmake -G "MinGW Makefiles" -S . -B dist/win -DCMAKE_BUILD_TYPE=Debug

  build-exe.bat
  
  

  Bash
  1 2 3 cd dist\win cmake --build . cd ..\..

  run-exe.bat
  
  

  Bash
  1 dist\win\app

• Теперь можно набирать очень быстро команды:
  
  

  Bash
  1 config-exe

  Bash
  1 build-exe

  Bash
  1 run-exe

• После первого запуска команд их можно выбирать клавишами-стрелками в CMD. Например, изменили что-то в коде и клавишами-стрелками в CMD выбрали "build-exe", а после сборки выбрали "run-exe"

Сборка "Hello World!" примера в Qt Creator

• Скачайте и установите Qt Creator версии 18 по ссылке. Установщик вы найдёте в списке "Assets"
• Запустите Qt Creator, набрав в поиске программ "Qt Creator"
• В левом верхнем углу нажмите "File" > "Open File or Project..."
• В открывшемся диалоговом окне перейдите в папку "hello-world-c" и выберите файл "CMakeLists.txt"
• Проект будет открыт в Qt Creator. Вы может запустить проект на выполнение нажав зелёный треугольник в левом нижнем углу
• Поставьте точку остановка, кликнув мышкой слева от номера строки кода и нажмите зелёный треугольник с жуком в левом нижнем углу. Запустится отладка по шагам. Вы можете нажимать кнопки на панели инструментов - например, кнопку для выполнения кода без захода внутрь функции или с заходом внутрь функции

Переделываем Си-проект в C++

• Сделайте копию папки "hello-world-c" и переименуйте её в "hello-world-cpp"
• В этом новом проекте удалите папку "dist"
• Откройте папку "hello-world-cpp" в каком-нибудь редакторе кода, например, в Sublime Text 4, Nodepad++, либо в IDE Qt Creator ("File" > "Open File or Project" -> выберите файл "CMakeLists.txt")
• В редакторе кода или IDE откройте файл "CMakeLists.txt" для редактирования
• Измените имя проекта в строке:
  
  Было:
  

  Bash
  1 project(hello-world-c)

  Стало:
  

  Bash
  1 project(hello-world-cpp)

• Замените стандарт Си на стандарт C++:
  
  Было:
  

  Bash
  1 2 set(CMAKE_C_STANDARD 11) set(CMAKE_C_STANDARD_REQUIRED ON)

  Стало:
  

  Bash
  1 2 3 # Устанавливаем стандарт C++ set(CMAKE_CXX_STANDARD 20) set(CMAKE_CXX_STANDARD_REQUIRED ON)

• Измените расширение файла исходного кода:
  
  Было:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.c )

  Стало:
  

  Bash
  1 2 3 4 target_sources(app     PRIVATE     src/main.cpp )

• Переименуйте файл "src/main.c" в "src/main.cpp"
  
• Введите следующие команды в консоли для конфигурирования, сборки и запуска EXE:
  
  

  Bash
  1 2 3 config-exe build-exe run-exe

Миниатюры

Вложения

	hello-world-c.zip (1.6 Кб, 96 просмотров)
	hello-world-cpp.zip (1.7 Кб, 99 просмотров)

Установка редактора кода и ПО для локального сервера

• Установите какой-нибудь редактор кода, например, в Notepad++ или в Sublime Text 4 (ST4): https://www.sublimetext.com/download
• Установите Node.js для запуска локального сервера: https://nodejs.org/en/download
• Примечание. После установки Node.js из консоли будет доступен менеджер пакетов NPM
• Откройте терминал (командную строку), например, на Windows 10 можно в поиске программ ввести CMD и выбрать "Run as administrator" - "Запустить от администратора"
• В консоле введите команду для установки локального сервера:
  

  Bash
  1 npm i http-server -g

• Установите js-beautify, чтобы форматировать код из консоли:
  

  Bash
  1 npm i js-beautify -g

• Примечание. О том, как использовать js-beautify можно прочитать здесь: Консольные команды для форматирования исходного кода на C, C++, C#, Java, JavaScript, HTML и CSS. Сортировка пакетов на Python

Пишем код по шагам

• Создайте пустую папку, например, с именем "orbit-controls-threejs-js"
• Откройте эту папку в редакторе кода, например, в Sublime Text 4 (ST4). Проще всего добавить ST4 в системную Path на Windows 10. Если не знаете, как добавить путь к EXE программы в Path, то спросите у ИИ, например, у Gemini: "Как добавить путь к Sublime Text 4 в Path". Тогда можно будет в CMD из созданной папки набрать:
  

  Bash
  1 subl .

• Создайте файл index.html и наберите "html" и нажмите Tab и будет сгенерирован код:
  

  PHP/HTML
  1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title></title> </head> <body>   </body> </html>

• Можете отформатировать код командой:
  

  Bash
  1 js-beautify -n *.html -b "collapse, preserve-inline"

• После этой команды код будет отформатирован:
  

  PHP/HTML
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title></title> </head>   <body>   </body>   </html>

• Найдём ссылки на библиотеку Three.js. Перейдите по ссылке: https://cdn.jsdelivr.net, прокрутите страницу немного вниз и наберите в поиске: three.js
• Перейдите по первой ссылке в поиске:
  
• Кликните по ссылке "Files":
  
• Кликните по папке "build":
  
• Найдите строку с "three.module.min.js" и эту нажмите кнопку для копирования URL:
  
• Добавьте следующий код с "importmap" в "index.html" и вставьте скопированный URL:
  

  PHP/HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title></title> </head>   <body>     <script type="importmap">         {             "imports": {                 "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js"             }         }     </script> </body>   </html>

• Примечание. Благодаря "importmap" мы можем в файлах .js импортировать Three.js командой:
  

  JavaScript
  1 import * as THREE from "three";

• В файле "index.html" внутри тега <body> добавьте тег холста с id="renderCanvas":
  

  PHP/HTML
  1 2 3 4 5 6 <body>     <canvas id="renderCanvas"></canvas>       <!-- ... -->   </body>

• Добавьте подключение файла "./js/index.js", который мы добавим позже:
  

  PHP/HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title></title> </head>   <body>     <canvas id="renderCanvas"></canvas>       <script type="importmap">         {             "imports": {                 "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js"             }         }     </script>       <script type="module" src="./js/index.js"></script> </body>   </html>

• Создайте в папку "js", а в папке "js" создайте файл "index.js"
• Протестируем запуск приложения. Добавьте в "index.js" строку вывода "Hello World!" в консоль браузера:
  

  JavaScript
  1 console.log("Hello World!");

• В консоле введите команду для запуска локального сервера:
  

  Bash
  1 http-server -c-1

• Будет выведен список адресов для браузера, например у меня:
  

  Bash
  1 2 3 4 Available on:   http://192.168.1.65:8080   http://127.0.0.1:8080 Hit CTRL-C to stop the server

• Если у вас телефон подключён по Wi-Fi, то введите в браузере телефона адрес: 192.168.1.65:8080
• Перейдите в Chrome (или Edge) и нажмите "Ctrl+Shift+J" для открытия консоли браузера. Если у вас Firefox, то погуглите, как открыть консоль в Firefox
• Введите в адресной строке браузера следующий адрес и после этого нажмите Enter:
  

  Bash
  1 localhost:8080

• В консоли вы увидите "Hello World!"
• Примечание. Если вы что-то меняете в проекте и хотите перезапустить приложение в браузере, то обновляйте страницу с очисткой Cache - правой кнопкой по кнопке перезагрузки и выберите: "Empty Cache and Hard Reload"
• Откройте файл "index.js" и добавьте следующий код, который импортирует библиотеки Three.js, создаёт три функции: main(), init(), animate(), создаёт рисовальщик (renderer), сцену (scene) и камеру (camera):
  

  JavaScript

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 import * as THREE from "three";   let renderer, scene, camera;   function main() {     init();     animate(); }   window.onload = main;   function init() {     const canvas = document.getElementById("renderCanvas");       renderer = new THREE.WebGLRenderer({ antialias: true, canvas });     renderer.setSize(window.innerWidth, window.innerHeight);     renderer.setPixelRatio(window.devicePixelRatio);       scene = new THREE.Scene();     scene.background = new THREE.Color(0x222222);       camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);     camera.position.set(5, 5, 10); }   function animate() {     requestAnimationFrame(animate);     renderer.render(scene, camera); }

• Обновите страницу браузера и вы увидите холст тёмно-серого цвета
• Уберём полосы прокрутки со страницы и растянем холст. Для этого создайте папку "css" в корне проекта и в папке "css" добавьте файл "style.css":
  

  CSS
  1 2 3 4 5 6 7 8 9 10 11 12 13 body, html {     overflow: hidden;     width: 100%;     height: 100%;     margin: 0;     padding: 0; }   #renderCanvas {     width: 100%;     height: 100%; }

• Добавьте подключение файла "css/style.css" в файле "index.html". Для этого вы можете внутри тега <head> набрать "link" (без ковычек) и нажать Tab и написать в свойстве href="" путь к файлу "./css/style.css" следующим образом и добавьте текст "Examples" в тег <title>:
  

  PHP/HTML
  1 2 3 4 5 6 <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" href="./css/style.css">     <title>Example</title> </head>

• Обновите страницу браузера и теперь вы видите, что холст растянут на всю клиентскую область браузера и полос прокрутки нет. Текущий код:
  
  index.html
  
  

  PHP/HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" href="./css/style.css">     <title>Example</title> </head>   <body>     <canvas id="renderCanvas"></canvas>       <script type="importmap">         {             "imports": {                 "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js"             }         }     </script>       <script type="module" src="./js/index.js"></script> </body>   </html>

  js/index.js
  
  

  JavaScript

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 import * as THREE from "three";   let renderer, scene, camera;   function main() {     init();     animate(); }   window.onload = main;   function init() {     const canvas = document.getElementById("renderCanvas");       renderer = new THREE.WebGLRenderer({ antialias: true, canvas });     renderer.setSize(window.innerWidth, window.innerHeight);     renderer.setPixelRatio(window.devicePixelRatio);       scene = new THREE.Scene();     scene.background = new THREE.Color(0x222222);       camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);     camera.position.set(5, 5, 10); }   function animate() {     requestAnimationFrame(animate);     renderer.render(scene, camera); }

  css/style.css
  
  

  CSS
  1 2 3 4 5 6 7 8 9 10 11 12 13 body, html {     overflow: hidden;     width: 100%;     height: 100%;     margin: 0;     padding: 0; }   #renderCanvas {     width: 100%;     height: 100%; }

Добавляем библиотеку OrbitControls.js и рисование кубика средствами Three.js

• Найдём ссылки на библиотеку OrbitControls.js. Перейдите по ссылке: https://cdn.jsdelivr.net, прокрутите страницу немного вниз и наберите в поиске: three.js
• Перейдите по первой ссылке в поиске:
  
• Кликните по ссылке "Files":
  
• Кликните по папке "examples":
  
• Кликните по папке "jsm":
  
• Кликните по папке "controls":
  
• Скопируйте URL, нажав на кнопку:
  
• Откройте файл "index.html" и вставьте URL, создав новую строку подключения для OrbitControls.js:
  

  PHP/HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" href="./css/style.css">     <title>Example</title> </head>   <body>     <canvas id="renderCanvas"></canvas>       <script type="importmap">         {             "imports": {                 "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js",                 "orbit-controls": "https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/controls/OrbitControls.js"             }         }     </script>       <script type="module" src="./js/index.js"></script> </body>   </html>

• Откройте файл index.js и добавьте импортирование библиотеки OrbitControls.js:
  

  JavaScript
  1 import { OrbitControls } from "orbit-controls";

• Добавьте глобальные переменные "controls" и "cube" к уже имеющимся:
  

  JavaScript
  1 let renderer, scene, camera, controls, cube;

• В функции init() после создания камеры добавьте код создания "controls", передав в конструктор OrbitControls() ссылку на камеру и ссылку на <canvas>:
  

  JavaScript
  1 2     controls = new OrbitControls(camera, renderer.domElement);     controls.enableDamping = true; // Smooth movement

• Далее добавьте код создания геометрии и материала куба и добавьте куб на сцену командой scene.add(cube):
  

  JavaScript
  1 2 3 4     const geometry = new THREE.BoxGeometry(2, 2, 2);     const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });     cube = new THREE.Mesh(geometry, material);     scene.add(cube);

• Добавьте на сцену два источника света - направленный свет, как Солнце и окружающий свет:
  

  JavaScript
  1 2 3 4 5 6     const directionalLight = new THREE.DirectionalLight(0xffffff, 1);     directionalLight.position.set(5, 4, 3);     scene.add(directionalLight);       const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);     scene.add(ambientLight);

• Добавьте команду controls.update() в функцию animate():
  

  JavaScript
  1 2 3 4 5 function animate() {     requestAnimationFrame(animate);     controls.update();     renderer.render(scene, camera); }

• Добавим функцию onWindowResize(), которая должна вызываться при изменении клиентской области окна браузера, чтобы при изменении соотношения сторон клиентской области окна браузера не деформировались объекты на сцене:
  

  JavaScript
  1 2 3 4 5 function onWindowResize() {     camera.aspect = window.innerWidth / window.innerHeight;     camera.updateProjectionMatrix();     renderer.setSize(window.innerWidth, window.innerHeight); }

• Добавим в main() строку настройки "window.onresize = onWindowResize", чтобы функция onWindowResize() вызывалась при изменении размера клиентской области окна браузера:
  
  

  JavaScript
  1 2 3 4 5 function main() {     init();     window.onresize = onWindowResize;     animate(); }

• Получается следующий код:
  
  js/index.js
  
  

  JavaScript

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 import * as THREE from "three"; import { OrbitControls } from "orbit-controls";   let renderer, scene, camera, controls, cube;   function main() {     init();     window.onresize = onWindowResize;     animate(); }   window.onload = main;   function init() {     const canvas = document.getElementById("renderCanvas");       renderer = new THREE.WebGLRenderer({ antialias: true, canvas });     renderer.setSize(window.innerWidth, window.innerHeight);     renderer.setPixelRatio(window.devicePixelRatio);       scene = new THREE.Scene();     scene.background = new THREE.Color(0x222222);       camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);     camera.position.set(5, 5, 10);       controls = new OrbitControls(camera, renderer.domElement);     controls.enableDamping = true; // Smooth movement       const geometry = new THREE.BoxGeometry(2, 2, 2);     const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });     cube = new THREE.Mesh(geometry, material);     scene.add(cube);       const directionalLight = new THREE.DirectionalLight(0xffffff, 1);     directionalLight.position.set(5, 4, 3);     scene.add(directionalLight);       const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);     scene.add(ambientLight); }   function animate() {     requestAnimationFrame(animate);     controls.update();     renderer.render(scene, camera); }   function onWindowResize() {     camera.aspect = window.innerWidth / window.innerHeight;     camera.updateProjectionMatrix();     renderer.setSize(window.innerWidth, window.innerHeight); }

• Скопируйте проект на бесплатный хостинг, например, на GitHub Pages и он будет доступен по ссылка, например: ссылка
• Финальный проект: orbit-controls-threejs-js.zip

Подключение библиотек локально

1
2
3
4
5
6
7
8

    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js",
                "orbit-controls": "https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>

1
2
3
4
5
6
7
8

    <script type="importmap">
        {
            "imports": {
                "three": "/libs/three@0.183.2/build/three.module.min.js",
                "orbit-controls": "/libs/three@0.183.2/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>

1

http-server -c-1

1
2
3
4

Available on:
  http://192.168.1.65:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Миниатюры

Вложения

	orbit-controls-threejs-js.zip (2.1 Кб, 274 просмотров)
	orbit-controls-threejs-js-plus-libs.zip (192.4 Кб, 99 просмотров)

Подключение библиотек к стартовому примеру

• Скачайте пример: start-sync-physics-sprites-sdl3-c.zip
• Примечание 1. Стартовый пример написан по пошаговой инструкции: Подключение Box2D v3, физика и отрисовка коллайдеров
• Примечание 2. Разница только в одной строке в файле CMakeLists.txt, где вместо SDL 3.4.0 подключается более новая версия SDL 3.4.2:
  

  Bash
  1 set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3")

• Так выглядит код стартового примера:
  
  CMakeLists.txt
  
  

  Bash

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 cmake_minimum_required(VERSION 3.21) project(start-sync-physics-sprites-sdl3-c)   # Задаем название будущего приложения (в Windows это был бы app.exe, а в вебе будет app.js / app.wasm) add_executable(app)   # Устанавливаем стандарт C set(CMAKE_C_STANDARD 11)   # Указываем точное местоположение конфигурационных файлов библиотек # Имя переменной должно строго соответствовать: НазваниеБиблиотеки_DIR set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3") set(box2d_DIR "C:/libs/box2d-3.1.1-wasm/lib/cmake/box2d")   # Проверяем наличие библиотек в системе # Если она не будет найдены, CMake прервет настройку с ошибкой # REQUIRED - переводится, как «обязательно» или «требуется» find_package(SDL3 REQUIRED) find_package(box2d REQUIRED)   # Привязываем библиотеки к нашему приложению (настройка линковки и путей include) target_link_libraries(app PRIVATE box2d::box2d SDL3::SDL3)   # Добавляем исходный код к проекту target_sources(app     PRIVATE     src/main.c )

  src/main.c
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 #define SDL_MAIN_USE_CALLBACKS 1 // Use the callbacks instead of main()   #include "debug-drawer.h" #include <SDL3/SDL.h> #include <SDL3/SDL_main.h> #include <box2d/box2d.h> #include <stdio.h>   #define TIME_STEP (1.0f / 60.0f) #define MAX_FRAME_TIME 0.25f   static SDL_Window *window = NULL; SDL_Renderer *renderer = NULL; static b2WorldId worldId; static b2DebugDraw debugDrawer;   const SDL_PixelFormatDetails *format = NULL; float ppm = 30.f; // Pixels per meter   static float accumulator = 0.0f; static Uint64 last_ticks = 0;   SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[]) {     if (!SDL_Init(SDL_INIT_VIDEO))     {         SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       if (!SDL_CreateWindowAndRenderer("Example", 400, 400, 0, &window, &renderer))     {         SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());         return SDL_APP_FAILURE;     }       SDL_SetRenderVSync(renderer, 1);       // Создаём физический мир Box2D с гравитацией     b2Vec2 gravity = { 0.f, 9.8f };     b2WorldDef worldDef = b2DefaultWorldDef();     worldDef.gravity = gravity;     worldId = b2CreateWorld(&worldDef);       // Выводим значение гравитации в консоль     // Получаем текущее значение гравитации     b2Vec2 currentGravity = b2World_GetGravity(worldId);     // Выводим компоненты x и y     printf("Текущее значение гравитации: x = %.2f, y = %.2f\n", currentGravity.x, currentGravity.y);       debugDrawer = b2DefaultDebugDraw();     debugDrawer.drawShapes = true;     debugDrawer.DrawSolidPolygonFcn = drawSolidPolygon;     debugDrawer.DrawSolidCircleFcn = drawSolidCircle;       // Floor     b2BodyDef floorBodyDef = b2DefaultBodyDef();     floorBodyDef.type = b2_staticBody;     floorBodyDef.position = (b2Vec2) { 200.f / ppm, 300.f / ppm };     b2BodyId floorBodyId = b2CreateBody(worldId, &floorBodyDef);     b2Polygon floorShape = b2MakeBox((300.f / 2.f) / ppm, (20.f / 2.f) / ppm);     b2ShapeDef floorShapeDef = b2DefaultShapeDef();     b2ShapeId floorShapeId = b2CreatePolygonShape(floorBodyId, &floorShapeDef, &floorShape);       // Square     b2BodyDef squareBodyDef = b2DefaultBodyDef();     squareBodyDef.type = b2_dynamicBody;     squareBodyDef.position = (b2Vec2) { 201.f / ppm, 100.f / ppm };     squareBodyDef.enableSleep = false;     b2BodyId squareBodyId = b2CreateBody(worldId, &squareBodyDef);     b2Polygon squareShape = b2MakeBox((30.f / 2.f) / ppm, (30.f / 2.f) / ppm);     b2ShapeDef squareShapeDef = b2DefaultShapeDef();     b2ShapeId squareShapeId = b2CreatePolygonShape(squareBodyId, &squareShapeDef, &squareShape);       // Circle     b2BodyDef circleBodyDef = b2DefaultBodyDef();     circleBodyDef.type = b2_dynamicBody;     circleBodyDef.position = (b2Vec2) { 200.f / ppm, 150.f / ppm };     circleBodyDef.enableSleep = false;     b2BodyId circleBodyId = b2CreateBody(worldId, &circleBodyDef);     b2Circle circleCircle = {         .center = { 0.0f, 0.0f }, // <--- ВАЖНО: 0,0 означает, что центр круга совпадает с центром тела         .radius = 20.f / ppm      // Радиус в метрах     };     b2ShapeDef circleShapeDef = b2DefaultShapeDef();     circleShapeDef.density = 1.0f;     b2ShapeId circleShapeId = b2CreateCircleShape(circleBodyId, &circleShapeDef, &circleCircle);       // Get the pixel format     SDL_Surface *surface = SDL_GetWindowSurface(window);     format = SDL_GetPixelFormatDetails(surface->format);       last_ticks = SDL_GetTicks();       return SDL_APP_CONTINUE; }   SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT)     {         return SDL_APP_SUCCESS;     }       // --- DESKTOP ---     if (event->type == SDL_EVENT_MOUSE_BUTTON_DOWN)     {         if (event->button.which != SDL_TOUCH_MOUSEID)         {             const char *btnName = (event->button.button == SDL_BUTTON_LEFT) ? "Левая" : "Правая";             printf("%s кнопка (Мышь): x=%.0f, y=%.0f\n", btnName, event->button.x, event->button.y);         }     }       // --- MOBILE / WASM (Touch) ---     if (event->type == SDL_EVENT_FINGER_DOWN)     {         int w, h;         SDL_GetWindowSize(window, &w, &h);           float pixelX = event->tfinger.x * w;         float pixelY = event->tfinger.y * h;           // Проверяем количество пальцев на устройстве (touchId берем из события)         int numFingers = 0;         SDL_GetTouchFingers(event->tfinger.touchID, &numFingers);           if (numFingers <= 1)         {             printf("Левая кнопка (Тап 1 пальцем): x=%.2f, y=%.2f\n", pixelX, pixelY);         }         else         {             printf("Правая кнопка (Тап несколькими): x=%.2f, y=%.2f\n", pixelX, pixelY);         }     }       return SDL_APP_CONTINUE; }   SDL_AppResult SDL_AppIterate(void *appstate) {     Uint64 current_ticks = SDL_GetTicks();       float frameTime = (float)(current_ticks - last_ticks) / 1000.0f;     last_ticks = current_ticks;       if (frameTime > MAX_FRAME_TIME)     {         frameTime = MAX_FRAME_TIME;     }       accumulator += frameTime;       while (accumulator >= TIME_STEP)     {         // Step physics         b2World_Step(worldId, TIME_STEP, 3);           accumulator -= TIME_STEP;     }       // Clear the screen     SDL_SetRenderDrawColor(renderer, 100, 100, 100, 255);     SDL_RenderClear(renderer);       b2World_Draw(worldId, &debugDrawer);       // Update the screen     SDL_RenderPresent(renderer);     return SDL_APP_CONTINUE; }   void SDL_AppQuit(void *appstate, SDL_AppResult result) {     // Удаляем физический мир Box2D     if (b2World_IsValid(worldId))     {         b2DestroyWorld(worldId);     }       // SDL will clean up the window/renderer for us }

  src/debug-drawer.h
  
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 #ifndef DEBUG_DRAWER_H #define DEBUG_DRAWER_H   #include <SDL3/SDL.h> #include <box2d/box2d.h>   extern SDL_Renderer *renderer; extern const SDL_PixelFormatDetails *format; extern float ppm;   static void drawSolidPolygon(b2Transform transform,     const b2Vec2 *vertices, int vertexCount,     float radius, b2HexColor color, void *context) {     (void)radius;     (void)context;       // Extract RGB     Uint8 r, g, b;     SDL_GetRGB(color, format, NULL, &r, &g, &b);     // Draw a collider rectangle with lines     SDL_SetRenderDrawColor(renderer, r, g, b, SDL_ALPHA_OPAQUE);     for (int i = 0; i < vertexCount; ++i)     {         int next_index = (i + 1 == vertexCount) ? 0 : i + 1;         b2Vec2 p0 = b2TransformPoint(transform, vertices[i]);         b2Vec2 p1 = b2TransformPoint(transform, vertices[next_index]);         float x0 = p0.x * ppm;         float y0 = p0.y * ppm;         float x1 = p1.x * ppm;         float y1 = p1.y * ppm;         SDL_RenderLine(renderer, x0, y0, x1, y1);     }       // --- Tip: Draw orientation line ---     // Compute polygon center     float cx = 0.f, cy = 0.f;     for (int i = 0; i < vertexCount; ++i)     {         b2Vec2 p = b2TransformPoint(transform, vertices[i]);         cx += p.x;         cy += p.y;     }     cx = (cx / vertexCount) * ppm;     cy = (cy / vertexCount) * ppm;       // Midpoint of second edge (vertex[1] → vertex[2])     b2Vec2 p1 = b2TransformPoint(transform, vertices[1]);     b2Vec2 p2 = b2TransformPoint(transform, vertices[2]);     float mx = (p1.x + p2.x) * 0.5f * ppm;     float my = (p1.y + p2.y) * 0.5f * ppm;       // Draw center → edge midpoint line (acts like "direction tip")     SDL_RenderLine(renderer, cx, cy, mx, my); }   static void drawSolidCircle(b2Transform transform, float radius,     b2HexColor color, void *context) {     (void)radius;     (void)context;       float angle = 0.f;     const int numberOfSegments = 20;     const float angleStep = 360.f / numberOfSegments;       // Extract RGB     Uint8 r, g, b;     SDL_GetRGB(color, format, NULL, &r, &g, &b);     // Draw a collider rectangle with lines     SDL_SetRenderDrawColor(renderer, r, g, b, SDL_ALPHA_OPAQUE);       float x = radius * cos(angle * SDL_PI_F / 180.f);     float y = radius * sin(angle * SDL_PI_F / 180.f);     b2Vec2 p0 = b2TransformPoint(transform, (b2Vec2) { x, y });     float x0 = p0.x * ppm;     float y0 = p0.y * ppm;     angle += angleStep;       for (int i = 0; i < numberOfSegments; ++i)     {         float x = radius * cos(angle * SDL_PI_F / 180.f);         float y = radius * sin(angle * SDL_PI_F / 180.f);         b2Vec2 p1 = b2TransformPoint(transform, (b2Vec2) { x, y });         float x1 = p1.x * ppm;         float y1 = p1.y * ppm;         SDL_RenderLine(renderer, x0, y0, x1, y1);         x0 = x1;         y0 = y1;         angle += angleStep;         if (angle >= 360.f)         {             angle = 0.f;         }     }       // --- Tip: Draw orientation line ---     // Circle center     b2Vec2 c = b2TransformPoint(transform, (b2Vec2) { 0.f, 0.f });     float cx = c.x * ppm;     float cy = c.y * ppm;       // Direction = transform applied to (radius, 0)     b2Vec2 orient = b2TransformPoint(transform, (b2Vec2) { radius, 0.f });     float ox = orient.x * ppm;     float oy = orient.y * ppm;       // Draw center → orientation marker     SDL_RenderLine(renderer, cx, cy, ox, oy); }   #endif // DEBUG_DRAWER_H

• Результатом стартового примеря являеются: падающие круговой и квадратный коллайдер и статическая платформа:
  
• Запустим стартовый пример, а для этого скачаем и подключим библиотеки SDL3 и Box2D
• Откройте папку со стартовым примером в какой-нибудь редакторе кода, например, в Notepad++ или в Sublime Text 4 (ST4): https://www.sublimetext.com/download
• Скачайте библиотеку SDL3 для Wasm: SDL3-devel-3.4.2-wasm.zip
• Скачайте библиотеку Box2D v3 для Wasm: box2d-3.1.1-wasm.zip
• Извлеките содержимое архив выше в какую-нибудь новую общую папку, например, с именем "libs" на какой-нибудь диск, например, на C:
  
• Откройте папку "SDL3-devel-3.4.2-wasm", перейдите в "lib/cmake/SDL3" и скопируйте абсолютный путь:
  
  
  
• В файле CMakeLists.txt стартового примера замените в переменной SDL3_DIR путь на свой, который скопировали выше:
  
  

  Bash
  1 set(SDL3_DIR "C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3")

• Откройте папку "box2d-3.1.1-wasm", перейдите в "lib/cmake/box2d" и скопируйте абсолютный путь:
  
  
  
• Замените в переменной box2d_DIR путь на свой, если необходимо:
  
  

  Bash
  1 set(SDL3_DIR "C:/libs/box2d-3.1.1-wasm/lib/cmake/box2d")

• По следующей инструкции проведём тестовую сборку, чтобы убедиться, что библиотеки подключены и пример работает