Get best of the week

SDL 2.0-Unterrichtszyklus: Lektion 6 - Herunterladen von Schriftarten mit SDL_ttf

Bild

Von einem Übersetzer:

Dies ist eine Fortsetzung einer Reihe von Übersetzungen von Twinklebear-Tutorials, die hier im Original verfügbar sind . Die Übersetzung ist teilweise kostenlos und kann geringfügige Änderungen oder Ergänzungen des Übersetzers enthalten. Übersetzung der ersten beiden Lektionen - AutorenschaftInvalidPointerund der dritte und vierte für k1-801.

Liste der Lektionen:


Herunterladen von Schriftarten mit SDL_ttf


In diesem Tutorial erfahren Sie, wie Sie True Type-Schriftarten mithilfe der SDL_ttf-Erweiterungsbibliothek anzeigen. Die Installation der Bibliothek ist identisch mit der Einstellung von SDL_image in Lektion 3 , aber anstelle von "image" schreiben wir einfach "ttf" (Windows-Benutzer sollten auch die enthaltene Freetype-DLL kopieren). So Download SDL_ttf , werfen Sie einen Blick auf die Dokumentation und das Tutorial starten!

Das erste, was wir brauchen, um mit SDL_ttf zu arbeiten, ist die Schriftart ttf. Mit BitFontMaker hat der Autor eine ziemlich schreckliche Schriftart erstellt, die Sie aus dem Repository herunterladen könnenWenn Sie jedoch bereits eine eigene schöne Schriftart haben, können Sie diese verwenden. Diese Schriftart enthält nur einfache ASCII-Zeichen. Wenn Sie also versuchen, Nicht-ASCII-Zeichen anzuzeigen, ist dies höchstwahrscheinlich nicht erfolgreich. Der Code für diese Lektion basiert auf Lektion 5, wie üblich können Sie ihn von Github herunterladen . Bilder, geschnittene Sprites und Zeichnungen werden in diesem Tutorial geändert.

Text anzeigen


SDL_ttf bietet verschiedene Möglichkeiten zum Anzeigen von Schriftarten unterschiedlicher Geschwindigkeit und Qualität sowie die Anzeige von UTF8- und Unicode-Zeichen. Die Dokumentation bietet einen guten Überblick über die verschiedenen Anzeigemethoden. Sie sollten daher je nach Ihren Qualitäts- und Geschwindigkeitsanforderungen lesen und mehr darüber erfahren, wann und welche Methode Sie verwenden möchten. In diesem Tutorial verwenden wir TTF_RenderText_Blended, da wir keine zeitlichen Beschränkungen haben und möchten, dass unser Text schön ist. Verschiedene Textanzeigefunktionen akzeptieren die Farbe RGB SDL_Color , mit der wir die Farbe des zu zeichnenden Textes auswählen können.

Leider kann SDL_ttf nur auf der Oberfläche angezeigt werden. Sie müssen daher nach dem Rendern des Texts einen zusätzlichen Schritt ausführen, um daraus eine Textur zu erstellen, die wir mit dem Renderer zeichnen können. Natürlich müssen Sie weiterhin die Schriftart herunterladen, die wir verwenden werden. Dies geschieht mit TTF_OpenFont , wo Sie auch die gewünschte Schriftgröße angeben können.

Schreiben einer renderText-Funktion


Um uns das Leben zu erleichtern, erstellen wir eine renderText-Funktion, die Text empfängt. Diese Datei enthält die TTF-Schriftart, die Farbe, die gewünschte Größe und den Renderer, um die endgültige Textur zu laden. Die Funktion öffnet die Schriftart, zeigt den Text an, konvertiert ihn in eine Textur und gibt die Textur zurück. Da Probleme auftreten können, müssen Sie jeden Bibliotheksaufruf auf Fehler überprüfen und diese korrekt behandeln, z. B. Ressourcen bereinigen, Fehler protokollieren und nullptr zurückgeben, damit wir wissen, dass etwas Schlimmes passiert ist. SDL_ttf meldet alle Fehler über SDL_GetError, sodass Sie weiterhin logSDLError verwenden können, um Fehler zu protokollieren.

Unter Berücksichtigung dieser Anforderungen schreiben wir die Funktion renderText:

