Text Performance, Fitting and Wrapping

Implementing a Text-Heavy UI

What's the best approach for implementing a text-heavy UI, like a chat system?

3D art representing computer programming

Implementing a text-heavy UI, such as a chat system, requires careful consideration of performance and usability. Here's an approach you can take:

Efficient Text Rendering

Use the WrappedText class we created earlier, but extend it to handle multiple messages:

1#include <SDL.h>
2#include <SDL_ttf.h>
3
4#include <deque>
5#include <string>
6#include <vector>
7
8class ChatSystem : public WrappedText {
9public:
10  ChatSystem(int FontSize, int MaxWidth,
11             int MaxMessages)
12    : WrappedText{"", FontSize, MaxWidth},
13      MaxMessages{MaxMessages} {}
14
15  void AddMessage(const std::string& Message) {
16    Messages.push_front(Message);
17    if (Messages.size() > MaxMessages) {
18      Messages.pop_back();
19    }
20    UpdateSurface();
21  }
22
23private:
24  void UpdateSurface() {
25    std::string CombinedText;
26    for (const auto& Msg : Messages) {
27      CombinedText += Msg + "\n";
28    }
29    CreateSurface(CombinedText);
30  }
31
32  std::deque<std::string> Messages;
33  int MaxMessages;
34};

Memory Management

To prevent excessive memory usage, limit the number of messages stored and rendered:

1int main() {
2  SDL_Init(SDL_INIT_VIDEO);
3  TTF_Init();
4
5  // Font size 18, 400px wide, max 50 messages
6  // Add some messages
7  ChatSystem Chat{18, 400, 50};
8  Chat.AddMessage("Hello, world!");
9  Chat.
10    AddMessage("Welcome to the chat system.");
11
12  // Your SDL rendering loop here...
13
14  TTF_Quit();
15  SDL_Quit();
16  return 0;
17}

Scrolling

For scrolling, you can adjust the DestinationRectangle in the Render method:

1class ChatSystem : public WrappedText {
2public:
3  // ... previous code ...
4
5  void Render(SDL_Surface* DestinationSurface,
6              int ScrollOffset) {
7    SDL_Rect ScrolledRect =
8      DestinationRectangle;
9    ScrolledRect.y -= ScrollOffset;
10    SDL_BlitSurface(TextSurface, nullptr,
11                    DestinationSurface,
12                    &ScrolledRect);
13  }
14};

Input Handling

For user input, you can create an input box at the bottom of the chat:

1class InputBox : public Text {
2public:
3  InputBox(int FontSize, int MaxWidth) :
4    Text{FontSize}, MaxWidth{MaxWidth} {
5    CreateSurface("");
6  }
7
8  void AddCharacter(char c) {
9    Content += c;
10    CreateSurface(Content);
11  }
12
13  void RemoveCharacter() {
14    if (!Content.empty()) {
15      Content.pop_back();
16      CreateSurface(Content);
17    }
18  }
19
20  std::string GetContent() const {
21    return Content;
22  }
23
24private:
25  std::string Content;
26  int MaxWidth;
27};

Remember to handle SDL keyboard events in your main loop to update the InputBox.

By combining these elements, you can create a responsive and efficient text-heavy UI. Be sure to optimize rendering by only updating the chat surface when new messages are added or when scrolling occurs, rather than every frame.

This Question is from the Lesson: