Lekcja 2 – Wyświetlanie na ekranie

Otwórz plik main.lua. Jak na razie zawiera on niewiele, kawałek komentarza na zachętę 🙂 Wszystko w kodzie poprzedzone dwoma minusami — jest komentarzem i nie wpływa na pracę programu.

Usuń zawartość pliku i zaczynamy nasz program.

Na początek wyświetlimy nasz kosmolot. Wpisz (lub skopiuj i wklej):

Efekt na razie nie powala… 🙂 ale to chwilowe. Biały prostokąt to nasz statek, a czarny ekran to kosmiczna pustka.
ekran3

Komenda display.newRect wyświetla prostokąt, a w nawiasach podane są parametry – współrzędne x i y środka prostokąta i jego wymiary.
Biblioteka display zawiera szereg pożytecznych funkcji, wyświetlających obiekty na ekranie, takie jak

display.newCircle( x, y, r ) – wyświetla koło o promieniu r w miejscu o współrzędnych x, y
display.newImage( ścieżka, x, y ) – wyświetla obrazek w miejscu x, y. Obrazek! Teraz nasz statek będzie wyglądał… nieco lepiej. Czyli tak:

statek

Pobierz obrazek ze statkiem i zachowaj w folderze, w którym jest plik ‚main.lua’. Folder ten będziemy nazywać folderem projektu.

Zmień tekst programu na :

Funkcja display.newImage wyświetla podany obrazek w punkcie o współrzędnych x i y ( u nas 100 i 100).

Efekt powinien być taki:

ekran4

Jest lepiej 🙂
Gra ma się toczyć na poziomym ekranie – potrzeba trochę miejsca do latania. Otwórz plik build.settings i w sekcji ‚orientation’ zmień ‚portrait’ na ‚landscapeLeft’. Wpis powinien wyglądać tak (komentarze pominąłem):

Zapisz i zamknij plik build.settings. Od teraz ekran będzie prezentowany poziomo.

ekran5

Ponieważ na czas gry ikonki zasięgu, stanu baterii itd. nie są do niczego potrzebne, użyjemy magicznego zaklęcia, aby stały się niewidoczne. Wpisz w pierwszą linijkę programu:

jak łatwo się domyślić, ta funkcja służy do ukrywania (lub pokazywania) paska stanu. Efekt powinien być taki:

ekran6

Wygląda to już jak prawie prawdziwa gra! 😉
Aby było bardziej kosmicznie, dodamy tło z obrazkiem odległej galaktyki
bg

Zapisz obrazek w katalogu projektu. Dodaj do programu linię:

Nowa sztuczka: jako współrzędne x i y podajemy wartości wyznaczające środek ekranu, które pamięta za nas system. Działa niezależnie od wysokości i szerokości ekranu i w razie zmiany wielkości ekranu nie musimy pamiętać o aktualizacji współrzędnych środka ekranu.

ekran7

Jest prawie dobrze, tylko… nasz statek znikł, a obrazek wyświetlił się, ale jakby nie cały. Co się stało?

Zadziałała zasada obowiązująca w Corona SDK – każdy nowy obrazek pojawia się na wierzchu, przykrywając poprzednie. A zatem linijkę kodu wyświetlającą tło należy przenieść przed linijkę kodu wyświetlającą statek – i gotowe.

Sprawa druga – część obrazka jest ucięta. Stało się tak dlatego, że obrazek jest większy niż ekran i po prostu się na nim nie zmieścił. Ale i z tym sobie poradzimy. Każdy obiekt wyświetlany przez display.newCośTam na ekranie ma współrzędne x i y, czyli miejsce wyświetlania, oraz (jeśli jest prostokątny) – szerokość (width) i wysokość (height). Obrazek jest prostokątny? Jest. Zmienimy więc jego szerokość i wysokość na dokładnie taką, jaką ma ekran. System pamięta te wartości w zmiennych display.actualContentWidth (szerokość) i display.actualContentHeight (wysokość).

Cały nasz program wygląda teraz tak:

a efekt?

ekran8

Nasz statek jest trochę samotny. Domalujemy więc statek przeciwnika oraz, dla lepszego efektu, planetę.

ufoplaneta

To już umiesz… Oczywiście użyjemy funkcji display.newImage

Pamiętaj, aby linijkę kodu z wyświetlaniem planety umieścić pomiędzy wyświetlaniem tła a wyświetlaniem statku. Dzięki temu planeta nie przesłoni statków, kiedy już wprawimy je w ruch.

Cały kod wygląda teraz tak:

Obraz gry jest teraz kompletny, ale… nieruchomy.

ekran9

Jak wprawić w ruch statek przeciwników i nasz kosmolot? O tym w następnej lekcji.

Poprzednia lekcja Następna lekcja