Praktyczne wykorzystanie funkcji trygonometrycznych w GM
morty
Artykuł ten porusza zagadnienia matematyczne. Jego celem oprócz pokazania co można osiągnąć jest też wyjaśnienie pewnych kwestii matematycznych, nie przerażajcie się więc proszę jego długością, gdyż w rzeczywistości nic w nim trudnego nie ma. W artykule tym w użyciu jest kod GML, dobrze jest wpierw zapoznać się z jego składnią :)
Spis treści
Wstęp
Dzisiaj nauczymy się PRAKTYCZNEGO wykorzystywania funkcji trygonometrycznych w GM. Spróbujemy stworzyć kręcącą się strzałkę (przypominającą strzałkę kompasu).
Stwórzmy obiekt o nazwie o_arrow, w evencie CREATE wstawmy blok kodu i zdefinujmy w nim zmienną kat oraz ustawmy jej wartość na 0:
kat=0
Następnie dodajmy event STEP i w kodzie napiszmy
kat+=1
Co jeden step wartość kąt zostanie zwiększona o jeden. Uzyskamy w ten sposób efekt obrotu strzałki. (domyślnie jest 30 stepów na sekundę, ustawienie to można zmienić w room settings)
Wykonanie
Teraz pozornie najtrudniejsza część - jak mając dany kąt, o jaki obrócona ma być strzałka, narysować ją? Dla potrzeby zadania przyjmijmy następujący jej wygląd:
|
| Poglądowy rysunek strzałki na potrzeby artykułu |
Załóżmy, że pozycją zerową jest położenie w prawo. Nietrudno zauważyć, że trzy wierzchołki leżą na okręgu o promieniu r1, jeden z kolei jest bliżej środka, na okręgu r2. Do określenia ruchu po okręgu wykorzystamy funkcje trygonometryczne. Nie zadając się zbytnio w szczegóły, dla górnego wierzchołka trójkąta (w naszym ustawieniu jest on po prawej stronie) koordynaty będą wyglądały następująco:
x = x_śr + promień * cos ( kat ) y = y_śr - promień * sin ( kat )
Gwoli wyjaśnienia, ten zapis nie jest poprawnym zapisem języka GML. Do niego dojdziemy za chwilę, teraz pozwólcie wyjaśnić co i dlaczego:
Przyjmijmy, że x_śr i y_śr to współrzędne środka naszej strzałki. Poruszają się one po okręgu o pewnym promieniu. W tym miejscu muszę odesłać do podręcznika matematyki do liceum, z którego dowiecie się, że wykresy funkcji trygonometrycznych postają poprzez narysowanie koła w ukł. współrzędnych, i wykonanie kilku pomocniczych odcinków. Można więc operując na funkcjach z powrotem odtworzyć orbitę po którym będzie poruszał się nasz punkt, a która będzie kołem. W zmiennej x dodajemy parametr promień * cos (kąt), natomiast w zmiennej y odejmujemy promień * sin (kąt), by strzałka obracała się lewostronnie (jeśli w y dodamy wartość promień * sin to strzałka będzie się poruszać prawostronnie.
Mała uwaga - w GM funkcje cos() i sin() jako argument muszą przyjąć wartość kąta w RADIANACH. Musimy więc zamienić nasze kąty na radiany, można to zrobić w dwojaki sposób:
1) używając funkcji degtorad()
2) mnożąc wartość kąta w stopniach razy pi i dzielić przez 180
Dla łatwiejszego wyobrażenia powiem, że kątowi zero stopni odpowiada miara 0 PI rad, a kątowi 360 2 PI rad.
Zamiast x_śr i y_śr postawmy sobie x i y - czyli współrzędne obiektu o_arrow.
Stwórzmy teraz event DRAW, i wklejmy taki kawałek kodu:
var x1,y1,x2,y2,x3,y3,x4,y4,r;
r=100;
x1=x+r*2*cos(degtorad(kat)); y1=y-r*sin(degtorad(kat));
x2=x+r*2*cos(degtorad(kat+135)); y2=y-r*sin(degtorad(kat+135));
x3=x+0.2*r*2*cos(degtorad(kat+180)); y3=y-0.2*r*sin(degtorad(kat+180));
x4=x+r*2*cos(degtorad(kat+225)); y4=y-r*sin(degtorad(kat+225));
draw_set_color(c_gray); draw_ellipse(x-2*r,y-r,x+2*r,y+r,0);
draw_set_color(c_white); draw_triangle(x1,y1,x2,y2,x3,y3,0); draw_triangle(x3,y3,x4,y4,x1,y1,0);
Słowo wyjaśnienia. Czemu dodajemy wartości 135, 180 i 225 do zmiennej kat w definiowaniu zmiennych? To proste, wyjaśniłem to na rysunku na początku artykułu - te punkty są pod takimi właśnie kątami w pozycji początkowej (0 stopni).
Przedrostek var przed nazwami zmiennych oznacza, że są one tymczasowe i usuwane po zakończeniu danego kawałka kodu - potrzebujemy ich bowiem tylko na moment kiedy rysujemy figurki.
Przy definiowaniu x3 i y3 dodalem mnożnik 0.2 po to, by punkt ten poruszał się po 1/5 normalnej oribty (tak jak na którymś obrazku powyżej - promień r2 ma być 20).
Potem zostało do narysowania kółko (draw_circle, o środku w punktach x i y, promieniu r i wypełnione kolorem c_gray - szarym). Następnie dwa razy rysujemy trójkąt - pierwsza funkcja odpowiada ze jedną, druga za drugą połówkę.
Ostatnią rzeczą którą trzeba zrobić jest umieszczenie obiektu o_arrow w stworzonym roomie - najlepiej na środku - i przetestowanie gry :)
Ulepszenie
Mamy więc naszą strzałkę - spróbujmy teraz zmienić kilka parametrów by osiągnąć efekt pseudo-3d. Zmień kod w DRAW na:
var x1,y1,x2,y2,x3,y3,x4,y4,r;
r=100;
x1=x+r*2*cos(degtorad(kat)); // !! y1=y-r*sin(degtorad(kat));
x2=x+r*2*cos(degtorad(kat+135)); // !! y2=y-r*sin(degtorad(kat+135));
x3=x+0.2*r*2*cos(degtorad(kat+180)); // !! y3=y-0.2*r*sin(degtorad(kat+180));
x4=x+r*2*cos(degtorad(kat+225)); // !! y4=y-r*sin(degtorad(kat+225));
draw_set_color(c_gray); draw_ellipse(x-2*r,y-r,x+2*r,y+r,0); // !!
draw_set_color(c_white); draw_triangle(x1,y1,x2,y2,x3,y3,0); draw_triangle(x3,y3,x4,y4,x1,y1,0);
Wykrzyknikami zaznaczyłem zmiany w stosunku do poprzedniej wersji. Polecam samodzielną analizę kodu celem nauki, oraz uruchomienie takiego przykładu :) Funkcje trygonometryczne pomagają w osiąganiu rzeczy, które bez nich trzeba by osiągać za pomocą dużej ilości klatek spritów. Mam nadzieję, że tym artykułem przekonałem, że nie takie f. trygonometryczne straszne jak je malują :)
