Feb

23

Flash ja trigonometria

Filed Under AS2, Flash & Flex 

FlashFlash on tehokas työkalu, jonka avulla voi kehittää erilaisia sovelluksia aivan yksinkertaisesta todella vaativiin. Pelkillä perusmetodeilla ja aikajananhallinalla saa aikaan jo paljon, mutta nälkä kasvaa nopeasti. Yksi yleisimpiä mielenkiinnonkohteita on Flashpelit (mututuntumaa), mutta into lopahtaa helposti kesken, kun yksinkertaiselta tuntuvan pelin toteutus ei onnistukaan niin helpolla kuin aluksi oli ajatellut. Tällaisen tilanteen saattaa aiheuttaa pelin toiminnan kannalta oleellinen trigonometria. Varsinkin minulle aihealue tuottaa suuria vaikeuksia ja trigonometriset funktiot sin, cos ja tan tuovat koulunpenkiltä mieleen vain synkkiä muistoja matikantunneilta (no ei oikeasti, koulussa oli aina kivaa). Jos nyökyttelit päätäsi lukiessasi edellisiä virkkeitä, jatka lukemista. En aio antaa mitään syväluotaavaa perehdytystä trigonometrian käytöstä Flashissa, en edes osaisi, mutta tämän avulla ehkä myös muut kaltaiseni tavikset saavat jonkunlaisen otteen siitä ohuesta punaisesta langasta, joka on ollut kadoksissa jo vuosia. Yritän kuitenkin tarjoilla sen verran tietoa, että pääset vauhtiin yksinkertaista trigonometriaa vaativien pelien tai sovellusten kanssa.

Ja pyydän heti alkuun anteeksi, jos loukkaan matemaatikkojen mieliä huonolla tai jopa virheellisellä termistöllä. Raportoikaa näistä mahdollisista virheistä niin korjaan asian. Kiitos.

Sisältö

Valmiina? Tästä se lähtee.

Trigonometria
Matematiikan haara, joka käsittelee kolmion sivujen ja kulmien suhteita toisiinsa.

Kulmat

Kulmia käytetään Flashissa kahdella eri tavalla. Niitä käytetään movieclip-objektien pyörittämiseen ja trigonometristen funktioiden apuna.

Positiiviset kulmat mitataan x-axelilta myötäpäivään ja negatiiviset vastapäivään. Kulmaa mitataan asteissa ja se voi saada arvon väliltä 0° – 360°.

Objektin rotaatiolle voidaan antaa myös suurempia arvoja kuin 360°. Kuvitellaan, että haluamaamme objetia on pyöritetty 720°, eli kaksi kertaa ympäri. Sen _rotation-ominaisuus kuitenkin palauttaa arvon 360°.

Huomaa myös, että antamalla objektin _rotation-ominaisuudelle negatiivisen arvon, itse kulma ei ole negatiivinen. Negatiivinen rotaatio vain kertoo kuinka paljon objektia tulee pyöräyttää vastapäivään. Jos siis pyörität objektia -90°, sen kulma on 270°.

Asteiden lisäksi on olemassa myös toinen varsin yleinen tapa mitata kulmia: radiaani. 360° on samakuin 2Π.

Math.PI;

Mihin radiaaneja sitten tarvitaan? Koska kaikki kulmiin liittyvä tehdään Flashissa – yhtä poikkeusta lukuunottamatta – radiaaneilla. Asteita käytetään vain, kun haluat muuttaa objektin rotaatiota stagella. Koska molempien kanssa on välttämätöntä kuitenkin työskennellä, on hyvä voida muuttaa toisinaan asteet radiaaneiksi ja toisinpäin.

muunto

Saattaa olla hyödyllistä luodan omat functiot muunnon toteuttamiseen:

function radToDeg(rad)
{
   var deg= (180/Math.PI)*rad;
   return deg;
}
 
function degToRad(deg)
{
   var rad = (Math.PI/180)*deg;
   return rad;
}

Projektio

Tämä osio antaa sitten konkreettisempaa apua pelien ja sovellusten suunnitteluun.

Katso valmis esimerkki |   Lataa työtiedosto koneellesi

