Graphics & Game Dev Tutorials Туториалы по графике и играм

A collection of examples for SDL3, WebGPU, WebGL 2.0, and more. Коллекция примеров для SDL3, WebGPU, WebGL 2.0 и других технологий.

Tools Инструменты

C/C++ Development Environment Setup Настройка среды разработки на C/C++

Installing MinGW 13.1, CMake, Qt Creator, and CLion for professional C/C++ development. Установка MinGW 13.1, CMake, Qt Creator и CLion для профессиональной разработки на C/C++.

View
Android Environment Setup Настройка окружения для Android

Manual installation of SDK, NDK, JDK, and CMake. Установка Android SDK, NDK, JDK, CMake и т.д.

View
Emscripten (Wasm) Setup Настройка Emscripten (Wasm)

Installation of Emscripten SDK, CMake, and Node.js for WebAssembly. Установка Emscripten SDK, CMake, Node.js и настройка проекта Wasm.

View
Building IXWebSocket, MbedTLS, and zlib from Source (MinGW) Сборка IXWebSocket, MbedTLS и zlib из исходного кода (MinGW)

A step-by-step guide to building zlib, MbedTLS 3.6.x, and IXWebSocket statically on Windows using the MinGW compiler toolchain and CMake. Пошаговое руководство по статической сборке zlib, MbedTLS 3.6.x и IXWebSocket на Windows с использованием компилятора MinGW и CMake.

View
C/C++ Environment Setup with Qt Creator (No Qt Framework) Настройка окружения C/C++ в Qt Creator (Без фреймворка Qt)

Setting up MinGW 13.1, CMake, and standalone Qt Creator for pure C/C++ development. Настройка MinGW 13.1, CMake и автономного Qt Creator для чистой разработки на C/C++.

View

"Hello World!" in C/C++ "Hello World!" на C/C++

Building Hello World in C (CLion) Сборка Hello World на C (CLion)

A step-by-step guide to building a C "Hello World" application using CLion and CMake. Пошаговое руководство по сборке приложения "Hello World" на Си через CLion и CMake.

View
Building Hello World in C++ (CLion) Сборка Hello World на C++ (CLion)

A step-by-step guide to building a C++ "Hello World" application using CLion and CMake. Пошаговое руководство по сборке приложения "Hello World" на C++ через CLion и CMake.

View
Building Hello World in C (Qt Creator) Сборка Hello World на C (Qt Creator)

A step-by-step guide to building a C "Hello World" application using Qt Creator and CMake. Пошаговое руководство по сборке приложения "Hello World" на Си через Qt Creator и CMake.

View
Building Hello World in C++ (Qt Creator) Сборка Hello World на C++ (Qt Creator)

A step-by-step guide to building a C++ "Hello World" application using Qt Creator and CMake. Пошаговое руководство по сборке приложения "Hello World" на C++ через Qt Creator и CMake.

View

SFML2 for Desktop (C++) SFML2 для ПК (C++)

Building SFML 2.6.2 from Source Сборка SFML 2.6.2 из исходного кода

Step-by-step guide to compiling SFML 2.6.2 from source using MinGW 13.1 for maximum compatibility. Пошаговое руководство по компиляции SFML 2.6.2 из исходного кода с использованием MinGW 13.1.

View
Setting up SFML with find_package (MinGW) Настройка SFML с помощью find_package (MinGW)

Building and running an SFML application on Windows using MinGW 13.1 and CMake. Сборка и запуск приложения SFML на Windows с использованием MinGW 13.1 и CMake.

View
Building FamTrinli's 16 Games Сборка 16 игр от FamTrinli

A guide to building and running the famous "16 Games in C++" using modern tools and IDEs. Руководство по сборке и запуску знаменитых "16 игр на C++" с использованием современных инструментов и IDE.

View

PySDL3 - Renderer (Python) PySDL3 - Renderer (Python)

Setting up PySDL3 (Python) Настройка PySDL3 (Python)

