Podstawy XNA - Sterowanie za pomocą klawiatury  

Autor: Norbert Blandzi

Opublikowano: 2012-03-30

Typowym zadaniem, podczas projektowania gier, jest obsłużenie poruszania się głównego bohatera, samochodu lub innego obiektu, którym steruje gracz. Gra, która nie implementuje tego aspektu jest tylko zwykłą animacją, a przecież nie to jest naszym celem. Chcąc poruszyć jakikolwiek obiekt w XNA, mamy do wyboru 3 kontrolery: klawiatura, joystick oraz mysz. W tym samouczku zaprezentowane zostanie, w jaki sposób wykorzystać do tego celu klawiaturę.

Przed wykonaniem zadań powinieneś:

• znać podstawy języka C#,
• wiedzieć, jak utworzyć nowy projekt XNA,
• wiedzieć, jak wyświetlić obraz w XNA,
• wiedzieć, jak poruszyć świat gry.

Po wykonaniu zadań nauczysz się:

• sterować obiektem, wykorzystując klawiaturę.

Implementacja

Twoim zadaniem będzie utworzenie aplikacji w XNA 4.0, do której najpierw załadujesz duszka, a następnie "ożywisz go", dodając możliwość poruszania nim za pomocą strzałek na klawiaturze. Wynik zadań został przedstawiony na Rys. 1.

Rys. 1. Poruszanie elementu w XNA.

W celu wyświetlenia obrazka na ekranie i rozpoczęcia poruszania się w nim należy:

•  dodać do projektu grafikę i załadować ją do obiektu typu Texture2D,
• wykorzystać klasę Keyboard do odczytu stanu klawiatury,
• sprawdzić, używając metody IsKeyDown(), czy dany klawisz jest wciśnięty, a jeśli tak, to przerysować obrazek na nową pozycję.

Utworzenie nowego projektu XNA 4 i dodanie duszka

1. Otwórz Visual Studio i utwórz nowy projekt XNA 4.0, po czym nazwij go "SterowanieKlawiatura".
2. Utwórz folder "obrazki":

• w oknie Solution Explorer naciśnij prawym przyciskiem myszy na "SterowanieKlawiaturaContent(Content)",
• wybierz Add -> New Folder,
• zmień nazwę na obrazki.

Informacja

Dodając pliki graficzne do projektu, warto umieścić je w jednym folderze.

3. Pobierz pliki, niezbędne do wykonania ćwiczenia:

• pobierz plik KursXNA.zip,
• rozpakuj archiwum w dowolnym katalogu,
• w strukturze katalogu odnajdź plik "pilka.png".

4. Dodaj duszka:

• w oknie Solution Explorer naciśnij prawym przyciskiem myszy na SterowanieKlawiaturaContent(Content),
• wybierz Add -> Existing Item,
• w nowym oknie wskaż plik pilka.png i naciśnij przycisk Add,

Informacja

Plik, który dodałeś poruszany będzie po oknie za pomocą klawiatury, dlatego możesz dodać np. grafikę, reprezentującą bohatera. Duszek nie powinien być za duży, aby dobrze móc zaobserwować, jak porusza się po ekranie. Proponuję obrazek o wielkości zbliżonej do 100x100 pikseli lub mniejszy. Gdy znajdziesz odpowiedni obrazek lub przygotujesz go sam w programie graficznym, dodaj go do folderu obrazki.

• po dodaniu grafiki, Solution Explorer powinien wyglądać w twoim projekcie podobnie, jak na Rys. 2.

Rys. 2. Widok Solution Explorer po dodaniu pliku graficznego.

5. Do klasy Game1 dodaj nowe pole:

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

Texture2D pilka;

6. Pobierz zasoby do obiektu, w celu ich późniejszego używania:

• przejdź do metody LoadContent(), po linijce // TODO wpisz następujący kod:

pilka = Content.Load<Texture2D>(@"obrazki/pilka");

Sterowanie za pomocą klawiatury

Sterowanie obiektami, wykorzystującymi klawiaturę, polega na wykrywaniu stanów klawiszy, które nas interesują, i odpowiednim reagowaniu na ich zmianę. Najlepszym miejscem, aby to wykonać jest metoda Update(). XNA dostarcza klasę Keyboard, której metoda GetState() zwraca stan klawiatury, za każdym razem, gdy jest wywoływana. Taki stan możemy przechować w obiekcie typu KeyboardState. Tak utworzony obiekt posiada m.in. metody IsKeyDown() oraz IsKeyUp(), które jako argument przyjmują klawisz, którego stan chcemy sprawdzić, a które kolejno sprawdzają czy klawisz jest wciśnięty (zwracając true) lub nie (zwracając false).

1. Dodaj dwa nowe pola typu int, które będą odpowiedzialne za przechowywanie współrzędnych obrazka:

• poniżej linijki Texture2D pilka dodaj:

int x,y;

• w metodzie LoadContent(), poniżej wcześniej dodanego kodu wpisz:

x = 0;
y = 0;

2. Utwórz obiekt klasy KeyboardState:

• w metodzie Update(), za linijką zawierającą // TODO dodaj:

KeyboardState stan = Keyboard.GetState();

