Unity basics

NME17AP

Lukuvuosi 2017-2018

Tämän kirjoituksen tarkoituksena on avata hieman unity editorin sisältöä helposti ja nopeasti.

Avaa Unity työpöydän pikakuvakkeesta. Rekisteröidy Unityn käyttäjäksi kohdasta sign in. Jollei sinulla jo ole tunnuksia, niin luo ne. Tästä näkymästä voit joko avata vanhan projektin tai luoda uuden. Nyt valitsemme kohdan new luodaksemme uuden projektin.

Projekti tulee nimetä. Valitse projektin nimeksi joko pelin nimi tai muuten projektia kuvaava nimi, jollei pelin nimeä ole vielä päätetty. Kannattaa nimetä projekti niin, että se on helppo myöhemmin löytää, koska jatkossa projekteja tulee olemaan useita ja on tärkeä tunnistaa, minkä projektin haluaa avata. Seuraavaksi valitaan projektin sijainti. Klikkaamalla kolmea pistettä saat itse päättää, minne projekti jatkossa tallennetaan.

Pitää valita tekeekö 2D vai 3D projektin. Tämän pystyy myöhemmin muuttamaan, mutta kannattaa kuitenkin aluksi valita omaa projektiaan vastaava tyyppi. Käytännössä 3D kannattaa valita aina, jos pelissä on 3D assetteja. 2D valitaan, jos käytetään 2D grafiikkaa. Unityssä on oletuksena 3D, mutta tällä kertaa valitsemme 2D vaihtoehdon. Unityn ohjeista voi lukea 2D:n ja 3D:n eroista, jos projektityypin valinta mietityttää: https://docs.unity3d.com/Manual/2Dor3D.html

Asset packages kohdassa voi valita, mitä valmiita assetteja tuo projektiin. Assetit vaihtelevat hahmon kontrolleista aina erilaisiin efekteihin. Täytyy kuitenkin muistaa, että kaikki nämä vievät tilaa ja tekevät projektin koosta suuremman, joten kannattaa valita vain tarpeelliset. Nämä saa myös myöhemmin lisättyä Unityn editorissa, joten jos olet epävarma, niin älä valitse täältä mitään.

Seuraavaksi valitaan create project, jolloin pääsemme avaamaan Unityn editorin.

Unity saattaa ensisilmäyksellä vaikuttaa hieman sekavalta, mutta ei kannata lannistua. Siitä saa helposti muokattua itselleen sopivan ja kaikki tarpeellinen löytyy kohtuullisen helposti. Alla olevassa kuvassa on selitetty, mitä editorissa olevat asiat ovat ja mihin niitä käytetään.

Unityn yläpalkissa File kohdassa voi luoda ja tallentaa tasoja sekä aloittaa kokonaan uuden tai avata jo olemassa olevan projektin. Sieltä löytyy myös build settings, josta pääsee muokkaamaan pelin rakennetta, kuten tasojen järjestystä ja mille alustalle peli on tarkoitus tehdä (esim. PC, Android, iOS jne.).

Asseteista voi luoda uusia assetteja kuten fysiikka materiaaleja ja skriptejä. Sieltä voi myös tuoda erilaisia Unityn omia assetteja. Joten jos ei aikasemmin projektia luodessa valinnut mitään, niin ne löytyvät tästä valikosta.

Game object valikossa on mahdollista luoda uusia objekteja kuten kameroita, valoja, spritejä ja erilaisia yksinkertaisia 3D-objekteja. Mahdollisuutena on luoda myös tyhjiä objekteja, joita voi käyttää tilanteissa, joissa haluaa käynnistää tietyn tapahtuman, kun pelaaja saapuu näkymättömän kohteen alueelle.

Window valikosta saa laitettua editoriin uusia ikkunoita tai vaihdettua editorin ikkunoiden sijoittelua.

Jos haluaa syventävää tietoa Unity editorin toiminnasta ja kaikista valikoista, niin suosittelen tutustumaan Unityn sivuilta löytyvään kattavaan ohjekirjaan: http://docs.unity3d.com/Manual/index.html

TEHTÄVÄ:

Luo aiemmin tekemästäsi pokepallosta sprite Unityyn. Raahaa tiedosto projekti ikkunaan asset kansioon. Aseta inspectorissa pokepallon tekstuuri tyypiksi sprite (2D & UI) ja filter modiksi trilinear. Raahaa pokepallo-sprite hierarkia ikkunaan. Aseta pallolle inspectorista circle collider 2D ja rigidbody 2D. Rigidbody luo spritelle fysiikan ja collider antaa pallon törmätä pelissä muihin objekteihin, joilla on myöskin collider. Testaa peliä. Jos pallo tippuu kameran näkymättömiin olet tehnyt asiat oikein.

