03.1: Tworzenie pierwszego ekranu

Cele lekcji

Po zakończeniu tej lekcji…

• Będziesz potrafić dodawać elementy interfejsu użytkownika (przyciski, etykiety itp.).
• Dowiesz się, w jaki sposób interfejs użytkownika łączy się z logiką programu.

Jak interfejs użytkownika komunikuje się z logiką?

Mamy już działający program, ale jeszcze nie wykonuje on żadnych funkcji.

Musz to zmienić.

Najpierw trzeba powiększyć formularz, aby pomieścił on wszystkie elementy, które będziesz w nim pokazywać.

Etap 1: Uruchom aplikację Visual Studio.

Etap 2: Otwórz rozwiązanie SuperAdventure.

Etap 3: W przeglądarce Solution Explorer (prawy górny narożnik aplikacji Visual Studio) kliknij dwukrotnie plik SuperAdventure.cs i otwórz go.

Etap 4: Zaznacz cały formularz, klikając go w głównym oknie edycji aplikacji Visual Studio (środkowa część ekranu). Formularz jest zaznaczony, jeśli wzdłuż jego krawędzi widoczne są kreskowane linie i niewielkie kwadraciki. Projekt SuperAdventure będzie się znajdował w sekcji Properties (Właściwości) w aplikacji Visual Studio (w prawym dolnym rogu).

Właściwości to informacje o formularzu – nazwa, rozmiar, kolor, itp. Podczas naszych lekcji będziemy korzystać tylko z kilku wybranych właściwości.

Etap 5: Przewiń listę Properties i wyszukaj właściwość Text. Zmień jej nazwę z Form1 na My game. Zauważ, nazwa na górnym pasku zaznaczonego formularza również zmieniła się na My game.

Etap 6: Przewiń listę Properties i wyszukaj właściwość Size (Rozmiar). Rozwiń ją (klikając przycisk „+” po lewej stronie), o ile już nie jest rozwinięta. Zmień wartość Width (Szerokość) na 735, a Height (Wysokość) na 690. Rozmiar formularza się zmieni.

Dodawanie tekstu do formularza

Teraz formularz jest już wystarczająco duży, aby zmieścić w nim wszystko, co potrzebne. Dodaj więc do niego pierwsze informacje.

W poprzedniej lekcji stwierdziliśmy, że ukończona gra będzie zawierać punkty wytrzymałości gracza, złoto, doświadczenie i poziom wyświetlane w lewym górnym rogu formularza. Informacje te są wyświetlane za pomocą elementów nazywanych „formantami”.

Formanty to składniki ekranu programu lub witryny internetowej, na przykład teksty, pola do wprowadzania wartości i przyciski. Podczas pracy z formularzami w aplikacji Visual Studio lista formantów jest dostępna po lewej stronie okna. My będziemy używać kilku popularnych formantów.

Pierwszy formant, który dodamy, to etykieta. Etykieta służy do wyświetlania informacji tekstowych.

Aby do formularza dodać etykietę, liście formantów kliknij pozycję Label (po lewej stronie ekranu) i przeciągnij ją na formularz. Etykietę możesz umieścić w dowolnym miejscu, ponieważ i tak ręcznie zmienisz jej położenie we właściwościach.

Musisz dodać osiem etykiet i zmienić ich właściwości. Na filmie powiązanym z tą lekcją pokazuję, jak to zrobić.

Poniżej znajduje się lista wartości, które musisz zmienić. Najprościej jest je zmieniać pojedynczo, dodając je do formularza.

UWAGA: W przypadku etykiet zawierających wartości, które nigdy nie będą się zmienić (na przykład Hit Points:), pozostaw takie nazwy jakie zaproponował program podczas ich tworzenia. Inna nazwa nie jest w ogóle potrzebna, ponieważ nigdy nie będziemy ich łączyć z „logiką” programu.

Etykiety, które będziemy modyfikować, muszą mieć sensowne nazwy. Za chwilę dowiesz się, dlaczego.

W przypadku etykiet, w których modyfikowałem pozycję Name, dodawałem przedrostek „lbl”. Ten przedrostek w przyszłości, kiedy będziemy tworzyć logikę programu, umożliwi wyszukanie wszystkich etykiet (i znów — po co to? Dowiesz się za chwilę).

Dodaj przycisk, żeby coś się działo

Sprawdźmy, jak program zmodyfikuje nasze etykiety.

W kolejnych lekcjach do etykiet, których nazwy rozpoczynają się od „lbl”, dodamy wartości odpowiadające punktom wytrzymałości, doświadczeniu i innym. Teraz przeprowadzimy tylko mały test.

Etap 1: Z listy formantów po lewej stronie przeciągnij pozycję Button (czyli Przycisk) do pustego miejsca w formularzu.

Etap 2: Zmień jego właściwość Name na btnTest (przedrostek „btn” będzie nam służył do oznaczania wszystkich przycisków). Zmień jego właściwość Text na Test.

Etap 3: Kliknij dwukrotnie przycisk btnTest.

Otwarty zostanie kod „logiki” formularza. Kursor znajdzie się w środku czegoś o nazwie btnTest_Click. Za chwilę zajmiemy się tym czymś, ale teraz wystarczy, że zapamiętasz, iż jest to logika uruchamiana, gdy gracz kliknie przycisk btnTest.

Etap 4: W wierszu 22, w środku sekcji btnTest_click wpisz ten wiersz:

lblGold.Text = “123”;

Po wpisaniu liter „lbl” w aplikacji Visual Studio zostały wyświetlone wszystkie utworzone przez nas wcześniej etykiety, których nazwa rozpoczyna się od „lbl”. Dlaczego właśnie tak je nazwałem — ponieważ łatwo je znaleźć podczas pisania kodu logiki.

Pamiętasz, jak usunęliśmy zawartość właściwości Text po utworzeniu etykiety? Teraz kod logiki ją wypełni za nas. W tym przypadku wypełnia ją wartością „123”. A co to za średnik na końcu wiersza? Informuje on komputer, że to koniec wiersza. Czyli jest to taka programistyczna kropka na końcu zdania.

Etap 5: Uruchom program.

Zauważ, że w formularzu widać tylko etykiety, w których wprowadziliśmy wartości właściwości Text.

Teraz kliknij przycisk Test. Zobacz, że właściwość lblGold (która przed chwilą była pusta) teraz zawiera wartość „123”, czyli wartość, którą kod logiki kazał wyświetlić po naciśnięciu przycisku Test.

Zapoznaliśmy się właśnie z krótkim wprowadzeniem do tego, w jaki sposób kod, który napiszemy, będzie się łączyć z formularzem na ekranie. Gracz będzie wykonywać jakieś działania w jednym z formantów na formularzu (np. kliknięcie przycisku), a kod logiki będzie rozumiał, co dzieje się z postacią w grze i będzie aktualizował zawartość ekranu.

Podsumowanie

Gra ma przycisk! I ten przycisk coś robi!

Nie oszukujmy się, to nie jest zbyt porywające, niemniej potrzebne są elementy pozwalające graczowi wchodzić w interakcję z „mózgiem” programu, a to był nasz pierwszy krok.

Gdy napiszemy już logiki w projekcie Engine, wrócimy do interfejsu użytkownika i dodamy pozostałe formanty pozwalające zagrać w grę.