Rask Tips Inkorporere en 3D Vector Animasjon i en Flash Game

I denne opplæringen lærer du hvordan du tar en 3D-modell fra Blender og bruker den i Flash-spillene med Swift3D.

Endelig resultatforhåndsvisning

Ta en titt på forhåndsvisningene nedenfor. Det er akkurat som en av de bilkjørespillene du ser over hele Internett-vel, nei, ikke akkurat. Denne bilen er 3D, eller så ser det ut til å være.

Oversikt

Overraskelse. Det er faktisk ingen 3D her. Bilen er 2D vektorkunst. Den tredimensjonale effekten ble oppnådd ved å vise forskjellige rammer for en veksels animasjon av bilen. I denne Quick Tip, vil vi dekke hvordan du tar en 3D-modell, animerer den og eksporterer den som vektorkunst, slik at den kan brukes i Flash. For å gjøre det, bruker vi en kombinasjon av tre programmer: Blender, Swift 3D og Flash.

Hvis du ikke er kjent med Swift 3D, foreslår jeg at du ser videoopplæringene som tilbys på Swift 3Ds offisielle nettside, erain.com. Du kan bli vant til programmet på en ettermiddag.


Trinn 1: Eksportere fra Blender

Vi starter med vår modell i Blender. Den består av flere deler, som jeg deretter har kalt Body, Windows, Dekk, osv. .. og hver del har et materiale tildelt det med et tilsvarende navn.

For å åpne modellen i Swift 3D må den være i .3ds-format. For å eksportere den som sådan, velg den (alle delene), og gå deretter Fil> Eksporter> 3D Studio og lagre den på datamaskinen din.


Trinn 2: Importerer i Swift 3D

Åpne opp Swift 3D. For å importere vår nylig eksporterte modell, gå Fil> Ny fra 3DS. Finn filen og klikk Åpne.


Trinn 3: Justeringsmaterialer

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

La oss si at vi vil endre bilens kroppsmateriale for å gjøre det skinnere (og slik at det vil hente spekulære høydepunkter). Velg først Kroppsnettet i hierarki-vinduet. I Egenskapspanelet velger du Materiell og dobbeltklikker på forhåndsvisningsikonet. Et vindu med kroppsmaterialegenskapene åpnes. For å gjøre det skinnende, spill rundt med Highlight Strength and Highlight Size (og klikk på Generer forhåndsvisning for å se endringer). Når du er fornøyd med resultatene, klikker du OK.


Trinn 4: Belysning

Nå trenger vi litt belysning for å lyse opp vår scene. I Gallerier-vinduet, under kategorien Lyssystemer, finner du forhåndsdefinerte belysningsordninger. For denne demonstrasjonen vil jeg bruke "Standard" belysningsplanen. For å bruke det, dra og slipp det inn i scenen. Hvis du vil, kan du justere den ved hjelp av Lighting Scheme Trackball.

Merk: Belysningsskjemaet "Standard" er egentlig ikke standardbelysningssystemet!


Trinn 5: Animasjon

Det er på tide å få bilen til å snurre. Akkurat som med belysningsplanene, kan du finne forhåndsdefinerte animasjoner under fanen Animasjoner i Gallerier-vinduet. Vi vil bruke ER-Horiziontal venstre animasjon. Igjen, dra og slipp den på modellen.

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


Trinn 6: Kamera

Vi trenger et kamera der vi kan se vår modell. I hovedverktøylinjen klikker du på ikonet Create Target Camera. Sett kameraet som vist på bildet. Endre et av visningsportene til målkameravisningen og klikk på det for å gjøre det til Active Viewport.


Trinn 7: Eksporter forhåndsvisning

Klikk på Forhåndsvis og eksporter redigeringsprogrammet. Kontroller at Vector-knappen er valgt. Her kan du leke med innstillingene Fill and Outline. Dette er innstillingene jeg brukte.

Når du er ferdig, klikk Generer alle rammer. Spill animasjonen et par ganger for å sikre at det ser ut akkurat slik du vil. Det skal se ut som dette:


Trinn 8: Utvide animasjonen

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


Trinn 9: Endelig eksport

Skriv inn forhåndsvisning og eksportredigering igjen. Uten å endre noen av de forrige innstillingene, klikker du Generer alle rammer. Gå og se en film eller to, og når du kommer tilbake, vil animasjonen forhåpentligvis bli utgitt helt. For å eksportere det, må du kontrollere at Target File Type under kategorien Generelt er satt til "Swift 3D Flash Importer", og klikk deretter "Export All Frames" og lagre .swft filen.

Animasjonen din bør se ut som dette:


Trinn 10: Importerer i Flash

Åpne Flash. For å importere filen, gå 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 trinn", som vil importere hver ramme til hoved tidslinjen. Selv om dette kan være nyttig i noen tilfeller, er det vanligvis mer praktisk å få det importert som et filmklipp.


Trinn 11: Forslag

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

  • Kaste skygge: For å opprette en kasteskygge, opprett et fly i sceneditoren, oppskalere det og plasser det like under bilen. Rediger materialet som gir den en Highlight Strength of 0 (dette vil sikre at det ikke vil hente høydepunkter). Etterpå, i Flash, slett farger (stasjonært) lag. Du vil bli igjen med en kastet skygge!
  • Windows: For å forbedre Windows-materialet kan du gjøre det skinnende (som i trinn 3) eller reflekterende (hvis du har en slags bakgrunn).
  • Outline: I Flash kan du lage en tykk omriss rundt bilen. Dette vil gi det et tegneserieaktig utseende, og enda viktigere, gjør det lettere å se når det skaleres ned og brukes i et spill.
  • Det er også mye renere enn Swift 3Ds gjengitte konturer.

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


Konklusjon

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

  • Bygg et enkelt kjøre spill med ActionScript 3.0 av Stephan Cronin
  • Distribuere en tank på en misjon i en isometrisk krigsone av Konstantin Serov