Päivitetty versio julkaistu!!

Päivitetty versio Virtual Pet Ton Tigreausta on nyt julkaistu ja kaikki virheet korjattu! Uusi peli on ladattavissa Google Playsta osoitteesta:


Valmis versio: Virtual Pet Ton Tigreau

Lapsille ja etenkin lapsenmielisille suunnattu mobiililemmikki, jota on tarkoitus kasvattaa vahvemmaksi ja onnellisemmaksi. Mitä enemmän pelaat sen kanssa, sitä nopeammin se kasvaa!

Pelissä on mahdollista pelata kolmea minipeliä, joiden avulla keräät pisteitä lemmikillesi. Ensimmäisessä pelissä on tavoitteena kerätä kaikki ruudun poikki juoksevat hiiret siirtämällä pelihahmoa täppäyksen avulla. Toisessa pelissä täytyy päästä veden pinnalle tähtäämällä kaloja (kosketus) hyppyalustaksi. Kolmas peli on perinteinen labyrintti, jossa kuuluu ehtiä napata hiiri ennen ajan loppumista.

Tar-paketti ladattavissa: http://myy.haaga-helia.fi/~a1102086/Tontigreau.tar.gz

APK-paketti ladattavissa: http://myy.haaga-helia.fi/~a1102086/VirtualPet_TonTigreau.apk

 

Kurssi Mobiilituotekehitys on myös nyt tullut päätökseensä. Haluan kiittää kaikkia osallistujia, kurssin vetäjää sekä blogin seuraajia. Kurssi oli todella palkitseva, opettavainen ja kaikin puolin mielenkiintoinen ja suositeltava kokemus.

Advertisements

VIRTUAALILEMMIKKI JULKAISTU!

https://play.google.com/store/apps/details?id=adeliinamobiilituotekehitys.wordpress.com&hl=en

Virtuaalilemmikkini on nyt siis julkaistu Google Playssa ja tänään sain myös palautetta ensimmäisiltä testaajilta. Muutamia ongelmia löytyi, ja versioon 2 olisi hyvä tehdä seuraavat muutokset:

-suurentaa minipelien nimipainikkeita

-softa kaatuu, kun puhelinta kääntää –> tämä tulisi korjata

-peli1:n alussa tiikeriä ei jostain syystä näy!! Käyttäjä ei tajua, mitä pelissä kuuluu tehdä. Tämä ehdottomasti muutettava.

-peleissä voisi olla “keskeytä”-napit

– peli2:n ohje ei näy kokonaan

– Click-funktio on Hidas mobiililla! Sain suosituksen käyttää mielummin jqueryn TouchStartia. Pelit ovat hieman kömpelöitä tuolla Clickillä.

Aion tehdä nämä parannukset mahdollisimman pian ja julkaista sen jälkeen pelin päivitetyn version Google Playssa.

Kurssi loppusuoralla ja beta-version julkaisu

Kurssi alkaa olemaan loppusuoralla ja projektia pitäisi viedä kovaa vauhtia eteenpäin.

Viime päivityksestä on aikaa, mutta olen sen jälkeen saanut beta-version valmiiksi eli tehnyt mm. pääsivun toimivaksi, mahdollisuuden jatkaa talletettua peliä ja kaksi ensimmäistä peliä toimiviksi.

Kurssin http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013 loppuprojektityö:

Beta-versio: Virtual Pet Ton Tigreau

Lapsille ja etenkin lapsenmielisille suunnattu mobiililemmikki, jota on tarkoitus kasvattaa vahvemmaksi ja onnellisemmaksi. Mitä enemmän pelaat sen kanssa, sitä nopeammin se kasvaa!

Pelin beta-versiossa on mahdollista pelata kahta minipeliä, joiden avulla keräät pisteitä lemmikillesi. Ensimmäisessä pelissä on tavoitteena kerätä kaikki ruudun poikki juoksevat hiiret siirtämällä pelihahmoa klikkauksen avulla. Toisessa pelissä täytyy päästä veden pinnalle tähtäämällä kaloja (klikkaus) hyppyalustaksi.

Pääsivu siis tämännäköinen:

Screen Shot 2013-11-27 at 9.08.55 PM

Ruudun mistä tahansa kohdasta voi klikata. Tällöin hahmo juoksee klikattuun kohtaan.

