Podstawy XNA - Wyświetlanie tekstu  

Autor: Tadeusz Makuch

Opublikowano: 2012-03-26

Nieodłączną częścią interfejsu graficznego w grach komputerowych jest tekst. Niezależnie, czy jest to licznik punktów czy instrukcja gry. W tym samouczku dowiesz się, jak określić fonty dla tekstu oraz jak go wyświetlić. Dowiesz się także, jak sprawdzić rozmiar wyświetlanego tekstu.

Przed wykonaniem zadań powinieneś:

• znać podstawy C#,
• znać podstawy XML,
• wiedzieć, jak utworzyć nowy projekt XNA.

Po wykonaniu zadań nauczysz się:

• tworzyć pliki SpriteFont opisujące fonty,
• wyświetlać tekst na ekranie,
• określać rozmiar tekstu.

Implementacja

W XNA możemy wyświetlić dowolny tekst, wykorzystując fonty zainstalowane na komputerze klienta. Twoim zadaniem będzie utworzenie prostej aplikacji, która wyświetli w lewym górnym rogu tytuł i komunikat pośrodku okna. Wynik zadania został przedstawiony na Rys. 1.

Rys. 1. Aplikacja wyświetlająca tekst.

W celu wyświetlenia tekstu musimy wykonać następujące kroki:

• dodać do zasobów plik typu SpriteFont,
• określić parametry fontów,
• dodać zmienne definicji fontów w klasie Game(),
• załadować definicje fontów w metodzie LoadContent(),
• wyświetlić tekst w metodzie Draw().

Tworzenie nowego projektu

Utwórz nowy projekt i nazwij go "XNATekst". W tym celu:

• uruchom Visual Studio,
• wybierz File -> New -> Project,
• z kategorii XNA Game Studio 4.0 wybierz projekt Windows Game (4.0),
• w polu Name wpisz XNATekst.

Dodawanie nowego stylu dla tekstu

Fonty, które będziemy wykorzystywać w aplikacji opisujemy w plikach SpriteFont. Są to pliki zapisane w języku XML, definiujące nazwę, rozmiar, odstęp pomiędzy znakami, używanie kerningu, styl oraz zakres dostępnych znaków.

1. Dodaj definicję fontu do zasobów:

• naciśnij prawym przyciskiem myszy na XNATekstContent (Content),
• wybierz Add -> New File,
• wybierz Sprite Font,
• w polu Name wpisz Tytul.spritefont i naciśnij Add (Rys. 2.).

Rys. 2. Dodawanie nowego zasobu.

2. Zmień rodzinę fontu:

• w oknie Solution Explorer, dwukrotnie kliknij lewym przyciskiem myszy na plik Tytul.spritefont,
• w znaczniku FontName wpisz Calibri.

3. Zmień rozmiar fontu:

• w znaczniku Size wpisz 32.

4. Zmień styl fontu:

• w znaczniku Stylewpisz Bold.

5. Zmień zakres znaków fontu:

• w znaczniku End wpisz ſ

6. Sprawdź, czy plik Tytul.spritefont wygląda tak, jak na Rys. 3.

Rys. 3. Plik Tytul.spritefont.

7. Analogicznie do punktów 1-5, dodaj definicję i określ parametry fontu dla komunikatu:

• dodaj plik SpriteFont o nazwie Tresc.spritefont,
• zmień rodzinę fontu w znaczniku FontName na Calibri,
• zmień rozmiar w znaczniku Size na 16,
• zmień zakres znaków w znaczniku End na ſ

8. Sprawdź, czy plik Tresc.spritefont wygląda tak, jak na Rys. 4.

Rys. 4. Plik Tresc.spritefont.

Ładowanie fontów do aplikacji

Przygotowane pliki możemy załadować do aplikacji.

Dodaj pola do klasy Game1:

• otwórz plik Game1.cs.
• poniżej linii SpriteBatch spriteBatch; dodaj:

// Pola do przechowania fontów
private SpriteFont fontTresc, fontTytul;
// Wektor współrzędnych tekstu mającego znaleźć się na środku
private Vector2 wspNaSrodek;
// Treść wiadomości
private string komunikat = "Udało Ci się wyświetlić napisy w aplikacji XNA!\nCzas na kolejny samouczek. :)";

