🛠️ Ohjelmointiympäristö kuntoon

Ensimmäisten viikkojen tehtävät voi periaatteessa suorittaa verkkoselaimessa, mutta varsin pian on tarpeen saada oma ohjelmointiympäristö toimimaan tietokoneella.

Oman tietokoneen käyttöönottaminen ohjelmointia varten on tärkeä askel kohti itsenäisempää ohjelmointia. Se mahdollistaa esimerkiksi koodin kirjoittamisen, tallentamisen ja suorittamisen ilman internet-yhteyttä. Lisäksi omaa ympäristöä on helpompi mukauttaa omien tarpeiden mukaan, kuten vaihtaa värejä, fontteja ja muita asetuksia. Myöhemmin opit käyttämään versionhallintaa sekä debuggausta, jotka vaativat ohjelmointiympäristön omalla tietokoneellasi.

Rider

Ohjelman koon kasvaessa kannattaa ottaa käyttöön sovelluskehitin eli IDE (Integrated Development Environment). IDE on ohjelma, joka yhdistää yhteen paikkaan kaikki ohjelmien kehittämiseen tarvittavia ominaisuuksia, kuten:

• koodin kirjoittaminen
• koodin kääntäminen ohjelmaksi
• virheiden ja ongelmien etsiminen koodissa
• koodin navigointi- ja refaktorointityökaluja (esim. "Etsi koodista", kirjoittamisen aikaiset ehdotukset, koodin massamuokkaaminen)
• ohjelman virheiden jäljitys eli debuggaus
• samaan asiakokonaisuuteen liittyvän koodin hallinta ("projektit")
• versionhallinnan tuki (esim. Git)

IDE-ympäristöjä on useita eri ohjelmointikielille ja ympäristöille. Ohjelmointi 1 -opintojaksolla käytetään JetBrains-yhtiön tekemää Rider-kehitysympäristöä, joka on erityisesti C# ja .NET-ajoympäristölle tarkoitettu IDE. Riderilla voi tehdä niin tekstipohjaisia sovelluksia kuin Jypeli-pelejäkin.

Riderin asennusohjeet löytyvät Työkalut-sivulta.

Sivuhuomiona mainittakoon, että kaikenlaiset pilvipalvelut ovat yleistyneet, ja myös pilvipohjaisia kehitysympäristöjä on olemassa. Kuitenkin edelleen yleinen käytäntö ohjelmoinnin opiskelussa, kuten myös Ohjelmointi 1 -kurssilla, on asentaa kehitysympäristö omalle paikalliselle tietokoneelle. Oman kehitysympäristön käyttö on yleensä nopeampaa, edullisempaa ja joustavampaa kuin pilvipohjaiset ratkaisut. Myös työelämässä paikalliset kehitysympäristöt ovat yleensä vallitseva käytäntö.

Visual Studio Code

Vaihtoehtoisesti voit käyttää myös Visual Studio Code -editoria (lyhyesti VS Code), joka on hyvin suosittu tekstieditori, jota voi käyttää myös IDE:nä. VS Coden asennusohjeet löytyvät myöskin Työkalut-sivulta.

Alla olevat ohjeet koskevat kuitenkin vain Rideria.

Konfigurointi ja laajennokset

Oletusasetukset koodin muotoilulle ja analysoinnille ovat tämän kurssin näkökulmasta usein turhan aggressiivisia (ts. auttavat turhan innokkaasti tai väärään suuntaan), joten muutetaan asetuksia tämän kurssin suositusten mukaisiksi.

Jos haluat varmuuskopioida nykyiset asetuksesi, tee se valikosta File → Manage IDE Settings → Export Settings.

• Lataa asetuspaketti (settings.zip) (Linuxissa voi joutua vaihtamaan tarkentimen .jar latauksen jälkeen)
• Avaa Rider ja valitse Welcome to JetBrains Rider-ikkunassa vasemmasta alalaidasta Configure → Import Settings...
• Etsi ja valitse äsken haettu tiedosto
• Klikkaa OK, sitten Import and Restart