Stagen keskellä oleva objekti osoittaa kokoajan hiiren kursoria kohti. Kun klikkaat hiirellä jonnekin stagella, objekti laukaisee “ammuksen”. Ammus liikkuu kohti paikka, jossa hiiren painallus tapahtui. Jotta tämän kaltainen liike saadaan aikaan Flashissa, ammuksen nopeus täytyy projisoida x- ja y-akselin mukaan.

Tiedämme siis x:n nopeuden (_root._xmouse) ja y:n nopeuden (_root._ymouse). Tämän tiedon avulla voimme selvittää tarvittavan kulman, joka sijoitetaan objektin _rotation-ominaisuuteen. Likaisen työn hoitaa Math.atan2()-metodi. Se palauttaa arvon radiaaneina. Tämä tarkoittaa siis sitä, että lukema täytyy muuttaa asteiksi, ennen kuin voimme käyttää sitä objektin kulman muuttamiseen stagella.

Math.atan2(y,x);

Jos stagella oleva objektimme olisi sijoitettu paikkaan 0,0 eli origoon, koodi näyttäisi seuraavalta:

Math.atan2(_ymouse,_xmouse);

Olettaen siis, että haluamme objektin osoittavan hiiren suuntaan. Usein (jos koskaan) emme kuitenkaan sijoita objekteja luodun esityksen vasempaan yläreunaan vaan muuaalle esitykseen ja tällaisessa tapauksessa koodiin joudutaan tekemään pieni muutos. Mutta vain pieni.

Math.atan2(_ymouse-objekti._y,_xmouse-objekti._x);

Näin saamme laskettua oikean kulman hiiren ja objektin suhteen. Alla esimerkki toimivasta koodista.

m = stagella olevan objektin esiintymänimi

_root.onMouseMove = function()
{
	m._rotation = getDeg(m);
	updateAfterEvent();
}
 
function getDeg(obj)
{
	var ang = Math.atan2(_ymouse-obj._y,_xmouse-obj._x) * 180/Math.PI;
	return ang;
}

Ammuksen laukaisuun ja liikuttamiseen tarvitaan seuraavanlainen koodi:
d = objektin syvyys

_root.onMouseDown = function()
{
	var mc = _root.attachMovie("n","n"+d,d);
	mc._x = m._x;
	mc._y = m._y;
	mc._rotation = getDeg(m);
	arr.push(mc);
	d++;
}
 
_root.onEnterFrame = function()
{
	for(var i=0;i

Käytin tässä esimerkissä attachMovie-metodia lisäämään objektin esiintymän stagelle kuvaamaan ammusta. Laukaistut ammukset tallennetaan taulukkoon, joka käydään jokaisella framella läpi ja tehdään tarvittavat siirrot. Ammuksen liikkumisen kannalta olennaien osuus on seuraava:

var rot = arr[i]._rotation * PI/180;
var sx = Math.cos(rot)*speed;
var sy = Math.sin(rot)*speed;
arr[i]._x += sx;
arr[i]._y += sy;

Muuttujaan “rot” tallennetaan tarkistelun kohteena olevan ammuksen kulma, joka muutetaan radiaaneiksi Math.cos()-metodia varten. Math.cos() palauttaa objektin x-nopeuden ja Math.sin() vastaavasti y-nopeuden. Näiden funktioiden palauttamat arvot kerrotaan sitten vielä halutulla nopeuskertoimella, jonka jälkeen arvot sijoitetaan objektiin.

Linkit

Kuten jo alkuun heti mainitsin, pyrin kokoamaan tälle sivulle vain tarvittavan tiedon alkuun pääsemiseksi. Kuten varmaan huomasit mm. pythagoraan lause ja trigonometriset funktiot jäivät kokonaan pois tai ainakin vähälle huomiolle. Tämä ei kuitenkaan tarkoita sitä, etteikö niitä voisi hyödyntää myös Flash- sovelluksissa. Jos haluat opiskella lisää trigonometriaa, netistä löytyy paljon luetaavaa aiheeseen liittyen.

Share

Comments

Leave a comment