2. Dodaj kod odpowiedzialny za pobranie informacji o fontach z plików zasobów:

• przejdź do metody LoadContent(),
• poniżej linii // TODO dodaj:

// Odczytanie zasobów
fontTytul = Content.Load<SpriteFont>("Tytul");
fontTresc = Content.Load<SpriteFont>("Tresc");

3. Określ współrzędne środka okna:

• poniżej, wcześniej dodanego kodu wpisz:

// Obliczenie współrzędnych wyświetlających komunikat na środku okna
Vector2 wymiarKom = fontTresc.MeasureString(komunikat);
wspNaSrodek = new Vector2((GraphicsDevice.Viewport.TitleSafeArea.Width-wymiarKom.X)/2,(GraphicsDevice.Viewport.TitleSafeArea.Height-wymiarKom.Y)/2);

Wyświetl tekst

1. Dodaj kod, wyświetlający tekst, w lewym górnym rogu, oraz kod komunikatu pośrodku okna:

• przejdź do metody Draw(),
• poniżej linii // TODO dodaj:

// Rozpoczynanie rysowania duszków w danej klatce
spriteBatch.Begin();
// Rysowanie tekstu
spriteBatch.DrawString(fontTytul, "Wyświetlanie tekstu", new Vector2(15,15), Color.Orange);
spriteBatch.DrawString(fontTresc, komunikat, wspNaSrodek, Color.Black);
// Zamykanie rysowania duszków w danej klatce
spriteBatch.End();

2. Przetestuj działanie aplikacji:

• zapisz zmiany w pliku,
• wciśnij F5 lub wybierz Debug->Start Debugging,
• sprawdź, czy Twoja aplikacja wyświetliła teksty tak, jak na Rys. 1.

Podsumowanie

W tym artykule dowiedzieliśmy się, jak dodawać i modyfikować pliki SpriteFont, opisujące fonty za pomocą, których wyświetlamy tekst. Dowiedzieliśmy się także, jak odczytać przygotowaną definicję fontów z zasobów do aplikacji i wyświetlić tekst. Przy okazji poznaliśmy metodę SpriteFont.MeasureString, która zwraca wymiary tekstu po wyświetleniu jej za pomocą definicji, określonych w pliku SpriteFont. Dzięki tej metodzie jesteśmy w stanie na przykład dynamicznie wyliczać współrzędne dla tekstu, bez podawania konkretnych wartości liczbowych.

W kolejnym artykule nauczymy się transformować elementy w aplikacji.

Zadanie

W celu sprawdzenia swoich umiejętności spróbuj wyświetlić tekst w każdym z rogów okna. Ponumeruj każdy z rogów według wskazówek zegara.

Rys. 5. Wynik zadania.

Aby zobaczyć podpowiedzi i rozwiązania zadań przełącz widok tej strony na >> klasyczny <<.

• oblicz współrzędne „dwójki”, korzystając z GraphicsDevice.Viewport.TitleSafeArea i SpriteFont.MeasureString.

SpriteFont fontTytul;
Vector2 prawyDolny;

protected override void LoadContent()
{
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            fontTytul = Content.Load<SpriteFont>("czcionki/Tytul");
            prawyDolny = new Vector2(GraphicsDevice.Viewport.TitleSafeArea.Width - fontTytul.MeasureString("2").X,
                GraphicsDevice.Viewport.TitleSafeArea.Height - fontTytul.MeasureString("2").Y);
}

protected override void Draw(GameTime gameTime)
{
            GraphicsDevice.Clear(Color.CornflowerBlue);
            spriteBatch.Begin();
            spriteBatch.DrawString(fontTytul, "1", new Vector2(prawyDolny.X, 0), Color.Black);
            spriteBatch.DrawString(fontTytul, "2", new Vector2(prawyDolny.X, prawyDolny.Y), Color.Black);
            spriteBatch.DrawString(fontTytul, "3", new Vector2(0, prawyDolny.Y), Color.Black);
            spriteBatch.DrawString(fontTytul, "4", new Vector2(0, 0), Color.Black);
            spriteBatch.End();
            base.Draw(gameTime);
}