Praktyczne wykorzystanie funkcji trygonometrycznych w GM

Klikipedia - klikowa encyklopedia
Skocz do: nawigacji, wyszukiwarki
Autor.jpg
Autorem tego artykułu jest
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ą :)

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:

strzalka.png
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ą :)

Źródło

informacje na temat funkcji, użytych w artykule: cos(), sin(), draw_set_color(), draw_ellipse(), draw_triangle(), degtorad()