Ta strona stosuje pliki cookies. Poczytaj co to jest w polityka cookies



Tworzenie gier 2D i 3D
Animacja 2d
Grafika 3D
Tworzenie muzyki

Kącik początkującego

Gimp 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-70native.systemFont30
)

tekst_prawo
:setTextColor(24080)

function przesun_prawo(event)
   pilka_plazowa.x=pilka_plazowa.x+
10 
end

prawo
:addEventListener("touch",  przesun_prawo)

corona_sdk_49.jpg

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-70native.systemFont30
)
tekst_lewo:setTextColor(24080)

local prawo=display.newRect(display.contentWidth-100 ,display.contentHeight-100,100,100)
local tekst_prawo=display.newText("prawo"display.contentWidth-90 ,display.contentHeight-70native.systemFont30
)
tekst_prawo:setTextColor(24080
)

local gora=display.newRect(display.contentWidth-250,display.contentHeight-100,100,100)
local tekst_gora=display.newText("gora"display.contentWidth-230 ,display.contentHeight-70native.systemFont30
)
tekst_gora:setTextColor(24080
)

local dol=display.newRect(150,display.contentHeight-100,100,100)
local tekst_dol=display.newText("dol"180 ,display.contentHeight-70native.systemFont30
)
tekst_dol:setTextColor(24080
)

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.

corona_sdk_50.jpg

Na dość sporym ekranie wyglądać to będzie ta ja obok na zdjęciu.

corona_sdk_51.jpg

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

Różne

copyright © Pcwiedza.pl