Filteret “Spill av…” er egentlig ment som et hjelpemiddel ved arbeid med gif-animasjoner. Det fungerer som en enkel videospiller som spiller av animasjoner. Filtervinduet har valg for start og stopp, tilbakespoling og stegvis framvising bilde for bilde av animasjonen. Ved å klikke på “Koble fra”-knappen kan du trekke og dra i selve bildet og flytte det hvor som helst på skjermen.
Husk på å flat ut bilder med flere lag (høyreklikk på et av lagene i “Lag, Kanaler Baner”-vinduet, og velg “Flat ut bilde” i menyen som åpnes), ellers vil kun det aktive laget i bildet vises i “Spill av…” -filteret.
Når du er ferdig med å se hvordan bildet tar seg ut i websiden din, kan du lukke filtervinduet og trykke ‘Ctrl + Z’  for å angre sammenlimingen av lagene.

Last ned som pdf-fil

.

Funksjonen “Gradient Map”  (graderingskart) overfører fargene i en egendefinert gradient til tonene i bildets gråskala. Fargene i en to-fargers gradient (f.eks. blå/grønn) vil da bli overført slik at den blå fargen overføres til skyggene i bildet, høylyset i bildet fylles av den grønne fargen, og midttonene i bildet fylles av graderingen mellom blå og grønn.

Kopier laget to ganger slik at bildet består av tilsammen 3 lag. Graderingskartet skal påføres de to øverste lagene. Ved å gi disse lagene ulike lag-modus vil fargene i graderingskartet blande seg med fargene i det nederste orginal-laget, og på denne måten skape spennende effekter. Gi det øverste laget lag-moduset “Mykt lys”. Dette vil gi en følsom realistisk blanding av fargene.

Pass på at det øverste laget er markert, og velg to farger i verktøykasse-vinduets “Velg Forgrunns- og bakgrunnsfarger” som du ønsker å bruke i fargegradienten. (Forgrunnsfargen bestemmer fargene til skyggene i bildet, og bakgrunnsfargen bestemmer fargene til høylyset i bildet).

Velg fargene til gradienten, og påfør graderingskartet.

Med det øverste laget aktivt velger du “Farger -> Kart -> Gradient Map” i bildevinduets meny.

Skyggene i bildet vil nå få en blålig tone, mens høylyset får en grønn tone. Dette vises ekstra tydelig dersom vi kun ser laget med graderingskartet:

For å øke kontrasten i skyggene og i høylyset, og få frem de ulike fargenyansene i høylyset og i skyggene, skal vi også legge et graderingskart i lag 2:

Marker lag 2, og sett lag-modus til “Verdi”.

Endre forgrunnsfargen til svart, slik at du får en gradient der skyggene i laget får sort farge, mens høylyset har samme grønne farge som før. Velg “Farger -> Kart -> Gradient Map” i bildevinduets meny.

Bildet før og etter at graderingskartene er lagt til.

Som du ser gir dette en forsiktig blending av fargene. Ved å gi de to lagene med graderingskartene andre ulike lagmodus, vil fargene i lagene blande seg med hverandre på ulike måter og gi forskjellige fargeeffekter:

Effekten ved å bruke lagmodusene -Flett piksel verdier- og -Verdi-

Effekten ved å skjule laget med lagmoduset -Verdi-

Effekten ved å bruke lagmoduset -Farge- og skjule laget med lagmoduset -Verdi-

Effekten ved å bruke et lag med lagmoduset -Farge- og gi det andre laget lagmodus -Verdi-

Lagmodusene -Farge- og -Farge- i kombinasjon

ActionScript 3.0 er også tilgjengelig for fri bruk gjennom Adobe Open Source Flex SDK rammeverket.

Denne innføringen er basert på en av de flotte video-tutorialene til tutvid, overført til Adobe Flash CS4.

Åpne Flash CS4, og velg ‘Flash File (ActionScript 3.0)’ som type flash prosjekt.

Opprett tilsammen 3 lag i Timeline, og gi dem navnene ‘actionscript-preloader’, ‘preloader’, og ‘innhold’.

Reorganiser lagene slik at de får rekkefølgen som er vist i illustrasjonen over. Rent teknisk sett er det likegyldig hvilken rekkefølge lagene har, men for oversiktens skyld er det greit å organisere dem slik.
‘actionscript-preloader’ -laget skal inneholde actionscript-koden, og siden denne koden berører innholdet i alle lagene i flash-filmen er det logisk at dette laget er øverst. ‘preloader’-laget skal innholde grafikken til preloaderen (nedlasteren) til filmen, og siden denne blir vist før innholdet i filmen er det logisk å plassere dette laget over laget ‘innhold’ som inneholder grafikken til selve filmen.

Marker laget ‘innhold’ i Timeline, og velg ‘Rectangle Tool’ (tastatursnarvei R). Tegn en firkant i scenen.

Flash-filmen skal ikke begynne å kjøre før hele filmen er lastet ned. Derfor må frame 1 i filmen settes av til preloaderens grafikk og actionscriptet. Preloaderens grafikk består som regel av små bilder som nettleseren raskt laster ned. Actionscriptet stopper filmen i frame 1, mens resten av filmen lastes ned. Under nedlastingen vises preloaderens grafikk,samtidig som actionscriptet viser info om hvor mye som lastes ned.
Når hele filmen er lastet ned sender actionscriptet filmen videre til frame 2.
Derfor må grafikken til hovedinnholdet i flash-filmen plasseres i frame 2.
Klikk på keyframen i ‘innhold’-laget, og flytt den til frame 2.

Marker key-framen i ‘preloader’-laget i Timeline,og tegn en ny firkant i scenen ved hjelp av ‘Rectangle Tool’. Denne firkanten skal være den grafiske nedlastings-indikatoren, som øker etterhvert som mer og mer av filmens innhold lastes ned.
Velg ‘Selection Tool’ (tastatursnarvei V), og dobbelklikk på firkanten i scenen, for å markere både fyllet og linjen til firkanten.
Åpne ‘Properties’-vinduet, og gi firkanten en bredde (W) på 300 piksler og en høyde (H) på 10 piksler.

For at actionscriptet skal kunne kommunisere med de grafiske elementene i preloaderen, må de gjøres om til symboler. Når disse symbolene gis egne navn (Instance name) kan actionscriptet gi og få beskjeder fra de grafiske elementene. Vi skal derfor gjøre firkanten om til et ‘MovieClip’ som er en type symbol:
Dobbelklikk på firkanten i scenen for å marker både fyll og linje, og velg ‘Modify -> Convert to Symbol’ i filmenyen øverst i Flash CS4 vinduet. Dette åpner ‘Convert to Symbol’ vinduet. Velg ‘Movie Clip’ som symbol-type, og gi det nye MovieClipet navnet ‘mcPreloader’.

Pass på at ‘Registration’-punktet settes til senter-venstre (se illustrasjon). MovieClipets registreringspunkt må settes til senter-venstre fordi nedlastings-indikatoren skal utvides fra venstre til høyre etterhvert som innholdet i filmen lastes ned. Når actionscriptet registrerer hvor mye av innholdet som lastes ned, gir scriptet beskjed til nedlastings-indikatoren om å utvide seg i MovieClipets X-retning etterhvert som innholdet lastes ned. MovieClipet bruker da registreringspunktet som startpunkt for økningen av lengden.

Nå skal vi gjøre ferdig preloaderen:
Dobbelklikk på MovieClip ‘mcPreloader’ i scenen for å åpne MovieClipet. Dette åpner MovieClipets egen Timeline. Øverst oppe i Scene-vinduet står det nå ‘mcPreloader’ bak tittelen på scenen (Scene 1). Dette forteller at du nå redigerer MovieClipet.

Dobbelklikk på navnet til laget i MovieClipets Timeline (Layer 1), og gi det navnet ‘Fyll nedlastings-indikator’. (Trykk enter-tasten på tastaturet for å avslutte navneendringen). Opprett to nye lag, og gi dem navnene ‘Ramme til nedlastings-indikator’ og ‘Tekst’:

Vi skal flytte kantlinjen til firkanten over i et eget lag. Det er kun fyllet i firkanten som skal vokse fra venstre til høyre under nedlastingen, mens kantlinjen rundt skal være statisk. På denne måten vil kantlinjen fungere som en boks som viser hvor mye nedlastings-indikatoren har igjen før hele filmen er lastet ned.
Klikk på laget ‘Fyll nedlastings-indikator’ for å markere dette laget. Klikk deretter på et tomt sted i scenen med ‘Selection Tool’ verktøyet, for å velge bort markeringen av firkanten i scenen. Beveg musepekeren bort til linjen i firkanten, slik at det dukker opp en bøyd strek ved siden av musepekeren. Dette indikerer at du kan velge kantlinjen til firkanten. Dobbelklikk på kantlinjen for å velge alle 4 linjene rundt firkanten:

Når linjene er markert vises de som tykke hvitstiplede linjer (se bildet ovenfor). Velg ‘Edit -> Cut’ i filmenyen for å klippe vekk kantlinjene. Marker deretter laget ‘Ramme til nedlastings-indikator’ i timeline, og velg ‘Edit -> Paste in Place’ i filmenyen, for å lime inn kantlinjene i sitt eget lag. Kommandoen ‘Paste in Place’ limer inn kantlinjene på nøyaktig samme plass i scenen som de ble klippet ut.Klikk på et tomt sted i scenen for å fjerne markeringen av kantlinjen, og skjul visningen av fyllet i firkanten (klikk på øye-ikonet i ‘Fyll nedlastings-indikator’ -laget i timeline) for å se at kantlinjen nå ligger i et eget lag (‘Ramme til nedlastings-indikator’ -laget):

Nå som elementene til den grafiske nedlastings-indikatoren er lagt i egne lag, skal vi gjøre dem om til symboler med egne instans-navn, slik at actionscriptet kan kommunisere med dem:
Klikk på laget ‘Ramme til nedlastings-indikator’ for å markere alle kantlinjene til firkanten i scenen, og velg ‘Modify -> Convert to Symbol’ (F8) i filmenyen.
I ‘Convert to Symbol’ -vinduet som åpnes velger du ‘Movie Clip’ som symbol-type, og gir det nye MovieClipet navnet ‘mcNedlasterLinje’. Legg merke til at ‘Registration’ -punktet er satt til senter-venstre. Klikk ‘OK’ for å gjøre kanlinjene til et MovieClip:

Gjør det samme med fyllet til firkanten i laget ‘Fyll nedlastings-indikator’, og gi det nye MovieClipet navnet ‘mcNedlasterFyll’.
Om du nå åpner ‘Library’ -vinduet vil du se at .fla fila innholder 3 MovieClip, der to av MovieClipene (mcNedlasterLinje og mcNedlasterFyll) ligger inni det tredje (mcPreloader):

Før actionscriptet kan kommunisere med MovieClipene må hvert MovieClip i scenen ha et eget unikt navn (Instance name). Dette kommer av at et symbol (slik som f.eks. et MovieClip) kan gjenbrukes flere ganger i en flash-film, og når actionscriptet skal kommunisere med et symbol må det vite nøyaktig hvilket av symbolene det kommuniserer med:
Klikk på MovieClipet ‘mcNedlasterLinje’ i scenen, og åpne ‘Properties’ -vinduet. Øverst i  vinduet er en tekstboks som heter ‘<Instance Name>’.
Rett under tekstboksen står det hvilket MovieClip som er markert i scenen. Pass på å sjekke at det er MovieClipet ‘mcNedlasterLinje’ som er valgt, og gi det instans-navnet ‘NedlasterLinje_mc’.
Det er dette instans-navnet som actionscripet forholder seg til. Gi også MovieClipet ‘mcNedlasterFyll’ (i ‘Fyll nedlastings-indikator’ -laget) et unikt instans-navn på samme måten, ved å gi det instans-navnet ‘NedlasterFyll_mc’:

