Ensin piirsin perusilmeet pentuvaiheille:

ImageImage

Sitten hahmottelin perusilmeet keskivaiheelle:

Screen Shot 2013-10-29 at 11.42.28 AM

Piirisn ne myös, mutta värien kanssa on hieman ongelmia…

keskitiikeri2

Meow! Luonnostelmasta valmiiksi kuvaksi:

meow

Seuraavaksi aioin laittaa hahmon liikkumaan, kun pääsivua klikataan. (Eihän mikään eläin nyt juokse pysyen samassa asenossa!) Tein aluksi vain yhdet kuvat (ei siis vielä animaatiota) ja hahmottelin koodia aluksi paperille:

IMG_0515

Tavoitteena oli siis määritellä, mihin suuntaan hahmo liikkuu. Missä on klikattu kohta suhteessa hahmon tämänhetkiseen paikkaan. Jaoin ympyrän 8 eri osaan, joista määrittelisin kulman alpha (eli juoksusuunta nykyisestä paikasta klikattuun paikkaan) ja tämän kautta hakisin indeksiarvon, jonka mukaan sitten valitsisin kuvan.

Lisäsin tällaisen pätkän koodiin:

$('#paasivu').click(function(e){
var yErotus = e.clientY-($("#hahmo").offset.top()+$("#hahmo").height()/2);
var xErotus = e.clientX-($("#hahmo").offset.left()+$("#hahmo").width()/2);

var kulmaRad = Math.atan2(yErotus, xErotus);
var kulma = 180*kulmaRad/Math.PI;

if (kulma < 0) {
kulma = kulma + 360;
}
var indeksi = Math.Floor((kulma + 22.5)/45);

if (indeksi == 8) {
indeksi = 0;
}
$(“#hahmo”).animate({
top : e.clientY – $(“#hahmo”).height()/2,
left : e.clientX – $(“#hahmo”).width()/2
}, 1000, function() {});

$(“#hahmo”).attr(“src”, Lemmikki.image);
});

Ensin piti siis hakea kulma. Kulman α :nhan saa lausekkeella: (y2-y1)/(x2-x1) = tan α
Tämän vuoksi laskin ensin y:iden erotuksen (eli Δy ) ja x:ien ( Δx ) erotuksen lausekkeilla
var yErotus = e.clientY-($(“#hahmo”).offset.top()+$(“#hahmo”).height()/2);

var xErotus = e.clientX-($(“#hahmo”).offset.left()+$(“#hahmo”).width()/2);

Kohta, josta käyttäjä klikkaa, on siis piste (y2, x2) ja tästä miinustetaan hahmon tämänhetkinen paikka, joka saadaan offset-funktiolla ja hahmon puolikkaalla pituudella/leveydellä. (tämä siksi, että viitattaisi nimenomaan hahmon keskikohtaan, ei vasempaan ylänurkkaan).

Kun deltat on haettu, määritellään kulma. Käytin Javascriptin Math.atan2-funktiota ( http://www.w3schools.com/jsref/jsref_atan2.asp ), joka palautti kulman siis radiaaneina. Saadakseni siitä asteluvun, kerroin sen 180* ja jaoin piillä.

var kulmaRad = Math.atan2(yErotus, xErotus);
var kulma = 180*kulmaRad/Math.PI;

Tällä tavalla kulma palauttaa luvun väliltä -180 ja 180. Halusin kuitenkin käsitellä vain positiivisia lukuja, joten lisäsin if-lauseen, jossa negatiivisille arvoille lisätään aina 360. Nyt käsiteltävät arvot ovat 0-359.

Funktio atan2 on kätevä (“fiksu”), sillä sille syötetään parametreiksi y:n erotus ja x:n erotus. Näiden perusteella se osaa päätellä, millä neljänneksellä kulma on. Esim. jos sekä y että x ovat negatiiviset, kulma on vasempaan alanurkkaan päin. Tavallinen atan-funktio saa vain yhden parametrin eli y:n erotus jaettuna x:n erotuksella. Näinollen se antaa tulokseksi kulman välillä -90 ja 90 astetta, kun taas atan2 osaa erottaa, ovatko luvut eri- vai samanmerkkiset. Arvo vaihtelee siis välillä -180 ja 180.

Seuraavaksi halusin määritellä indeksin, jossa on 8 lukua. Minullahan oli ympyrä (piirros yläpuolella) jaettu 8 eri osaan ja koska 360/8 = 45, jokainen ympyrän sarake on 45 astetta. Ongelmana on kuitenkin, että sarakkeeni eivät mene aivan tasaisesti niin, että 45 asteen jälkeen vaihtuiisi indeksi. esim. 15° ja 355° tulisi kuulua samaan indeksiin. Kulma vaihtuu pikemminkin kohdissa 22,5° ja 337,5°. Tämän vuoksi lisäsin kulmalle arvon 22,5 ja vasta sitten jaoin sen 45:llä.

var indeksi = Math.Floor((kulma + 22.5)/45);

if (indeksi == 8) {
indeksi = 0;
}

Loin siis muuttujan “indeksi”, joka antaisi arvon väliltä 0-7. Käytin Math.Floor-funktiota ( http://www.w3schools.com/jsref/jsref_floor.asp ), jotta arvo olisi kokonaisluku. Koska olin lisännyt kulmalle arvoa 22,5, kulma saattaa mennä yli 360° ja näinollen antaa indeksiluvuksi 8. Mikäli näin tapahtuu, muutan if-lauseessa tämän tapauksen indeksiarvoksi 0.

Tämän jälkeen lisäsin switch-caset perustuen indeksin arvoon:

switch(indeksi) {
case 1: $(“#hahmo”).attr(“src”, “p_juo_oik_ylaviisto1.png”); break;
case 2: $(“#hahmo”).attr(“src”, “p_juoksu_eteen1.png)”); break;
case 3: $(“#hahmo”).attr(“src”, “p_juo_vas_alaviisto1.png”); break;
case 4: $(“#hahmo”).attr(“src”, “p_juo_vas_sivu1.png”); break;
case 5: $(“#hahmo”).attr(“src”, “p_juo_vas_ylaviisto1.png”); break;
case 6: $(“#hahmo”).attr(“src”, “p_juoksu_taakse1.png”); break;
case 7: $(“#hahmo”).attr(“src”, “p_juo_oik_ylaviisto1.png”); break;
case 0: $(“#hahmo”).attr(“src”, “p_juo_oik_sivu1.png”); break;
}

Koodi ei toiminut heti, joten testauksen jälkeen muutama korjaus:

1 )

var yErotus = e.clientY-($(“#hahmo”).offset().top+$(“#hahmo”).height()/2);
var xErotus = e.clientX-($(“#hahmo”).offset().left+$(“#hahmo”).width()/2);

on oikea muoto, EI SIIS SULKUJA top:n ja left:n jälkeen! Sulut offset-funktion jälkeen!!!!!!

2 )
Math.floor kirjoitetaan pienellä. 🙂

Advertisements