Building and running an SDL3 application in Python on Windows using PySDL3. Сборка и запуск приложения SDL3 на Python на Windows с использованием PySDL3.

View
Setting up SDL3_image with PySDL3 (Python) Настройка SDL3_image с PySDL3 (Python)

Loading and displaying images in SDL3 using PySDL3_image on Windows. Загрузка и отображение изображений в SDL3 с использованием PySDL3_image на Windows.

View
Setting up SDL3_ttf with PySDL3 (Python) Настройка SDL3_ttf с PySDL3 (Python)

Rendering text in SDL3 using PySDL3, Python, and SDL3_ttf. Рендеринг текста в SDL3 с использованием PySDL3, Python и SDL3_ttf.

View
Setting up SDL3_mixer with PySDL3 (Python) Настройка SDL3_mixer с PySDL3 (Python)

Playing music and sound effects in SDL3 using PySDL3_mixer on Windows. Воспроизведение музыки и звуковых эффектов в SDL3 с использованием PySDL3_mixer на Windows.

View

SDL3 for Desktop - SDL3_Renderer (C and C++) SDL3 для ПК - SDL3_Renderer (C и C++)

Setting up SDL3 with find_package (MinGW) Настройка SDL3 с помощью find_package (MinGW)

Building and running an SDL3 application in C or C++ on Windows using MinGW 13.1 and CMake. Сборка и запуск приложения SDL3 на C или C++ на Windows с использованием MinGW 13.1 и CMake.

View
Setting up SDL3_image with find_package (MinGW) Настройка SDL3_image с помощью find_package (MinGW)

Loading and displaying images in SDL3 using SDL3_image, MinGW 13.1, and CMake. Загрузка и отображение изображений в SDL3 с использованием SDL3_image, MinGW 13.1 и CMake.

View
Setting up SDL3_ttf with find_package (MinGW) Настройка SDL3_ttf с помощью find_package (MinGW)

Rendering text in SDL3 using SDL3_ttf, MinGW 13.1, and CMake. Рендеринг текста в SDL3 с использованием SDL3_ttf, MinGW 13.1 и CMake.

View
Setting up SDL3_mixer with find_package (MinGW) Настройка SDL3_mixer с помощью find_package (MinGW)

Playing music and sound effects in SDL3 using SDL3_mixer, MinGW 13.1, and CMake. Воспроизведение музыки и звуковых эффектов в SDL3 с использованием SDL3_mixer, MinGW 13.1 и CMake.

View
2D Spatial Audio in SDL3 with find_package (MinGW) Пространственный 2D-звук в SDL3 с помощью find_package (MinGW)

Implementing 2D spatial audio and volume attenuation based on player coordinates in SDL3 using SDL3_mixer, MinGW 13.1, and CMake. Реализация пространственного 2D-звука и затухания громкости на основе координат игрока в SDL3 с использованием SDL3_mixer, MinGW 13.1 и CMake.

View

SDL3 for Android - SDL3_Renderer (C and C++) SDL3 для Android - SDL3_Renderer (C и C++)

Setting up a template project Настройка шаблонного проекта

Building and running an SDL3 application on Android using the Renderer API. Сборка и запуск приложения SDL3 на Android с использованием Renderer API.

View

SDL3 for Web (WebAssembly) - SDL3_Renderer (C and C++) SDL3 для Web (WebAssembly) - SDL3_Renderer (C и C++)

Building SDL3 for WebAssembly Сборка SDL3 для WebAssembly

Step-by-step guide to compiling SDL3 from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3 из исходного кода для WebAssembly через Emscripten.

View
Setting up SDL3 for WebAssembly (Emscripten) Настройка SDL3 для WebAssembly (Emscripten)

Building and running an SDL3 application in C or C++ for the web using Emscripten and CMake. Сборка и запуск приложения SDL3 на C или C++ для веба с использованием Emscripten и CMake.

View
Debugging SDL3 WebAssembly in Chrome (DWARF) Отладка SDL3 WebAssembly в Chrome (DWARF)