Preloaderen skal også ha en statisk tekst som forteller brukeren av flash-filmen hva som skjer.
Klikk på ‘Tekst’ -laget i timeline, og velg ‘Text Tool’ -verktøyet. Klikk og dra ut en tekstrute i scenen, og skriv teksten ‘Laster …’ i ruten:

I ‘Properties’ -vinduet setter du tekst-størrelsen til ’22′, og velger ‘Static Text’ som tekst-type. Velg en passende tekst-farge i valget for ‘Color’:

Bruk ‘Selection Tool’ verktøyet, og plasser teksten over nedlastings-indikatoren.
Klikk på et tomt sted i scenen for å fjerne markeringen av den statiske teksten, og velg deretter ‘Text Tool’ verktøyet igjen. Klikk og dra ut en ny tekst-rute til venstre for den statiske teksten. I denne tekst-ruten skal preloaderen hele tiden vise hvor mange prosent av filmen som er lastet ned. Denne informasjonen skal tekst-ruten få av actionscriptet. Derfor behøver du ikke skrive inn noe tekst her, men tekst-ruten må være av tekst-typen ‘Dynamic Text’ for å kunne kommunisere med actionscriptet. Velg ‘Dynamic Text’ som tekst-type i ‘Properties’ -vinduet, og gi også tekstruten et unikt instans-navn (prosent_txt), slik at actionscriptet vet at det er denne tekst-ruten som skal ha info om prosenten:

I tillegg til disse opplysningene skal preloaderen også vise nøyaktig hvor mange bytes hele flash-filmen består av, og nøyaktig hvor mange bytes som til enhver tid er lastet ned. Utregningen og registreringen av dette gjøres av actionscriptet, og vi skal sette inn tekst-ruter som tar i mot og viser disse dataene fra actionscriptet:
Opprett to nye tekst-ruter av typen ‘Dynamic Text’, og gi dem henholdsvis instans-navnene ‘hittilLastetKb_txt’ og ‘totaltAntallKb_txt’. Sett tekststørrelsen til 12. Plasser tekst-ruten ‘hittilLastetKb_txt’ under venstre hjørne av nedlastings-indikatoren, og plasser tekst-ruten ‘totaltAntallKb_txt’ til høyre for tekst-ruten ‘hittilLastetKb_txt’. Opprett deretter en tekst-rute av typen ‘Static Text’. Skriv inn teksten ‘av’, og plasser denne tekst-ruten mellom de to dynamiske tekst-rutene:

Når preloaderen kjører vil disse tekst-rutene vise hvor mange bytes som er lastet av det totale antall bytes som skal lastes. Husk på å høyrejustere teksten i tekst-ruten ‘hittilLastetKb_txt’ (velg ‘Align Right’ i ‘Properties’ -vinduet). Ved å gjøre dette unngår du at det oppstår mellomrom mellom teksten i tekst-ruten ‘hittilLastetKb_txt’ og teksten ‘av’ i den statiske tekst-ruten.

Nå er alle elementene i preloaderen på plass. Det mangler bare å gi selve preloader-MovieClipet et eget instans-navn: Gå tilbake til scenens timeline (Main Timeline), ved å klikke på ‘Scene 1′ linken øverst i scene-vinduet (se tidligere bilde). Marker MovieClipet ‘mcPreloader’, og gi det instans-navnet ‘preloader_mc’ øverst i ‘Properties’ -vinduet:

Med alle elementene til preloaderen gjort om til symboler med egne unike instans-navn, slik at actionscriptet kan kommunisere med dem, er det tid for å legge inn actionscriptet i ‘actionscript-preloader’-laget øverst i timeline.
Klikk på ‘actionscript-preloader’ -laget for å markere det, og klikk på ‘Actions-Frame’-fanen. Dette åpner actionscript-editoren.