Seuraavaksi luo Photoshopissa musta suorakulmio. Valitse tiedoston kooksi n. 600 px (leveys) ja 20 px (korkeus). Väritä koko alue haluamallasi värillä ja tallenna. Tuo tiedosto Unityyn samalla tavalla kuin pallokin ja aseta se myös hierarkia ikkunaan. Laita luomallesi platformille box collider 2D ja sijoita se pallon alapuolelle. Jos olet tehnyt kaiken oikein, niin pallo jää platformin päälle.

Animation in Photoshop

NME17AP

Lukuvuosi 2017-2018

This is a short tutorial for how to animate objects in Photoshop. This will come in handy when you are animating a sprite for Unity project and want to test it before giving it to the programmer.

First you need to have animated sprite. We draw poke ball last time and are going to use it in this assignment. Open the file in Photoshop and save it under a different name. Next you’re going to use the layer with a complete poke ball and duplicate it. Use ctrl + J to duplicate the layer. Rotate the new ball little to the left using transform tool. It can be found from toolbar under edit tab or by using hotkeys ctrl + T. Do this multiple times so that you’ll get full rotation for the ball.

Next we need to open animation window. This is found from tool bar under window tab. Select timeline from there and it opens the animation window in Photoshop.

 Select create frame animation. If you accidentally chose the create video timeline, it can be changed from the bottom left corner of the animation timeline.

In the frame animations you’ll need to make more frames. This is done with duplicate selected frame button. Make as many frames as you have layers in Photoshop. Next you need to go frame by frame and choose correct layer to match with animation frames. Leave only the needed layer active in the layers tab.

Now you are going to fine-tune the animation. Choose no delay option from the right corner of every frame. This determines the speed the frame changes to the next one.

Then you want to make the animation loop. There’s a button on the bottom left corner that says once. Change it to forever for a constant loop. Now when you press play from the timeline, it animates the object according to your settings. 

Go check out instructions from adobe in Finnish if you want to know more about frame animation in Photoshop: https://helpx.adobe.com/fi/photoshop/using/creating-frame-animations.html#addframestoananimation

SPRITE SHEETS

NME17AP

2017-18



Piirrä animaatiosi Photoshopissa (katso blogiteksti Simple Animation in Photoshop, elokuu 2016) tai tuo se videotiedostona Photoshopiin (File > Import > Video Frames to Layers).

Animaation yksittäisen framen koko pikseleinä olisi hyvä olla neljällä jaollinen. Tässä tapauksessa framen koko on 160 x 240 pikseliä.


Avaa uusi kuvapohja jolle voi kopioida ja liittää haluamasi määrän frameja vierekkäin ja allekkain. Framet kopioidaan Layereiltä.

Tässä tapauksessa uudelle kuvapohjalle kopioidaan ja liitetään viisi animaation framea vierekkäin ja neljä päällekkäin, eli 5 x 160 = 800, ja 4 x 240 = 960. Uuden kuvapohjan koko on siis 800 x 960 pikseliä.

Kun saat kaikki framet kopioitua ja liitettyä kuvapohjalle, tallenna se Photoshop-tiedostona (.psd). 

Sprite Sheet on valmis avattavaksi Unityssä.

ANIMATE BASICS

NME17AP

2017-18


Adobe Animatella voi tehdä piirrosanimaatioita.

Käynnistä ohjelma ja avaa uusi dokumentti, esimerkiksi HTML5 Canvas.

Oikeasta reunasta voi säätää frameraten (FPS, kuinka monta kuvaa sekunnissa), resoluution pikseleinä (W = leveys, H = korkeus) ja vaihtaa taustan värin (Stage).

Ohjelman työkalut ovat samankaltaisia kuin Photoshopissa. Piirtämiseen voi käyttää kynä- tai pensselityökalua.

Timelinella näkyvät animaation keyframet. Jokaiseen keyframeen piirretään yksi kuva animaatiosta,

Uuden tyhjän keyframen saa tehtyä näppäimellä F7.

Edellisen keyframen voi kopioida uudeksi näppäimellä F6.

Onionskinin avulla voit nähdä edellisiä ja seuraavia keyframeja samalla kun piirrät. Liikuteltavien hakasten avulla voi säätää mitkä keyframet näkyvät.

