[tutorial][C#][XNA 4.0] 3 - Czas na grafikę:ustawienia okna, wyświetlanie obrazków 2D

W tym tutorialu zapoznam was z ustawianiem okna, wczytywaniu zasobów oraz wyświetlaniu grafiki 2D.

Aktualizowany: 3 luty 2012r 18:38
Zacznijmy od ustawień ekranu.
do metody Initialize() dodajemy ten kod :

            // TODO: Add your initialization logic here

            graphics.PreferredBackBufferWidth = 800; // określamy tutaj szerokość okna

            graphics.PreferredBackBufferHeight = 640; // określamy tutaj wysokość okna

            graphics.IsFullScreen = false; // czy ma być tryb pełnoekranowy

            graphics.ApplyChanges(); // Zatwierdzamy zmiany

            Window.Title = "Block_Portal"; // Nazwa widoczna na pasku okna

          //  this.IsMouseVisible = true; // czy mysz systemowa ma być widoczna

Znaczenie poszczególnych poleceń opisałem obok w komentarzu, dzięki tym czynnością jeszcze przed załadowaniem zasobów i pierwszym obiegiem pętli naszej gry(metody Update() i Draw()) możemy ustalić wygląd naszego okna widoku.
Teraz po naciśnięciu klawisza F5 wyświetli się nam ustalone powyżej okienko o  rozdzielczości 800x640 o nazwie na pasku tytułu aplikacji "Block_Portal". Ta wiedza o możliwościach w metodzie Initialize() powinna w zupełności wystarczyć na nasze pierwsze gry tworzone w tym freameworku.

następnie na początku klasy inicjujemy zmienną Texture2D mogącą przechowywać nasz obraz dodany do projektu:

Texture2D obraz; 

Dalej żeby cokolwiek wyświetlić przydałoby się najpierw to załadować do zasobów naszej aplikacji. Można zrobić to na kilka sposobów:

a) w explorerze windows otwieramy folder zawierający naszą grafikę do wklejenia(formaty wspierane przez XNA to: bmp, jpg, png), następnie przeciągamy wybrany przez nas obrazek na pasek zadań i na kartę naszego projektu w MVC# a następnie na zakładkę "Nazwa naszej gry"Content w Solution Explorer i upuszczamy.

b) klikamy Shift+Alt+A i wybieramy interesujący nas plik a następnie klikamy button "Add".

c) klikamy na ikonę pod "Edit" na pasku programu albo w solution klikamy prawym na projekt Content

Teraz powinniśmy wczytać nasz dodany obrazek po przez wpisanie w metodzie:

protected override void LoadContent()

poniższej instrukcji:

obraz = Content.Load<Texture2D>("nasz_obraz");

Uwaga: nazwa nasz_obraz to Asset name dodanego do projektu obrazka, zazwyczaj jest taki sam jak nazwa wczytanego rpzez nas pliku ale bez końcówki mówiącej o farmacie pliku. Czyli jeśli dodamy obrazek png: tło_mojej_gry.png to będziemy go wczytywać wpisując jego asset name: tło_mojej_gry(chyba że zmieniliśmy nazwę na inną wtedy używamy tej podanej przez nas) Im mniejszy rozmiar obrazka tym lepiej, ponieważ nie dość że zajmuje mało miejsca i zmniejsza wagę naszej aplikacji to i karta graficzna ma mniej roboty do zrobienia gdy wyświetla się wiele kopi tego zdjęcia.

Dzięki temu zmienna obraz przechowuje nasz obrazek który teraz będziemy mogli wyświetlić w metodzie

protected override void Draw(GameTime gameTime)

nim jednak to uczynimy musimy powiadomić system o tym że będziemy rysować(moc obliczeniowa przechodzi na kartę graficzną). Najpierw tworzymy kwadrat w którym będziemy przetrzymywać nasz obrazek na ekranie:

Rectangle screenRectangle = new Rectangle(0, 50, 200, 250);

W konstruktorze podajemy 4 parametry, kolejno: pierwszy(u mnie o wartości 0) - położenie X kwadratu no i potem naszego obrazka drugi(50) - położenie Y kwadratu trzeci(200) - szerokość kwadratu czwarty(250) - wysokość kwadratu Możesz je dowolnie zmieniać, pamiętaj tylko że 2 pierwsze parametry określające położenie na płaszczyźnie będą rysowane w pamięci komputera nawet jeśli wyjdą poza obszar widziany przez ciebie czyli okno naszej aplikacji. Dlatego później nauczymy się optymalizować wyświetlanie obrazków do tych widocznych dla nas. kolejne 2 parametry czyli trzeci i czwarty określający wysokość i szerokość obrazka również możemy dowolnie modyfikować. Samym procesem optymalizacji zajmuje się system który za nas skaluje obraz jeśli będziemy go wyświetlać.

Tworzymy bufor grafiki w metodzie LoadContent():

spriteBatch = new SpriteBatch(GraphicsDevice);

sam bufor grafiki uruchamiamy w metodzie Draw():
spriteBatch.Begin();
teraz możemy wywołać polecenie rysowania naszego obrazka w kopiach i rozmiarach jakich chcemy(o tym nieco dalej), wpisując następujące polecenie:

spriteBatch.Draw(obrazek, screenRectangle, Color.White);

pierwszy parametr to zmienna naszego rysunku do wyświetlenia. drugi parametr to nasz wcześniej utworzony rectangle(kwadrat) służący wskazania gdzie i jak duże ma to być co wyświetlamy. trzeci parametr to kolor maski, biały oznacza że obrazek będzie w takim odcienia jakim jest rzeczywiście, inne kolory zabarwiając go na odpowiednią wartość. Możecie sobie popróbować wychodzące efekty zmieniając White na inną wartość np. Blue. Zastosowanie np. w flagach graczy, wystarczy ze wczytamy 1 białą flagę a możemy z niej porobić wiele innych kolorów flag itp. itd:)

ciąg tych instrukcji zamykamy poleceniem:

spriteBatch.End();

Teraz kompilując i uruchamiając program naszym oczom ukaże się nasz obraz.

Co do funkcji: spriteBatch polecam ją wykorzystywać tylko do rysowania, wykonywanie pomiędzy jej początkiem a końcem działań logicznych, artmetycznych może przebiegać wolniej

W następnym odcinku wyjaśnię jak wyświetlać teksty, oraz dodatkowe efekty przy wyświetlaniu. Pozdrawiam