Lazarus dla początkujących, część III W poprzedniej napisaliśmy pierwszy program w środowisku Lazarus. Mając już podstawową wiedzę na temat tworzenia programów, w części tej stworzymy prostą grę, którą w kolejnych częściach będziemy modyfikować. Założeniem dzisiejszej części jest utworzenie prostej gry łapanki, w której to za pomocą małej kulki sterowanej przyciskami (ruch: w prawo, w lewo, do góry, w dół) będziemy łapać spadające figury geometryczne. W zależności od złapanych figur naliczane będą kolejne punkty wyświetlane na planszy gry, a wraz ze zwiększającymi się punktami figury będą spadać coraz szybciej. Mając więc zdefiniowane założenia gry, przystąpmy więc kolejno do działania. Będziemy oczywiście programować w środowisku Lazarus środowisku wolnego i otwartego oprogramowania dostępnego za darmo i wszędzie, na większość popularnych systemów operacyjnych. Skupimy się oczywiście na pracy w systemie operacyjnym Linuks, choć poniższe czynności można równie dobrze wykonywać na innych systemach. Zaczynamy więc tworzyć pierwszą, prostą naszą grę. Na początku zajmiemy się naszym oknem programu obiektem głównym. Ustalimy obszar gry poprzez regulację rozmiarów okna, zmienimy kolor oraz nagłówek. W tym celu po otwarciu środowiska Lazarus (patrz część 1 lub 2 kursu) w inspektorze obiektów ustawiamy odpowiednie atrybuty z sekcji Właściwości (Left, Top, Height, Width, Name, Caption). Dodatkowo, kolor tła zmieniamy za pomocą atrybutu Color. Ustawmy więc odległości od Left i Top po ok. 200, wymiary okna: Height i Width po 400, atrybut Name zostawmy domyślny (Form1), nagłówek Caption Moja gra, a Color np. clinfobk. Następnie wstawmy na środku obszaru gry obiekt małą kulkę. Lazarus posiada zaimplementowane figury geometryczne które możemy znaleźć w zakładce komponentów w sekcji Additional TShape. 1
Rys.1 Wybierzmy więc ten komponent i kliknijmy na środek naszego pola przyszłej gry. Pojawi się dość duży, biały kwadrat, który następnie zmienimy na okrąg, zmniejszymy do 20px i nadamy mu czerwony kolor. Z poprzednich części kursu potrafimy już wstawiać obiekty i nadawać im odpowiednie atrybuty, więc nie powinno być z tym dla nas już większego problemu. W inspektorze obiektów ustawiamy więc właściwości wstawionego obiektu domyślnego Shape1: TShape, zmieniając takie jego atrybuty jak: Shape na stcircle, Height i Width po 20, Brush -> Color (poprzez rozwinięcie atrybutu Brush) clred. W odpowiednio ustawionej wcześniej oknie formy (oknie naszej gry) powinniśmy więc otrzymać na środku czerwoną kulkę. Następnie wstawmy cztery przyciski typu TButton i odpowiednio je rozmieśćmy na ekranie przyszłej gry. Przyciski będą potrzebne do sterowania kulką za pomocą klikania myszką górny do góry, dolny w dół, lewy w lewo, prawy w prawo. Wymiary przycisków ustawmy na 40 40px (atrybuty: Width i Height po 40), nazwy Name pozostawmy domyślne, nagłówki Caption ustawmy odpowiednio: ^ v < >. Z poprzedniej części kursu doskonale wiemy gdzie szukać komponentu TButton, powinniśmy już też radzić sobie z odpowiednim ustawianiem atrybutów. Poniżej efekty naszej pracy z programem: 2
Rys.2 Spróbujmy teraz zmusić naszą kulkę do poruszania się w zależności od naciskania wybranego przycisku. Jak tego dokonać? Odpowiedź nie jest trudna po to mamy okienko z kodem Free Pascal nasz Edytor źródeł. Z poprzedniej części kursu wiemy już trochę na temat kodu sam automatycznie generuje potrzebne, niezbędne wpisy przy okazji wstawiania komponentów. Nie zadba natomiast za nas o surowy kod, gdyż program tak naprawdę nie wie, co ma zrobić musimy mu to sami powiedzieć. Zastanówmy się więc najpierw czego oczekujemy po naciśnięciu przycisku oczekujemy pewnej akcji związanej z przemieszczeniem kulki na środku naszego ekranu. Jak można zatem przemieścić kulkę? Pamiętamy ma ona swoje położenie wywołane jej atrybutami Top i Left (we Właściwościach), my możemy na sztywno ustawić je w inspektorze obiektów, ale także możemy nakazać zmianę w kodzie odwołując się do tego obiektu (kulki) i jej odpowiedniej właściwości. Odwołanie takie robi się w prosty sposób *nazwa_obiektu.właściwość* i podstawiamy odpowiednią wartość (tutaj już wchodzą zagadnienia programowania). Na przykład umieścić kulkę w odległości 200px od górnej części ekranu to wpisanie wartości 200 dla nazwy.atrybut i konkretnie: Shape1.Top:=200. Jak chcemy, aby górna strzałka wysłała kulkę w górę (np. o 5 punktów) to Shape1.Top:=195 i już mamy ruch w górę (z 200 na 195) o 5px, itd., itd. Bardziej elegancko powyższą czynność można przedstawić dla górnego przycisku: Shape1.Top:=Shape1.Top-5; czyli zmniejszaj o 5 pionowe położenie obiektu przy każdorazowym naciśnięciu. No dobrze, ale gdzie to wpisać w naszym programie? Skoro mamy 4 przyciski i dla każdego z nich jest odpowiednia akcja na naciśnięcie odpowiedniego przycisku, trzeba to wpisać dla nich. Wybraliśmy 4 obiekty TButton gdyż one są po to utworzone, aby na akcję naciśnięcia myszką była przeprowadzona odpowiednia reakcja. Ta reakcja to uruchamiana procedura i zawarte w niej odpowiednie instrukcje postępowania u nas odpowiednie przesunięcie kulki (naszego TShape1). Spójrzmy więc na kod naszego programu,- czy utworzone są tam automatycznie odpowiednie procedury? Szukamy wpisów typu procedure TForm1.Button1Click (Sender: TObject); (i dalej z Button2,3,4). Jeśli nie ma ich (domyślnie jak przypadkiem czegoś nie zrobiliśmy nie powinno ich być) to trzeba środowisku powiedzieć, że chcemy korzystać z dobrodziejstw obiektów TButton uruchamiając puste na razie procedury, które następnie wypełnimy tym, co trzeba. Robi się to bardzo prosto w okienku inspektora obiektów po prostu klika się dwukrotnie na dany obiekt podrzędny i tworzą się automatycznie wpisy procedur dla klikanych obiektów. My potrzebujemy dla 4 buttonów, więc klikamy kolejno na 4 obiekty buttonów: Button1: TButton (i tak dalej). Patrząc na Edytor źródeł powinniśmy otrzymać: 3
Rys.3 Czyli kliknięcie w odpowiedni przycisk to uruchomienie procedury dla odpowiedniego przycisku. Czyli dokładnie czego? Odpowiedniego PRZESUNIĘCIA obiektu TShape kulki. W jaki sposób? W sposób wyżej opisany dla górnego przycisku ruch w górę. A jak dla pozostałych? Analogicznie, dla dolnego ruch w dół (zwiększenie 5px) w dół, dla prawego ruch (zwiększenie o 5px) w prawo, dla lewego ruch (zmniejszenie 5px) w lewo. Czy musi być to 5px? Niekoniecznie może być inna wartość, którą możemy dobrać sami w zależności od wygody używania gry (jak będzie 1px to ruch będzie bardzo ślamazarny, ale jak np. 20px to już zbyt bardzo skokowy). Wpisy do procedur wyglądałyby więc następująco (kolejno, już wpisane w procedury wpisujemy sami!): 4
Rys.4 Zabezpieczmy też ruch kulki tak, aby nie wyszła ona poza obszar gry (biorąc też pod uwagę żeby kulka nie wchodziła nam na obszar naciskanych przez nas przycisków wygoda przyszłego gracza). Robi się to w sposób następujący (np. dla górnego przycisku) if (Shape1.Top > 5) then. Co z j.angielskiego jeśli (nasz obiekt > 5px) wtedy. (rób coś w tym przypadku zmniejszaj/zwiększaj położenie kulki). Jeżeli jest jedna czynność do wykonania (u nas tak jest) piszemy bezpośrednio instrukcje, jeśli ich 2 lub więcej (ujętych warunkiem if!) trzeba wstawić begin i end; (na razie u nas nie ma takiego przypadku). Efekt całości: 5
Rys.5 Mamy więc kulkę poruszaną przyciskami w obszarze przez nas odpowiednio ograniczonym. Wstawimy teraz trzy obiekty graficzne (figury geometryczne) które będą się poruszać w dół. Tradycyjnie należy je najpierw stworzyć,- wykorzystajmy więc do tego komponenty TShape, zróbmy je każdy inny rodzaj (np. kwadrat, diament, koło), inny kolor, dużo większy od kulki i w miarę równomiernie od siebie rozmieszczone na górze naszej gry. Robimy analogicznie jak dla pierwszego TShape1 (naszej kulki na środku gry). Uzyskamy coś na wzór: 6 Rys.6
Jak teraz zrobić żeby się poruszały w dół te trzy duże obiekty? Doświadczenie narzuca nam cykliczne powiększenia ich atrybutu Top o pewną wartość np. Shape2.Top:=Shape2.Top+1; (i tak podobnie można zrobić z dwoma pozostałymi Shape3,4). I dobrze, tylko jak zrobić to automatem?- Tutaj z pomocą przychodzi nam systemowy komponent TTimer (stoper), który cyklicznie co pewien zdefiniowany przez użytkownika okres czasu (domyślnie 1s wartość 1000) może coś wykonywać jeżeli napiszemy mu co i wstawimy powiązaną z naszym programem procedurę. Jak wstawiać procedurę odnoszącą się dla danego obiektu to już wiemy, klikając dwukrotnie na interesujący nas w inspektorze obiektów wstawiony komponent, który ma ją wykonywać. Wstawmy więc najpierw TTimer, który znajduje się w komponentach w zakładce System, a następnie w inspektorze obiektów kliknijmy dwukrotnie Timer1: TTimer. Podobnie jak poprzednio automatycznie utworzy się procedura dla tego obiektu, na razie pusta. Rys.7 Wypełnijmy więc tę procedurę odpowiednią treścią, nad którą nieco wyżej rozważaliśmy, a dla urozmaicenia efektu szybkości (aby każdy z tych trzech obiektów poruszał się inaczej), zróbmy różne kroki skoku parametru Top: 7
Rys.8 Dodatkowo pomyślmy, żeby nasze trzy spadające obiekty TShape za daleko nie spadały i koniecznie powracały na górę if Shape2.Top > 250 then Shape2.Top:=0; (i analogicznie dla pozostałych dwóch): Rys.9 8
Sprawdźmy, czy na tym etapie program działa (pamiętamy z części 2 kursu jak się kompiluje całość i uruchamia zielonym trójkątem, w lewym górnym rogu). Jeśli wszystko w porządku powinien uruchomić się program wykonywalny (można przeszukać go na dysku, domyślnie jako project1). Rys.10 Zastanówmy się teraz jak rozwiązać sprawę (prostej) detekcji naszego poruszanego przez nas TShape1 (kulki) ze spadającym obiektem Tshape2,3,4 oraz wprowadzenia licznika zliczającego ilość detekcji. Najprostszy pomysł, który się narzuca to warunek nakrywania się obiektów, który jeżeli zostanie spełniony spowoduje powiększenie zmiennej o 1. Musimy więc najpierw powiedzieć programowi, że chcemy korzystać ze zmiennej, której będziemy używać w celu zapamiętania wartości cyfrowej typu integer (liczba całkowita). Własne zmienne w Lazarus wpisuje się w sekcji private (i/lub) public w opisie typu obiektu głównego w edytorze źródeł. Zmienna została nazwana punkty i została umieszczona w sekcji public (nie ma to dla nas żadnego znaczenia w naszym programie) i zadeklarowana zgodnie z zasadami programowania w FreePascal: punkty: integer; Za każdym razem, gdy naciśniemy odpowiedni przycisk w celu ruchu naszej kulki (TShape1) chcemy uruchomić dodatkowe instrukcje (o których dokładniej zaraz powiemy), które mają na celu wykryć detekcje i zliczyć punkty. Ponieważ mamy 4 przyciski musielibyśmy 4 razy napisać identyczną treść dla każdej z procedur przycisku. Żeby ułatwić programiście zadanie, w takich przypadkach warto skorzystać z możliwości które dają procedury. Napiszemy jedną procedurę i dla każdego przycisku odwołamy się do niej. Nazwiemy ją licz();, trzeba również poinformować program, że będziemy używać taką procedurę podobnie jak dla zmiennej punkty w opisie typu: 9
Rys.11 Odwołajmy się również do tej procedury dla każdego przycisku, wstawiając ją w kod procedur dla przycisków: Rys.12 10
Teraz wróćmy do samej procedury, nie utworzy się ona nam automatycznie (poprzez dwukrotne kliknięcie), gdyż jest to procedura nie związana z istniejącym obiektem, ale służąca obiektowi głównemu (naszej grze, zapełnionej obiektami podrzędnymi). Procedurę piszemy zgodnie z normami obowiązującymi przy pisaniu procedur (o których za chwilę) robiąc w edytorze źródeł odpowiedni odstęp. Pisząc procedurę możemy spojrzeć na dowolną dla obiektu, który ma coś robić (ma przypisane pewne zdarzenie np. kliknięcie myszą). Czysta, bez treści wykonawczej procedura wygląda następująco: procedure TForm1.licz(); begin end; Rozpoczyna się słowem procedure z nazwą POWIĄZANĄ z obiektem głównym, zawiera jak każdy program w języku Free Pascal begin i end; pomiędzy którymi wypełniamy ją odpowiednią treścią (odpowiednimi instrukcjami). Przejdźmy teraz do instrukcji, które nas interesują w odniesieniu do naszej gry. Najpierw detekcja, która już została wspomniana, jedna z wielu możliwości (zagadnienie logiczne czysto matematyczne do własnego przeanalizowania, przetrawienia, zrozumienia). W razie sukcesu detekcji zwiększamy wartość zmiennej o 1 (zwiększamy nasz licznik, nasze punkty w grze). Całość razy trzy, z uwagi na trzy obiekty z którymi kulka może się stykać. Następnie potrzebny będzie nam obiekt, który wyświetli wynik, wartość na planszy naszej gry. Takim obiektem może być znany z poprzedniej części kursu TLabel (patrz: Standard > Abc) wstawmy go więc w środek między 4 przyciski, a w jego atrybucie Caption wpiszmy 0 (gdyż zaczynamy od zerowej liczby punktów). Na końcu programowo zmieńmy nagłówek Caption obiektu TLabel1, znaną już przez nas metodą (patrz wcześniej). Tyle, że nie możemy zrobić tego wprost z uwagi na niezgodność typów danych w Caption jest to łańcuch znaków, a my trzymamy w zmiennej punkty wartość liczbową (integer). Potrzebna jest więc instrukcja konwertująca liczbę całkowitą (integer) na łańcuch znaków (string). Poniżej kod tej procedury (Rys.13), a następnie cała gotowa forma okno programu z potrzebnymi obiektami (Rys.14): 11
Rys.13 Rys.14 Na koniec dzisiejszej części III, programowo zmniejszymy jeszcze interwał naszego stopera TTimer1 w zależności od zdobytych przez gracza punktów (im więcej punktów gracz zdobył, tym szybciej będą spadać obiekty), z zabezpieczeniem przed zerowym taktem dla timera: 12
Rys.15 Mamy więc gotowy program, pozostaje ponownie skompilować go i uruchomić (zielona strzałka), sprawdzić i cieszyć się! Tradycyjnie, na koniec polecam jeszcze znaleźć i uruchomić nasz program bez pośrednictwa środowiska Lazarus, a w następnych będziemy kontynuować zagadnienia związane z programowaniem w opisywanym środowisku. 13