Wirtualny joystick - sterowanie postacią
W niniejszym artykule spróbuję uruchomić mini joystick do sterowania naszą piłką plażową w lewo i w prawo w górę i w dół. Na razie wszystko bez uruchomionej grawitacji.
Celem naszej mini aplikacji jest utworzenie czterech buttonów sterujących piłką w lewo, w prawo, w górę i w dół.
Dla uproszczenia na początek zrobię tylko samą prawą stronę, bo reszta to w dużej części duplikacja tego samego a na wstępie tylko zagmatwałoby to nam całość. Na koniec dodam resztę kodu.
local pilka_plazowa = display.newImage("pilka_plazowa.png")
local prawo=display.newRect(display.contentWidth-100 ,display.contentHeight-100,100,100)
local tekst_prawo=display.newText("prawo", display.contentWidth-90 ,display.contentHeight-70, native.systemFont, 30)
tekst_prawo:setTextColor(240, 8, 0)
function przesun_prawo(event)
pilka_plazowa.x=pilka_plazowa.x+10
end
prawo:addEventListener("touch", przesun_prawo)
) | Zaczynamy od wgrania piłki a następnie przycisku sterującego za pomocą newRect. Zależy mi na tym, by był w prawym dolnym rogu, dlatego też umieściłem w punkcie x liczbę wielkość obszaru roboczego minus szerokość guzika natomiast dla y maksymalną wysokość ekranu minus wysokość buttona. Dzięki temu powinien on zawsze dla każdego tabletu czy smartfonu wylądować w prawym dolnym rogu. |
Następnie umieściłem tekst z napisem prawo na tym buttonie też korzystając z parametrów maksymalna szerokość i wysokość danego ekranu, by uniezleżnić się od sprzętu użytkownika. Następnie ustawiłem kolor tekstu na czerwony.
Pod koniec kodu jest funkcja, która przesuwa naszą piłkę w prawo dodając do zmiennej x 10 pikseli zaś na końcu jest ustawione nasłuchiwnie czy ktoś przypadkiem nie dotknął naszego buttona, bo jeśli tak to należy wywołać funkcję przesun_prawo.
Pełny kod sterowania w cztery strony
Poniżej znajduje się cały kod tego mini programu. Ja już wspominałem celowo najpierw wydzieliłem sedno a dopiero teraz wstawiam całość.
local pilka_plazowa = display.newImage("pilka_plazowa.png")
local lewo=display.newRect(0,display.contentHeight-100,100,100)
local tekst_lewo=display.newText("lewo", 20 ,display.contentHeight-70, native.systemFont, 30)
tekst_lewo:setTextColor(240, 8, 0)
local prawo=display.newRect(display.contentWidth-100 ,display.contentHeight-100,100,100)
local tekst_prawo=display.newText("prawo", display.contentWidth-90 ,display.contentHeight-70, native.systemFont, 30)
tekst_prawo:setTextColor(240, 8, 0)
local gora=display.newRect(display.contentWidth-250,display.contentHeight-100,100,100)
local tekst_gora=display.newText("gora", display.contentWidth-230 ,display.contentHeight-70, native.systemFont, 30)
tekst_gora:setTextColor(240, 8, 0)
local dol=display.newRect(150,display.contentHeight-100,100,100)
local tekst_dol=display.newText("dol", 180 ,display.contentHeight-70, native.systemFont, 30)
tekst_dol:setTextColor(240, 8, 0)
function przesun_lewo(event)
pilka_plazowa.x=pilka_plazowa.x-10
end
function przesun_prawo(event)
pilka_plazowa.x=pilka_plazowa.x+10
end
function przesun_gora(event)
pilka_plazowa.y=pilka_plazowa.y-10
end
function przesun_dol(event)
pilka_plazowa.y=pilka_plazowa.y+10
end
lewo:addEventListener("touch", przesun_lewo)
prawo:addEventListener("touch", przesun_prawo)
gora:addEventListener("touch", przesun_gora)
dol:addEventListener("touch", przesun_dol)
Kod jest analogiczny dla każdego z kierunków.
Funkcje przesuń_kierunek różnią się od siebie, że zmieniają wartość innej zmiennej lub też przechdząc z wartości dodatnich w ujemne.
Zanim aplikacja powstała trzeba było przemyśleć jak umieścić przyciski, by znalazły się na dole ekranu i niezależnie od wielkości i rozdzielczości smartfonu czy tabletu, by zawsze były na dole. Dlatego też opierają się na zmiennej display.contentHeight i display.contentWidth. Zobaczmy z resztą jak wyglądają na różnych urządzeniach.
) | Na dość sporym ekranie wyglądać to będzie ta ja obok na zdjęciu. |
) | Dla mnejszego ekranu niestety zaczynają się zlewać środkowe buttony, zatem należałoby nieco dopracować nasz joystick zmniejszając odstępy między pozostałymi przyciskami. Na zdjęciu obok ukazane jest w jaki sposób symulować różne tablety, czy smartfony, by sprawdzić jak będzie wyglądał nasz program na różnych urządzeniach. Zobaczmy jednak, że buttony zawsze powinny być na dole ekranu niezależnie od jego rozdzielczości i rozmiaru. Zachęcam do samodzielnych testów... |
Czytaj dalej: Wirtualny joystick - sterowanie postacią
Warning: include_once(includes/rss_fetch.php) [function.include-once]: failed to open stream: No such file or directory in /home/ekoinst/domains/pcwiedza.pl/public_html/tworzenie-gier/includes/funkcje.php on line 548
Warning: include_once() [function.include]: Failed opening 'includes/rss_fetch.php' for inclusion (include_path='.:/opt/alt/php52/usr/share/pear:/opt/alt/php52/usr/share/php') in /home/ekoinst/domains/pcwiedza.pl/public_html/tworzenie-gier/includes/funkcje.php on line 548