Animaation saa käyntiin Enter-näppäimellä.



Tehtävä:

Piirrä kävelyanimaatio haluamastasi hahmosta.

KENTTÄSUUNNITTELU

NAV16AP

2017-18

Suunnitellaan ja toteutetaan tasoloikkapeliin pelattava kenttä.

Kohderyhmä on lapset. Tämä määrittelee jo alussa raamit kenttäsuunniteluun.

Katsokaa ensin tämä:

https://www.polygon.com/2015/9/7/9272113/mario-nintendo-miyamoto-game-design

1.  
Suunnitelkaa paperille/koneella ensimmäinen layout kenttäänne, jossa ei ole muuta kuin mahdolliset kulkureitit, alusta loppuun. Tehkää mahdollisimman monipuolisesti ja vaihtelevasti reitit, jota kautta pelaaja voi edetä. Onko pelaajalla mahdollisuus valita reittinsä?

 2.
Suunnitelkaa layouttiin pelaajalle esteet, joita voi kohdata. Varioikaa mahdollisimman paljon. Viholliset, kiivettävät kohdat, kuolettavat kuopat, ansat, ajastetut hypyt...

3.
Onko kentässä interaktiota? Ovien avausta, nappien painamista, seinien tuhoamista...

4.
Visuaalinen ilme on tärkeä osa kentän mielekkyyden kannalta. Konseptoikaa visuaalinen ilme ainakin parista kohtaa kenttää, jotka ovat avain asemassa kentässä ja tuovat tason hengen parhaiten esiin.

5.
Tehkää pelimoottorissa raaka whiteboxaus (primitiivimuodot, laatikko/pallo/kolmio) kentästä. Voitte käyttää myös esim. Unitystä löytyviä omia block assetteja, joista löytyy kaikki peruspalikat, seinistä rappusiin. 

