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

Финальная демка в браузере. Итоговый код: 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. Откройте терминал в корне

...

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

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

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

...

Помню, как лет пять назад коллега спросил: можно ли запустить детекцию объектов прямо в браузере? Тогда я посмеялся - какой браузер, нужна серверная ферма с GPU. Сейчас же распознавание лиц в видеочате или детекция жестов работают локально, и никто уже не удивляется. WebAssembly перевернул представление о том, что может JavaScript. ONNX Runtime Web позволяет запускать модели машинного обучения с производительностью,...

WebAssembly начинался как способ ускорить веб-приложения. В 2017-м впервые запустил C++ код прямо в браузере - тогда казалось магией. Сейчас же Wasm вырос во что-то большее: универсальную платформу для запуска кода на любом языке где угодно. Не просто виртуальная машина, а целая экосистема с собственными стандартами,...

В современном мире разработки игр выбор технологии - это зачастую балансирование между удобством разработки, переносимостью и производительностью. Когда я решил создать свою первую веб-игру, мой выбор пал на Kotlin/Wasm и Compose Multiplatform - перспективные технологии, обещающие возможность писать код на любимом языке с запуском на любой платформе.

Kotlin/WebAssembly (или Kotlin/Wasm) - экспериментальная технология, компилирующая код на Kotlin в бинарный...

Я наблюдаю, как WebAssembly (или просто WASM) постепенно выходит за рамки своего первоначального предназначения — исполнения кода на стороне браузера. Теперь эта технология проникает в серверную часть, предлагая уникальное сочетание безопасности, производительности и переносимости, которого нам так не хватало в традиционных контейнерных решениях.

Параллельно Microsoft выпустила .NET Aspire — стек для оркестрации распределенных...

Мир веб-разработки за последние десять лет претерпел коллосальные изменения. Переход от традиционных многостраничных сайтов к одностраничным приложениям (Single Page Applications, SPA) — это настоящий тектонический сдвиг в индустрии. Если раньше каждый клик пользователя...

Когда речь идет о сложных интерфейсах, Flutter сталкивается с несколькими фундаментальными проблемами производительности. Одна из них — избыточная перерисовка (repainting), когда даже небольшие изменения состояния вызывают перестроение значительных участков интерфейса....

Ключевая особенность нового JS-бэкенда GHC — возможность создавать колбэки из JavaScript в Haskell-код. Это открывает дорогу разработке полноценных браузерных приложений, позволяя реагировать на действия пользователя прямо из Haskell. Фактически это означает, что теперь мы можем писать интерфейсы пользователя на Haskell и компилировать их непосредственно в JavaScript.

...

Go как язык программирования всегда выделялся своей простотой и производительностью, и его поддержка компиляции в WebAssembly открывает интересные возможности. Начиная с версии Go 1.11, когда был добавлен первый порт js/wasm, экосистема Go-WASM постепенно развивалась, но имела существенные ограничения в плане интеграции с внешним миром. Выход Go 1.24 обозначил важный прогресс в этом направлении, добавив две ключевые функции: директиву go:wasmexport и возможность...