3. Sprawdź, czy zostały wciśnięte klawisze strzałek, jeśli tak, to zmień odpowiednio wartość x i y, odpowiedzialne za położenie elementu:

• następnie, pod dodaną linijką dodaj:

if(stan.IsKeyDown(Keys.Down))
{
    y += 1;
} else if(stan.IsKeyDown(Keys.Up))
{
    y -= 1;
} else if(stan.IsKeyDown(Keys.Left))
{
    x -= 1;
} else if(stan.IsKeyDown(Keys.Right))
{
    x += 1;
}

4. Dodaj kod, odpowiedzialnego za wyświetlenie duszka, w pozycji określonej przez x i y:

• w metodzie Draw(), poniżej linii zawierającej // TO DO dodaj:

spriteBatch.Begin();
spriteBatch.Draw(pilka, new Rectangle(x, y, 50,50), Color.White);
spriteBatch.End();

5. Sprawdź działanie aplikacji:

• zapisz zmiany w pliku,
• wciśnij F5 lub wybierz Debug->Start Debugging,
• sprawdź, czy możesz poruszyć duszkiem za pomocą klawiszy strzałek.

Informacja

Na pewno zauważyłeś, że element może opuścić okno gry. Można to zmienić w bardzo łatwy sposób.

Ustawienie granic poruszania się duszka

W pierwszej kolejności ustawimy szerokość i wysokość okna na 800x380. Jak już zapewne wiesz, współrzędne duszka podajemy jako jego lewy górny wierzchołek, dlatego chcąc wyznaczyć prawą i dolną granicę, musimy odjąć odpowiednio szerokość obrazka od szerokości okna, a od wysokości okna wysokość obrazka. Gdybyśmy ustawili granicę, odpowiadającą szerokości i wysokości okna, duszek zatrzymywałby się poza widocznym dla nas obszarem.

Ustawienie granic:

• w konstruktorze klasy Game1 dodaj:

if(stan.IsKeyDown(Keys.Down))
{
    if(y > 330)
    {
        y -= 1;
    } else { y += 1;}
} else if(stan.IsKeyDown(Keys.Up))
{
    if(y < 0)
    {
        y += 1;
    } else { y -= 1;}
} else if(stan.IsKeyDown(Keys.Left))
{
    if(x < 0)
    {
        x += 1;
    } else { x -= 1;}
} else if(stan.IsKeyDown(Keys.Right))
{
    if(x > 750)
    {
        x -= 1;
    } else { x += 1;}

}

• teraz wystarczy skompilować i uruchomić projekt, naciskając przycisk F5, i jeżeli wszystko zrobiłeś poprawnie będziesz mógł poruszać elementem, ale nie będziesz mógł nim zawędrować poza okno.

Podsumowanie

W tym artykule nauczyliśmy się sterować obrazkiem, wykorzystując do tego celu kontroler, jakim jest klawiatura.

W kolejnym artykule nauczymy się, jak wykrywać kolizje w przestrzeni 2d.

Zadanie

W celu sprawdzenia swoich umiejętności spróbuj dodać do, utworzonego w tym odcinku, projektu trzy różne szybkości poruszania się obiektu, które będą zmieniane po wciśnięciu klawisza Spacji.

 

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

• do sprawdzenia wciśniętego klawisza wykorzystaj metodę Keyboard.GetState().IsKeyDown(klawisz) – jako klawisz wpisz Keys.Space,
• w metodzie Update() dodaj warunek, który będzie sprawdzał, czy klawisz spacji został wciśnięty, a jeżeli tak, to zmień poziom szybkości na kolejny,
• jeżeli zostanie osiągnięty trzeci poziom szybkości, a użytkownik naciśnie klawisz Spacji, zmień szybkość na poziom pierwszy.

• dodaj nad konstruktorem klasy głównej dwa pola:

int szybkosc, poziomSzybkosci;

• dodaj do metody Initialize():

szybkosc = 1;
poziomSzybkosci = 1;

• dodaj w metodzie Update(), pod obiektem typu KeyboardState:

if (stan.IsKeyDown(Keys.Space))
{
    if (poziomSzybkosci == 3)
    {
        poziomSzybkosci = 1;
    }else
    {
        poziomSzybkosci++;
    }
}
if (poziomSzybkosci == 1)
{
    szybkosc = 1;
} else if (poziomSzybkosci == 2)
{
    szybkosc = 5;
} else 
{
    szybkosc = 10;
}

• zmień kod, odpowiadający za zmianę współrzędnych na następujący:

if(stan.IsKeyDown(Keys.Down))
{
    if(y > 330)
    {
        y -= szybkosc;
    } else { y += szybkosc;}
} else if(stan.IsKeyDown(Keys.Up))
{
    if(y < 0)
    {
        y += szybkosc;
    } else { y -= szybkosc;}
} else if(stan.IsKeyDown(Keys.Left))
{
    if(x < 0)
    {
        x += szybkosc;
    } else { x -= szybkosc;}
} else if(stan.IsKeyDown(Keys.Right))
{
    if(x > 750)
    {
        x -= szybkosc;
    } else { x += szybkosc;}

}

 

---