Typewriter Text Effect

[phillip]

Hello everyone here is some code that I have been working on that does a type writer text effect on screen. You can also add irrlicht compatible fonts just update this line
//Path to custom font std::string fontPath = "";
This might not be the best way to do this, so feel free to update the code and share it with the rest of the community.

Code: Select all

#include <irrlicht.h>
#include <string>

using namespace irr;

class TypewriterText {
public:
    TypewriterText(IrrlichtDevice* device, const std::wstring& text, const core::rect<s32>& position, u32 charDelay, const std::string& fontPath, bool drawBackground)
        : device(device), text(text), position(position), charDelay(charDelay), currentLength(0), lastUpdateTime(0), cursorVisible(true), drawBackground(drawBackground) {
        // Load custom font
        font = device->getGUIEnvironment()->getFont(fontPath.c_str());
        if (!font) {
            // Fall back to built-in font if custom font fails to load
            font = device->getGUIEnvironment()->getBuiltInFont();
        }
    }

    void update() {
        if (!font) return;

        u32 currentTime = device->getTimer()->getTime();

        if (currentTime - lastUpdateTime >= charDelay) {
            if (currentLength < text.size()) {
                currentLength++;
                lastUpdateTime = currentTime;
            } else {
                // Toggle cursor visibility every 500ms after the text has been fully displayed
                if (currentTime - lastBlinkTime >= 500) {
                    cursorVisible = !cursorVisible;
                    lastBlinkTime = currentTime;
                }
            }
        }

        std::wstring displayedText = text.substr(0, currentLength);
        core::dimension2d<u32> textSize = font->getDimension(displayedText.c_str());

        const s32 padding = 5; // Indent text by 5 pixels
        // Calculate the rectangle for the background with padding
        core::rect<s32> bgRect(position.UpperLeftCorner.X, position.UpperLeftCorner.Y,
                               position.UpperLeftCorner.X + textSize.Width + 2 * padding,
                               position.UpperLeftCorner.Y + textSize.Height + 2 * padding);

        // Draw a transparent background rectangle if the flag is set
        if (drawBackground) {
            video::IVideoDriver* driver = device->getVideoDriver();
            driver->draw2DRectangle(video::SColor(128, 0, 0, 0), bgRect); // 128 is the alpha value for transparency
        }

        // Draw the text with padding offset
        core::rect<s32> textPosition = bgRect;
        textPosition.UpperLeftCorner.X += padding;
        textPosition.UpperLeftCorner.Y += padding;
        font->draw(displayedText.c_str(), textPosition, video::SColor(255, 255, 255, 255));

        // Draw blinking cursor at the end of the text
        if (currentLength == text.size() && cursorVisible) {
            core::dimension2d<u32> cursorSize = font->getDimension(L"?");
            core::position2d<s32> cursorPos = core::position2d<s32>(textPosition.UpperLeftCorner.X + textSize.Width,
                                                                    textPosition.UpperLeftCorner.Y + textSize.Height - cursorSize.Height);
            font->draw(L"_", core::rect<s32>(cursorPos.X, cursorPos.Y, cursorPos.X + cursorSize.Width, cursorPos.Y + cursorSize.Height), video::SColor(255, 255, 255, 255));
        }
    }

private:
    IrrlichtDevice* device;
    gui::IGUIFont* font;
    std::wstring text;
    core::rect<s32> position;
    u32 charDelay;
    size_t currentLength;
    u32 lastUpdateTime;
    u32 lastBlinkTime = 0;
    bool cursorVisible;
    bool drawBackground; // Flag to control background drawing
};

int main() {
    IrrlichtDevice* device = createDevice(video::EDT_OPENGL,
                                          core::dimension2d<u32>(800, 600),
                                          16,
                                          false,
                                          false,
                                          false,
                                          0);

    if (!device)
        return 1;

    device->setWindowCaption(L"Irrlicht Engine - Typewriter Text Effect");

    video::IVideoDriver* driver = device->getVideoDriver();
    gui::IGUIEnvironment* env = device->getGUIEnvironment();

    std::wstring text = L"Hello, this is a typewriter text effect in Irrlicht.\nLine two of the text.\nLine three of the text.";
    core::rect<s32> position(10, 10, 790, 590);
    u32 charDelay = 50;

    // Path to custom font
    std::string fontPath = "";

    // Create TypewriterText with background enabled
    TypewriterText typewriter(device, text, position, charDelay, fontPath, true);

    while (device->run()) {
        driver->beginScene(true, true, video::SColor(255, 100, 101, 140));

        env->drawAll();
        typewriter.update();

        driver->endScene();
    }

    device->drop();

    return 0;
}

[CuteAlien]

Works nicely. You could also use the irrlicht strings for this I guess (to avoid mixing Stl with Irrlicht). Thought I have to admit I also often mix those ;-)

[chronologicaldot]

I actually considered doing this for Irrlicht since it's very useful in games. Looks like someone beat me to it. Thanks for the code!