Vaihtoehtoisesti voit mukauttaa asetuksia yksitellen alla olevien ohjeiden mukaisesti.

Ja uusimmassa Riderissa joudut joka tapauksessa alla olevalla manuaaliohjeella poistamaan oikoluvun käytöstä (ainakin toistaiseksi).

Sisäänrakennetun tekoälytäydennyksen kytkeminen pois

Riderissa on sisäänrakennettu tekoälypohjainen täydennys, joka yrittää täydentää kirjoitetun rivin loppuun ympäröivän koodin perusteella:

Aivan opintojakson alussa tämä täydennys ei haittaa, mutta myöhemmin täydennys pikemmin häiritsee sen rajoittuneisuuden vuoksi. Siispä suosittelemme kytkemään se pois seuraavasti:

• Avaa Rider Welcome to JetBrains Rider -näkymään
• Valitse vasemmasta alalalaidasta Configure → Settings
• Mene asetuksissa kohtaan Editor → General → Inline Completion
• Ota ruksi pois kohdasta Enable local Full Line completion suggestions
• Tallenna asetukset Save-painikkeella

Riderin peruskäyttö: solution ja projekti

Rider käyttää ns. solution-projekti-rakennetta koodin organisointiin.

Projekti sisältää yhteen ohjelmaan (peliin tai konsolisovellukseen) liittyvän koodin ja grafiikka- ja musiikkitiedostot.

Projekti kuuluu aina johonkin solutioniin. Yksi solution voi sisältää yhden tai useampia projekteja.

Sivuhuomiona mainittakoon, että solution on Microsoftin keksimä nimi tällaiselle projekteja koostavalle kapistukselle. Sana ei varsinaisesti tarkoita mitään.

Esimerkiksi yksi demokerta voi olla yksi solution joka sisältää useita projekteja (demotehtäviä). Useiden projektien lisäämisessä samaan solutioniin on se etu, että silloin voi pitää samaan demoon liittyvät tehtävät yhtä aikaa näkyvillä ilman että niitä tarvitsee jatkuvasti avata tai sulkea.

Riderissa tehdyt solutionit ja projektit ovat yhteensopivia Visual Studion kanssa.

Suositeltava hakemistorakenne

Kurssilla kannattaa kaikki kurssin asiat tehdä esimerkiksi alikansion (hakemiston) ohj1 alle. Tuo ohj kansio ohj1 voi alla käyttötarkoituksesta riippuen eri paikassa:

Mikroluokan koneessa

c:\MyTemp\<käyttäjätunnus>\ohj1

ja omassa kannettavassa esimerkiksi:

Windows: `/c/kurssit/ohj1`    
Mac ja Linux: `~/kurssit/ohj1` 

ja sitten tuon kansion alla on alikansiota tyyliin:

ohj1
 |
 +-demot 
 |  +-demo1
 |  | +-HelloWorld
 |  | +-Lumiukko
 |  | 
 |  '-demo2
 |    +-Lumiukko2
 |    +-LukujenLaskemista
 |
 '-ohjaukset
    +-paate1
    | +-HelloWorld
    | +-Lumiukko
    '-paate2

Eli esimerkiksi demo1 on yksi solution jonka alla on useita projekteja. Usein projekti on yksi demotehtävä.

Uusi solution

Luodaan uusi solution ja siihen projekti. Tässä esimerkissä luodaan demo1-niminen solution ja siihen Lumiukko-niminen projekti demot-alikansioon:

Mikäli haluat lisätä projektin olemassa olevaan solutioniin, katso luku Uusi projekti olemassa olevaan solutioniin.

• Valitse New Solution. Mikäli joku vanha solution on jo auki, niin sama onnistuu yläpalkista File/New Solution.

• Valitse vasemmalta Custom templates -listasta FysiikkaPeli.

• Anna solutionin nimeksi demoX, esimerkiksi demo1

• Anna projektin nimi, esimerkiksi Lumiukko tai Teht3Lumiukko (Huom Iso alkukirjan!).