Learn how to debug your C/C++ SDL3 code directly in Chrome using DWARF symbols. Узнайте, как отлаживать ваш C/C++ код SDL3 прямо в Chrome, используя DWARF символы.

View
Building SDL3_image for WebAssembly Сборка SDL3_image для WebAssembly

Step-by-step guide to compiling SDL3_image from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3_image из исходного кода для WebAssembly через Emscripten.

View
Building SDL3_ttf for WebAssembly Сборка SDL3_ttf для WebAssembly

Step-by-step guide to compiling FreeType and SDL3_ttf from source for WebAssembly. Пошаговое руководство по компиляции FreeType и SDL3_ttf из исходного кода для WebAssembly.

View
Building SDL3_mixer for WebAssembly Сборка SDL3_mixer для WebAssembly

Step-by-step guide to compiling SDL3_mixer from source for WebAssembly using Emscripten. Пошаговое руководство по компиляции SDL3_mixer из исходного кода для WebAssembly через Emscripten.

View

SDL3 for Desktop - OpenGL (C and C++) SDL3 для ПК - OpenGL (C и C++)

Setting up SDL3 with OpenGL and GLAD (MinGW) Настройка SDL3 с OpenGL и GLAD (MinGW)

Building and running an SDL3 application with OpenGL and GLAD in C or C++ on Windows using MinGW 13.1 and CMake. Сборка и запуск приложения SDL3 с использованием OpenGL и GLAD на C или C++ на Windows с помощью MinGW 13.1 и CMake.

View
Setting up SDL3_image with OpenGL (MinGW) Настройка SDL3_image с OpenGL (MinGW)

Loading a texture using SDL3_image and rendering it on a rectangle using OpenGL 3.3. Загрузка текстуры с помощью SDL3_image и её рендеринг на прямоугольнике с использованием OpenGL 3.3.

View
Setting up SDL3_ttf with OpenGL (MinGW) Настройка SDL3_ttf с OpenGL (MinGW)

Rendering TrueType text using SDL3_ttf and projecting it with orthographic matrices using OpenGL 3.3 and cglm. Рендеринг текста TrueType с помощью SDL3_ttf и его проекция с использованием ортогональных матриц в OpenGL 3.3 и cglm.

View
Setting up SDL3_mixer with OpenGL (MinGW) Настройка SDL3_mixer с OpenGL (MinGW)

Initializing SDL3_mixer 3.2.2, loading audio files, and playing background music and sound effects in an OpenGL 3.3 environment. Инициализация SDL3_mixer 3.2.2, загрузка аудиофайлов, а также воспроизведение фоновой музыки и звуковых эффектов в окружении OpenGL 3.3.

View
Setting up IXWebSocket with SDL3 and OpenGL (MinGW) Настройка IXWebSocket с SDL3 и OpenGL (MinGW)

Building and running an SDL3 and OpenGL 3.3 desktop application with IXWebSocket networking on Windows using MinGW 13.1 and CMake. Сборка и запуск десктопного приложения SDL3 и OpenGL 3.3 с сетевой частью на IXWebSocket на Windows с помощью MinGW 13.1 и CMake.

View

WebGPU in C and C++ WebGPU на C и C++

Setting up SDL3 and WebGPU for Desktop and Web Настройка SDL3 и WebGPU для ПК и Web

A comprehensive guide to setting up a cross-platform WebGPU project using SDL3, targeting Windows (MinGW) and WebAssembly. Полное руководство по настройке кроссплатформенного проекта WebGPU с использованием SDL3 для Windows (MinGW) и WebAssembly.

View

Support My Work Поддержать проект

If these tutorials helped you, consider buying me a coffee! Если эти туториалы вам помогли, вы можете поддержать автора.

Sberbank

Sberbank SBP QR Code

Direct transfer via phone number Перевод по номеру телефона

+7 (917) 212-29-59

Bybit (USDT TRC20)

Bybit USDT TRC20 QR Code

Support via Cryptocurrency Поддержка криптовалютой

TMtY1YifNf6FKvgeFmqKGQR4NStKr3csGp