• Artykuł

          

Podstawy XNA - Wyświetlanie obrazu  Udostępnij na: Facebook

Autor: Kuba Ostrowski

Opublikowano: 2012-03-23

Wygląd naszej aplikacji świadczy o jej jakości. Program komunikuje się z użytkownikiem końcowym przez wyświetlanie obrazu. W tym artykule zostanie zaprezentowane, jak w prosty sposób wyświetlić teksturę na ekranie.

Przed wykonaniem zadań powinieneś:

Po wykonaniu zadania nauczysz się:

  • jak wyświetlić element gry na ekranie.

Implementacja

W naszej aplikacji, głównym zadaniem będzie wyświetlenie tekstur, przedstawiających piłeczkę, różnymi sposobami, na ekranie. Wynik zadań został przedstawiony na Rys. 1.

Rys. 1. Wyświetlanie tekstur w XNA.

W celu wyświetlenia obrazu na ekranie musimy wykonać następujące kroki:

  • dodać plik graficzny do projektu Content,
  • dodać pola do klasy, w której będziemy je wykorzystywali,
  • załadować kontent w metodzie LoadContent(), a wynik przypisać do zdefiniowanych pól,
  • wyświetlić obrazek w metodzie Draw().

Dodawanie zasobów do aplikacji

W pierwszym kroku musimy dodać grafikę do projektu.

  1. Utwórz nowy projekt i nazwij go "WyswietlanieObrazu". 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 WyswietlanieObrazu (Rys. 2.).

Rys. 2. Tworzenie nowego projektu XNA.

Informacja
W nowo utworzonym projekcie znajdują się obecnie dwa pliki: Program.cs z metodą Main, w której uruchamiana jest nasza gra, oraz Game1.cs, w którym znajduje się klasa służąca za szablon gry.
  1. Pobierz pliki niezbędne do wykonania ćwiczenia:
  • pobierz plik KursXNA.zip,
  • rozpakuj archiwum w dowolnym katalogu,
  • w strukturze katalogów odnajdź pliki jpilka.jpg oraz pilka.png.
  1. Dodaj pliki do projektu (Rys. 3.):
  • w oknie Solution Explorer naciśnij prawym przyciskiem myszy na "WyswietlanieObrazuContent (Content)",
  • wybierz Add -> Existing Item,
  • wybierz pliki jpilka.jpg oraz pilka.png i naciśnij przycisk Add.

Rys. 3. Dodanie istniejących plików do projektu.

Pobranie zasobów do aplikacji

W kroku drugim, grafika musi zostać wczytana do odpowiednich obiektów.

  1. Dodaj dwa nowe pola do klasy Game1. Będą one przechowywały nasze zasoby w uruchomionej aplikacji:
  • otwórz plik Game1.cs,
  • w klasie Game1, poniżej linii SpriteBatch spriteBatch; dodaj:
Texture2D pilka, jpilka;
  1. Wczytaj zasoby do odpowiednich obiektów w celu ich późniejszego wykorzystywania:
  • przejdź do metody LoadContent() i po linijce // TODO wpisz następujący kod:
pilka = Content.Load<Texture2D>("pilka");
jpilka = Content.Load<Texture2D>("jpilka");

Wyświetlenie obrazu

Gdy mamy już załadowane zasoby, możemy przejść do wyświetlania ich na ekranie. Operacja rysowania tekstur w XNA odbywa się przy pomocy obiektu klasy SpriteBatch, który znajduje się, po utworzeniu projektu, w Game1. Rysowanie tekstur musi odbywać się w specjalnym bloku pomiędzy SpriteBatch.Begin(); (służy do inicjalizacji rysowania) a SpriteBatch.End(); (czyści sprite batch z danych, przywraca ustawienia wyświetlania sprzed wywołania metody Begin()). Inicjalizacja oraz finalizacja bloku jest dość obciążająca i może wpłynąć negatywnie na wydajność, należy ograniczać do minimum liczbę bloków rysowania.

Blok rysowania umieszczamy w Game1.Draw. Metoda SpriteBatch.Draw pozwala na dodanie tekstury do kolekcji obrazów, które zostaną wyświetlone na ekranie. Tekstura, niezależnie od kształtu, wyświetlana jest w prostokącie. Jednym z wielu przeciążeń metody SpriteBatch.Draw, używanym w tym odcinku, jest:

SpriteBatch.Draw(Texture2D tekstura, Rectangle(int pozycjaX, int pozycjaY, int szerokość, int wysokość), Color kolor odcienia);
  • tekstura – to obiekt, który wczytaliśmy w poprzednim kroku,
  • pozycjaX, pozycjaY – to koordynaty lewego górnego rogu prostokąta, w którym zostanie wyświetlona tekstura,
  • szerokość, wysokość – rozmiar prostokąta,
  • kolor odcienia – kolor.

Przykład prostokąta, w którym będziemy umieszczali piłkę, wraz z wymiarami, został przedstawiony na Rys. 4.

Rys. 4. Piłka umieszczona w prostokącie.

  1. Wyświetl obok siebie dodane obrazki:
  • przejdź do metody Draw() i po linijce // TODO wpisz:
spriteBatch.Begin();
spriteBatch.Draw(pilka, new Rectangle(20, 20, pilka.Width, pilka.Height), Color.White);
spriteBatch.Draw(jpilka, new Rectangle(120, 50, jpilka.Width, jpilka.Height), Color.Red);
spriteBatch.End();
  • zapisz zmiany w pliku,
  • wciśnij F5 lub wybierz Debug->Start Debugging,
  • sprawdź, czy Twoja aplikacja wyświetliła obrazki tak, jak na Rys. 5.

Rys. 5. Wyświetlanie tekstur.

Informacja
Gdy mamy już wczytane zasoby, możemy przejść do wyświetlenia ich na ekranie. W zasobach zostały celowo użyte pliki o różnych rozszerzeniach (.jpg i .png). Tekstury w XNA wykorzystują domyślnie 4 kanały ARGB, gdzie A – „alfa” odpowiada za stopień przezroczystości. Niestety, obrazy zapisane w formacie .jpg nie posiadają kanału alfa, więc nie są przezroczyste.
  1. Wyświetl obrazki ze zmianą rozmiaru:
  • przejdź do metody Draw() i po linijce // zmiana rozmiaru wpisz:
spriteBatch.Draw(jpilka, new Rectangle(300, 300, jpilka.Width * 2, jpilka.Height * 2), Color.White);
spriteBatch.Draw(jpilka, new Rectangle(320, 30, (int)(jpilka.Width * 3.5),(int)(jpilka.Height * 2.7)), Color.White);
// zmiana akcentu
  • zapisz zmiany w pliku,
  • wciśnij F5 lub wybierz Debug->Start Debugging,
  • sprawdź, czy Twoja aplikacja wyświetliła obrazki tak, jak na Rys. 6.

Rys. 6. Tekstury ze zmienionym rozmiarem.

  1. Wyświetl obrazki z żółtym akcentem:
  • przejdź do metody Draw() i po linijce // zmiana akcentu wpisz:
spriteBatch.Draw(jpilka, new Rectangle(520, 110, jpilka.Width, jpilka.Height), Color.Yellow);
spriteBatch.Draw(jpilka, new Rectangle(610,270,jpilka.Width * 3,jpilka.Height * 2), Color.YellowGreen);
  • zapisz zmiany w pliku,
  • wciśnij F5 lub wybierz Debug->Start Debugging, sprawdź, czy Twoja aplikacja wyświetliła obrazki tak, jak na Rys. 1.

Podsumowanie

W tym artykule dowiedzieliśmy się, jak wyświetlać tekstury na ekranie za pomocą klasy SpriteBatch.

W kolejnym artykule nauczymy się, jak wyświetlić tekst na ekranie.

Zadanie

W celu utrwalenia nowo nabytej wiedzy spróbuj wykonać proste zadanie. Dodaj do projektu dwa nowe elementy o teksturze „pilka.png”, w różnym odcieniu i rozmiarze, znajdujące się w rogach ekranu na Rys. 7.

Rys. 7. Wynik zadania.

 

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

  • pozycje w rogu obszaru wyświetlania można określić za pomocą właściwości GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height oraz rozmiaru naszej tekstury.
  • do metody Draw, przed wywołaniem SpriteBatch.End(); dodaj:
spriteBatch.Draw(pilka, new Rectangle(0,GraphicsDevice.Viewport.Height - pilka.Height*2, pilka.Width, pilka.Height*2), Color.PaleVioletRed);
spriteBatch.Draw(pilka, new Rectangle(GraphicsDevice.Viewport.Width - pilka.Width *2,0,pilka.Width * 2, jpilka.Height), Color.GreenYellow);