VK Видео:



YouTube:



Текстовая версия

Содержание блога

Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https://github.com/qt-creator/qt-creator, где можно скачать установщик, на вкладке Releases: https://github.com/qt-creator/qt-creator/releases

Занимает Qt Creator всего примерно 600 МБайт на жёстком диске, в отличае, например, от Visual Studio, которая занимает примерно...

Содержание блога

Финальные проекты на Си и на C++:

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

Результат:



Напишем программу с нуля, которая выводит текст на русском с помощью библиотеки SDL3_ttf и рисует отрезками равносторонний треугольник.

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

• Установите CMake и

...

Содержание блога

Финальные проекты на Си и на C++:

• 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
• Примечание.

...

Содержание блога

Финальные проекты на Си и на C++:

• 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
• Примечание. Эту библиотеку

...

Содержание блога | English version: C/C++ Development Environment Setup (MinGW and CMake)

Видео-версия процесса установки:

В этом видео я показываю базовый процесс подготовки среды: скачивание и распаковка MinGW 13.1, установка CMake и проверка их работы через командную строку. Это визуальное дополнение к первым разделам данного пошагового руководства.



MinGW - это коллекция инструментов для сборки...

Содержание блога

Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js.zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем, перемещайте камеру двумя пальцами и делайте зум щипком.

...

Содержание блога

Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c.zip

На первой гифке отладочные линии отключены, а на второй включены:


Вспомогательные линии нужны...

Содержание блога

Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c.zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем.



...

Содержание блога

Недавно вышла версия 3.4.2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. Однако там отсутствуют сборки для Emscripten (Wasm). Это связано с тем, что для Web-платформы критически важно, чтобы SDL3 была...

Содержание блога

Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее препятствие на этом скриншоте:



Финальная демка этой инструкции. Итоговый код: finish-player-movement-sdl3-c.zip

В физическом мире Box2D...

Содержание блога

Финальная демка запускается в браузерах на Desktop (Windows, Linux, macOS) и в браузерах на мобильных устройствах (Android и iOS). Исходники результата: finish-box2d-v3-wasm-sdl3-c.zip



Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли...

Содержание блога

Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным фоном) встроенными средствами библиотеки SDL3. Финальная демка запускается в браузерах на Desktop (Windows, Linux, macOS) и в браузерах на мобильных устройствах (Android и iOS). Исходники результата: finish-native-png-loader-wasm-sdl3-c.zip
...

Содержание блога

Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным фоном) помощью библиотеки SDL3_image. Финальная демка запускается в браузерах на Desktop (Windows, Linux, macOS) и в браузерах на мобильных устройствах (Android и iOS). Исходники результата: finish-load-png-wasm-sdl3-c.zip

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

...

Содержание блога

Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по касанию холста на мобильных устройствах. Запустить финальную демку в браузере можно по ссылке. Скачать результат: finish-play-sound-wasm-sdl3-c.zip

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

• Установите Emscripten 4.0.15 и CMake

...

Содержание блога

Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса отладки. В этой инструкции подключим мобильное устройство по USB-кабелю к компьютеру. Выведем отладочную информацию и мобильного веб-приложения в консоль браузера Chrome на компьютер.

• Выполните пошаговую инструкцию для создания стартового примера: Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве

...

Содержание блога

Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик касания экрана мобильного устройства, чтобы один и тот же проект работал в браузере ПК и в браузере мобильного устройства. Исходники того, что получилось: mouse-and-touch-handlers-sdl3.zip

Если у вас не установлены Emscripten SDK и CMake, то установите...

Содержание блога

В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный хостинг Vercel из консоли парой консольных команд: "vercel login" и "vercel". Финальный результат инструкции в браузере: запустить демку в один клик. Исходники финальной демки: finish-hello-ttf-wasm-sdl3-c.zip

Если у вас не установлены Emscripten...

Содержание блога

Финальный код: finish-hello-wasm-sdl3-c.zip



QR-код для запуска на смартфонах:



Демка в браузере

Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples (кстати, они все на Си), то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main() отсутствует:

• SDL_AppInit

...

Содержание блога

Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git необходимо в данном случае только для клонирования репозитория emsdk.

Установка Emscripten SDK (emsdk)

Есть официальная пошаговая инструкция, которой мы будет следовать:

1. Откройте терминал в корне

...

Содержание блога

Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в отличие от v2, которая написана на C++, но v2 была близка с Си. Насколько я знаю, в Box2D v2 совсем не использовалась STL (Стандартная библиотека шаблонов).

Комментарий Gemini 3 по поводу Box2D новой C-версии:

Переход Box2D на чистый Си (версия

...

Содержание блога

SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая появилась в SDL 3.3. Таким образом теперь не нужно подключать библиотеку SDL3_image для базовой работы с PNG-файлами. Если нужны расширенные средства работы с изображениями, то нужно подключать библиотеку SDL3_image: Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
...

Содержание блога

SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с прозрачным фоном. На самом деле, SDL3 имеет собственные средства для загрузки и отображения PNG-файлов. Если вам интересно, как загружать PNG без подключения SDL3_image, то можете посмотреть эту пошаговую инструкцию: Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)...

Содержание блога

SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только добавить библиотеку SDL3_mixer и включить проигрывание звука при касании экрана смартфона.

Если у вас не установлены Android SDK, NDK, JDK, и т.д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т.д.

Сборка примера

...

Содержание блога | English version

• Перейдите по ссылке: https://developer.android.com/studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest.zip"
• Извлеките архив и вы увидите папку "cmdline-tools"
• Создайте папку AndroidSDK, например, на диске C и переместите в неё папку "cmdline-tools"
• Внутри папки

...

Содержание блога

Если у вас не установлены Android SDK, NDK, JDK, и т.д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т.д.

Сборка примера

• Скачайте этот пример. На всякий случай, я прикрепил его в виде архива: sdlcross-text.zip
• Извлеките пример из архива. Можете открыть папку с извлечённым примером в редакторе кода Sublime Text 4: https://www.sublimetext.com/download
  
• Скачайте

...

Содержание блога

Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main() отсутствует:

• SDL_AppInit (Initialization) - эта функция срабатывает один раз самой первой.
• SDL_AppEvent (Event Handler) - эта функция срабатывает каждый раз, когда происходит

...

Содержание блога

Если у вас не установлены Android SDK, NDK, JDK, и т.д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т.д.

Сборка примера

• Скачайте этот пример (с SDL3 Renderer API, который показывает квадраты при касании экрана на месте касаний) или этот пример (с OpenGL ES 2.0, который рисует простой треугольник) с GitHub. Распакуйте архив в удобную директорию

...

Содержание блога

На русском

На английском

Исходники примера:

• GitHub
• Простой треугольник
• Раскрашенный треугольник

Содержание блога

1. Все примеры из книги Мацуды и Ли в песочнице JSFiddle
2. Рисование точки заданного размера
3. Передача координаты точки из главной программы в программу вертексного шейдера
4. WebGL 1.0. Рисование точек в цикле по кругу по формулам
5. WebGL 2.0. Рисование точек в цикле по кругу по формулам
6. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
7. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
8. WebGL. 1.0. Рисование точки с применением буферного объекта (VBO - Vertex Buffer Object)

...