Indie-peli Construct 2 Samuli Saarinen Opinnäytetyö Ammattiopisto Tavastia Lukuvuosi 2013-2014
2 Sisällys 1 Johdanto... 3 2 Projektin aihe:... 4 3 Projektissa käytetyt menetelmät ja työkalut... 5 4 Projektin kulku ja toteutus... 8 5 Loppupäätelmät... 28 6 Lähteet... 29
3 1 Johdanto Projektissa kuvataan lähes vaihe vaiheelta pelin tekoa Construct 2 ohjelmalla. Peli itse toteutetaan graafisesti ja ohjelma generoi HTML5 koodia. Peli muutetaan myös Androidille sopivaan muotoon ja asennetaan laitteelle testattavaksi. Mobiililaitteille Constuct 2 ei yksin osaa tiedostoa muokata, sen apuna pitää käyttää joko Ludein tai Adoben palvelua. Pelissä ajetaan Jeeppiä keskellä taistelukenttää keräten pisteitä muutamilla eri tavoilla. Projektin peli oli pisin tekemäni peli ja myös ensimmäinen itse suunnittelema peli.
4 2 Projektin aihe: Indie peli Construct 2 Julkaistaan nimellä DesertJeep. Pelaaja ajaa Jeepillä ja lähtee keskelle taistelutannerta autiomaalla. Kaksi tuntematonta osapuolta sotivat keskenään ja pelaajan tarkoituksena on kerätä kaikki mahdolliset resurssit ja selvitä hengissä. Pelissä on monta tapaa laskea pisteensä ja pitää yllä henkilökohtaisia tavoitteita. Taistelutantereelta voi kerätä Tokeneita. Tokenit korjaavat Jeeppiä ja mahdollistavat pelin jatkamisen kuoleman jälkeen. Halutessaan voi ryhtyä sotaan tankkeja vastaan ja kuluttaa niin monta luotia kuin pystyy.
5 3 Projektissa käytetyt menetelmät ja työkalut 3.1 Ohjelman mallinnus (UML) Pelin mallinnus kuvaa työtä jonka pelintekijä ja peli ohjelma loivat/generoivat ja kuvaa miten asiakas pääsee käyttämään peliä. 3.1.1 Visio Visio on Microsoftin ajatuskartan luonti ohjelma, Se keskittyy luomaan näyttäviä ajatuskarttoja pienellä vaivalla. 3.2 Toteutus 3.2.1 Construct 2 Ohjelma toimii Drag & Drop tekniikalla (raahaa ja pudota). Tiedostoja liikutetaan "näytöllä" ja niille annetaan toimintoja jotka tapahtuvat jonkun seurauksena(esim. Kuva liikkuu vasemmalle, kun nuolta painetaan
6 vasemmalle). Ohjelma kirjoittaa lopuksi projektistasi toimivan HTML5- koodin joka voidaan muuntaa eri laitteille sopivaksi muodoksi. 3.2.2 COCOONJS On Ludei nimisen yrityksen kehittämä palvelu, joka muuntaa HTML5- koodin sopivaksi mobiililaitteille ja selaimille: Android, Windows 8 phone, ios, Blackberry, Crome- ja Firefox-sovelluskaupalle CocoonJS is a technology that helps HTML5 developers publish their web-based games and apps in the most important mobile and web stores with native-like performance and features. Code once, publish everywhere. Save time and money Ludei.com 3.2.3 PhoneGap On Adoben ylläpitämä palvelu joka muuntaa HTML5-koodin sopivaksi mobiililaitteille ja selaimille: Android, Windows 8 phone, ios, Blackberry, Crome- ja Firefox-sovelluskaupalle 3.3 Toteutustapa Peli rakennetaan graafisella koodaus-ohjelmalla nimeltä Construct 2. Se julkaistaan mahdollisimman monelle alustalle jotta se saavuttaa suurimman mahdollisen kohdeyleisön. 4 Spesifikaatio Julkaistaan nimellä DesertJeep. Pelaaja ajaa Jeepillä ja lähtee keskelle taistelutannerta autiomaalla. Kaksi tuntematonta osapuolta sotivat keskenään ja pelaajan tarkoituksena on kerätä kaikki mahdolliset resurssit ja selvitä hengissä. Pelissä on monta tapaa laskea pisteensä ja pitää yllä henkilökohtaisia tavoitteita. Taistelutantereelta voi kerätä Tokeneita. Tokenit korjaavat Jeeppiä ja mahdollistavat pelin jatkamisen kuoleman jälkeen.
7 Halutessaan voi ryhtyä sotaan tankkeja vastaan ja kuluttaa niin monta luotia kuin pystyy. 4.1 Aikataulu Peli toimii tietokoneella käyttäen näppäimistöä ja mobiililaitteella käyttäen näytöllä olevia näppäimiä. Ensimmäiset viikot ovat suunnittelua ja työn toteutus ja testaus pitäisi olla käynnissä jo 10.12. Projektin aikana ei ole erikseen testaus vaiheita, testaus tapahtuu kun jotain merkittävää on muuttunut. Pelin toimivuus on etusijalla, lopuksi katsotaan hienosäätöä pelille jos on aikaa. Työ on valmis viimeistään 28.01.14.
8 5 Projektin kulku ja toteutus Projekti on lähtenyt käyntiin kokeilemalla taustakuvaan sopivaa "pelinappulaa". Pelinappulalla tarkoitetaan pelin päähenkilöä. Pelinappulaksi sopivin vaihtoehto oli Jeeppi- maasturi, vapaasti käyttöön saamani paketista löytyi juurioikeat kuvat jeepistä luomaan 2D-peliin 360'- asteen tuntumaa.
9 Jeepille lisätään liikettä laittamalla kuvat vaihtumaan kun jeeppi kääntyy tietyn määrän asteita. Pelissä toimiva näytön koko säädetään mahdollisimman sopivaksi monelle eri näytölle. Kun tämä on tehty, laitetaan kuvat pöydälle ja taustakuva niiden taakse.
10 Sitten lisätään toiminnot. Jeepille auton ohjattavuus, eli kiihtyvyys tasaisesti nouseva ja päinvastoin, hidastuva. Kääntyvyys vauhti mukaan lukien 8 eri suuntaan. Määritetään nuolinäppäimet toimimaan Jeepin ohjaukseen ( esimerkillä: kun painetaan vauhdissa vasemmalle, Jeeppi kaartaa vasemmalle.)
11 Kosketusnäytöllisille laitteille laitetaan ruudulla näkyvät näppäimet jotka toteuttavat saman toiminnon kuin tietokoneen nuolinäppäimet. 5.1 Ensimmäinen Testi Tässä kohtaa kokeillaan ohjelman toimivuutta laajemmin, kaikella mahdollisella laitteella. On kuitenkin tietyt vaatimukset toteutuakseen. 1. Windows 8 phonen version avaamiseksi emulaattorilla tarvitaan Visual studio 2012 phonen + Windows 8- käyttöjärjestelmän. 2. Android-ohjelmaksi tiedostot muutetaan COCOONJS palvelun avulla. Sivustolle kirjaudutaan ja lähetetään tiedot palveluun, sieltä tuleva tiedosto on androidiin sopiva asennus-tiedosto. Vaihtoehtoisena palveluna toimii PhoneGap.
Ainoa mahdollinen testauksessa toimiva palvelu oli PhoneGap. PhoneGap rakensi tiedostoistani Andoid, ios, Windows phone ja Blackberry - asennus tiedoston. Peli kuitenkin toimii vain onlinessa, mutta tiedoston muokkaus auttaa peliä toimimaan sulavammin. Eli tiedostot joita peli käyttää on laitettu palvelimelleni josta peli käyttää niitä. 12
13 5.2 PhoneGap Käännetään tiedosto PhoneGap muotoon. Tehdään kansiosta ZIP tiedosto joka lähetetään itse PhoneGap - palvelulle Myös tiedoston ensimmäinen lisäys ja päivitys toimii samalla tavalla.
14 ja EI ZIP kansio lisätään palvelimelle oikeaan osoitteeseen. Nettiin laitetaan myös mahdolliset mainospalvelun tiedostot jotka näkyvät peliä pelatessa. Ennen asennusohjelman latausta PhoneGap - palvelussa täytyy ohjelma rakentaa uudestaan. Yksinkertaisesti painamalla "rakenna uudestaan"- nappia. Ladataan tiedosto-.apk (eli Androidin asennus tiedosto). Laitetaan se nettiin, jotta sen voi ladata ja asentaa Android-laitteelle testattavaksi. 5.3 Ensimmäisen Testin tulos Testin tulos kertoi että nuolinäppäimet kosketusnäytölle eivät riittäneet. Ongelmana oli että jeeppi ei kaasuttanut samaan aikaan kun kääntyi. Ratkaisuna tähän kokeilen lisätä neljä nuolta lisää. Nuolille laitetaan kaasutus sekä kääntymistoiminto.
15 Sitten testataan toimiiko sovellus paremmin. 5.4 Jatketaan Lisäsin kentälle text-elementin, kaksoisnapsauttamalla taustasta. Eventteihin lisätään systeemin eventti. Jokaisen tietokoneen tikityksen (tick) lisätty Teksti elementti saa arvon= FPS: ja fps komennolla (hakee tietokoneen kautta tiedon kuinka monta kuvaa liikkuu juuri tuolla hetkellä, normaalilla koneella FPS (Frames per second) on 60). Pelissä "Text"- kenttä näyttää tältä: Lisätään enemmän toimintoja pelille. Lisätään uusi kuva (spirite) projektiin taustalle ja annetaan sille luodin (bullet) toiminto. Yksinkertaisesti, kun luoti luodaan tasolle, se liikkuu eteenpäin määriteltyä vauhtia.
16 Varmistetaan että luoti ei jää kuormittamaan peliä, eli se poistetaan kun tietty matka on saavutettu. Jeepin animaatioihin lisätään Kuva piste (image points). Kuva pisteistä voidaan luoda toisia kuvia, esim. tässä tapauksessa jeepin katolla olevan pyssynpiipun päähän laitetaan kuva piste ja sitten luodaan elementti joka nappia painaessa luo luodin juuri tästä image pointista Lisätään samalla uusi kuva liekin leimahduksesta joka ilmestyy pyssyn piipusta. Kuvalle lisätään spirite strip (animaation kaikki liikkeet yhdellä kuvalla, tasaisella taustalla). Eli leimahduksen syntymisestä häviämiseen. Näistä luodaan animaatio jonka nopeutta voidaan säätää. Kyseinen leimahduksen 32 kuvaa näkyvät 60fps:n nopeudella ja vain yhden kerran.
17 Ja taas varmistetaan että läpinäkyvä elementti ei jää kummittelemaan, eli se poistetaan kun kuvan animaatio on loppunut. Itse pää-eventti joka luo nämä kaksi kuvaa, luodin ja leimahduksen. Välilyöntiä painamalla ja 0.2 sekunnin rajoituksella jeepin kuva pisteestä luodaan luoti ja leimahdus. Lisäksi eventin seurauksena lisätään +1 arvo globaaliin numeroon. Tämä numero esitetään ruudulla FPS-teksti elementin tapaan. Numero siis kasvaa jokaisella kerralla kun ammutaan yksi luoti. Tarkoituksena tällä kerätä pisteitä ampumistaan luodeista tai vaan katsoa paljonko luoteja kulutti tällä pelikerralla. (Globaali eventti tarkoittaa sitä, että se toimii koko sovelluksen sisällä, sitä ei tarvitse erikseen mihinkään sisältää.) Numero GunFired teksti-kenttään tarkastetaan jokaisella tikityksellä (tick).
18 Tältä näyttää pelissä pysäytys-kuva ampuma eventistä. 5.5 Rakennukset ja viholliset Jotta peli ei olisi pelkkää Saharan autiomaata, lisätään sinne rakennus. Rakennus laitetaan kiinteäksi (solid), jotta sitä ei voi läpäistä Kuvakaappaus, jossa jeeppi pysähtyy rakennuksen seinään.
19 Lisätään vihollisia jotta pelillä on jokin tarkoitus ja haaste. Ensimmäinen tankki on vihreä ja toinen tankki on ruskea (kaksi eri vihollista) Molemmille vihollisille lisätään ominaisuus kiinteä (solid) ja toiminto luoti (bullet).
20 Lopuksi laitetaan tankki kääntymään jeeppiä päin kun se osuu kentän reunoihin, täten tankki ei katoa "olemattomiin". Estetään myös tankkia menemästä linnakkeen läpi, ja jotta kehnon älynsä ansiosta tankki ei jäisi jumiin linnakkeeseen osuessaan, laitetaan tankki kääntymään kun se osuu linnakkeeseen. Molemmille vihollistankeille lisäsin samat ominaisuudet ja tähän mennessä toimivat hyvin. 5.6 Viholliset eivät ole vihollisia, jos niitä ei tarvitse pelätä. Tankille on lisätty turret-toiminto, ja sieltä erikseen määritelty pituus jonka sisältä turret-toiminto hakee kohteen. Tankille määritellään eventillä hakemaan kohde joka sekunti. kohde pysyy samana kunnes se tuhoutuu ja tankki hakee uuden kohteen.
21 Kun Jeeppi ei ole päävihollinen tankeille, laitetaan peliä hieman helpommaksi. Tankit siis ampuvat vasta jos ammut niitä tai niiden kaveria. Kun tankilla on kohde, se liikkuu vain eteenpäin kunnes vihollinen on sen ampuma etäisyydellä, se pysähtyy, tähtää ja ampuu joka 1.5 sekunnin välein. Jos kohde tuhoutuu, tankki jatkaa matkaansa ja hakee uuden kohteen. Molemmat tankit ampuvat eri versiot raketeista, versioiden erot huomaa vain koodinpuolella. Ne toimivat eri nimillä koska se on helpompi estää omapuolulaisen ampumasta kaveriaan. Kuitenkin molemmat raketit(tankin panokset) tekevät saman tuhon jeepille. Eli joka osumasta jeeppi menettää 4 elämää (täydet elämät on 10) Jeepillä on myös mahdollisuus tuhota tankki ampumalla. tankilta lähtee 2 elämää (täydet elämät on 5) Huonompi vaihtoehto tuhota tankki on ajaa jeepillä sitä päin. Yleensä se koituu kohtaloksi, koska tankki menettää vain yhden elämän ja jeeppi kokonaiset 5 elämää. Lisäksi jeeppi pysähtyy siihen paikkaan ja on altis muille vihollisille.
22 Hävitetään tankki kun se tuhoutuu, eli kun tankille määritelty Health muuttujan arvo on sama tai pienempi kuin 0, tankki häviää ja luo tilalleen räjähdyksen. Jotta ei olisi kaikkialla vaarassa, laitetaan kentälle yksinkertainen vihreä reunainen neliö ja nimetään se safe-zoneksi eli suoja-alueeksi. Lopuksi tehdään siitä turvallinen ja estetään tankkien pääsy alueelle. Tankeista löytyi virhe, jolloin tankit osuivat jeeppiin vaikka itse tankki ei ollut lähelläkään. Tämän aiheutti tankin Polygon. Polygon tarkoittaa simppeliä vektorigrafikkaista kuviota, tässä tapauksessa Polygon on se mikä ottaa yhteen muiden polygonien kanssa ja itse Tankin kuva on visuaalinen elementti. Kuvan Polygonin voi muokata helposti. 5.7 Tokens Lisätään peliin tavoitteita ja apuja. Tokenit, joilla voi korjata itseään ja kerätä pisteitä.
23 Tokenit ilmestyvät kentälle kun kumpi tahansa tankki tuhoutuu. Tokenille on määritelty henkilökohtainen -arvo. Se vähenee eventtien avulla joka sekunti. Näin tokenit eivät leiju pelikentällä ikuisuutta. Kun tokenit korjaavat jeeppiä, täytyy näkyviin laittaa elämät. yksinkertaisesti tekstielementtiin hakee jeepin henkilökohtaisen arvon healt. Pelissä elämät näkyvät näin: ja Ilmoitetaan että elämä on vaarassa jos elämiä on jäljellä 4 tai vähemmän, tarkoittaa että seuraava vihollisen osuma koituu kohtaloksi.
24 5.8 Golden Bullets ja Pisteet Lisätään Golden bullets (kultaiset luodit) keräiltäväksi esineeksi. Se ilmestyy kentälle joka 21 sekunti ja katoaa kentältä joka 20 sekunti, jos sitä ei poimi. Kultaisten luotien keräämisen seuraaminen toimii globaalilla numerolla, joka on joko 0 tai 1. Myös rajoitetut ammusten määrä luodeille on tehty globaalilla numerolla. Luoteja poimiessa Globaalin gotbullets arvo muuttuu numeroon 1 ja GoldenBullets arvo 20. Sekä ruudulle tulee näkyviin GoldenBullets määrä. Kun panokset on kerätty, voidaan niitä ampua, normaalien ammusten sijasta, ne ovat voimakkaampia mutta ne myös kuluvat, onhan niitä vain 20kpl.
25 Se mitä luodeilla haluaa tehdä, riippuu kuinka haluaa kerätä Scorea (pisteitä). Luodeilla voi ampua vihollisia alas ja kerätä näin pisteitä. 20 pistettä joka osumasta ja luodit tuhoavat vihollisen osumasta. Tai Viedä osan tai kaikki luodit SafeZonelle (suoja-alueelle). Pisteet tulevat luotien määrän mukaan kerrottuna 10. Eli jos palautat kaikki 20 luotia, saat 200 pistettä, Mutta ammut taas normaaleja luoteja. Jotta kultaiset luodit, ei olisi voittamaton esine, täytyy sillä olla heikkouksia. Heti kun kerää luodit, tankit alkavat ampumaan Jeeppiä. Heidän pääkohteensa vaihtuu jeeppiin. Jotta ei olisi ihan turhaa väistellä vihollisia kultaisten luotien kanssa, saa siitä 2 pistettä joka sekunti. Jos yksikin tankin ammus osuu jeeppiin, luodit putoaa ja katoavat jeepiltä.
26 Myös jos luodit ammutaan loppuun, ne katoavat. Ilmat kultaisia luoteja voi kerätä pisteitä. Keräämällä Tokeneita ja ampumalla normaaleja luoteja vihollisiin saat 2 pistettä/toiminto. Kun jeeppi tuhoutuu, muutetaan globaali arvo 1. Lisätään myös aika, jolloin kaikki resetoituu 50 ja lisätään vielä kuolema määrään 1. Dead tekstit tulevat esille, "Mission Failed", aika jolloin kenttä resetoituu ja jos tokeneita on tarpeeksi, ilmestyy teksti "Want to continue?" ja nappi jolla voi jatkaa nykyistä peliä. Takaisin nykyiseen peliin, samoilla pisteillä pääsee aluksi 5 tokenilla, hinta nousee kuolema määrän mukaan.
27 Jos ei ole tokeneita tai ei halua jatkaa peliä, se resetoituu kun aika kuluu loppuun. Kun aikaa on 1 jäljellä, kaikki resetoidaan, pisteet, tokenit, viholliset ja kentän esineet. Kun peli resetoituu, edelliset tekstit muuttuvat näkymättömiksi. 5.9 Mobiililaitteen viimeisin muokkaus Mobiililaitteessa testauksen jälkeen tehtiin pienimuotoisia muutoksia, kuten tekstien siirtämistä ja kosketusnäppäinten asettelua. Ohjaus on kuitenkin hankalaa ja vaatii pelaajalta opettelua.
28 5.10 Loppu muutokset ja lisäykset Viimeisimpänä peliin lisätään alku-ruutu jossa pieni info pelistä. kun peli käynnistyy, sen globaali arvo muuttuu ja siirtää pelaajan lobby (aula) - tasolle. Aula on samanlainen taso kuin itse pelin taso, sinne laitetaan eri elementit joista valitaan pelattavan laitteen ohjaus. Käyttäjän itse valitsema alusta helpottaa lopullisen version muuttamista PC:lle ja mobiililaitteelle. Valinta määrittää vain sen, että näytetäänkö kosketus-näppäimet vai ei. Muutamia muutoksia tehtiin loppuun, jotta peli olisi mahdollisimman tasainen pisteiden keräämisen osalta. Muutokset koskivat ainoastaan arvoja tai painettava objekti vaihdettiin toiseen, joten uusia ominaisuuksia ei lisätty tai poistettu. 6 Loppupäätelmät Olen erittäin tyytyväinen työn tulokseen. Vaikka peliin olisi voinut vielä lisätä kaikkea kivaa, on siinä nyt jo tekemistä. Peli oli iso projekti, mukaan mahtui väärinpäin liikkuvia tankkeja, tahmeita luoteja, muutama Javascript-errori ja selaimen kaatuminen, mutta hankalimmaksi osaksi jäi raportin kirjoitus.
29 7 Lähteet http://phonegap.com/ https://www.ludei.com/ https://www.scirra.com/ https://www.scirra.com/tutorials/73/supporting-multiple-screensizes/page-2 https://www.scirra.com/tutorials/202/touch-controls-and-a-trick-to-detectinput-method