• Kirjoita tai selaa poluksi (<käyttäjätunnus> tilalle oma käyttäjätunnuksesi jos se on eri):

  • oma Windows kone: C:\kurssit\ohj1\demot
  • Mac: /Users/<käyttäjätunnus>/kurssit/ohj1/demot
  • Linux: /home/<käyttäjätunnus>/kurssit/ohj1/demot
  • mikroluokssa C:\MyTemp\<käyttäjätunnus>\ohj1\demot HUOM! Yliopiston mikroluokissa projekti tulee tehdä ensin tietokoneen kiintolevylle, esim. C:\MyTemp\<käyttäjätunnus>\.... Siirrä lopuksi tiedostot U-asemallesi tai muualle talteen.

• Jätä Put solution and project in the same directory-boksi tyhjäksi.

• Framework-kohtaan net8.0

• Klikkaa Create.

• Levylle syntyy nyt hierarkia:

        kurssit                    - kaikkien kurssien hakemisto
          ohj1                     - ohj1 kurssin hakemisto
            demot                  - demojen hakemisto
              demo1                - demo1:n hakemisto
                demo1.sln          - solutionintiedosto jossa luetellan mitä projekteja
                Lumiukko           - hakemisto jonka alla Lumiukko-projekti     
                  bin              - hakemisto jonne tulee ajettavaa koodia
                  obj              - hakemisto jonne tulee käännettyjä tiedostoja
                  Lumiukko.cs      - C#-tiedosto johon tulee lumiukon piirtävä koodi
                  Ohjelma.cs       - C#-pääohjelma
                  Lumiukko.csproj  - projektin tiedosto jossa kerrotaan mitä tiedostoja
                                     projektiin liittyy
  

• Klikkaa Solution Explorerissa Lumiukko.cs-kooditiedostoa. Koodissa pitäisi näkyä:

  public class Lumiukko : PhysicsGame
  {
      public override void Begin()
      {
          // Kirjoita ohjelmakoodisi tähän
  
          PhoneBackButton.Listen(ConfirmExit, "Lopeta peli");
          Keyboard.Listen(Key.Escape, ButtonState.Pressed, ConfirmExit, "Lopeta peli");
      }
  }
  

• Kokeile käynnistää ohjelma Run/Run 'Lumiukko', jolloin pitäisi näkyä uusi ikkuna vaaleansinisellä taustalla. Jos kaikki toimii, sulje ikkuna.

• Pyyhi pois koko se rivi jossa lukee "Kirjoita ohjelmakoodisi tähän" ja kirjoita tilalle

          Level.Background.Color = Color.Black;
          PhysicsObject pallo = new PhysicsObject(200, 200, Shape.Circle);
          pallo.Color = Color.White;
          Add(pallo);
  

• Käynnistä ohjelma uudestaan ja tarkista että ohjelma muuttui.

• Kirjoita luokan dokumentaatiokommentti näppäilemällä luokan esittelyrivin (elipublic class...) yläpuolelle kolme kauttaviivaa ///. Kirjoita <summary>-tagien väliin selvitys luokan toiminnasta (eli että piirretään lumiukko)

• Kirjoita vastaavasti Begin-metodin dokumentaatiokommentit.

Uusi projekti olemassa olevaan solutioniin

Oletetaan, että solution on jo olemassa. Lisätään siihen toinen projekti olemassa olevan lisäksi. Tässä esimerkissä luodaan uusi ConsoleMain-projekti olemassa olevaan demo1-solutioniin.

• Klikkaa Explorer-paneelissa solutionin demo1 nimeä hiiren oikealla (Macissa kahdella sormella).
• Valitse Add -> New Project
• Valitse vasemmalta ConsoleMain-projektimalli
• Anna nimeksi HelloWorld
• Paina Create.
• Ensimmäisellä kerralla projekti ajetaan klikkaamalla Explorerissa sen nimeä HelloWorld hiiren oikealla ja valitse Run HelloWorld. Myöhemmillä kerroilla voit käynnistää projektin käynnistämällä yläpalkista haluamasi projektin.

Jypeli-projektit

