Quick Tips: Innlemme en 3D Vector animasjon i en Flash Game
en
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil du lære hvordan du kan ta en 3D-modell fra Blender og bruke den i Flash-spill ved hjelp Swift3D.

endelig resultat preview

Ta en titt på forhåndsvisningen nedenfor. Det er akkurat som en av de bil-kjøring spill du se alle over Internett -Vel, nei, ikke akkurat. Denne bilen er 3D, eller så det synes å være.

Oversikt

Surprise. Det er faktisk ikke noe 3D her. Bilen er 2D vektorgrafikk. Den 3-dimensjonal effekt ble oppnådd ved å vise forskjellige bilder av en snuoperasjon animasjon av bilen. I denne hurtig Tip, vil vi dekke hvordan du kan ta en 3D-modell, animere det og eksportere det som vektorgrafikk, slik at den kan brukes i Flash. For å gjøre dette, vil vi bruke en kombinasjon av tre programmer:. Blender, Swift 3D og Flash

Hvis du ikke er kjent med Swift 3D, foreslår jeg at du se videoen tutorials som tilbys på Swift 3D offisielle hjemmeside , erain.com. Du kan bli vant til programmet i en ettermiddag

Trinn 1:. Eksportere fra Blender

Vi begynner med vår modell i Blender. Det består av flere deler, som jeg har derfor kalt Body, Windows, Dekk, osv ... og hver del har en vesentlig tildelt den med en tilsvarende navn.

For å åpne modellen i Swift 3D det er behov for å være i .3 ds format. For å eksportere det som sådan, velge den (alle deler), og deretter gå Fil > Export > 3D Studio
og lagre det på maskinen din.

Trinn 2: Importere i Swift 3D

Åpne opp Swift 3D. Slik importerer du vår nylig eksportert modell, går Fil > Nytt fra 3DS
. Finn filen og klikk på Åpne



Trinn 3:. Justere Materialer

Du har kanskje lagt merke til at materialene ikke ser akkurat det samme i Swift 3D som de gjorde i Blender. Nå skal vi ta en titt på hvordan vi kan endre disse materialene.

La oss si at vi ønsker å endre bilens Body materiale for å gjøre det blankere (og slik at det vil ta seg opp speil høydepunkter). Først velger Body mesh i hierarkiet vinduet. I Egenskaper Panel, velg Materiale og dobbeltklikk på forhåndsvisningsikonet. Et vindu med Body materialegenskaper vil åpne. For å gjøre det skinnende, leke seg med Marker Styrke og Marker Størrelse (og traff generere Forhåndsvisning for å se endringene). Når du er fornøyd med resultatet, klikker du OK

Trinn 4:. Lighting

Nå trenger vi noen belysning for å lyse opp vår scene. I Gallerier vinduet, under fanen Lighting Ordninger kan du finne pre-laget belysning ordninger. For denne demonstrasjonen, vil jeg bruke "Default" belysning ordningen. For å bruke den, dra og slipp den inn på scenen. Hvis du vil, kan du justere det ved hjelp av lyssetting kulen

Merk product::.! Belysningen Ordningen heter "Standard" er faktisk ikke standard belysning ordningen

Trinn 5: Animasjon

Det er på tide å få vår bil spinning. Akkurat som med belysning ordninger, kan du finne forhåndslagde animasjoner under fanen Animasjoner i Galleries vinduet. Vi vil bruke den ER-Horiziontal Venstre animasjon. Igjen, dra og slipp den på modellen.

En spinnende animasjon vil bli opprettet over 20 rammer. Hvis du skrubbe tidslinjen, vil du se animasjonen i Active view



Trinn 6:. Kamera

Vi trenger et kamera som vi kan se vår modell. I hovedverktøylinjen, klikker du på Opprett Target Kamera-ikonet. Plasser kameraet som vist på bildet. Endre en av visningsfeltene til Target Kamera visningen, og klikk på den for å gjøre den til den aktive view

Trinn 7:. Export Preview

Klikk på Forhåndsvisning og eksport Editor. Kontroller at Vector knappen er valgt. Her kan du leke deg med fyll og Outline innstillinger. Dette er innstillingene jeg brukte.

Når du er ferdig, klikker du Generer All Frames
. Spill animasjonen et par ganger for å sørge for at det ser ut akkurat som du vil ha det til. Det skal se omtrent slik ut:

Trinn 8: Utvide Animation

For vårt formål, er 20 frames ikke nok for en jevn animasjon, så vi trenger å gjøre det lenger. Gå tilbake til Scene Editor. Velg bilen og klikk på Animate knappen. Utvid animasjon til 120 bilder

Trinn 9:. Endelig Export

Tast inn Forhåndsvisning og eksport Editor igjen. Uten å endre noen av de tidligere innstillingene, klikker du generere alle rammer. Gå se en film eller to, og når du kommer tilbake, vil animasjonen forhåpentligvis gjengis helt ut. Hvis du vil eksportere den, sørg for at målet filtype under kategorien Generelt er satt til "Swift 3D Flash Importør", deretter "Export All Frames" og lagre .swft filen.

animasjon din bør ligne til dette:

Trinn 10: Importere i Flash

Åpne opp Flash. Hvis du vil importere filen, går du Fil > Import > Importer til bibliotek
. Finn filen og åpne den. Flash vil importere det som et filmklipp i biblioteket

. Merk: Du kan også velge "Importer til Stage", som vil importere hver ramme til hovedtidslinjen. Selv om dette kan være nyttig i noen tilfeller, er det vanligvis mer praktisk å ha det importert som et filmklipp

Trinn 11:. Anbefalinger

I tillegg til punktene ovenfor, her er en kort liste over ting du kan gjøre for å forbedre det endelige resultatet:

cast skygge: å skape en cast skygge, lage en plan i scene redaktør, skalere det opp og plassere den rett under bilen. Redigere materialet gir det et høydepunkt Strength fra 0 (dette vil sikre at det ikke vil plukke opp høydepunkter). Etterpå i Flash, slette Colors (Stasjonær) lag. Du vil sitte igjen med en støpt skygge

Windows: For å forbedre vinduene 'materiale, du kan gjøre det blanke (som i trinn 3) eller reflekterende (hvis du har noen form for bakgrunn)
.
Outline: i Flash, kan du lage en tykk omriss rundt bilen. Dette vil gi den en tegneserieaktig utseende, og enda viktigere, gjør det lettere å se når det er skalert ned og brukt i et spill.

Dessuten er det mye renere enn Swift 3D er gjengitt skisserer.

Hvis du følger disse forslagene, vil du ende opp med noe som ligner på dette:

Konklusjon

Vi er ferdige! Nå som du har dreieskiven animasjon av bilen, kan du programmere den til å lage et spill. Her er et par linker som kan hjelpe deg med å gjøre det:

Bygge en enkel bilspill med Actionscript 3.0 av Stephan Cronin

Distribuere en tank på oppdrag i en isometrisk War Zone av Konstantin Serov