Peli1 on tässä:

Screen Shot 2013-11-28 at 8.08.57 PM

Klikkaamalla alustaa, hahmo siirtyy x-akselin suuntaisesti samalle tasolle.

Peli2 on tässä:

Screen Shot 2013-11-28 at 8.08.37 PM

Kaloja klikkaamalla ne kiihdyttävät. Yritä tehdä kiihdytys oikea-aikaisesti, jotta kala ehtii juuri hahmosi kohdalle.

Lähdekoodit ladattavissa osoitteesta:

http://myy.haaga-helia.fi/~a1102086/

tiedosto: Mobiililemmikki.tar.gz

Ja APK-tiedosto ladattavissa samasta osoitteesta: Tiikerilemmikki.apk

Piirrustuksia ja matemaattisia laskuja

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ä. 🙂

Projekti hyvin käyntiin

Olen nyt saanut koodattua (selaimeen) projektini hyvin alkuun. Tällä hetkellä projektin toiminnallisuus alkaa hahmottua: Alussa valitaan hahmo, jota aletaan kouluttaa. Tämän jälkeen avautuu pääsivu, jossa valittavana neljä peliä. Pelin voittaessa hahmo saa pisteitä, jota kautta sen taso nousee ja mieli paranee. Koodi on tällaisessa vaiheessa nyt:

-olen koodannut kaikki “sivut” (etusivu, pääsivu, 4 pelisivua) samaan index.html:ään, mutta jokaisen omaksi “div”ikseen. Sain idean ostmastani kirjasta Building iPhone Apps with HTML, CSS, and JavaScrpit ( http://www.amazon.com/Building-iPhone-Apps-HTML-JavaScript/dp/0596805780 ), kirjoittanu Jonathan Stark. Loin siis divin jokaiselle “sivulle”, mutta tein JavaScript-koodiin funktion, joka piilottaa aluksi kaikki sivut, mutta näyttää sen jälkeen ainoastaan valitun sivun(divin). Koin tämän keinon ÄÄRIMMÄISEN hyväksi, sillä se helpotti työtaakkaani huomattavasti.

Koodit siis tässä:

index.html:

ImageImage

 

Koodissa ei erityisemmin mitään ihmeellistä. Kuten sanoin, loin divit jokaiselle sivulle. Pelisivuissa ei toistaiseksi ole peliä, mutta tein tunnistimen, onko peli “voitettu” vai “hävitty” eli submit-buttonit. Javascriptissä määritellään, että klikattua toista niistä, pääsivu aukeaa taas.
Lisäksi tein listat, joihin toiseen tulee muuttuvat perustiedot ja toiseen “linkit” peleihin.

Tässä JavaScript-puoli:
ImageImageImage

Alussa tosiaan määrittelen “olion” eli luokan (kerrottu edellisessä postauksessa), jolle annoin muutaman lisäarvon, mutta tämän alle lisäsin sille uuden funktion. Määrittelin siis metodin (Javascriptissä prototype), jota kutsuttaessa pisteet lisääntyvät ja myös tarvittaessa (eli kun pisteitä yli 10) taso ja mieliala lisääntyvät. Mielialaan eli moodiin piti laittaa, että se lisääntyy vain taulukon “Moodit” arvojen verran, koska ilman tätä sääntöä, mood saisi arvon, jota ei ole. Taulukon viimeinen arvo jää siis pysyväksi, vaikka level nousisi miten korkealle.

Seuraavaksi määrittelin siis taulukon mielialoille ja annoin sille arvot. Määrittelin myös myöhemmin käytettävän Lemmikki-muuttujan sekä Hahmot-taulukon, jolle annoin nyt ensimmäiseksi ainoastaan tiikerimallisia hahmoja ja niitä kaksi (myöhemmin vaihdan toisen toki joksikin muuksi).

Sivun lopussa on määritelty funktio siirry, jolle parametriksi “sivu”.

function siirry(sivu) {
$(“.sivu”).hide();
$(“#” + sivu).show();
alusta(sivu);
}

Mainitsin tästä aiemmin ja  mielestäni nerokas tapa hoitaa sivulta toiselle liikkuminen. Ensiksi siis piilotetaan hide-funktiolla kaikki sivut ja tämän jälkeen avataan sivu, joka on annettu funktiota kutsuttaessa. Esimerkiksi 

siirry(“paasivu”);

siirtyy nimensämukaisesti pääsivulle. siirry-funktion lopussa ajetaan vielä koodin lopusta löytyvä funktio “alusta”, jonka parametrinä myös sivu. Sen sisälle määrittelen tarvittavat alustukset. Tällä hetkellä niitä on ainoastaan pääsivulla, mutta myöhemmin jokaiselle peli-sivulle tulee omat alustuksensa.

 

DocumentReadyssa puolestaan ensiksi piilotetaan kaikki sivut ja avataan aloitussivu, juuri kuten siirry-funktiossa. Tämän jälkeen luodaan div jokaiselle hahmolle (kerrottu edellisessä postauksessa) ja määrittelin myös, että jos hahmo-luokkaan kuuluvan tai jonkun #pelin (index.html:ssä listan osa) päälle laittaa hiiren, se muuttuu kursoriksi. Tästä ei ole myöhemmin hyötyä, kun siirrän sovelluksen kännykkään, mutta tässä vaiheessa helpottaa testausta ja on miellyttävämpi.

$(‘.hahmo’).click(function(){
$(“.nimi”).hide();
$(“.laheta”).hide();
$(“.tausta”).removeClass(‘taustaAktiivi’);
$(this).parent(‘div’).addClass(‘taustaAktiivi’);
$(this).siblings(‘.laheta’).show();
$(this).next(‘.nimi’).show();
$(this).siblings(‘.laheta’).click(function() {
$(“.nimi”).hide();
$(“.laheta”).hide();
var index = Number($(this).attr(‘title’));
Hahmot[index].name = $(this).siblings(‘.nimi’).val();
Lemmikki = Hahmot[index];
siirry(“paasivu”);
});
});

Tämä pätkä koodia liittyy aloitussivuun eli tein saman tempuin kuin aiemminkin. Aluksi piilotan kaikki nimi-boxit, mutta myöhemmin kutsun vain klikattua nimeä (this) ja se tulee näkyviin, kuten myös lähetä-nappi ko. kohtaan. Taustoille määrittelin css:ssä vaihtoehdon taustaAktiivi eli ensin kaikilta poistetaan se ja tämän jälkeen lisätään klikattulle kuvalle. Selventääkseni tapahtunutta, tässä pari kuvaa aloitussivusta:

ImageImageImage

Klikatun kuvan tausta siis aktivoituu ja sille ilmestyy nimi-input-boxi ja lähetä-nappula.

Kun lähetä-nappulaa on klikattu, Hahmot-taulukon “index.” arvo saa nimi-arvokseen annetun nimen ja muuttuja Lemmikki saa Hahmot-taulukon “index”-kohdan arvot. Tämä helpottaa jatkossa niin, että voidaan viitata ainoastaan muuttujaan Lemmikki, eikä tarvitse viitata Hahmot-taulukon tiettyyn arvoon. Tämän jälkeen funktiossa siirrytään pääsivulle.

$(‘#paasivu’).click(function(e){
$(“#hahmo”).animate({
top : e.clientY – $(“#hahmo”).height()/2,
left : e.clientX – $(“#hahmo”).width()/2
}, 1000, function() {});
});

 

Pääsivulla, jos klikkaat johonkin kohtaan, hahmo siirtyy sinne. Tämä oli helppo tehdä jqueryn “animate”-funktiolla. Vähensin top-arvosta height/2 ja left-arvosta width/2 eli puolet pituudesta ja leveydestä, jotta hahmo liikkuisi tarkalleen klikattuun paikkaan.

$(‘.peli’).click(function(){
if ($(this).attr(“title”)==”voitto”)
{ Lemmikki.lisaaPiste(); }
siirry(“paasivu”);
});

 

Toistaiseksi peli-sivuissa ei tapahdu muuta kuin lisätään pisteitä, mikäli olet klikannut “voitit”-nappulaa. Kaikki pelisivut ovat toistaiseksi samanlaiset:
Image

 

$(‘#pelit li’).click(function(){
switch($(this).attr(“id”)) {
case “peli1”: siirry(“ekapeli”); break;
case “peli2”: siirry(“tokapeli”); break;
case “peli3”: siirry(“kolmaspeli”); break;
case “peli4”: siirry(“neljaspeli”); break;
}
});

Tässä määritelty siis, että kun klikkaa jotain listan “pelit”-arvoa, se siirtyy valitulle pelisivulle.

 

Tässä vielä kuva pääsivusta:

 

Image

Projektin aloitus

Tänään aloittelin loppuprojektin, mobiililemmikin, koodaamista. Päätin luoda ensiksi etusivun, eli ‘valitse hahmo’-sivun, jonka koodaaminen osoittautuikin yllättävän hankalaksi – päätin nimittäin luoda hahmot eli lemmikit samantyyppisesti kuin Java-ohjelmoinnissa luodaan oliot, jotta uusien hahmojen lisääminen myöhemmin olisi mahdollisimman yksinkertaista. Loin siis kolme tiedostoa, index.html, lemmikki.js ja lemmikki.css. HTML-tiedostossa ei varsinaisesti ole mitään uutta ja css-määrittelykin alkaa olla jo aikalailla tuttua. Siksi käyn tässä läpi vain JavaScript-koodin (tähänasti tehdyn): Koodi tässä:

Image

Apunani käytin seuraavaa sivustoa: http://www.phpied.com/3-ways-to-define-a-javascript-class/

function Hahmo(nimi, kuva) {
this.name = nimi;
this.image = kuva;
}

Ensimmäiseksi loin siis funktion Hahmo, jolle annoin sisäänmenoparametreiksi nimen ja kuvan. Tämä tarkoittaa siis, että kun luon myöhemmin uuden Hahmon, voin syöttää sille arvot, joita se sitten käyttää.

var Tiikeri = new Hahmo(” “, “valintatikru.png”);

Seuraavaksi loinkin ensimmäisen hahmon, lemmikin, Tiikerin. Annoin muuttujan nimeksi Tiikeri ja sen tyypiksi Hahmo, sisälle syötin parametrit ” ” ja “valintatikru.png” eli kuvan osoite. Nimi on siis toistaiseksi tyhjänä, mutta Tiikerin kuvana näkyy nyt valitsemani piirros.

var Hahmot = new Array(Tiikeri);

Seuraavaksi loin listan ( http://www.w3schools.com/js/js_obj_array.asp ), jonne syötin toistaiseksi vain yhden jäsenen.

for (var i=0; i < Hahmot.length; i++) {
var html = “<div class=’tausta’>”;
html += “<img class=’hahmo’ src='” + Hahmot[i].image + “‘ />”;
html += “<input type=’text’ class=’nimi’ value=” />”;
html += “<input type=’submit’ class =’laheta’ value=’Name it!’ title='” + i + “‘/>”;
html += “</div>”;
$(‘#content’).append(html);
}

Sitten lisäsin documentReadyn sisälle for-loopin, joka toi jokaisen hahmon näkyviin ja loi divit niiden ympärille. Kävin siis läpi taulukon jokaisen arvon ja lisäsin elementit “html”-muuttujaan.  Lopussa append-funktiolla lisäsin html-muuttujan sisällön index-html divin “content”-sisälle. Loin kaikille class-luokat, jotta voin myöhemmin viitata aina juuri haluamaani kohtaan (this)-rakenteella.

Tällä tavalla tehty hahmonluontirakenne mahdollistaa jatkossa uusien hahmojen luonnin ja käyttöönoton pelkästään lisäämällä uuden muuttujan, joka määritellään Hahmoksi ja lisätään Hahmot-listaan. Näinollen ei tarvitse koodata jokaisen hahmon diviä ja inputteja ja funktioita ja muita erikseen.

Sitten lisäsin

$(“.hahmo”).hover(
function() { $(this).css(‘cursor’,’pointer’); },
function() { $(this).css(‘cursor’,’default’); }
);

Eli kun johonkin hahmo-luokkaan kuuluvan kuvan päälle siirretään hiiri, kursori muuttuu pointer-tyyppiseksi.

$(‘.hahmo’).click(function(){
$(this).siblings(‘.laheta’).show();
$(this).next(‘.nimi’).show();
$(this).siblings(‘.laheta’).click(function() {
$(“.nimi”).hide();
$(“.laheta”).hide();
var index = $(this).attr(‘title’);
Hahmot[i].nimi = $(this).siblings(‘nimi’).val();

});
});

Hahmo-luokkaan kuuluvaa kuvaa klikattaessa, sen kyseisen hahmon lähetä-nappula ja input-boxi ilmestyvät. Kun klikkaa sitä tiettyä “lähetä”-nappulaa, nimi- ja lähetä- luokkiin kuuluvat kentät häviävät, index-muuttuja saa arvon ‘title’, joka on määritelty ylempänä kohdassa lähetä. Se on siis Hahmot-taulukon i:des arvo. Taulukon i:des hahmo saa myös nimi-arvokseen tämän annetun nimen.

Toistaiseksi olen luonut siis vasta yhden lemmikin, Tiikerin, joten selaimessa  näytti tältä:

Screen Shot 2013-10-23 at 10.35.32 AMScreen Shot 2013-10-23 at 10.35.34 AM

Projekti

Nyt kun projekti-idea on julkaistu, on aika tarttua itse työntekoon. Aloitin kevyesti hahmoittelemalla ensimmäisen lemmikkihahmon, tässä tapauksessa tiikerin. Piirsin sille nyt 3 eri tasoa (vauva – pentu – täysikasvuinen), mutta mietin vielä, olisiko neljännen lisääminen tarpeellista. Kuva tässä:

Image

Tämän kerran läksy kuului näin (http://terokarvinen.com/2013/aikataulu-–-mobiilituotekehitys-bus4tn008-3-syksylla-2013) :

– Kirjoita “Hei ominaisuus” esimerkit kaikista projektisi tarvitsemista rajapinnoista ja työkaluista.
– Täsmennä suunnitelmaa:
– Kirjoita lyhyt kuvaus, kuinka kuvitteellinen henkilö kohderyhmästäsi löytää ohjelmasi, opettelee käyttämään sitä, käyttää sitä, kertoo siitä jollekin.
– Tee MockUpit (valeruutukaappaukset) ohjelmastasi
– Tee yksilöity kilpailijakartoitus Google Playsta (vasta, kun mockupit on tehty)

Kuvitteellinen henkilö kohderyhmästäni löytää pelin:
“12-vuotias Simo-Elmeri selailee Google Playta. Hän on jo pitkään unelmoinut lemmikistä, mutta sellaisen hankkiminen ei ole mahdollista allergioiden tmv vuoksi. Niinpä hän keksii haluavansa virtuaalisen lemminkin. Google Play:hin hän laittaa hakusanaksi “pet”, kuten englannin tunnilla on opetettu, ja hänelle avautuu ehdotuksia useammasta virtuaalisesta lemmikkisovelluksesta. Erilaisia lemmikkipelejä näyttää siis olevan, mutta Simo-Elmerin huomion kiinnittää heti erinomaiset arvostelupisteet saanut Aden SuperMobiililemmikit (nimi vaihdettavissa 😉 ), sillä tämän sovelluksen ensinäkymänä ei olekaan tylsä ja ennalta-arvattava kissanpentu tai mikään random epämääräinen silmäolio, vaan vahvalta ja luotettavalta kumppanilta vaikuttava uljas tiikeri. Sellaisen Simo-Elmeri tietenkin haluaa lemmikikseen!
Hän lataa sovelluksen ja alkaa käyttää sitä. Kun hän on valinnut haluamansa eläimen, kuvaruutuun ilmestyy pieni vauvatiikeri, joka vaikuttaa aluksi vihaiselta. Sivussa näkyy “level 1″ (tms) ja valittavissa olevat minipelit. Sovellusta on helppo oppia käyttämään, Simo-Elmeri innostuu heti peleistä ja pisteistä, joita hän saa voitettuaan matsin. Pian hän huomaa, että tiikerilemmikki muuttuu iloisemmaksi opittuaan tuntemaan Simo-Elmerin ja jonkin ajan kuluttua hän onkin voittanut rutkasti palkintoja eli leluja ja muita tavaroita pikkuiselle. Simo-Elmeri tykkää leikkiä virtuaalitiikerinsä kanssa eikä aikaakaan kun tiikeripentu ei olekaan enää mikään pikkuvauva vaan kasvanut isommaksi ja voimakkaammaksi. Siitä Simo-Elmeri vasta riemastuukin. Hän päättää esitellä sovelluksensa kavereilleen:

-kattokaa tät uutta peliä! Täs on ihan sikasiistei tällasii erikoisii eläimii, joita voi ottaa lemmikiks. Mul on tällane Tiikeri ja sen nimi on Taavi-Ilmari ja se on jo iha sikavahva! Kattokaa vaiks!

-Hei, mäki haluun tollasen! Mut mä en kyl ota tot tiikerii, mä otan mielummin ton norsun, se on niiin makee!

– Joo! Ja sit ku säki oot kouluttanu sitä ni sit me voidaa otella vastakkain! Mut viel ei voi ku mä salee voittaisin ku mul on jo niin vahva tää mun Taavi-Ilmari

Pian kaikilla Simo-Elmerin kaveripiirissä ja naapurustossa on omat virtuaaliset viidakkolemmikit, joita he hoitavat huolella ja joilla he ottavat matseja kavereitaan vastaan.”

Tässä valekuvakaappaukset:
mockupmockup2

Kilpailijakartoitus Google Playsta:

Seuraavat ohjelmat sain hakusanalla Virtual Pet:

https://play.google.com/store/apps/details?id=br.com.tapps.myvirtualpet&hl=fi

https://play.google.com/store/apps/details?id=com.nealo.virtualpet&hl=fi

https://play.google.com/store/apps/details?id=air.virtualPetMilky

https://play.google.com/store/apps/details?id=vn.esse.vpet

https://play.google.com/store/apps/details?id=com.PetBallFree

Mielestäni yksikään näistä ei oikeastaan vastaa minun ideaani. Nämä ovat ennemminkin perinteisiä tamagotchi-tyyppisiä virtuaalilemmikkejä, jotka ovat kaikenlisäksi epämääräisiä pallo-olioita, joilla on silmät. Ainoastaan kissa-hahmo on minun hahmojani vastaava, mutta senkin pelin idea on ainoastaan ruokkia ja nukuttaa lemmikkiä. Mielestäni ideani on uniikki verrattuna näihin >:D

Lopuksi testasin vielä HeiMaailmaa muutamilla APEilla. Käytin Eclipseä ja Cordovaa ensimmäistä kertaa Mac OS X:llä, joten kaikki oli periaatteessa uutta. Latasin version 2.9., mutta eroavaisuuksia ei 2.1.:een ei ollut paljoa. Kokeilin ensin Deviceä (koodi suoraan täältä:http://docs.phonegap.com/en/2.9.0/cordova_device_device.md.html#Device Muutin ainoastaan

src="cordova-x.x.x.js"-

-kohdan muotoon src=”codova.js”, sillä tuolla versiolla ohjelma ei toiminut. Device näytti tältä:

Screen Shot 2013-10-16 at 10.52.23 PM
S
euraavaksi testasin Geolocationia (http://docs.phonegap.com/en/2.9.0/cordova_geolocation_geolocation.md.html#Geolocation), joka ei luonnollisesti toiminut aivan täydellisesti, sillä käytössäni oli vain emulaattori. Sain ilmoituksen:

Screen Shot 2013-10-16 at 10.54.41 PM

Myös accelerometer ei tietenkään toiminut emulaattorilla. Liikettä emulaattorissa ei tietenkään ollut, joten x-, y- ja z-suuntaista asentoa oli mahdotonta hakea. Sain vain bodyssa olleen loading-tekstin: “Waiting for accelerometer…”

Kokeilin myös Media Durationia, jossa sain laitettua “Play Audio” ja tämän jälkeen alempana näkyi, kuinka pitkään olin kappaletta soittanut. Kappale oli linkitetty suoraan netistä. Koodi jälleen: http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

Ja kuva:

Screen Shot 2013-10-16 at 11.02.37 PM

Viimeiseksi testasin Notifications promptia, joka näytti kustomoidun dialog boxin. Sain syöt
tää nimeni siis itse. Koodion kopioin jälleen täältä: http://docs.phonegap.com/en/2.9.0/cordova_notification_notification.md.html#Notification

Screen Shot 2013-10-16 at 11.13.00 PM

Screen Shot 2013-10-16 at 11.13.09 PMScreen Shot 2013-10-16 at 11.13.40 PMScreen Shot 2013-10-16 at 11.13.47 PMScreen Shot 2013-10-16 at 11.14.01 PMScreen Shot 2013-10-16 at 11.14.06 PM