/**
*      
* @param message ,   
* @param fontFile ,   
* @param color ,     
* @param fontSize  
* @param renderer ,     
* @return SDL_Texture,     nullptr,  -   
*/
SDL_Texture* renderText(const std::string &message, const std::string &fontFile,
        SDL_Color color, int fontSize, SDL_Renderer *renderer)
{
        // 
        TTF_Font *font = TTF_OpenFont(fontFile.c_str(), fontSize);
        if (font == nullptr){
                logSDLError(std::cout, "TTF_OpenFont");
                return nullptr;
        }       
        //       TTF_RenderText,
        //    
        SDL_Surface *surf = TTF_RenderText_Blended(font, message.c_str(), color);
        if (surf == nullptr){
                TTF_CloseFont(font);
                logSDLError(std::cout, "TTF_RenderText");
                return nullptr;
        }
        SDL_Texture *texture = SDL_CreateTextureFromSurface(renderer, surf);
        if (texture == nullptr){
                logSDLError(std::cout, "CreateTexture");
        }
        //   
        SDL_FreeSurface(surf);
        TTF_CloseFont(font);
        return texture;
}

Leistungswarnung


Es ist sehr wichtig zu beachten, dass jedes Mal, wenn wir den Text anzeigen möchten, die Schriftart erneut geöffnet und geschlossen wird, was in unserem Fall geeignet ist, da wir den Text einmal anzeigen. Wenn wir jedoch viel Text und / oder zu oft anzeigen möchten, ist es am besten, ihn beizubehalten Schriftart so oft öffnen, wie wir brauchen. Unsere Version von renderText für diesen häufigeren Fall akzeptiert TTF_Font * anstelle des Namens der Schriftartdatei und wird nicht geöffnet und geschlossen, da die Lebensdauer der Schriftartdatei separat angepasst wird.

Initialisieren Sie SDL_ttf


Wie bei SDL müssen wir die Bibliothek vor der Verwendung initialisieren. Dies erfolgt mit TTF_Init , das bei Erfolg 0 zurückgibt . Um SDL_ttf zu initialisieren, rufen wir diese Funktion erst nach der Initialisierung der SDL auf und überprüfen den Rückgabewert, um sicherzustellen, dass alles in Ordnung ist.

if (TTF_Init() != 0){
        logSDLError(std::cout, "TTF_Init");
        SDL_Quit();
        return 1;
}

Verwenden von renderText


Mit unserer praktischen renderText-Funktion können wir Text in einem einfachen Aufruf anzeigen. Zeigen Sie für dieses Tutorial den Text "TTF-Schriftarten sind cool!" An. weiß, Größe 64 in der Schriftart, die wir zuvor heruntergeladen haben. Dann können wir die Breite und Höhe auf die gleiche Weise wie für jede andere Textur anfordern und die x / y-Koordinaten berechnen, um eine Nachricht in der Mitte des Fensters zu zeichnen.

const std::string resPath = getResourcePath("Lesson6");
//   "TTF fonts are cool!"
//   RGBA
SDL_Color color = { 255, 255, 255, 255 };
SDL_Texture *image = renderText("TTF fonts are cool!", resPath + "sample.ttf",
        color, 64, renderer);
if (image == nullptr){
        cleanup(renderer, window);
        TTF_Quit();
        SDL_Quit();
        return 1;
}
//    ,     
int iW, iH;
SDL_QueryTexture(image, NULL, NULL, &iW, &iH);
int x = SCREEN_WIDTH / 2 - iW / 2;
int y = SCREEN_HEIGHT / 2 - iH / 2;

Zeichnen Sie den Text


Am Ende können wir die Textur wie vor der Verwendung der Funktion renderTexture zeichnen.

//:     
SDL_RenderClear(renderer);
//    ,     ,  
//    
renderTexture(image, renderer, x, y);
SDL_RenderPresent(renderer);

Wenn alles nach Plan gelaufen ist, sehen Sie ungefähr Folgendes:

Bild

Ende der Lektion 6


Dies ist alles, was Sie wissen müssen, um SDL_ttf verwenden zu können! Lesen Sie unbedingt die Dokumentation, um zu sehen, wozu diese Bibliothek in der Lage ist. Wenn Sie Probleme mit der Lektion haben, können Sie wie gewohnt in die Kommentare schreiben.

Der Autor war mit anderen Projekten beschäftigt und konnte keine Lektionen mehr schreiben, daher war dies die letzte Lektion aus dem Zyklus. Sie können sich die Tutorials von Lazy Foo ansehen oder Beispiele und Dokumentationen aus dem SDL-Wiki lesen .

More articles:


All Articles