Недавно вышла версия 3.4.2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. Однако там отсутствуют сборки для Emscripten (Wasm). Это связано с тем, что для Web-платформы критически важно, чтобы SDL3 была скомпилирована той же версией SDK (emsdk), которая используется в самом проекте. В отличие от Android, MinGW или Visual Studio, здесь это необходимо для гарантии бинарной совместимости и стабильности приложения, поэтому сборка библиотеки делегируется конечному разработчику.
Примечание от Gemini:
В экосистеме C++ остро стоит проблема ABI (Application Binary Interface): разные версии компиляторов могут по-разному располагать объекты в памяти, что делает их несовместимыми на уровне бинарных файлов. Однако, поскольку SDL3 написана на чистом C, она обладает стабильным ABI. Это позволяет библиотеке, собранной в MinGW 11.2, беспроблемно работать в проекте, который компилируется более свежей версией, например MinGW 12.2, без необходимости пересборки самой SDL. В мире чистого C бинарная совместимость (ABI) между версиями одного и того же семейства компиляторов сохраняется в обе стороны.
|
Сборка библиотеки SDL3 из исходников с помощью Emscripten 4.0.15 и CMake
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: SDL3-3.4.2.zip
- Примечание. Свежий архив с исходниками можно скачать по этой ссылке: https://github.com/libsdl-org/SDL/releases
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "SDL3-3.4.2" с помощью команды "cd", например:
- Скопируйте в консоль следующую команду и по желанию измените адрес папку, куда будет установлена SDL3:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3-devel-3.4.2-wasm" -DCMAKE_BUILD_TYPE=MinSizeRel |
|
- После того, как скопировали команду выше в консоль, нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3-devel-3.4.2-wasm" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы для разработки веб-приложений на C, C++, SDL3 и сборки в Wasm будут скопированы в папку "C:/libs/SDL3-devel-3.4.2-wasm". У меня получилась следующая сборка: SDL3-devel-3.4.2-wasm.zip
- Запустите приложение "Hello World" по пошаговой инструкции: Сборка C/C++ проекта из консоли
Сборка библиотеки Box2D из исходников с помощью Emscripten 4.0.15 и CMake
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: box2d-3.1.1.zip
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "box2d-3.1.1" с помощью команды "cd", например:
- Скопируйте в консоль следующую команду и по желанию измените адрес папку, куда будет установлена Box2D:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_INSTALL_PREFIX="C:/libs/box2d-3.1.1-wasm" -DCMAKE_BUILD_TYPE=MinSizeRel -DBOX2D_SAMPLES=OFF -DBOX2D_UNIT_TESTS=OFF |
|
- После того, как скопировали команду выше в консоль, нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/box2d-3.1.1-wasm" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция -DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Опция -DBOX2D_SAMPLES=OFF отключает сборку примеров
- Опция -DBOX2D_UNIT_TESTS=OFF отключает юнит-тесты
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы для разработки веб-приложений на C, C++, Box2D и сборки в Wasm будут скопированы в папку "C:/libs/box2d-3.1.1-wasm". У меня получилась следующая сборка: box2d-3.1.1-wasm.zip
- Проверьте сборку на простом примере по пошаговой инструкции: Подключение Box2D v3, физика и отрисовка коллайдеров
Сборка библиотеки FreeType из исходников с помощью Emscripten 4.0.15 и CMake
Для вывода текста с шрифтом TTF необходима FreeType. FreeType нужна для сборки SDL3_ttf
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: freetype-VER-2-14-1.zip
- Примечание. Свежий архив с исходниками можно скачать по этой ссылке
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "freetype-VER-2-14-1" с помощью команды "cd", например:
| Bash | 1
| cd C:\libs\freetype-VER-2-14-1 |
|
- Скопируйте в консоль следующую команду и по желанию измените адрес папку, куда будет установлена FreeType:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_INSTALL_PREFIX="C:/libs/freetype-2.14.1-wasm" -DCMAKE_BUILD_TYPE=MinSizeRel |
|
- После того, как скопировали команду выше в консоль, нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/freetype-2.14.1" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы будут скопированы в папку "C:/libs/freetype-2.14.1-wasm". У меня получилась следующая сборка: freetype-2.14.1-wasm.zip
- FreeType используется для сборки SDL3_ttf по следующей инструкции
Сборка библиотеки SDL3_ttf из исходников с помощью Emscripten 4.0.15 и CMake
Как показано будет ниже, в команде конфигурирования нужно будет указать пути к библиотеке FreeType.
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: SDL3_ttf-3.2.2.zip
- Примечание. Свежий архив с исходниками можно скачать по этой ссылке: https://github.com/libsdl-org/SDL_ttf/releases
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "SDL3_ttf-3.2.2" с помощью команды "cd", например:
| Bash | 1
| cd C:\libs\"SDL3_ttf-3.2.2 |
|
- Внутри папки создайте файл с именем "config-web.bat" и скопируйт следующее содержимое в созданный файл:
| Bash | 1
2
3
4
5
6
7
8
9
| emcmake cmake -S . -B dist ^
-DCMAKE_INSTALL_PREFIX=C:/libs/SDL3_ttf-devel-3.2.2-wasm ^
-DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3" ^
-DFREETYPE_INCLUDE_DIR_freetype2=C:/libs/freetype-2.14.1-wasm/include ^
-DFREETYPE_INCLUDE_DIR_ft2build=C:/libs/freetype-2.14.1-wasm/include/freetype2 ^
-DFREETYPE_LIBRARY_DEBUG=C:/libs/freetype-2.14.1-wasm/lib/libfreetype.a ^
-DFREETYPE_LIBRARY_RELEASE=C:/libs/freetype-2.14.1-wasm/lib/libfreetype.a ^
-DCMAKE_BUILD_TYPE=MinSizeRel ^
-DSDLTTF_SAMPLES=OFF |
|
- В консоли введите команду "config-web" (без кавычек - это имя батника) и нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой.
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/"SDL3_ttf-3.2.2-wasm" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция -DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3 - путь к SDL3, которую вы собрали по инструкции ранее
- Следующие опции задают пути к файлам, собранной ранее библиотеки FreeType:
| Bash | 1
2
3
4
| -DFREETYPE_INCLUDE_DIR_freetype2=C:/libs/freetype-2.14.1-wasm/include ^
-DFREETYPE_INCLUDE_DIR_ft2build=C:/libs/freetype-2.14.1-wasm/include/freetype2 ^
-DFREETYPE_LIBRARY_DEBUG=C:/libs/freetype-2.14.1-wasm/lib/libfreetype.a ^
-DFREETYPE_LIBRARY_RELEASE=C:/libs/freetype-2.14.1-wasm/lib/libfreetype.a ^ |
|
- Опция DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы для разработки веб-приложений на C, C++, SDL3 и сборки в Wasm будут скопированы в папку "C:/libs/SDL3-devel-3.4.2-wasm". У меня получилась следующая сборка: SDL3_ttf-devel-3.2.2-wasm.zip
- Запустите приложение "Hello World" по пошаговой инструкции: Вывод текста со шрифтом TTF с помощью SDL3_ttf
Сборка библиотеки SDL3_mixer из исходников с помощью Emscripten 4.0.15 и CMake
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: SDL3_mixer-3.1.2.zip
- Примечание. Свежий архив с исходниками можно скачать по этой ссылке: https://github.com/libsdl-org/SDL_mixer/releases
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "SDL3_mixer-3.1.2" с помощью команды "cd", например:
| Bash | 1
| cd C:\libs\SDL3_mixer-3.1.2 |
|
- Скопируйте в консоль следующую команду и по желанию измените адрес папку, куда будет установлена SDL3:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3_mixer-devel-3.1.2-wasm" -DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3" -DCMAKE_BUILD_TYPE=MinSizeRel |
|
- После того, как скопировали команду выше в консоль, нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3_mixer-devel-3.1.2-wasm" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция -DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3 - путь к SDL3, которую вы собрали по инструкции ранее
- Опция DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы для разработки веб-приложений на C, C++, SDL3_mixer и сборки в Wasm будут скопированы в папку "C:/libs/SDL3_mixer-devel-3.1.2-wasm". У меня получилась следующая сборка: SDL3_mixer-devel-3.1.2-wasm.zip
- Запустите приложение "Hello World" по пошаговой инструкции: Работа со звуком через SDL3_mixer
Сборка библиотеки SDL3_image из исходников с помощью Emscripten 4.0.15 и CMake
Библиотека SDL3_image содержит расширенные инструменты для работы с изображениями. Если вам достаточно базовых инструментов, то можно использовать встроенные средства библиотеки SDL3: Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
- Установите Emscripten 4.0.15 и CMake по инструкции: Установка Emscripten SDK (emsdk) и CMake
- Скачайте архив с исходниками: SDL3_image-3.4.0.zip
- Примечание. Свежий архив с исходниками можно скачать по этой ссылке: https://github.com/libsdl-org/SDL_image/releases
- Откройте консоль (CMD) от имени администратора. Например, на Windows 10 в поиске программ наберите "cmd" (без ковычек) и кликните "Run as administrator". Из консоли перейдите в папку "SDL3_image-3.4.0" с помощью команды "cd", например:
| Bash | 1
| cd C:\libs\SDL3_image-3.4.0 |
|
- Скопируйте в консоль следующую команду и по желанию измените адрес папку, куда будет установлена SDL3:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3_image-devel-3.4.0-wasm" -DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3" -DCMAKE_BUILD_TYPE=MinSizeRel |
|
- После того, как скопировали команду выше в консоль, нажмите Enter. Произойдёт конфигурирование библиотеки перед сборкой
- Примечание. Кратко, что означают элементы команды выше:
- Ключ "-S" означает "Source folder", то есть "папка-источник". После "-S" идёт точка, которая означает, что источник - это текущая папка, где должен находиться файл CMakeLists.txt.
- Ключ "-B" - это "Build folder", то есть папка куда будут сохранены нужные файлы для сборки, а в нашем случае после ключа "-В" идёт название папки "dist", то есть будет создана новая папка с именем "dist", где будут автоматически созданы файлы для сборки после этапа конфигурирования
- Опция -DCMAKE_INSTALL_PREFIX="C:/libs/SDL3_image-devel-3.4.0-wasm" задаёт путь, куда будет установлена библиотека. Эту папку самом создавать не нужно - она будет создана автоматически на этапе установки библиотеки
- Опция -DSDL3_DIR="C:/libs/SDL3-devel-3.4.2-wasm/lib/cmake/SDL3 - путь к SDL3, которую вы собрали по инструкции ранее
- Опция DCMAKE_BUILD_TYPE=MinSizeRel задаёт тип сборки и этот тип называется MinSizeRel (Minimum Size Release), то есть минимальный размер библиотеки собранной в релиз
- Вводим команду для сборки, где в включе -j8 указывает количество потоков процессора:
- Введите команду установки библиотеки:
- После установки все необходимые файлы для разработки веб-приложений на C, C++, SDL3_image и сборки в Wasm будут скопированы в папку "C:/libs/SDL3_image-devel-3.4.0-wasm". У меня получилась следующая сборка: SDL3_image-devel-3.4.0-wasm.zip
- Запустите приложение "Hello World" по пошаговой инструкции: Загрузка PNG с прозрачным фоном с помощью SDL3_image
Примечание. Логи конфигурирования, сборки и установки библиотек выше: logs.zip
|
Добавил пошаговые инструкции для сборки библиотек FreeType и SDL3_ttf из исходников с помощью CMake и Emscripten