Actionscriptet i ‘actionscript-preloader’-laget kan kommunisere med preloaderen og alle elementene inni preloaderen fordi disse har fått egne unike instans-navn.
Hele scriptet gjengis under, med kommentarer (linjene med // eller /* foran) for å beskrive hva scriptet gjør:

————————————————————————————————————————————————————-

// Denne kommandoen stopper filmen i frame 1, slik at preloaderen får lastet ned hele filmen før visningen starter:

stop();

/*
Preloader-kodens oppgave er å registrerehvor mange bytes av filmen som er lastet ned, og sammenligne denne mengden med filmens totale fil-størrelse. Denne kontrollen må gjøres kontinuerlig gjentatte ganger, helt til hele filmen er lastet ned. Selv om filmen er stoppet  frame 1 looper den innom frame 1 med frameratens fart: Dersom filmens framerate er satt til 24 frames per second (fps) vil altså filmen loope innom frame 1 24 ganger i sekundet. For at preloader-koden skal kontinuerlig sjekke hvor mye av filmen som er lastet ned, festes den til frame 1 (som kontrolleres 24 ganger i sekundet) ved hjelp av en ‘event listener’. Funksjonen ‘nedlaster’ bruker ‘EventListener’ for å jevnlig sjekke hvor mye av filmen som er lastet ned.
*/

addEventListener(Event.ENTER_FRAME, nedlaster);

// Oppretter funksjonen “nedlaster”:

function nedlaster(e:Event):void{

/*
Oppretter variabelen “sumLasting” som får vite flash-filmens totale størrelse av propertyen ‘bytesTotal’til
actionscript-klassen ‘loaderInfo’.
*/

var sumLasting:Number = loaderInfo.bytesTotal;

/*
Oppretter variabelen “erLastet” som får vite hvor mye av flash-filmen som er lastet av propertyen ‘bytesLoaded’ til
actionscript-klassen ‘loaderInfo’.
*/

var erLastet:Number = loaderInfo.bytesLoaded;

/*
Oppretter variabelen “total” som inneholder summen av antall-bytes-som-er-lastet delt på antall-bytes-som-hele-flash-filmen-er-på.
Dette tallet brukes senere både til å bestemme lengden på den grafiske nedlastings-indikatoren, og til å beregne
prosenten av hvor mye som er lastet ned:
*/

var total:Number = erLastet/sumLasting;

// Setter opp to valg for hva som skal skje på de oppgitte vilkårene:

// Dersom variabelen ‘erLastet’ er lik variabelen ‘sumLasting’ skal EventListener fjernes, og flash-filmen skal fortsette til frame 2:

if (erLastet == sumLasting){
removeEventListener(Event.ENTER_FRAME, nedlaster);
gotoAndStop(2);

// … så lenge vilkårene for valg nr.1 ovenfor ikke er oppfyllt skal flash-filmen gjøre dette:

} else {

/* Tallet i variabelen “total” legges inn i ‘scaleX’-propertyen til MovieClip ‘NedlasterFyll_mc’
som ligger inni MovieClip ‘preloader_mc’.
*/

preloader_mc.NedlasterFyll_mc.scaleX = total;

/* Ved å multiplisere tallet i variabelen ‘total’ med 100, får vi prosenten av hvor mye som er lastet.
Dette prosent-tallet legges inn i ‘text’-verdien til tekst-ruten “prosent_txt. Prosent-tallet får
mange unødvendige desimaler, så vi bruker ‘Math’-klassens ‘Math.floor’-metode for å runde ned tallet
til nærmeste hele tall. Tekst-strengen ‘%’ legges til på slutten slik at man kan se at det er
prosenten som vises i tekst-ruten:
*/

preloader_mc.prosent_txt.text = Math.floor(total*100) + “%”;

/*
Verdien til variabelen ‘erLastet’ og tekst-strengen ‘bytes’ legges inn i ‘text’ verdien
til tekst-ruten ‘hittilLastetKb_txt’.
*/

preloader_mc.hittilLastetKb_txt.text = erLastet + “bytes”;

/*
Verdien til variabelen ‘sumLasting’ og tekst-strengen ‘bytes’ legges inn i ‘text’ verdien
til tekst-ruten ‘totaltAntallKb_txt’.
*/

preloader_mc.totaltAntallKb_txt.text = sumLasting + “bytes”;
}
}

—————————————————————————————————————————————————-

Når du trykker ‘Ctrl + Enter’ på tastaturet kjøres filmen (swf-fila) i flash-playeren. Fordi filmen kjøres fra din egen PC går nedlastingen så fort at den knapt vises. Simuler nedlasting ved å velge ‘View -> Simulate Download’ i menyen til flash-playeren. Dersom hastigheten fremdeles er for rask, kan du bestemme nedlastingshastigheten ved å velge ‘View -> Download Settings’ i menyen:

Dersom preloaderen fremdeles vises for raskt, kan du gjøre filmen tregere ved å gjøre .fla-fila større: Importer f.eks. et stort foto til scenen i laget ‘innhold’, slik at fotoet legges i hovedinnholdet i filmen.

Denne preloaderen kan videreutvikles på mange måter. Den grafiske nedlastings-indikatoren f.eks. vil fungere som før selv om den roteres i andre retninger, fordi MovieClipet skaleres i sin egen x-retning og ikke i forhold til scenens koordinater:

Du kan også maskere nedlastings-indikatoren slik at det f.eks. ser ut som om den øker med en sirkel om gangen:
Opprett et nytt lag over ‘Fyll nedlastings-indikator’ -laget, og gi det nye laget navnet ‘maskering’. Med ‘maskering’-laget aktivt tegner du en sirkel med ‘Oval Tool’ verktøyet, og kopierer den flere ganger slik at hele nedlastings-indikatoren er dekket med en kjede av sirkler. Høyreklikk på ‘maskering’-laget, og velg ‘mask’ i menyen som åpnes for å gjøre grafikken i laget om til en maske:

Dersom du låser ‘maskering’-laget og ‘Fyll nedlastings-indikator’ -laget (klikk på ‘Lock’-ikonet til lagene) aktiveres maskeringen i scenen:

Om du ikke har Adobe Flash kan du også bruke Open Source Adobe Flex SDK for å lage swf-filer ved hjelp av ActionScript 3.0:

http://www.adobe.com/devnet/flex.html

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex4sdk

Eclipse IDE er en gratis open source programmering editor som du kan bruke til å lage swf-filer ved hjelp av Flex SDK. Ved å installere Flex som en plug-in i Eclipse kan du utvikle og bygge flash-programmer på en enkel måte.

Last ned artikkelen som pdf

Når modellen av tettstedet nå skal brukes i BGE måtte jeg omstrukturere hus-modellene. Det er viktig at normalene (normals) vender riktig vei utover, og at meshen til modellene er godt modellert, slik at teksturen kan legges på riktig.

Noen av bygningene var fra før av modellert nøyaktig, men på grunn av det store antall bygninger var de fleste husene bare røfflig modellert. Jeg hadde i utgangspunktet bestemt meg for å heller vektlegge tekstureringen av bygningene istedet for å detalj-modellere dem, for ikke å gjøre arbeidsmengden uoverkommelig (se Del 1). Jeg har fortsatt på denne strategien, siden mange av bolighusene kan standardiseres.

Mesh garasje modell.

Jeg har tatt  for meg “standardhusene”, og teksturert dem ved hjelp av UV-mapping. Teksturen er i første omgang kun vanlig standard “hus-tekstur”, fordi jeg på dette tidspunktet mangler gode detalj-fotografi av husene.

Tekstur til garasje-modell.

Hus-modellen i illustrasjonene her (garasjen ved siden av kjøpesenteret) måtte re-modelleres en del, så når den var ferdig, kopierte jeg modellen og plasserte den på steder i tettstedet hvor det skal være en garasje.

Teksturert garasjemodell

På denne måten har jeg gjenbrukt modellen. Denne arbeidsmetoden blir også brukt på de andre “standardhus”-modellene (bolighus, bolighus med tilbygg, etc.).

Husmodell med tilbygg

Modellen av vegnettet måtte byttes ut fullstendig. Det viste seg å være vanskelig å teksturere et objekt laget av en bezier-kurve, ved hjelp av UV-mapping. Jeg har istedet laget vegnettet av et Plane-Objekt, der facene er tilpasset slik at teksturen blir best mulig fordelt.

De yttre og indre kurvene forenet til én kurve med samme form som veg-nettet

Over: gammel vegkurve laget ved hjelp av bezier-kurver.

Ny vegkurve laget vha. Plate-objekt.

Et annet problem som oppstod var at Blender begynte å krasje når presentasjonen ble kjørt i spillmotoren (tastatursnarvei P). Problemet ble bare værre etterhvert som flere modeller fikk teksturer. Jeg trodde først at dette kom av at modellen av tettstedet var for stor, og at det var for mange polygoner. Jeg forsøkte da å dele opp presentasjonen, slik at hvert kvartal i tettstedet ble lagt i sin egen blender-fil. Tanken var da å la Blender automatisk laste inn et nytt kvartal i blenderplayer (den kjørbare fila) når brukeren krysset (den usynlige) grensen til dette kvartalet. Men selv med en liten modell av tettstedet, med få polygoner, fortsatte Blender å krasje.
Etter litt søking på nettet fant jeg ut at PCen´s grafikk-kort (Intel integrert grafikkkort) ikke støtter shaders, og at det derfor ikke kunne være lys-objekter (Lamp) i modellen av tettstedet. Jeg hadde lenket et Lamp-objekt til kameraet for å lyse opp modellen ved bruk i VRML, og det var særlig dette som skapte problemet.
Nå når jeg har fjernet alle lys-objekt i presentasjonen fungerer alt som det skal.

Jeg har også gjort endringer i presentasjonen av vegetasjonen (trærne). Grafikk-kortet støtter kun den enkleste formen for materialer som Blender kan bruke i interaktive presentasjoner («Blender Multitexture Materials»), så jeg kan ikke teksturere et plateobjekt med en tekstur laget ved hjelp av et transparent bilde, og bruke det i modellen av tettstedet, slik jeg har gjort i VRML-fila (Del 8). Jeg har i første omgang valgt å modellere trærne som 3d-modeller, som jeg legger tekstur på. Jeg modellerte først et standard-tre (stamme + greiner) ved hjelp av Blenders python-script “Tree From Curves” (Scripts -> Wizards -> Tree From Curves), og lagde tre-kroner av tre sphere-objekter som ble deformert. Dette standard-treet har jeg deretter kopiert, og gjort små endringer på (tre-kronenen ble rotert ulikt i hver kopi). Tre-modellene krever mye prossesor-kraft pga. mange polygoner, så de er foreløpig brukt sparsomt i tettstedet, men jeg planlegger å ta i bruk en annen måte å modellere skogholt på:  når en plate er modellert og utformet som et skjermbrett (som skal være skogholtets synlige side) kan jeg markere facene (i meshen) som skal være gjennomsiktige og velge normals -> flip. Dette vil gjøre disse facene  gjennomsiktig når de sees fra forsiden.

tremodell

Mesh trestamme med UV-layout.

Mesh trekrone med UV-layout.

Fordi jeg ikke kan ha lys i modellene må jeg bake inn skygger i teksturene for å unngå at de blir for flate og kjedelige. I noen av modellene hender det at ambient teksturen blir bare svart under bakingen. Løsningen er å velge ‘normals -> recalkulate inside’, og deretter bake teksturen. Deretter må man velge ‘normals -> recalculate outside’ for å vrenge modellen igjen og vise teksturen. Dette må gjøres mens man er i vis vertex modus.
Det hender også at jeg får beskjed om “No image” når jeg forsøkte å bake. Jeg rekalkulerer normalene, men må først lukke og åpne blender-fila før jeg får det til. Hva som er årsaken til dette, har jeg ikke kommet til bunns i ennå.

Å lage presentasjonen ved hjelp av Blender Game Engine gir flere muligheter, og gjør prosjektet fleksibelt. Jeg har bl.a. lagd en animasjon, der kameraet flyr gjennom tettstedet, og lagret animasjonen som en AVI-fil.

Delvis teksturert modell av tettsted

Jeg har brukt Blender versjon 2.49b, fordi den nye versjonen av Blender (2.5 beta) ennå ikke har mulighet for å eksportere et Game Engine prosjekt som kjørbar fil (.exe).
Ennå gjenstår det å legge tekstur på flere modeller, men det går fremover!

Del 1 | Del 2 | Del 3 | Del 4 | Del 5 | Del 6 | Del 7 |  Del 8 | Del 9 | Del 10 | Del 11 |

Når du skal teksturere et objekt som skal brukes i et spill, må du koble teksturen til objektet slik at spillmotoren kan vise teksturen.
Dette gjøres ved å lage et 2D-kart av overflaten til 3d-objektet. ‘UVW mapping’ er en mattematisk teknikk som på en nøyaktig måte lager et kart over overflaten til 3d-objektet, der hvert punkt i kartet (map) korrensponderer med et punkt på overflaten til objektet.

Blender har egne verktøy for å lage slike kart, og i Blender kalles et slikt kart for en ‘UV-layout’. Dette er en 2 dimensjonell flat strektegning av flatene til 3D-objektet, der du kan tegne eller lime inn andre bilder i tegningen ved hjelp av et bildebehandlings-program slik som f.eks. Gimp.

Når du har bearbeidet UV-layouten, lagrer du tegningen som en egen bildefil. Denne bildefilen kalles for en ‘texture map’ (et tekstur kart).
Når du skal legge tekstur-kartet over 3D-objektet igjen, bruker du en teknikk som heter ‘UV mapping’. Blender har også egne verktøy for å legge tekstur-kartet over 3D-objektet.

Hele denne prosessen kalles gjerne for ‘unwrapping’ (pakke dem ut), og dette refererer til handlingen med å brette ut og skrelle av overflaten til et 3d-objekt, og endre den til en flat 2d-tegning.

Bilde: Wikimedia Commons http://en.wikipedia.org/wiki/File:Cube_Representative_UV_Unwrapping.png

Opprett først et 3d-objekt i 3d-scenen. I eksemplet her skal vi bruke en enkel hus-modell med skråtak. Pass på at 3d-modellens normals vender utover, slik at du senere unngår problemer med visningen av teksturen:
Klikk på knappen «Editing F9» i knappe-vinduet, og klikk på knappen «Draw normals» i «Mesh Tools Moore» -panelet. Dette vil vise modellens normals som små blå streker som stikker ut fra midten av flatene i modellen (1).

1

Disse strekene skal alle strekke seg utover på utsiden av modellens flater. Dersom strekene vender innover på noen av flatene, må du markere disse flatene, og velge ‘Mesh > Normals > Recalculate Outside’ i header-linja til 3d-scene vinduet, slik at normalene peker utover (2).

2

Dersom normalene er vanskelige å se, kan du gjøre de blå strekene lengre ved å øke verdien for ‘Nsize’ i tekstboksen over «Draw Normals» -knappen (1).
Trykk ‘Tab’-tasten på tastaturet for å vise modellen i redigerings (edit) -modus.
Velg ‘Egde’ (linje) som valg-modus (trykk ‘Ctrl + Tab’ på tastaturet for å åpne ‘Select Mode’ menyen og velg ‘Egde’, eller klikk på ‘Egde Select mode’ -knappen i 3d-scenens menylinje) (3).

3

For at vi skal kunne lime en uv-tekstur på flatene til modellen, må vi fortelle Blender hvordan overflaten til modellen ser ut. Dette gjør vi ved å brette ut hele overflaten til modellen, og gjøre den om til en flat 2d-tegning. For å få til dette må vi lage noen kutt i modellen, slik at overflaten kan brettes ut langs disse kuttene. Kuttene må gjøres langs modellens linjer.
Først markerer vi linjene der kuttene skal være.
Høyreklikk på en linje for å markere den (4.1). Hold inne shift-tasten på tastaturet mens du markerer resten av linjene (4.2). På denne måten beholdes markeringene av alle linjene (4.3).

4

Forestill deg at hus-modellen er en pappeske som du skal flatpakke, og marker kuttene slik at pappesken kan brettes ut til en eller flere flater.
Når alle kuttene er markert på denne måten, må vi fortelle Blender at de markerte linjene er kuttlinjer:
Trykk ‘Ctrl + E’ på tastaturet for å åpne ‘Egde Specials’ -menyen, og velg ‘Mark Seam’.
De markerte linjene får nå en kraftig oransje farge, for å vise at Blender har registrert linjene som kutt (5).

5

Vi skal nå brette ut modellens overflate, og gjøre den om til en flat 2d-tegning.
Det er egentlig ikke selve overflaten som brettes ut, men et bilde av overflaten som gjøres om til en flat tegning.
Velg alle flatene til modellen ved å trykke ‘A’ -tasten på tastaturet. (Når alle flatene i modellen er valgt får modellen en fiolett farge).
Trykk ‘U’ -tasten på tastaturet (pass på at musepekeren befinner seg i 3d-scenen mens du gjør dette; ellers vil ikke tastatur-snarveien fungere), for å åpne ‘UV Calculation’ -menyen. Klikk på menyvalget ‘Unwrap’ (6).

6

Blender har nå generert et 2D-kart av modellens overflate. 2D-kartet er lagret i Blenders ‘UV/Image-editor’, så vi må åpne ‘ UV/Image-editor’ vinduet for å se 2d-kartet.
(Pass på at alle flatene i modellen fremdeles er markert, før du åpner ‘ UV/Image-editor’ vinduet, ellers vil ikke 2D-kartet vises!).

Du kan åpne ‘ UV/Image-editor’ vinduet ved å klikke på «Display Current Window Type»-knappen (Vis Nåværende Vindu-type) helt til venstre i verktøylinja under 3d-scenen. (I Blender kalles denne verktøylinja også for «Header»). Dette åpner menyen ‘Window type’ (Vindu-typer), der du velger  ‘ UV/Image-editor’ for å endre vinduet med 3d-scenen til et ‘ UV/Image-editor’ vindu.
Vi skal imidlertid velge en annen fremgangsmåte for å vise ‘ UV/Image-editor’ vinduet, fordi vi behøver å ha både 3d-scenen og ‘UV/Image-editor’ -vinduet åpent samtidig, mens vi redigerer 2D-kartet:
Del 3d-scene vinduet i to ved å føre musepekeren over linjen som skiller 3d-vinduets header-linje og knappe-vinduets header-linje. Når musepekeren endrer seg til en dobbelpil (7), klikker du med høyre musetast for å åpne område-menyen.

7

Velg ”Split Area” (8).

8

En grå strek tegnes da opp tvers over hele 3d-scene vinduet (9).

9

Denne grå streken følger musepekeren, og du kan nå føre streken dit du vil dele 3d-scene vinduet i to, og klikke med venstre musetast for å dele vinduet. Du har nå to 3d-scene vinduer (10).

10

Størrelsen på vinduene kan justeres ved å klikke og dra i overgangen mellom vinduene med venstre musetast mens musepekeren er en dobbelpil (10).
Endre det høyre vinduet til et ‘ UV/Image-editor’ vinduet ved å klikke på «Display Current Window Type»-knappen (Vis Nåværende Vindu-type) helt til venstre i verktøylinja (11).

11

I ‘ UV/Image-editor’ vinduet kan du nå se 2D-kartet av modellens overflate (12).

12

I Blender kalles 2D-kartet for en UV-layout. UV-layouten vil ikke vises i ‘ UV/Image-editor’ vinduet dersom ikke alle flatene til 3d-modellen i 3D-scene vinduet er markert. Så dersom du ikke ser UV-layouten i ‘UV/Image-editor’ vinduet, må du markere alle flatene til 3d-modellen ved å trykke ‘A’-tasten på tastaturet mens musepekeren befinner seg i 3D-scene vinduet (12).
‘UV/Image-editoren’ har mange verktøy for å redigere UV-layouten slik at det ferdige tekstur-kartet tilpasses 3d-modellen så nøyaktig som mulig.
UV-layouten som Blender har generert er, som navnet sier, en layout og en grunnskisse som viser hvordan flatene til 3d-modellen ser ut. Denne grunnskissen eksporteres som en bildefil i TGA eller SVG formatet, slik at du kan bearbeide den i et bildebehandlings-program (f.eks. Gimp) eller tegneprogram (f.eks. Inkscape). Bearbeidingen kan bestå i å legge inn fotografi i layouten der fotografiene tilpasses formen på flatene, eller du kan tegne dine egne mønstre eller tegninger i flatene. Bildet som da er laget på grunnlag av layouten importeres deretter i ‘UV/Image-editoren’ igjen.
Noen av verktøyene i ‘UV/Image-editoren’ brukes for å lage en god UV-layout, slik at du får et godt utgangspunkt når du skal bearbeide layouten i et bildebehandlings-program/tegneprogram, mens andre verktøy i ‘UV/Image-editoren’ brukes for å justere det ferdige bildet etter at det er importeret i Blender igjen, slik at det kan tilpasses 3d-modellen på best mulig måte.
La oss først se på verktøyene som brukes for å lage en god UV-layout.
Mange av verktøyene  i ‘UV/Image-editor’ vinduet som brukes for å endre på flatene i UV-layouten er de samme som brukes for å endre på 3d-modellen i 3d-scene vinduet. Du kan f.eks. zoome inn og ut i UV-layouten ved å rulle med musehjulet eller trykke ‘+’ og ‘-’ tastene i det numeriske tastaturet. Du kan også flytte rundt i visningen av layouten ved å klikke og dra med midterste musetast (musehjulet). Du kan markere en vertex eller en flate (face) i UV-layouten ved å venstreklikke på vertexen/flaten, og du kan velge flere vertexer/flater samtidig ved å velge ‘border-select’ verktøyet (trykk B-tasten på tastaturet), og dra en firkantet markering rundt vertexene/flatene du ønsker å markere. Du kan flytte på markerte vertexer/flater ved å velge flytte-verktøyet (trykk G-tasten på tastaturet), eller du kan markere eller velge bort alle vertexene/flatene i UV-layouten ved å trykke A-tasten på tastaturet. Du kan også skalere markerte vertexer/flater ved hjelp av skaler-verktøyet (S-tasten på tastaturet), eller rotere dem ved hjelp av roter-verktøyet (R-tasten på tastaturet).

Når Blender genererer UV-layouten plasseres ofte flatene «hulter til bulter». Tak-flatene i huset vårt kan f.eks. være plassert i hver sin ende av layouten, og flater som i 3d-modellen har samme dimensjoner, kan i layouten ha fått ulike dimensjoner. Dette er skjevheter som vi må ordne på i layouten før vi kan eksportere den som en bildefil.
Dersom flater som tilhører hverandre i 3d-modellen (slik som f.eks. de to tak-flatene, de to hus-mønene, de to lang-veggene, og de to kort-veggene) også plasseres ved siden av hverandre i layouten, vil det være mye letter og mer oversiktelig å bearbeide layouten i et bildebehandlingsprogram. Det er også viktig at flater som har samme dimensjon i 3d-modellen (slik som f.eks. de to hus-mønene) også har samme dimensjon i layouten. Dersom vi f.eks. la inn et bilde av en tømmervegg i flatene til hus-mønene, der den ene flaten i layouten var større enn den andre, ville bildet av tømmerveggen fått ulik størrelse i mønene på 3d-modellen, når det ferdige tekstur-kartet ble lagt på 3d-modellen.

Heldigvis har Blender mange verktøy for å endre på layouten.

I 3d-scenen kan du velge mellom å vise 3d-modellens vertexer, flater (faces) eller linjer (egdes) når 3d-modellen vises i redigerings-modus (Edit mode). På samme måte kan du også velge mellom å vise UV-layouten´s vertexer, flater (faces) eller «øyer» (Islands) i  ‘UV/Image-editoren’:
I header-linja til ‘UV/Image-editor’ vinduet er det 3 knapper for ulike visnings-modus (13).

13

Det er ‘UV vertex select mode’ (standard valg-modus), ‘UV Face select mode’, og ‘UV Island select mode’. UV-layouten åpnes alltid i ‘UV vertex select mode’. I dette visnings-moduset kan du markere og manipulere vertexene i layouten, på samme måte som du kan endre på vertexene til 3d-modellen i 3d-scenen når modellen vises i ‘Vertex select mode’.
(Legg merke til at funksjonene kalles for «select mode» dvs. valg-modus, fordi de ulike modusene gir ulike måter å velge de ulike elementene til layouten på).
La oss bruke ‘UV vertex select mode’ (standard valg-modus) for å endre på den ene flaten som tilhører et av hus-mønene:
Høyreklikk på en av vertexene til flaten for å markere den (14.1). Hold inne shift-tasten, og høyreklikk på de to andre vertexene til flaten (14.2), slik at alle vertexene blir markert (14.3).

14

Trykk G-tasten på tastaturet, og flytt flaten slik at den plasseres ved siden av den andre hus-møn flaten (15).

15

Venstreklikk, eller trykk Enter-tasten på tastaturet for å avslutte flyttingen.
Husk på at du kan låse flytteretningen ved å trykke en etterfølgende retnings-tast etter at du har trykket G-tasten: Trykk på G-tasten etterfulgt av X-tasten for å låse flyttingen horisontalt, eller trykk G-tasten etterfulgt av Y-tasten for å låse flyttingen vertikalt.
Når hus-møn flatene senere i et bildebehandlings-program skal fylles med et fotografi av en tømmervegg, er det en fordel at de har samme rotasjon; altså at spissen til mønet peker oppover. På denne måten er det lettere å se hvordan fotografiet av tømmerveggen skal plasseres i flatene, når dette gjøres i bildebehandlings-programmet. Vi må altså rotere hus-møn flaten vi har markert 180 grader rundt:
Trykk R-tasten på tastaturet, og roter flaten ved hjelp av musen (16).

16

Hold inne Ctrl-tasten på tastaturet før du klikker venstre musetast for å avslutte rotasjonen. Dette låser rotasjonen, slik at den blir nøyaktig 180 grader. Du kan også trykke R-tasten etterfulgt av tallet ’180′ for å rotere flaten nøyaktig 180 grader.
Dersom hus-møn flaten vår ikke er like stor som den andre, må skalere den ned eller opp slik at den begge hus-møn flatene får samme størrelse. Trykk G-tasten på tastaturet, og flytt den markerte flaten oppå den andre hus-møn flaten for å se hvor mye den markerte flaten må skaleres. Forsøk å sentrer flaten i forhold til den andre hus-møn flaten så nøyaktig som mulig før du klikker med venstre musetast for å avslutte flyttingen. Trykk S-tasten på tastaturet, og skaler den markerte flaten ved å dra i musen (17).

17

Venstreklikk for å avslutte skaleringen. Trykk G-tasten igjen, og flytt den markerte flaten slik at den ligger ved siden av den andre hus-møn flaten.
Ved å bruke disse verktøyene kan du justere alle flatene i UV-layouten, slik at du får en oversiktlig layout som er lett å  bearbeide i et bildebehandlings-program. Pass på at ingen flater overlapper hverandre eller stikker utenfor rutenettet til ‘UV/Image-editoren’. Det er raskere å justere layouten men den er i ‘UV Face select mode’, fordi du da bare behøver å markere selve flatene (faces), slik at du slipper å markere én og én vertex.
Klikk på knappen ‘UV Face select mode’ i header-linja til ‘UV/Image-editor’ vinduet for å vise flatene (faces) til UV-layouten (18).

18

Når du forsøker å flytte på flatene (faces) til UV-layouten  vil du oppleve at noen av flatene henger sammen i hverandre, og ikke lar seg flytte uten at du deformerer de andre flatene. Dette kommer av at noen flater som ligger ved siden av hverandre deler de samme vertexene. Marker alle flaten i layouten ved å trykke A-tasten på tastaturet, og klikk på knappen «Sticky UV Selection» i header-linja til ‘UV/Image-editor’ vinduet (19).

19

Velg ‘Disable’ i menyen som åpnes, slik at alle flatene i UV-layouten får egne uavhengige vertexer.
‘UV/Image-editoren’ har et annet kraftig verktøy som er svært nyttig i arbeidet med å lage en oversiktlig layout: Du kan synkronisere 3d-visningen av 3d-modellen med visningen av UV-layouten i ‘UV/Image-editoren’, slik at når du høyreklikker på en flate i layouten så vil flatens plassering også markeres i 3d-modellen.
Klikk på knappen ‘Sync UV and Mesh Selection’ i header-linja til ‘UV/Image-editor’ vinduet for å slå på denne funksjonen (20), og høyreklikk på en av flatene i UV-layouten.

20

Flatens plassering i 3d-modellen vil da også bli markert (21).

21

På denne måten vet du nøyaktig hvor i 3d-modellen flaten hører hjemme, og du kan plassere flatene i UV-layouten på en logisk og oversiktlig måte: flatene til kort-veggene kan lett plasseres ved siden av hverandre, og på samme måte kan du nå legge flatene lang-veggene og tak-flatene ved siden av hverandre, slik at det blir lettere å legge på fotografiene i layouten i et bildebehandlings-program. Du kan også nå finne ut hvilken flate som tilhører gulvet i hus-modellen. Denne flaten vil ikke vises i den ferdige teksturerte 3d-modellen, og du kan trygt skalere ned denne flaten til et minimum, og på denne måten gi mer plass til de andre flatene i layouten (22).

22

Vær oppmerksom på at når du deaktiverer  ‘Sync UV and Mesh Selection’ -funksjonen vil alle flatene i layouten, utenom den som er markert, forsvinne! Trykk A-tasten på tastaturet mens musepekeren befinner seg i 3d-scene vinduet og marker alle flatene i 3d-modellen, for å vise alle flatene i layouten  igjen i ‘UV/Image-editor’ vinduet.
Det er som regel best å la flatene i layouten være så store som mulig. Derfor bør flater som ikke vil vises i den ferdig teksturerte 3d-modellen skaleres ned så mye som mulig, mens flater som vil være synlig bør være så store som mulig. Jo større flater du klarer å lage, jo bedre kvalitet vil teksturen få i den ferdige teksturerte 3d-modellen.
Når du endrer på flatene i layouten på denne måten vil det ofte oppstå problemer med at teksturen strekkes eller vrenges. Dette er ikke mulig å se før du har lagt inn et bilde i layouten. Heldigvis har Blender et eget test-bilde som du kan bruke for å sjekke og justere slike forvrengninger i layouten:
Klikk på menyvalget «Image» i header-linja til ‘UV/Image-editor’ vinduet, og velg «New» i menyen som åpnes (23).

23

Dette åpner et lite vindu som heter ‘New Image’. Her klikker du på knappen ‘UV Test Grid’ (24), og klikker deretter på ‘OK’ -knappen for å åpne test-bildet (25).

24

25

Nå kan vi bruke visningen av 3d-modellen i 3d-scenen til å sjekke om teksturen legger seg riktig over flatene i modellen. Teksturen skal ikke være fordreid eller ligge i feil retning.
Marker først alle flatene til UV-layouten i ‘UV/Image-editor’ vinduet, ved å trykke A-tasten på tastaturet mens musepekeren befinner seg i ‘UV/Image-editor’ vinduet. Pass også på at alle flatene i 3d-modellen er markert i 3d-scene vinduet.
Klikk deretter på knappen «Viewport Shading» i header-linja til 3d-scene vinduet, og velg ‘Textured’ som «Draw type» (tegne-metode) (26).

26

Vi kan nå se hvordan teksturen legger seg over 3d-modellen på alle flatene, ved å rotere 3d-modellen. Test-bildet består av hvite og sorte firkanter med pluss-tegn i ulike farger, og du sjekker om teksturen er korrekt på alle flatene ved å se om firkantene ikke er fordreid eller forstrukket.
Dersom f.eks. firkantene i teksturen til en av tak-flatene i 3d-modellen er mindre en firkantene i teksturen til den andre tak-flaten, må du skalere opp denne flaten i ‘UV/Image-editoren’, slik at firkantene i teksturen blir like store i begge tak-flatene.
Dersom firkantene i teksturen til en flate i 3d-modellen ikke er likesidet, tyder dette på at denne flaten har feile proposjoner i UV-layouten, og er strukket for mye i én retning. Du kan da skalere flaten i én retning ved å trykke S-tasten på tastaturet etterfulgt av X eller Y-tasten. Trykker du X-tasten vil skaleringen gjøres horisontalt, og trykker du Y-tasten vil skaleringen gjøres vertikalt.
Du bør også sjekke om flatene i UV-layouten har blitt speilvendt underveis. Det er ikke mulig å se dette kun ved hjelp av test-bildet, men du kan tegne/skrive dine egne tall eller bokstaver i flatene i layouten for å sjekke dette:
Når du la inn test-bildet i UV-layouten dukket det opp tre nye knapper på høyre side i header-linja til ‘UV/Image-editor’ vinduet (27).

27

Disse knappene (‘Enable image painting’, ‘Draws image with alpha’, og ‘Draws only alpha’) gir tilgang til tegne-funksjonen i ‘UV/Image-editoren’. Klikk på knappen ‘Enable image painting’ for å aktivere tegne-verktøyet (27). Flatenes omriss i layouten blir da til tynne grå linjer for å indikere at musepekeren nå fungerer som pensel (28).

28

Det kan hende du må zoome inn i layouten for å se flatenes omriss tydelig. Skriv inn et tall eller en bokstav i hver av flatene, ved å klikke og holde inne venstre musetast mens du tegner, og kontroller deretter i 3d-scenen om noen av tallene vises speilvendt på flatene i 3d-modellen (29).

29

Dersom et tall vises speilvendt i en flate i 3d-modellen må du speilvende denne flaten i UV-layouten:
Deaktiver tegneverktøyet ved å klikke på ‘Enable image painting’ -knappen igjen i header-linja til ‘UV/Image-editor’ vinduet.
Bruk «Mirror»-funksjonen for å speilvende flaten. Når du bruker «Mirror»-funksjonen speiles flaten horisontalt eller vertikalt. Klikk på menyvalget «UV´s» i ‘UV/Image-editor’ vinduets header-linje, og velg ‘Mirror -> Y Axis’ i menyen som åpnes, for å speilvende flaten loddrett, eller velg ‘Mirror -> X Axis’ for å speilvende flaten vannrett (30) (31).

30

31

Du vil nok ofte oppdage at du burde laget sømmene i 3d-modellen annerledes, og på den måten fått en annen UV-layout. Husk på at du når som helst kan lage en ny layout og begynne på nytt. Marker da alle flatene i 3d-objektet i 3d-scene vinduet, og bruk tastatursnarveien ‘Ctrl + E’ for å åpne ‘Egde Specials’ -menyen. Klikk på menyvalget «Clear Seam» for å slette alle markerte sømmer (32).

32

Deretter oppretter du nye sømmer, og lar Blender generere en ny UV-layout ved å trykke U-tasten på tastaturet, og velger «Unwrap» i ‘UV Calculation’ -menyen.
Blender har også en fin funksjon som lar deg slette bare noen av sømmene, og lar de du ønsker å beholde stå urørt igjen:
Pass på at ‘Sync UV and Mesh Selection’ -funksjonen i ‘UV/Image-editoren’ er deaktivert, og velg vertex visnings-modus (UV vertex select mode). Marker alle vertexene til flatene i UV-layouten som du ønsker å beholde, og klikk på menyvalget «UV´s» i header-linja til ‘UV/Image-editor’ vinduet. Velg «Pin» i menyen som åpnes (33).

33

Vertexene du markerte vil nå bli røde, for å vise at disse vertexene er låst (34).

34

Nå kan du slette alle sømmene til 3d-modellen i 3d-scene vinduet, og legge inn nye sømmer uten å miste flatene du markerte i UV-layouten i ‘UV/Image-editoren’. For når du deretter bruker ‘Unwrap’ -funksjonen for å opprette en ny UV-layout, vil flatene med vertexene som er låst forbli uberørt.
Dette er en svært arbeidsbesparende funksjon, fordi du slipper å på nytt måtte redigere flatene i layouten som ikke behøvde å rettes på.
Pass på å benytte plassen, som rutenettet i ‘UV/Image-editoren’ tilbyr, så godt som mulig. Dersom det er mye ubrukt tomrom etter at du omsorgsfullt har tilpasset flatene i UV-layouten, så skaler gjerne hele layouten opp så mye som mulig: Marker alle flatene i layouten ved å trykke A-tasten på tastaturet, og trykk deretter S-tasten for å skalere alle flatene på én gang. Så lenge alle flatene skaleres like mye på denne måten, vil det ikke oppstå noen uregelmessige forstrekkninger. Pass også på at ingen av flatene overlapper hverandre eller stikker utenfor rutenettet.

Når du har ordnet UV-layouten slik at den kan redigeres i et bildebehandlings-program, eksporterer du den som en bildefil i TGA eller SVG formatet:
Marker alle flatene i layouten, og klikk på menyvalget «UV´s» i header-linja til ‘UV/Image-editor’ vinduet. Velg ‘Script -> Save UV Face Layout…’ i menyen som åpnes (35).

35

Dette åpner verktøyvinduet til ‘UV Image Export’ -scriptet (36).

36

‘UV Image Export’ -scriptet har flere innstillinger. Du kan bl.a. bestemme piksel-størrelsen på teksturen (Size): Klikk på linjen ‘Size’, og skriv inn størrelsen du ønsker. Bildet opprettes automatisk likesidet, så størrelsen du angir bestemmer både høyden og bredden på bildet. Du kan også eksportere UV-layouten som en vektorgrafikk-fil (SVG).
Når du klikker på ‘OK’ -knappen åpnes ‘Save UV (Lagre UV) vinduet i knappe-vinduets posisjon. Gi bildefilen navn, og klikk på ‘Save UV (tga) -knappen for å lagre den som rastergrafikk i formatet TGA. TGA er et gammelt filformat som kan åpnes av de fleste bildebehandlings-program.
Husk å lagre Blender-fila når du har redigert UV-layouten og eksportert TGA-fila! Når du senere importerer tekstur-kartet, vil tekstur-kartet bli lagt inn i UV-layouten i ‘UV/Image-editoren’ igjen.

Nå skal vi åpne bildefilen med UV-layouten, i bildebehandlings-programmet Gimp.
I Gimp kan du lage din egen tekstur ved å tegne direkte i bildet, eller lime inn fotografier av f.eks. vegger, tak, mur etc.
UV-layouten  viser flatene i 3d-modellen, slik at du vet hvilken del av 3d-modellen du tegner på. Men ha også 3d-modellen (og UV-layouten) åpen i Blender mens du arbeider i Gimp, slik at du har god oversikt over hvor i 3d-modellen flatene i layouten hører hjemme. Når du til slutt har lagret det ferdig bearbeidete tekstur-kartet (som en TGA-fil), og har lastet denne inn i 3d-modellen i Blender igjen, kan du også raskt gjøre nødvendige endringer i tekstur-kartet i Gimp, og se resultatet i Blender bare ved å klikke på «Reload Image» -knappen i Blender. Så hold begge programmene åpne, og jobb i begge to samtidig.
I Gimp kan du enten tegne inn din egen tekstur i UV-layouten, eller lime inn fotografier som passer å bruke som tekstur i 3d-modellen (f.eks. blader og løvverk i modeller av trær og vegetasjon, eller fotografier av takstein og tømmervegger i modeller av hus og bygninger).
I eksemplet her skal vi legge inn et fotografi av en tømmervegg og et fotografi av takstein fordi vi skal lage tekstur-kart til en hus-modell.
Legg fotografiene inn i bildet ved å velge ‘Fil > Åpne som lag…’ i bildevinduets bildevindumeny (37).

37

Når fotografiene åpnes på denne måten, legges de automatisk inn i bildet i egne lag, over laget med selve layouten (bakgrunn-laget) (38).

38

Dersom fotografiene må skaleres ned (de må aldri skaleres opp; dette ødelegger kvaliteten såpass mye at fotoene ikke kan brukes som tekstur), så marker laget med fotografiet i lag-listen i  ‘Lag, kanaler, baner’ -vinduet, og velg ‘Skalerings-verktøyet’ i verktøykassen. Klikk på fotografiet i bildevinduet, og dra i en av skaler-firkantene i hjørnene til fotografiet, mens du holder inne Ctrl-tasten (39).

39

Ved å holde inne Ctrl-tasten mens du drar sammen fotoet med musen, beholdes aspekt-ratioen (forholdet mellom lengden og bredden) til fotoet, slik at motivet ikke forvrenges.
Bruk filteret ‘Uskarp maske’ (velg ‘Filter > Forbedre > Uskarp maske’ i bildevinduets meny) etterpå, og skarp opp fotografiet slik at kvaliteten blir så god som mulig. Dersom du behøver flere fotografier av samme type, så opprett kopier av de du har, ved å klikke på ‘Dupliser’ -knappen i ‘Lag, kanaler, baner’ -vinduet, mens laget med det aktuelle fotografiet er markert i lag-listen (40).

40

Bruk rotasjons -og flytte verktøyene for å plassere fotografiene på rett sted i layouten i bildevinduet.
De ulike fotografiene vil ofte komme i veien for hverandre. Du fletter da sammen lagene med samme type fotografier, og beskjærer det flettede laget: marker det øverste laget som skal flettes ned, venstreklikk på laget, og velg ‘Flett sammen nedover’ i menyen som åpnes (41).

41

Deretter reduserer du lagets gjennomsiktighet ved å dra ‘Dekkevne’ -hendelen i ‘Lag, kanaler, baner’ -vinduet ned til ca. 50% (42).

42

Så velger du ‘Beskjærings-verktøyet’ i verktøykassen, og haker av for valget ‘Bare gjeldende lag’ i verktøysalternativ -menyen under verktøykassen.
Beskjær det aktive laget i bildevinduet slik at fotoet kun dekker flatene det skal dekke i layouten.
Dersom du har laget en god UV-layout, og lagt flater, som skal ha samme type tekstur, ved siden av hverandre, blir det lettere å tilpasse fotografiene til layouten på denne måten.

Fortsett å dupliser fotografiene, og bruk layouten i bakgrunn-laget som mal for å gi dem rett plassering. Reduser gjennomsiktigheten til lagene med fotoene (ved hjelp av ‘Dekkevne’ -hendelen i ‘Lag, kanaler, baner’ -vinduet), slik at du kan se layouten med flateomrissene under (43).

43

Ved hjelp av denne metoden kan du lage en svært detaljert tekstur til 3d-modellen. Du kan f.eks. lime inn foto av dører og vinduer, legge på vindskier på taket eller legge inn en liten remse med gress nederst på veggen. Husk bare på å bruke fotografier med så god kvalitet som mulig. Når den ferdig teksturerte 3d-modellen brukes i et 3d-spill er det ofte spilleren (kamera) kommer nært innpå 3d-modellen, og da vil gode fotografier gi modellen et mer realistisk inntrykk med en tekstur som har skarpe linjer og klare farger.
Når du skal eksportere teksturen som TGA-fil, må du passe på at dekkevnen til alle lagene er 100%. Husk også på å skjule (bakgrunn) laget med selve UV-layouten, ved å klikke bort øye-ikonet foran navnet til laget i ‘Lag, kanaler, baner’ -vinduet (44).

44

Du vil nå ha en bildefil som består av et lappeteppe av sammenlimte fotografier, der hvert av fotoene er plassert i posisjonen til en egen flate i UV-layouten.

Nå kan vi importere dette tekstur-kartet i Blender, og legge det over 3d-modellen.

I 3d-scene vinduet markerer du først 3d-modellen som skal ha tekstur-kartet, og åpner panelene med material-funksjonene i knappe-vinduet (klikk «Shading» -knappen [F5], og klikk deretter på «Material buttons» -knappen i header-linja til knappe-vinduet).
Vi skal opprette et eget materiale som teksturen skal ligge i. Dette materialet vil automatisk bli lenket til det markerte 3d-objektet i 3d-scenen. I panelet «Links and Pipeline» er det en tekstboks som heter «Link to Object». Klikk på den lille knappen med pil i, som er plassert helt til venstre i tekstboksen, og velg «Add New» i menyen som kommer opp (45)

45

Klikk deretter inni tekstboksen, og gi det nye materialet et nytt unikt navn. Vær oppmerksom på at Blender alltid oppretter et nytt materiale på grunnlag av det forrige aktive materialet. Dvs. at det nye materialet egentlig er en kopi av det materialet som var aktivt i «Link to Object» tekstboksen da du klikket på «Add New». Dersom materialet du kopierte hadde mange spesielle egenskaper, må du altså passe på å endre alle egenskapene dersom du ikke ønsker dem i ditt nye materiale. Så husk på å opprett et nytt materiale på grunnlag av et materiale som har lignende egenskaper med de du ønsker at det nye materialet skal ha.

I eksemplet her skal vi lage et materiale som er av en av de enkleste typene materiale for spill-grafikk: «Blender Multitexture Materials». Med denne typen materiale vil du kunne lage 3d-spill som også kan spilles på pc´er med helt enkle grafikk-kort. Pass bare på å ikke bruke noen form for lys-objekter i spillet (f.eks. Lamp, Spot e.l.l.), så vil et slikt spill kunne brukes selv med et integrert Intel grafikkkort. Du kan også lage mer avanserte materialer for 3d-spill, med Blender, og som kalles «Blender GLSL Materials». Ulempen er selvsagt at kun kraftige grafikk-kort med støtte for GLSL-grafikk kan benytte seg av mulighetene som GLSL gir, og at spillet høyst sannsynlig vil kræsje ved bruk av andre grafikk-kort. Du velger hvilken type materialer spillet ditt skal bruke ved å klikke på menyvalget «Game» i header-linja til ‘User Preferences’ vinduet (46).

46

I menyen som åpnes kan du også velge hvilke egenskaper GLSL-materialene skal ha.

Siden vi her i eksemplet skal lage et «Blender Multitexture Materials» materiale, behøver du i første omgang kun å endre én egenskap: Åpne panelet «Map Input», og velg «UV» (47).

47

Dette vil fortelle Blender at UV-koordinatene skal brukes som tekstur-koordinater i materialet.
Klikk deretter på knappen «Texture Buttons (F6)» i header-linja til knappe-vinduet. Øverst i «Texture» -panelet er det en tekstboks med navnet til den aktive teksturen. Klikk på den lille knappen med pil på til venstre i tekstboksen (48), og velg «Add New» i menyen som åpnes, for å opprette en ny tekstur (49).

48

49

Gi den nye teksturen et unikt navn, ved å klikke inni tekstboksen og skrive inn navnet (50).

50

Vi har nå opprettet en eget tekstur til materialet. Hvert Blender-materiale kan inneholde opp til 10 teksturer, men i «Blender Multitexture Materials» materialet vårt behøver vi bare en tekstur.

Materialer i Blender kan bruke hverandres teksturer, og det er derfor svært viktig å passe på at hver tekstur får et eget unikt navn. Teksturen slik den er nå har ingen egenskaper, for vi har ikke valgt hvilken type teksturen skal være.
Du velger hvilken type teksturen skal være ved å klikke på knappen «Texture type» (51), og velge tekstur-type fra listen (52).

51

52

Dette åpner et eget panel der du justerer tekstur-typens egenskaper (52). Når du justerer disse egenskapene vil det kun være denne teksturen med det unike navnet som har disse innstillingene.

Velg «Image» som tekstur-type, og klikk på knappen «Load» i «Image» -panelet for å laste inn TGA-fila vi lagret tekstur-kartet i (53).

53

Tekstur-kartet som nå vises i «Preview» -panelet, skal vi laste inn i UV-layouten slik at det legges på 3d-modellen (54).

54

I 3d-scene vinduet endrer du først visnings-modus til «Edit mode» (redigerings modus). Marker deretter alle flatene i 3d-modellen ved å trykke A-tasten på tastaturet, og velg «Textured» som visnings-type ved å klikke på knappen «Viewport Shading» i header-linja til 3d-scene vinduet.
Når et bilde lastes inn i Blender er det også tilgjengelig i bilde-listen i ‘UV/Image-editor’ vinduet: Klikk på den lille knappen med pil på, i header-linja til ‘UV/Image-editor’ vinduet, og velg tekstur-kartet i listen som åpnes (55).

55

Tekstur-kartet vil nå vises i UV-layouten i ‘UV/Image-editor’ vinduet, samtidig som teksturen også vises i 3d-modellen i 3d-scene vinduet (56).

56

Trykk TAB-tasten på tastaturet for å vise 3d-modellen i objekt-modus i 3d-scenen.
Dersom du ikke er helt fornøyd med teksturen (kanskje tømmerstokkene ble for store og urealistiske i forhold til størrelsen på veggen?), kan du skalere ned fotografiene i layouten i Gimp, lagre TGA-fila på nytt, og laste inn tekstur-kart igjen i Blender ved å klikke på «Reload» -knappen i Image» -panelet i knappe-vinduet.

Det enkle «Multitexture» -materialet vårt skal brukes i et 3d-spill som kan spilles med alle grafikk-kort. Spillet skal av den grunn ikke inneholde reelle lys eller skygger. Dette vil i utgangspunktet gi et flatt og livløst inntrykk av omgivelsene. For å unngå dette kan du la Blender generere et tekstur-kart med skygge, basert på UV-layouten til 3d-modellen. Dette kalles for et «Ambient occlusion» -kart: Skyggene i 3d-modellen genereres på grunnlag av et lys som ikke er retningsbestemt (dette kan sammenlignes med vanlig dagslys, der lyset er like sterkt i alle retninger slik at det ikke dannes skygger). Når dette retningsløse lyset treffer 3d-modellen, er det 3d-modellens struktur og utforming som bestemmer hvordan lyset skal blokkeres (lage skygger) og reflekteres (opplyses). Det er altså ikke lysets retning som bestemmer hva som skal skyggelegges eller opplyses i 3d-modellen.
Vær oppmerksom på at helt enkle 3d-modeller (slik som hus-modellen vår) ikke vil bli noe bedre ved hjelp av et «Ambient occlusion» -kart, fordi meshen har så enkel struktur at den ikke vil produsere noen spennende skygger. Du kan løse dette problemet ved å plassere en annen 3d-modell ved siden av den enkle 3d-modellen. Den enkle 3d-modellen vil da ta i mot skyggen fra sin nabo, og på den måten få mer liv i flatene.

Å lage 2d-bilder på grunnlag av 3d-modellen kalles i Blender for «Baking». Denne prosessen er kun mulig dersom 3d-modellen har en UV-layout med et tekstur-kart lagt inn.

Så la oss lage et «Ambient occlusion» -kart til hus-modellen vår!
Fordi hus-modellen vår er av den enkle sorten, lager vi oss en «nabo» som kan kaste en livfull skygge på huset vårt: Modeller et helt enkelt tre ved å sette et UVsphere-objekt oppå en lang tynn sylinder, og sett treet tett ved siden av huset (57).

57

Marker hus-modellen igjen, og endre visnings-modus til Edit-mode ved å trykke TAB-tasten på tastaturet. Pass på at alle flatene i 3d-modellen i 3d-scene vinduet er markert ved å trykke A-tasten på tastaturet, slik at du også kan se tekstur-kartet i UV-layouten.
Åpne «Scene» -vinduet (F10), og klikk på «Render buttons» -knappen i header-linja til knappe-vinduet. Åpne «Bake» -panelet med funksjonene og innstillingene for å render bake ulike typer tekstur-kart (58).

58

«Full render» er standard-valget.
Klikk på knappen «Ambient occlusion» for å fortelle Blender at det er et«Ambient occlusion» -kart som skal renderes (58). Pass på at innstillingen for «Margins» er satt til verdien 2 eller mer. Dette sikrer passelig avstand mellom flatene i UV-layouten under renderingen, noe som hindrer gap eller forvrengninger i det ferdige renderte bildet.

Klikk på «Bake» -knappen, og vent mens Blender genererer «Ambient occlusion» -kartet, for dette kan ta litt tid. Tekstur-kartet i UV-layouten og i 3d-modellen vil forsvinne fra visningen, og erstattes med et midlertidig rendert «Ambient occlusion» -kart (59).

59

Tekstur-kart er ikke slettet. Det er kun erstattet med «Ambient occlusion» -kartet. Når bake-renderingen er ferdig kan du flytte treet litt bort i fra huset i 3d-scenen, for å se skyggen bedre. Hadde hus-modellen vår hatt en mer avansert konstruksjon (med f.eks. takoverheng, modellerte døråpninger og vinduslister) ville dette gitt mer spennende bakte skygger i hus-modellen.

Det renderte «Ambient occlusion» -kartet er ikke lagret ennå. (Legg merke til at menyvalget «Image» i header-linja til ‘UV/Image-editor’ vinduet, er merket med et lite stjerne-tegn, for å indikere at «Ambient occlusion» -kartet ikke er lagret ennå) (59). Klikk på menyvalget «Image», og velg «Save As» i menyen som åpnes (60).

60

Lagre TGA-fila med et annet navn enn tekstur-kartet, slik at det opprinnelige tekstur-kartet ikke overskrives (61).

61

Vi skal nå lime «Ambient occlusion» -kartet inn i tekstur-kartet ved hjelp av Gimp:

Åpne TGA-fila med det første tekstur-kartet vårt, i Gimp, og åpne «Ambient occlusion» -kartet som et eget lag, ved å velge ‘Fil > Åpne som lag’ i bildevindumenyen. Dette vil legge bildet med «Ambient occlusion» -kartet i et eget lag øverst i lag-listen i ‘Lag, kanaler, baner’ -vinduet (62).

62

Med laget aktivt velger du «Hardt lys» som lag-modus (63).

63

Dette vil blande skyggens farger med teksturens farger på en overbevisende måte (64).

64

Prøv gjerne andre lag-modus også!
Ta vare på den orginale tekstur-kart fila: Lagre bildet som en Gimp-fil i XCF-formatet, for i dette formatet beholdes lagene intakt. Lagre deretter en kopi av bildet (Fil > Lagre en kopi’ i bildevindumenyen) i TGA-formatet med navnet til den orginale tekstur-kart fila. Når du får beskjed om at dette vil overskrive den gamle TGA-fila med tekstur-kartet, så klikk ‘OK’ for å bekrefte overskrivingen. Det orginale tekstur-kartet er i god behold i XCF-fila, og når det nye tekstur-kartet med skyggelaget har samme navn som orginal fila, er det bare å trykke på «Reload»-knappen i Blender for å laste inn den nye teksturen:
Klikk på «Shading» (F5) -knappen i header-linja til knappe-vinduet. Klikk deretter på «Texture buttons» (F6) -knappen for å åpne panelene med tekstur-verktøyene. I panelet «Image» viser den øverste tekstboksen hvilket bilde som er lagt inn i UV-layouten. Klikk på «Reload» -knappen bak tekstboksen for å laste inn TGA-fila med tekstur-kartet.
Dersom den nye teksturen ikke vises med det samme i 3d-scene vinduet, så endre visnings-modus til ‘Edit mode’, og marker alle flatene. Klikk deretter på den lille ‘Browse…’ -knappen foran tekstboksen med bildefil-navnet, i header-linja til ‘UV/Image-editor’ vinduet, og velg TGA-fila på nytt (65).

65

Lese artikkelen offline?

Last ned artikkelen som pdf-fil

Gi bildet ditt bedre kontrast ved hjelp av en kontrastmaske.

Utgangspunktet er dette bildet hvor detaljene i mekanikken på veggen har blitt borte (1):

1

Kopier laget «Bakgrunn» ved å klikke på knappen «Dupliker lag» nede i Lag-menyen (2):

2

Fjern fargene i og gjør laget «Bakgrunn kopier» til et sort/hvitt bilde ved å velge «Farger -> Mindre metning» i bildevindu-menyen (3):

3

Om gråfargen skal bestemmes ut i fra fargenes klarhet, lysstyrke eller et gjennomsnitt av disse, avhenger av bildet. Her må du prøve deg frem for å finne ut hvilke valg som gir best resultat. I eksemplet her ble det valgt «Gjennomsnitt», fordi dette ga det beste resultatet (4, 5):

4

5

Inverter gråtonene i sort/hvitt-laget (Bakgrunn kopier) ved å velge «Farger -> Inverter» i bildevindumenyen (6, 7):

6

7

Endre «Bakgrunn kopier»-lagets lagmodus til «Legg over»(8, 9):

8

9

Bildet har nå fått forbedret kontrast, men har mistet skarphet. En kan løse dette problemet ved å tilsløre kontrastmasken:

Med «Bakgrunn kopier»-laget aktivt; velg Filter -> Utydeligjør -> Gaussian Blur» i bildevindumenyen (10):

10

Hvor stor Blur-radiusen skal være, og hvilken Blur metode som benyttes avhenger av bildet, men Jeschke mener at en blur-radius mellom 10 og 30 piksler vil i de fleste tilfeller gi de beste resultatene (11):

11

Orginal

Med kontrastmaske

Juster kontrastmaskens lysverdier vha. “Kurver”-verktøyet til slutt, for å gi bildet bedre kontrast og lys.

I Gimp kan du lage en gif- animasjon ved å bygge opp et bilde lag for lag. Hvert lag i bildet blir da en frame (et filmbilde) i animasjonen.
De tre vanligste måtene å lage en slik animasjon på er:
1.Hvert filmbilde legges til det forrige.
2.Hvert filmbilde byttes ut med det forrige.
3.En kombinasjon av de to første metodene, hvor f.eks. bakgrunnen i animasjonen (det første bildet) beholdes under hele animasjonen mens de etterfølgende filmbildene enten erstatter hverandre eller legges til hverandre.

I tillegg til denne grunnleggende fremgangsmåten å lage animasjoner på, kan du også lage animasjoner ved hjelp av filteret IWarp (Filter -> Forvrengninger -> IWarp), og Script-Fu skriptene i “Animators”-menyen (Script-Fu -> Animators).
Det finnes også et avansert og omfattende tilleggsprogram til Gimp, for å lage avanserte animasjoner med. Tilleggsprogrammet heter GAP, og kan lastes ned fra Gimp´s hjemmeside.

Lage en animasjon hvor filmbildene legges til hverandre

Denne måten å lage en gif-animasjon på kan illustreres ved å lage en animasjon av en graf som vokser over et rutenett-ark (2). Først lages et bakgrunnbilde (rutenett-arket) rett på bakgrunn til bildet.

Så opprettes et nytt lag (Lag1), ved å klikke på “Nytt lag”-knappen i Lag-flipparket i “Lag, kanaler, baner…”-dokk vinduet. Pass på at lag-typen er satt til “transparent”. Dette laget skal bli det første filmbildet i animasjonen som forestiller bevegelse; altså grafen mens den begynner å vokse.

Bruk “rektangelutvalg”-verktøyet fra verktøy vinduet i Gimp til å lage en smal avlang firkant som ser ut som en tykk rød strek, i dette laget, og fyll den med rød farge vha. Bøtte fylle-verktøyet, mens utvalget ennå er markert (de såkalte “marsjerende maur”). Bruk tastene Shift+Ctrl+A for å avslutte markeringen av firkanten.
Den tykke streken er nå helt horisontalt plassert i bildet. Og for å få den til å stå på skrå opp fra nedre venstre hjørne i bildet, må den roteres vha. “rotasjons”-verktøyet (før musepekeren over verktøy ikonene til Gimp for å se navnene til dem).

Etter at du har valgt “rotasjons verktøyet” klikker du på den tykke røde streken i bildevinduet for å åpne rotasjons-rutenettet og “informasjon om rotasjon”-vinduet. Du kan enten rotere vha. musen (klikk og dra på rutenettet, men IKKE på det sorte sentrums punktet. Da flyttes nemlig rotasjons senteret.), eller bruke dra-hendelen i “informasjon om rotasjon”-vinduet, som kommer opp. Når du har funnet rett vinkel til den tykke røde streken, klikker du på “roter”-knappen for å rotere.

1

Ved hjelp av “flytteverktøyet” kan nå streken flyttes på plass ned i venstre hjørne i bildet.
Dette laget navngis “Lag 1” ved å dobbelklikke på navnet til laget i Lag-flipparket, og skrive det nye navnet inn. Så kopieres laget “Lag 1” ved å klikke på “kopier lag”-knappen i Lag-flipparket, og det nye laget gir du navnet “Lag 2”.

I Lag-flipparket markerer du “Lag 2”-laget, og ved hjelp av “flytte verktøyet” flyttes den nye streken på plass rett over den første streken i “bilde”-vinduet. Slik bygges hele grafen opp, ved å kopiere den siste kopierte laget med den røde streken, og flytte kopiene på plass vha. “flytte verktøyet” og “rotasjons verktøyet”.

(Det er lettere å plassere strekene nøyaktig etter hverandre, dersom en bruker “forstørr verktøy” til å zoome inn i bildet. I “verktøysalternativer”-menyen kan du velge mellom å zoome inn eller ut.)

Lagre bildet som i xcf-formatet underveis for å unngå tap av data. Pass på å gi hvert nytt kopierte lag et eget navn (1). I en animasjon med mange filmbilder kan det lett bli kaos dersom en mister oversikten over plasseringen og rekkefølgen av dem.

Gif-bildet med alle lagene/framene på plass.

Nå når alle framene i animasjonen er tegnet ferdig er det på tide å se hvordan den tar seg ut i bevegelse:
Velg Filtre -> Animasjon -> Avspilling av animasjon… fra bildevinduets meny for å åpne vinduet hvor du kan spille av animasjonen (3).

3

I dette vinduet kan du starte og stoppe animasjonen, spole tilbake til start, og se animasjonen bilde for bilde ved å klikke på “steg” (step)-knappen. En framdrifts indikator nederst i vinduet viser hvilken frame/lag som blir vist til enhver tid underveis i animasjonen. Velg Fil -> Lagre i bildevinduets meny for å lagre animasjonen som gif-animasjon.

I “Lagre som”-vinduet skriver du navnet på animasjonen sammen med “gif” endelsen på filnavnet, eller bare skrive inn navnet på animasjonen, og velge formatet fra “Etter type”-listen (By Extension).

Når du klikker på “OK” åpnes “Eksporter fil”-vinduet. Dersom du prøver å lagre et bilde med flere lag i gif-formatet, sier Gimp i fra at du må velge hva du vil gjøre med lagene fordi lagene kan behandles på to ulike måter ved lagring som gif-bilde. Om bildet kun skal lagres som et enkelt bilde og ikke som en animasjon limes alle lagene sammen til et bilde med kun et lag, men dersom bildet skal lagres som en animasjon beholdes alle lagene og de gjøres om til filmbilder. I “Export File”-vinduet valgte jeg “Save as Animation”, og “Convert to Indexed…..”. Dersom du velger “Convert to Grayscale” blir gif animasjonen konvertert til sort/hvit-bilder.

(Når man indekserer et fargebilde gjør man det “web-sikkert” slik at man til en viss grad har styring på hvordan det blir seende ut i de fleste browsere. Det er særlig på gamle maskiner med lite minne at fargebilder får kuttet ut noen farger fordi maskinen ikke klarer å vise alle fargene i bildet. Reelt sett er det i dag godt nok å bruke “Export File”-vinduet’s standard justeringer for indeksering, men dersom du vil indeksere bildet selv, kan du velge Bilde -> Modus -> Indeksert… fra bildevinduets meny).

Når en trykker på “Export”-knappen kommer “Lagre som gif”-vinduet opp.

I avkryssingsruten for “GIF Comment” bestemmer du om gif-filen også skal inneholde eventuelle kommentarer om animasjonen, slik som opphavsmann eller en detaljert informasjon om hva animasjonen handler om. Som standard står det alltid “Created with THE GIMP” i feltet for gif-kommentar, men du kan skrive hva du vil her. Enkelte program, slik som nettlesere, kan nemlig lese av denne informasjonen og gi den videre til brukeren.

I “Millisekunder”-boksen bestemmer du forsinkelsen mellom bildene i animasjonen. Standard forsinkelse er 100 ms. Jo større tall, jo treger går animasjonen.

I “Frame Disposal where Unspecified” velger du om bildene (framene) i animasjonen enten skal byttes ut med hverandre etter hvert som de vises (En ramme per lag), eller om de skal legges til hverandre (Kumulative lag).

Valget “Jeg bryr meg ikke” er standard, og dersom du velger dette, blir bildene lagt til hverandre; dvs. at frame 1 blir stående når frame 2 kommer fram, og når frame 3 kommer fram vises både frame 1 og 2 osv.(det samme som Kumulative lag-valget).
I eksemplet her ble “Kumulative lag” (Combine) valgt. Dersom du nå lukker bildevinduet med gif-animasjonen, og så åpner det igjen ser du at Gimp har lagt til alle disse opplysningene i Lag-flipparket i “Lag, kanaler, baner…”-dokk vinduet (4).

4

Du kan nå se den ferdige animasjonen ved å åpne den i f.eks. nettleseren Firefox.

Lage en animasjon hvor filmbildene byttes ut med hverandre

I mange tilfeller passer det ikke å bruke animasjons teknikken hvor filmbildene legges til hverandre slik som i eksemplet foran. Dersom man f.eks. skal animere en ball som spretter over bakgrunnen må filmbildene byttes ut med hverandre for å gi en riktig illusjon av at det er samme ballen som beveger seg bortover.

En slik animasjon begynner også med et bakgrunnsbilde som tegnes rett på det første laget (Bakgrunn). Deretter opprettes et nytt lag (som i eksemplet her får navnet “Frame 2”), som inneholder elementet som skal bevege seg (f. eks. en ball).

Pass på at dette laget får en transparent bakgrunn! (Et nytt lag opprettes ved å klikke på “Nytt lag”-knappen i Lag-flipparket. Standard fylltype for nye lag er gjennomsiktighet).

Tegn en ball i laget ved å opprette en rund markering i det nye laget, og fyll det med en farge.

Dette nye laget hvor ballen er tegnet inn (Frame 2) kopieres, ved å markere det og klikke på “kopier lag”-knappen i Lag-flipparket. Gi det kopierte laget (Frame 2 copy) navnet “Frame 3”.
Ved hjelp av “Flytte verktøyet” flytter du nå ballen i “Frame 3” til det neste punktet hvor ballen skal bevege seg i animasjonen.
Slik fortsetter du nå å kopiere lagene, og flytter det bevegelige elementet til neste punktet i animasjonen: Markér “Frame 3”, kopier laget ved hjelp av “kopier lag”-knappen, og gi det nye laget (Frame 3 copy) navnet “Frame 4”. Bruk så “Flytte verktøyet” til å flytte ballen til neste punkt i animasjonen (5).

5

I forrige eksempel bestemte du forsinkelsen mellom bildene i animasjonen ved hjelp av innstillingene i “Lagre som GIF”-vinduet, men du kan også gjøre dette ved å skrive antall millisekunder direkte i Lag-flipparket i “Lag, kanaler, baner…”- dokk vinduet (5).
Dobbelklikk på “Bakgrunn”-laget og skriv “1000ms” i parenteser rett bak navnet på laget (5). Bakgrunnen får en så lang forsinkelse for at illusjonen om at den er en bakgrunn som står i ro, skal bli overbevisende. Animasjonen skal vise en ball som flytter seg over et underlag, og da virker det mest overbevisende dersom laget uten ballen (bakgrunnen) blir vist litt lengre enn lagene hvor ballen vises.

Dersom animasjonen på dette tidspunktet ble lagret som gif, og det i “Lagre som gif”-vinduet ble valgt “Et Filmbilde pr. lag (Bytt Ut)” (“One Frame per Layer (Replace)”) i valget for “Filmbilde-visning dersom annet ikke er oppgitt” (“Frame Disposal where Unspecified”) ville animasjonen ikke ha blitt vist riktig, fordi filmbildene byttes ut med hverandre når animasjonen blir vist.
Først ville bakgrunnen ha blitt vist i flere sekunder før den forsvant og ble erstattet med en rød ball uten noen bakgrunn! Den blå bakgrunnen ville ha blinket som et blålys, og hele gif-animasjonen ville ha vært en nokså stressende affære uten noen mening.

For å vise bakgrunnen under ballen hele tiden, må den limes inn i alle lagene med ballen. Kopier bakgrunnen 4 ganger og plassér 3 av kopiene under hvert lag som viser ballen (6).

6

Den 4de kopien (Bakgrunn copy #3) flytter du helt øverst i listen over lag. Dette laget skal ikke limes sammen med noen av Frame-lagene, men skal bare fungere som en naturlig pause i animasjonen.

Høyreklikk på hvert av lagene som viser ballen, og velg “Flett sammen nedover” (“Merge Down”) fra lagets valg-meny. De gjennomsiktige lagene med ballen vil bli limt sammen med kopiene av bakgrunnen under, slik at den røde ballen blir liggende over den blå bakgrunnen. Om du hadde plassert kopien av bakgrunnen over laget med ballen, ville ballen forsvunnet under bakgrunnen. Når lagene er limt sammen er det 5 filmbilder i animasjonen (7).

7

Alle lagene har nå fått navnet “Bakgrunn copy #…” så for ordens skyld bør de navngis til Frame 2, Frame 3, Frame 4 og Frame 5 igjen, i stigende rekkefølge. Frame-lagenes tids-forsinkelse (1000ms) må også slettes ellers vil animasjonen går alt for sakte.

Når du lagrer bildet som gif-animasjon, og i “Lagre som gif”-vinduet bestemmer forsinkelsen mellom filmbildene i “Millisekunder”-boksen, vil bare Frame-lagene få denne tids-forsinkelsen fordi disse lagene ikke har fått oppgitt noen forsinkelse i Lag-flipparket slik bakgrunn-laget har.
I “ Frame Disposal where Unspecified” velger du “One Frame per Layer (Replace)” slik at filmbildene byttes under visningen av animasjonen. Dersom du lukker bildevinduet med gif-animasjonen, og åpner den igjen i Gimp, kan du se at også Frame-lagene har fått en tids-forsinkelse på 100ms, i tillegg til at disse lagene bruker “Replace” -metoden under animeringen.

Om du nå åpner gif-filen i en nettleser vil den nå se ut som en overbevisende animasjon av en ball som flytter seg over en rolig bakgrunn (8).

Animasjoner hvor filmbildene byttes ut med hverandre kan lett bli store når bakgrunnen blir vist i hvert lag. Du kan gjøre gif-filene betydelig mindre uten å tape særlig bildekvalitet ved å velge Filters -> Animation -> Optimize (for GIF) fra bildevinduets meny. Størrelsen på gif-filen i dette eksemplet var på 259 kb før optimering, og ble redusert til 57.7 kb etter optimering uten å tape noe øyensynlig bildekvalitet! Det er iallefall ingen risiko ved å prøve, for Gimp åpner et nytt bildevindu med en ny optimert bilde fil, som kan lagres med et nytt navn etter optimeringen.

8

Både kurver-verktøyet og Nivåer-verktøyet kan brukes for å få fjerne skygger som har oppstått pga. motlys.

Utgangspunkt (Foto av clivester, http://www.flickr.com/photos/clivester/)

I vinduet til ‘Nivåer’-verktøyet justerer du hendlene under histogrammet for å endre lysverdiene.
Venstre kontroll-hendel justerer fargetonene med lave piksleverdier, altså skyggene i bildet.
Høyre kontroll-hendel justerer høylyset i bildet.
Kontroll-hendelen i midten justerer midttoner i bildet. (se bildet under).

Juster hendlene slik at du fjerner skyggen som oppstår pga. motlyset.

‘Kurver’-verktøyet fungerer på samme måte.
Rutenettet kan deles inn i soner etter hvilke ruter som styrer skyggene, midttonene og høylyset i bildet.

Generelt kan man si at dersom du oppretter et kontrollpunkt og skyver det oppover, vil høylyset i
bildet økes, og dersom du skyver kontrollpunktet nedover økes skyggene.

Skyver du kontrollpunktet til venstre gjøres midttonene i bildet lysere, og skyves
kontrollpunktet til høyre gjøres midttonene mørkere. Enhver endring av kurven vil
automatisk påvirke alle tre soner, men dersom du oppretter 3 punkter på kurven, og
plasserer dem i i midten av hver sone, kan du endre på skyggene, midttonene eller høylyset
uten at de andre lysverdi-områdene påvirkes så mye.

Om bildet blir fargeløst og uklart så juster fargemetningen etterpå ved hjelp av ‘Glød/Metning’ verktøyet:

..Og skarp opp bildet ved å endre verdi-kurven i ‘Kurver’-verktøyet slik:

Bildet etter justeringer

Gimp har et filter til å lage enkle 3d-former med, som heter “Map Object” (‘Filter -> Kart -> Map Object’ i bildevindumenyen).

Filteret MapObject

«Map Object» legger motivet i bildets aktive lag rundt et 3d-objekt (slik som en kube, en kule, et plan eller en sylinder).

Map til Objekt: Alternativer-fanen

I valget for “Koble til:” velger du hvilken type 3d-objekt motivet i det aktive laget skal legges utenpå. Under “Generelle alternativer” kan du også velge om bakgrunnen rundt det genererte 3d-objektet skal være gjennomsiktig. Ved å velge “Slå på kantutjevning” får omrisset til 3d-objektet myke kanter.

Klikk på knappen “Forhåndsvis!” under forhåndsvisnings-bildet for å se endringene som oppstår når du justerer innstillingene.

I filtervinduet er det mange justeringsmuligheter for å endre på 3D-objektets posisjon/rotasjon i bildet, lystype, lysfarge, og refleksjon av lys i objektet.

Innstillinger for orientering

I “Orientering”-fanen justerer du posisjon og rotasjon for å bestemme hvilken vinkel 3d-objektet skal betraktes fra. Innstillingene for ‘Posisjon’ bestemmer hvor i laget det genererte 3d-objektet plasseres, og ved å justere innstillingene for “Rotasjon” bestemmer du fra hvilken side 3d-objektet skal vises. Innstillingene for ‘Rotasjon’ må alltid endres for at flere av 3d-objektets sider skal bli synlige. Standardinnstillingene vil alltid bare vise én side av 3d-objektet.

Det er også mulig å dekke flatene med flere forskjellige bilder:

Gi sidene til et boks-objekt ulike motiver

Filteret oppretter et 3d-objekt av innholdet i det aktive laget i bildet, slik at du kan opprette flere 3d-objekter i et bilde (et 3d-objekt for hvert lag).

Flere ulike 3d-objekter generert fra ulike lag i samme bilde.

Når 3d-objektene på denne måten befinner seg i hvert sitt lag, kan du bl.a. flytte dem rundt i bildet (Flytteverktøyet), rotere på dem (Roteringsverktøyet) mm.

Dersom du ønsker 3d-objekter med ensfargede flater er det bare å opprette et gjennomsiktig lag som inneholder en ensfarget firkant (tegn et firkantet utvalg vha. ‘Rektangelutvalg’-verktøyet og fyll det med ønsket farge).
Velg ‘Lag -> Autocrop Layer’ i bildevinduets meny for å krympe laggrensestørrelsen ned, slik at laggrensestørrelsen blir lik firkantens størrelse, og bruk deretter “Map Object”-filteret mens dette laget er aktivt.

Pass på at bildets bredde og høyde er like lange, dersom du ønsker å unngå forvrengning av 3d-objektene.
Gi lagene med 3d-objektene gjennomsiktig bakgrunn ved å hake av for valget “Gjennomsiktig bakgrunn” i arkfanen “Alternativer” i filtervinduet.

Eksempel på 3d-objekt generert av et bilde med 2 lag:

Bilde med 2 lag

Liste med lagene, der motivet i det aktive laget skal brukes til å generere et 3d-objekt

Bildet etter at motivet i det aktive laget er endret til et 3d-objekt

Bildets lagliste etter at motivet i det aktive laget er endret til et 3d-objekt