6.
Antakaa pelimoottorissa kentälle visuaalinen ilme. Tehkää kenttä loppuun noudattaen konseptia, jonka teitte kohdassa 4. Voitte myös haluttaessa käyttää Unityn Assetstorea hyväksenne ( https://www.assetstore.unity3d.com/en/#!/search/page=1/sortby=price/query=category:21 ),
josta löytyy ilmaisia valmisassetteja.

7.
Tallentakaa kaikki materiaali, luokan kansioon "Kenttäsuunnittelu".

Loppuun, asiaa aiheesta.
http://www.gamasutra.com/view/feature/131736/beginning_level_design_part_1.php 
http://www.worldofleveldesign.com/categories/cat_level_design_tutorials_tips.php
http://blog.digitaltutors.com/keeping-players-engaged-tips-great-game-level-design

Photoshop basics - Pokepallo

NME17AP

Lukuvuosi 2017-2018

Tehtävänä piirtää Pokepallo Photoshopissa.

Aloita avaamalla uusi Photoshop-tiedosto. Määritä sen kooksi 500px X 500px. Luo uusi taso (layer) oikeasta alakulmasta ja poista background-taso.

Uudelle tasolle tehdään Ellipsi työkalulla valkoinen ympyrä. Tasaisen ympyrän saa luotua, kun ensin painaa shiftin pohjaan ja sen jälkeen hiirellä vetää ympyrän. Ympyrän speksejä voi myös myöhemmin muokata. Koita tehdä ymypyrästä mahdollisimman iso, mutta kuitenkin sen kokoinen, että se mahtuu rajojen sisään. Shape details kohdasta poistetaan kokonaan reunat ja jätetään vain valkoinen keskiö.

Tämän jälkeen luodaan uusi taso. Uudesta tasosta saa tehtyä clipping maskin, jos painaa hiiren oikealla tason päällä ja valitsee kyseisen ominaisuuden. Tällöin uudelle tasolle piirrettäessä väri ei mene jo tehdyn ympyrän ulkopuolelle.

Valitse vasemmalta brush tool. Määritä sen kooksi n. 700 px ja valitse pyöreä sivellin ilman reunapehmennyksiä. Luo taas ympyrä, mutta tällä kertaa punainen ja vain pallon yläosaan. Luo sen jälkeen uusi taso punaisen ja valkoisen tason väliin. Tälle tasolle tehdään samalla idealla musta ympyrä, josta jää näkyviin vain kaistale.

Sitten luodaan uusi taso vanhojen yläpuolelle, johon samalla tekniikalla tehdään ympyrä, jossa on mustat reunat ja valkoinen keskiö. Taas uudelle tasolle tehdään pienempi ympyrä, jossa on harmaat reunat ja läpinäkyvä keskiö.

Sitten pallo onkin viimeistelyä vaille valmis. Punaiselta ja mustalta tasolta saa poistettua ylimääräiset, kun valitsee vasemmalta valikosta quick selection toolin ja maalaa sillä valkoisen tason, niin että ympyrä on valittuna (näkyy katkoviivalla). Tämän jälkeen hiiren oikealla saa näkyviin valikon, josta otetaan vaihtoehto select inverse. Sitten vain kumitetaan sekä punaiselta, että mustalta tasolta ylimääräiset pois.

Palloon saa helposti valoja ja varjostuksia käyttämällä sivellintä. Valitse vaalea väri ja tee pallolle hieman kiiltoa. Helpoiten se onnistuu käyttämällä pehmeäreunaista sivellintä. Sivellin valikosta löytyvällä mixer brush toolilla voi häivyttää vaaleata, jolloin efekti näyttää pehmeämmältä. Luo tällä (tai jollain muulla) tekniikalla palloon valoja ja varjoja. Muista, että jos jokin menee pieleen, niin nopea tapa mennä taaksepäin on ctrl+alt+z. Jos taas poistit liikaa niin ne saa takaisin painamalla crtl+shift+z.

Sitten on aika yhdistää tasot. Helpoiten se käy yhdistelmällä ctrl+shift+alt+e, jolloin Photoshop luo automaattisesti yhdistetyn kopion kaikista tasoista. Yksittäisen tason voi kopioida ctrl+j, jolloin se kopioi valittuna olevan tason. Siirrä yhdistetty taso ylimmäksi ja piilota muut tasot. Tasot saa piilotettua/näkyviin painamalla tason vasemmalla puolella näkyvää silmän kuvaa.

Viimeisenä tallenna tiedosto. Tähän voit käyttää pikakomentoa ctrl+s. Tallenna ensin .psd formaatissa. Tee uusi tallennus painalla shift+ctrl+s (save as) ja tallenna tällä kertaa muotoon .PNG. Tallennukset tehdään luokan kansioon pokepallo-kansion alle omalla nimellä.

Photoshop basics

NME17AP

Lukuvuonna 2017-2018

Lets start by opening Photoshop and creating a new document. This can be done by clicking file tab and selecting new. This opens a new window that has properties for the new document. You can select width and height in different units as well as resolution. There are also options for color mode and profile but you can just leave them as they are right now. When you're done, click create.

Now you have a blank document. Start by creating a new layer. This can be done by clicking the new layer icon in the bottom right corner. There is also a shortcut key shift + ctrl + alt + N that will do the same thing. If you want to copy a layer press ctrl + J with a layer selected.

Click the brush tool that is located on the left side or press B.

Brush tool has a large brush type selection which can be opened by clicking the right mouse button. Select hard round brush. Now take a look at the top. There are different brush modes and options for opacity and flow.

Difference between opacity and flow are that with flow you can click and draw and the color builds up. With opacity the opacity will remain same with one click. If you click again then the color will start to build up.

You can change your brush color from the right side that has a color slider. Simply click on the color you want and it will appear on the bottom left corner.

The bottom left corner has colors for painting and erasing. If you erase area that is transparent it will not add color to it. Only background layer works that way. You can switch the default black and white back by pressing d. You can also color a full layer by pressing alt + delete.

Eraser tool can be found on the left side. If you have a pen tablet then you're able to use the top of your pen as a eraser. Shortcut for eraser is E.

Quick selection tool is also located on the left side. Quick selection selects areas you paint on to be for example copied to a new layer or used as a defined painting area. Short cut for quick selection tool is W.

Last tool we're testing in this tutorial is the shape tool. You can create basic shapes easily with this tool. Shortcut for it is U. When you have selected a shape you want you can change parameters like width and height. You can also define fill and outline. Shape is not a regular layer and if you want to merge it with another layer then you need to rasterize it first.

Right click the shape layer and select rasterize. Now you can select the two layer you want to merge and right click. Select merge layers and now you have only one layer left. If you want to merge layers but still keep the originals then use shortcut ctrl + alt +E.

Lastly we're going to take a look at the most useful tab on the top. Edit tab has commands like undo, paste and copy. It's not efficient to go to the tab to use these commands so you should consider learning a few shortcut for these. Ctrl + Z will undo the last step. If you want to undo more steps then use ctrl + alt + Z. In the same tab you can find transform tool. With this you can rotate, scale flip your drawn objects. Shortcut for this tool is ctrl + T.