Jypeli-projektin voi tehdä valitsemalla solutionia tai projektia luodessa Custom Templates -kohdasta oikean projektimallin.

• ConsoleMain (Konsolisovellukset, joissa on Ohj1 kurssin pohja)
• Fysiikkapeli (Fysiikkaa käyttävät pelit ja muut graafiset sovellukset)
• Tasohyppelypeli (Esimerkkipeli)
• Android Fysiikkapeli (Android-alustaa varten)

Pääohjelma Jypeli-projekteissa (Main)

Jypeli-projektissa Main-pääohjelma menee Ohjelma.cs-tiedostoon, joten jos copy-pastetat koodin, joka sisältää Main-pääohjelman, niin poista Main-pääohjelma Portaat-luokan (tms. projektisi nimeä vastaava luokka) sisältä. Projektissa ei saa olla kahta Main-pääohjelmaa.

Sisällön tuominen Jypeli-projektiin (Content-kansio)

Kuvat ja äänet lisätään peliprojektin Content-kansioon, joka näkyy editorin tiedostolistauksessa.

Content-kansion voi luoda klikkaamalla hiiren oikealla projektia → Add → Directory

1. Lisää tiedosto klikkaamalla kansiota hiiren oikealla napilla → Add → Add Existing Item
2. Valitse tiedosto(t) jonka haluat lisätä ja paina ok.
3. Valitse Copy.
4. Klikkaa tuomaasi tiedostoa Content-kansiossa hiiren oikealla ja valitse Properties
5. Vaihda Copy to output directory -kohtaan "Copy if newer"

Graafinen sovellus Jypeli-kirjastolla

Jypeli on C#-kielellä kirjoitettu pelimoottori, joka on suunniteltu erityisesti opetuskäyttöön. Jypeli tarjoaa helppokäyttöisen tavan pelien luomiseen, mikä tekee siitä hyvän valinnan tälle kurssille.

Jypelin avulla voi luoda 2D-pelejä, joissa on grafiikkaa ja ääniä. Jypeliin on tarjolla paljon valmiita ohjeita ja esimerkkejä TODO: Linkki, jotka auttavat sinua pääsemään alkuun pelien tekemisessä.

Tehdään seuraavaksi pieni Jypeli-esimerkki, jossa luodaan ikkuna ja piirretään siihen ympyrä.

using Jypeli;
public class YmpyraPeli : PhysicsGame
{
    public override void Begin()
    {
        GameObject ympyra = new GameObject(50, 50);
        ympyra.Shape = Shape.Circle; 
        ympyra.Position = new Vector(0, 0); // Asetetaan ympyrä keskelle ikkunaa
        Add(ympyra); // Lisätään ympyrä peliin
    }
}

Voit käynnistää pelin yllä klikkaamalla oikean yläreunan vihreää "Play"-painiketta. Ikkunaan pitäisi ilmestyä keskelle pieni ympyrä.

Huh! Siinä oli jo aika paljon uutta. Käydään koodi läpi vaiheittain.

Ensimmäinen rivi luo uuden muuttujan nimeltä ympyra, joka on tyyppiä GameObject. Sen leveydeksi ja korkeudeksi annetaan 50.

GameObject ympyra = new GameObject(50, 50);

Seuraavaksi asetamme ympyra muuttujan muodoksi Shape.Circle ja sijainniksi asetetaan vektori, joka osoittaa keskipisteeseen new Vector(0, 0).

ympyra.Shape = Shape.Circle; // Asetetaan muodoksi Shape.Circle
ympyra.Position = new Vector(0, 0); // Asetetaan ympyrä keskelle ikkunaa

Lopuksi lisäämme ympyra muuttujan näkyviin kutsumalla Jypelin Add metodia. ympyra muuttuja on siis olemassa jo heti ensimmäisen rivin jälkeen, mutta se pitää erikseen vielä lisätä "pelimaailmaan".

Add(ympyra); // Lisätään ympyrä peliin

Tehtävät

Asenna Rider ja Jypeli omalle tietokoneellesi Työkalut-sivulla olevia ohjeita noudattaen.