Snabbtips Ta med en 3D Vector Animation i en Flash Game

I denna handledning lär du dig hur du tar en 3D-modell från Blender och använder den i dina Flash-spel med Swift3D.

Slutresultatförhandsvisning

Ta en titt på förhandsvisningen nedan. Det är precis som en av de bilkörningsspelen du ser över hela Internet-ja nej, inte exakt. Denna bil är 3D, eller så verkar det vara.

Översikt

Överraskning. Det finns faktiskt ingen 3D här. Bilen är 2D vektorkonst. Den tredimensionella effekten uppnåddes genom att visa olika ramar av en vändningsanimering av bilen. I den här snabba tipset beskriver vi hur du tar en 3D-modell, animerar den och exporterar den som vektorkonst så att den kan användas i Flash. För att göra så använder vi en kombination av tre program: Blender, Swift 3D och Flash.

Om du inte är bekant med Swift 3D, föreslår jag att du tittar på de videohandledning som erbjuds på Swift 3Ds officiella webbplats, erain.com. Du kan bli van vid programmet på en eftermiddag.


Steg 1: Exportera från Blender

Vi börjar med vår modell i Blender. Den består av flera delar, som jag därmed har kallat Body, Windows, Däck, etc ... och varje del har ett material som tilldelats det med ett motsvarande namn.

För att öppna modellen i Swift 3D måste den vara i .3ds-format. För att exportera det som sådant, välj det (alla delar) och gå sedan Arkiv> Exportera> 3D Studio och spara den till din dator.


Steg 2: Importerar i Swift 3D

Öppna upp Swift 3D. För att importera vår nyligen exporterade modell, gå Arkiv> Ny från 3DS. Hitta filen och klicka på Öppna.


Steg 3: Justeringsmaterial

Du kanske har märkt att materialen inte ser ut exakt samma i Swift 3D som de gjorde i Blender. Nu ska vi titta på hur vi kan modifiera dessa material.

Låt oss säga att vi vill ändra bilens kroppsmaterial för att göra det skinnigare (och så att det kommer att hämta speciella höjdpunkter). Välj först Kroppsnätet i hierarkfönstret. I materialpanelen väljer du Material och dubbelklickar på förhandsgranskningsikonen. Ett fönster med kroppsmaterialegenskaperna öppnas. För att göra det glänsande, lek dig med Highlight Strength and Highlight Size (och klicka på Generera förhandsgranskning för att se ändringar). När du är nöjd med resultaten klickar du på OK.


Steg 4: Belysning

Nu behöver vi lite belysning för att lysa upp vår scen. I fönstret Gallerier, under fliken Belysningsscheman, hittar du färdiga belysningssystem. För denna demonstration kommer jag att använda "Standard" belysningssystemet. För att applicera det dra och släpp det till scenen. Om du vill kan du justera det med hjälp av Lighting Scheme Trackball.

Notera: Belysningssystemet som heter "Default" är egentligen inte standardbelysningssystemet!


Steg 5: Animation

Det är dags att få bilen att snurra. Precis som med belysningssystemen kan du hitta färdiga animeringar under fliken Animeringar i Gallerier-fönstret. Vi kommer att använda ER-Horiziontal vänster animering. Igen dra och släpp den på modellen.

En spinnande animering kommer att skapas över 20 bilder. Om du skrubbar tidslinjen ser du animeringen i Active viewporten.


Steg 6: Kamera

Vi behöver en kamera genom vilken vi kan se vår modell. Klicka på ikonen Skapa målkamera i huvudverktygsfältet. Placera kameran enligt bilden. Ändra en av visningsportarna till målkameravyn och klicka på den för att göra det aktiva visningsporten.


Steg 7: Exportera förhandsgranskning

Klicka på förhandsgransknings- och exportredigeraren. Kontrollera att vektorknappen är vald. Här kan du leka med inställningarna Fill and Outline. Det här är de inställningar jag använde.

När du är klar klickar du på Generera alla ramar. Spela animationen några gånger för att se till att det ser ut som du vill ha det. Det borde se ut som detta:


Steg 8: Förlängning av animationen

För våra ändamål är det inte tillräckligt med 20 bilder för en smidig animering, så vi behöver göra det längre. Gå tillbaka till scenredigeraren. Välj bilen och klicka på knappen Animate. Expand animeringen till 120 bilder.


Steg 9: Slutlig export

Ange förhandsgransknings- och exportredigeraren igen. Utan att ändra någon av de tidigare inställningarna klickar du på Generera alla ramar. Gå och titta på en film eller två, och när du kommer tillbaka kommer förhoppningen att förhoppas fullständigt. För att exportera det, se till att Målfiltypen under fliken Allmänt är inställd på "Swift 3D Flash Importer", klicka sedan på "Exportera alla ramar" och spara .swft-filen.

Din animering ska likna detta:


Steg 10: Importerar i Flash

Öppna Flash. För att importera filen, gå Arkiv> Importera> Importera till bibliotek. Hitta filen och öppna den. Flash importerar det som ett filmklipp i biblioteket.

Notera: Du kan också välja "Importera till steg", som kommer att importera varje ram till huvudtidslinjen. Även om det här kan vara till hjälp i vissa fall är det vanligtvis bekvämare att få det importerat som ett filmklipp.


Steg 11: Förslag

Utöver stegen ovan är det en kort lista över saker du kan göra för att förbättra det slutliga resultatet:

  • Kasta skugga: Skapa en gjutskugga genom att skapa ett plan i scenredigeraren, skala upp det och placera det precis under bilen. Redigera materialet som ger den en Highlight Strength of 0 (det här säkerställer att det inte kommer att hämta höjdpunkter). Därefter, i Flash, raderas färger (stationärt). Du kommer att vara kvar med en gjutskugga!
  • Windows: För att förbättra Windows-materialet kan du göra det glänsande (som i steg 3) eller reflekterande (om du har någon form av bakgrund).
  • Översikt: I Flash kan du skapa en tjock kontur runt bilen. Detta kommer att ge det ett karaktäristiskt utseende, och ännu viktigare, gör det lättare att se när det är nedskalat och används i ett spel.
  • Det är också mycket renare än Swift 3Ds renderade konturer.

Om du följer dessa förslag kommer du att sluta med något liknande det här:


Slutsats

Var gjort! Nu när du har bilens skivspelning kan du programmera den för att skapa ett spel. Här är några länkar som kan hjälpa dig med att göra det:

  • Bygga ett enkelt körspel med ActionScript 3.0 av Stephan Cronin
  • Utför en tank på ett uppdrag i en isometrisk krigszon av Konstantin Serov