Marcin Otorowski - strona domowa

Game Maker 7 – proste narzędzie, o dużych możliwościach

Uwaga! 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).

Realizacja

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) 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

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 :)

Efekt 3D

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);

Zadanie domowe

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ą :)

Disclaimer

Każdy kto użyje porad/gotowego kodu z tego kursu jest zobowiązany do NIE UMIESZCZANIA mnie w creditsach. Artykuł nie jest po to, by dać coś gotowego i być w napisach, tylko po to, by rozwinąć kreatywne myślenie i wykorzystanie wiedzy w procesie tworzenia gier. Jeśli mi się to udało – będę miał swoją nagrodę.

Informacje o publikacji

• autor: Marcin Otorowski
• data: październik 2006