Twórz aplikacje i gry na Androida #1 – wprowadzenie

Mateusz Kaca Artykuły 2013-02-13

Zapewne każdego z Was interesowało jak robi się gry i aplikacje na Androida, prawda? Domyślacie się, bądź gdzieś usłyszeliście, że aby takowe stworzyć trzeba znać języki jakie jak Java, Objective-C, czy inne – są to trudne języki, szczególnie dla przeciętnego Kowalskiego, więc wiele osób się do tego zniechęca, lecz tak być nie musi! Studio Corona Labs stworzyło platformę o nazwie Corona SDK. Jest to środowisko, w którym programujemy w języku Lua, kod jest na tyle przejrzysty, że znając język angielski zrozumiemy go bez problemu. A więc na co czekać, zaczynamy!

Pierwszy krok jaki musimy poczynić, to utworzenie konta na stronie studia, robimy to klikając tutaj, a następnie pobieramy środowisko na dysk twardy. Do poprawnego działania wymagany jest Java Development Kit, pakiet potrzebny do kompilowania aplikacji na Androida, ściągniemy go stąd. Do pełni szczęścia potrzebujemy jeszcze jakiegoś dobrego edytora dla kodu naszych aplikacji, najlepszym, a w dodatku darmowym programem jest Notepad++, zaś ja polecam Sublime Text 2 (lecz płacimy w późniejszym czasie za licencję). Po zainstalowaniu powyższego oprogramowania zalecam wykonanie restartu komputera.

Gdy już ponownie zalogujemy się do systemu otwieramy nasz edytor oraz środowisko Corona SDK, naszym oczom ukaże się taki obrazek:
Ekran główny Corona Simulator
Klikamy na New project, nadajemy nazwę naszej aplikacji i klikamy Next, wyświetli się komunikat z pytaniem, czy chcemy zobaczyć utworzony folder albo otworzyć plik główny w edytorze – wybieramy pierwszą opcję. W katalogu znajdziemy trzy pliki:

  • build.settings – w nim definiujemy domyślne orientacje ekranu, ukrywanie lub pokazywanie paska statusu, pozwolenia aplikacji np. na dostęp do Internetu.
  • config.lua – tutaj ustawiamy rozdzielczość ekranu aplikacji, w tejże będziemy ustalać położenie obiektów – 480×320 wystarczy nawet na ekrany HD, ponieważ grafika wstawiana do aplikacji będzie o wiele większa, ale o tym później.
  • main.lua – jest to główny plik, z niego zawsze otwieramy naszą aplikację w symulatorze, na początku tylko z niego będziemy korzystać

Może więc stworzylibyśmy pierwszą, działającą aplikację? Otwieramy poprzez edytor plik main.lua i wpisujemy następujący tekst:

local tekst = display.newText( "Witaj świecie!", 100, 50, native.systemFont, 24 )
tekst:setTextColor( 255,255,255 )

Składnia kodu nie jest taka trudna, na jaką może wyglądać, lecz spieszę już z tłumaczeniem:

  • local tekst = – jest to nasz „obiekt” o nazwie tekst, po znaku = definiujemy go, aplikacje programuje się obiektowo, tzn. ustalamy, czym każdy obiekt ma być, np. obrazkiem, tekstem, dźwiękiem, etc. to właśnie ustalamy za znakiem =
  • display.newText( „Witaj świecie!”, 100, 50, native.systemFont, 24 ) – wyświetl tekst o danych parametrach: ( „Tutaj wpisujemy tekst, jaki ma się pojawić, pozycjęX, pozycjęY, nazwęCzcionki, rozmiarCzcionki)
  • text:setTextColor( 255,255,255) – obiektowi text:ustawKolor( R,G,B) – gdzie zamiast liter muszą pojawić się cyfry od 0 do 255, tak jak w palecie barw RGB

Wydaje mi się, że to nie było takie trudne. Wystarczy teraz zapisać plik i w programie Corona Simulator kliknąć na File, następnie Open project, wyszukujemy ścieżki do naszej aplikacji i po znalezieniu klikamy na plik main.lua – powinniśmy zobaczyć to samo, co na tym zrzucie:
Witaj świecie!

Zapewne sobie teraz pomyślicie, że każdy program „Witaj świecie” tak łatwo wygląda, dopiero potem zaczynają się schody, lecz nie w Coronie!

[strona=”Nasza druga aplikacja”]

Pobierz teraz ten folder, zamieściłem w nim przykładowe obrazki, napiszemy teraz kod, dzięki któremu umieścimy je w aplikacji:
local chmura = display.newImage("chmury.png")

local ziemia = display.newImage("ziemia.png")
ziemia.x = 160
ziemia.y = 460

local skrzynia = display.newImage("skrzynia.png")
skrzynia.x = 160
skrzynia.y = 60
skrzynia.rotation = 35

Wydaje mi się, że i tym razem zrozumienie kodu nie przyniosło Wam kłopotów, lecz dla pewności wytłumaczę poszczególne elementy:

  • local chmura = display.newImage(„chmury.png”) – obiekt, który nazwałem „chmura” ma wyświetlić obrazek o nazwie „chmury.png”
  • ziemia.x = 160 – obiekt o nazwie „ziemia” ma być położony na 160 punkcie pozycji X
    ziemia.y = 60 – obiekt o nazwie „ziemia” ma być położony na 60 punkcie pozycji Y
  • skrzynia.rotation = 35 – obiekt o nazwie „skrzynia” ma być obrócony o 35 stopni

Zapisujemy ten kod w folderze „drugi_program”, w pliku main.lua i otwieramy go przy pomocy symulatora, powinniśmy otrzymać dokładnie taki efekt:
null
Przejdziemy teraz do jednej z najciekawszych rzeczy w tym poradniku, a mianowicie dodania elementów fizyki do naszej aplikacji, by urzeczywistnić nasze obiekty:

//Na sam początek pliku main.lua wklejamy
require ( "physics" )
physics.start()
physics.setGravity( 0, 9.5 )

//I na sam koniec pliku ten oto kod
physics.addBody(skrzynia, "dynamic")
physics.addBody(ziemia, "static")

Wytłumaczenie:

  • require ( „physics” ) – załadowanie silnika fizyki do aplikacji
  • physics.start() – uruchomienie silnika fizyki
  • physics.setGravity( 0, 9.5 ) – ustawienie grawitacji, globalny wektor w kierunku X (tutaj 0) oraz globalny wektor w kierunku Y (tutaj 9.5)
  • physics.addBody(skrzynia, „dynamic”) – dodaj ciało fizyczne, będzie nim obiekt skrzynia, jest to ciało „dynamiczne”
    physics.addBody(ziemia, „static”) – dodaj ciało fizyczne, będzie nim obiekt ziemia, jest to ciało „statyczne”

Po zapisaniu pliku uruchomcie go w symulatorze.
Zdziwieni efektem? Właśnie w tych kilku linijkach kodu stworzyliście malutką aplikację, w której pojawiły się obrazki, zdefiniowaliście je jako przedmioty wykorzystujące elementy fizyki, ustawiliście grawitację. Dzięki temu skrzynka ustawiona pod kątem odbiła się od ziemi i odleciała.

To był dopiero pierwszy poradnik, ale zobaczcie ile już zrobiliśmy! W tym cyklu będę prezentował Wam kolejne możliwości środowiska Corona SDK, przedstawię proces tworzenia aplikacji typu Air Hockey, Flight Control, czy nawet Angry Birds!



Przewiń stronę, by przeczytać kolejny wpis
Przewiń stronę, by przeczytać kolejny wpis
x