TECHS5 – Luento 7

Viimeisellä luennolla tutustutaan mitä oliot ovat ja kuinka niitä luodaan ja muokataan. Tämän lisäksi tutkaillaan kuinka olioihin tallennetusta tiedosta saa tuotettua sisältöä verkkosivulle, ja kuinka tuota tietoa voi halutessaan muokata.

TECHS5 – Luento 6

Kuutosluennolla lueskellaan taulukoita for-silmukoiden avulla, tutustutaan sisäkkäisiin for-silmukoihin ja kokeillaan kuinka helppoa päättymättömän silmukan tekeminen on while-silmukkarakenteella.

TECHS5 – Luento 4

Neljännellä luennolla vietetään laatuaikaa funktioiden parissa. Perehdymme parametrien käyttämiseen omien funktioden kanssa ja opimme kuinka funktiosta voi palauttaa tietoa takaisin ohjelmiin paluuarvojen avulla. Jos aikaa riittää, tutustumme myös taulukoihin.

TECHS5 – Luento 3

Kolmosluennolla tarkastellaan loogisia operaattoreita ja tutustutaan if-else if-else -lauseisiin. Näiden lisäksi katsotaan if-else – muistuttavaa switch-lausetta ja – jos aikataulu sallii – laaditaan omia funktioita.

TECHS5 – Luento 2

Toisella luennolla jatketaan JavaScriptin perusteiden parissa. Luento alkaa katsauksella muuttujiin, jonka jälkeen tarkastelemme mm. ehtolauseita, syötteitä ja loogisia operaattoreita.

TECHS5 – Luento 1

Ensimmäisellä luennolla tutustutaan JavaScriptin perusteisiin ja tutkaillaan kuinka ohjelmia voi laatia Visual Studio Coden tai Stackblitzin avustuksella.

Angular ja URL-parametrit

Askartelin äskettäin pienen Angular-sivustoprojektin parissa. Eräs projektin vaatimuksista oli, että sivustosta pitäisi pystyä näyttämään kaksi erilaista versiota, joista toinen näytetään vain kun käyttäjä saapuu sivulle linkillä, jossa on country=usa -parametri.

Kuten moni varmasti tietää, navigointi sivulta toiselle hoituu routerin navigate()-funktion avulla esim. näin:

this.router.navigate(['/thingsOfInterest']);

Aloitin homman siten, että poimin maa-parametrin ensin talteen URLista, jotta sain latattua käyttäjälle taustalta oikeat datat:

this.activatedRoute.queryParams.subscribe(params => {
      const countryParam = params['country'];
      ...
});

Tämän jälkeen tuuppasin käyttäjän oikeaan suuntaan antamalla navigate-funktioon parametrina queryParams-objektin, joka sisältää URLiin lisättävän parametrin ja sen arvon. Halusin säilyttää parametrin tallessa siltä varalta että käyttäjä sattuisi vaikkapa painamaan refreshiä.

this.router.navigate(['/thingsOfInterest'], { 
    queryParams: { 
        country: countryParam
    }
});

Jos countryParam-muuttujan arvo olisi esim. fr, olisi lopputulemana seuraavanlainen URL:

https://example.com/thingsOfInterest?country=fr

Oletusarvoisesti URL-parametrit kuitenkin hukkuvat seuraavan kerran navigoitaessa johonkin suuntaan, mutta tähän voi vaikuttaa queryParamsHandling-parametrilla. Kun queryParams-objektiin lisätään tämä parametri arvolla merge, kaikki URL-parametrit yhdistetään ja otetaan talteen:

this.router.navigate(['/thingsOfInterest'], {
    queryParams: {
        country: countryParam 
    }, 
    queryParamsHandling: "merge",
});

Joskus navigoitaessa voi kuitenkin mukaan tarttua hankala parametri, josta olisi mukava päästä eroon mahdollisimman pienellä vaivalla. Yksi kätevä tapa tähän on antaa kyseiselle, kiusalliselle parametrille arvoksi null queryParams-objektissa. Näin kyseinen parametri katoaa, mutta muut säilyvät menossa mukana:

this.router.navigate(['/thingsOfInterest'], {
    queryParams: { 
        country: null 
    }, 
    queryParamsHandling: "merge" 
});

Tilemapit ja tietokoneohjaus

(Klikkaa peliruutua aktivoidaksesi näppäimet: nuolet + space)

Vaikka tarkoitukseni oli pienen tilemap-tutkailun jälkeen jatkaa LeMans-kloonin parissa puuhastelua, jumahdin tarkastelemaan TileMap- ja TileSet-noodeja hieman pidemmäksi aikaa.

Pääsyy tähän oli se, että huomasin että tilesetin yksittäisiin ruutuihin voi lisätä törmäyksiä tarkkailevien noodien lisäksi myös NavigationPolygonInstance-noodin. Tämän noodin avulla tilemapiin merkitään ne alueet, joilla pelaaja tai tietokoneen ohjaama hahmo voivat liikkua. NavigationPolygonInstance toimii yhteistyössä Navigation2D-noodin kanssa; Jos Navigation2D-noodilla on lapsielementteinä NavigationPolygonInstance-noodeja, se luo niiden perusteella kartan alueesta, jossa pelaaja ja tietokone voivat liikkua. Navigation2D-noodin get_simple_path()-funktio tarjoaa myös varsin yksinkertaisen tavan hakea reitti etappipisteinä paikasta A paikkaan B:

path = nav.get_simple_path(start_position, goal, false)

Kun reitti – esimerkiksi pelaajan senhetkiseen sijaintiin – on selvillä, onnistuu tietokoneen ohjastaman hahmon liikuttaminen pisteestä toiseen helposti esimerkiksi linear_interpolate()-funktion avulla. GDQuest esittelee tämän tavan liikuskella kattavasti YouTubessa.

Itse halusin tehdä asiat hieman vaikeamman kautta, ja päädyin toteutukseen jossa tietokoneen ohjastama tankki katsoo joka framen kohdalla missä suunnassa seuraava piste on ja kääntää keulaansa tarvittaessa sen suuntaan. Tai jos seuraava piste on vähän tankin takana, voi tankki myös peruuttaa ja kääntyä. Tällä tavoin tehtynä liike näytti omaan silmääni luonnollisemmalta kuin interpolaation avulla tehty liike.

Koska tankkien liikuttelu osoittautui varsin hauskaksi, luulen että rakentelen tähän prototyyppiin vielä mahdollisuuden tuhota tankkeja ampumalla ennen kuin jatkan LeMansin pariin.

Source: https://github.com/mikahimself/tanked

Tilemap-tutkiskelua

(Klikkaa peliruutua aktivoidaksesi näppäimet: nuolet + space)

LeMans-kloonia aloitellessani päädyin tutkailemaan kuinka Godotin sisäänrakennettu tileset-työkalu toimii ja kuinka helppoa sen avulla olisi laatia LeMansin ei-niin-monimutkaiset radat ja tarkkailla törmäyksiä.

Lyhyt vastaus: varsin helppoa. Oheinen, pikku prototyyppi syntyi parissa tunnissa ja siitäkin osa meni tileset-grafiikoiden piirustamiseen ja törmäyslaatikoiden kanssa näpertelyyn . Pääsin samalla muistelemaan kuinka z-indeksit toimivat, ja niiden avulla tankin päälle lankeaa rasterivarjo seinien vieressä. Ehkäpä tässä täytyykin vielä rakennella Tank-klooni ennen LeMansiin keskittymistä…

Source: https://github.com/mikahimself/tanked