Hands-on tutorials and techniques using the SDL2 engine for 2D game development.
sdl-ui-contro-listbox
After implementing controls like UIButton and UITextField, this article will focus on a very common UI element: the ListBox. It's widely used in interface development for scenarios like file selection, menu options, and displaying data lists. The core features of UIListBox include: Dynamically adding and removing list items. Mouse click…
sdl-ui-control-scrollbar_textfield
This article details the implementation of a read-only text display control that supports automatic word wrapping, embedded color tags, hyperlink highlighting and clicking, mouse hover underlines, and a vertical scrollbar (with mouse wheel, click, drag, and page-by-page scrolling). The implementation is based on SDL2/SDL_ttf, with rendering and measurement interfaces unified…
In previous articles, we've implemented common UI controls like UIButton and UICheckBox. This time, we'll continue expanding our UI control system with a very common component used in many applications: the RadioButton. Radio buttons are typically found in forms and settings interfaces, where they're used to select a single option…
sdl-ui-control-dev-checkbox
1. Introduction The CheckBox is one of the most common selection controls in graphical user interfaces. It's typically used to represent a binary state, such as "on/off," "yes/no," or "selected/unselected." In a low-level, cross-platform library like SDL, there are no pre-built UI controls. This means we have to manually draw…
sdl-ui-textedit-dev
1. Introduction In the previous post, we implemented a UIButton and mastered the basics of drawing and interacting with SDL UI controls. In this post, we'll build a single-line text input box, UITextEdit. This is a fundamental component of many UI systems, used for things like login forms, nickname inputs,…
sdl-ui-control-button
In SDL game development, it's common to need custom UI controls. This post will walk you through building a complete UIButton control from scratch, based on an existing Node/UIControl framework. The button will feature text, state changes, click events, and rendering. I. What is a UIButton? A UIButton is one…
1. Introduction Picking up where we left off, the Label control is arguably the simplest UI component. I once thought TextEdit was the easiest, but after diving deep into custom controls, I realized how complex TextEdit truly is. Building a TextEdit from scratch with all its basic features is quite…
The Simple DirectMedia Layer (SDL) is a lightweight, cross-platform multimedia library widely used for 2D game development. However, SDL doesn't natively provide graphical user interface (GUI) controls like buttons, labels, or input fields. While many excellent open-source third-party libraries exist, such as the ones listed below, they can be a…
detailed_guide_to_installing_sdl_on_windows_linux_and_macos
1. Introduction SDL (Simple DirectMedia Layer) is a powerful, cross-platform multimedia development library. It's widely used in game development, emulators, and visualization software. SDL provides a unified interface for developers to access core functionalities like graphics rendering, audio output, and input from keyboards, mice, and game controllers. This guide will…