Sfat rapid încorporați o animație vectorială 3D într-un joc flash

În acest tutorial, veți învăța cum să luați un model 3D din Blender și să îl utilizați în jocurile Flash utilizând Swift3D.

Rezultatul final al rezultatelor

Uitați-vă la previzualizarea de mai jos. Este ca și cum unul dintre acele jocuri de conducere pe mașină pe care le vedeți pe tot parcursul internetului - nu, nu chiar. Această mașină este 3D sau așa pare să fie.

Prezentare generală

Surprinde. Nu există de fapt nici un 3D aici. Mașina este o artă vectorială 2D. Efectul tridimensional a fost realizat prin afișarea unor cadre diferite ale unei animații de revenire a mașinii. În acest sfat rapid, vom aborda modul în care să luăm un model 3D, să îl animăm și să-l exportăm ca vector art, astfel încât să poată fi utilizat în Flash. Pentru a face acest lucru, vom folosi o combinație de trei programe: Blender, Swift 3D și Flash.

Dacă nu sunteți familiarizat cu Swift 3D, vă sugerăm să urmăriți tutorialele video oferite pe site-ul oficial Swift 3D, erain.com. Puteți deveni obișnuiți cu programul într-o după-amiază.


Pasul 1: Exportul din Blender

Vom începe cu modelul nostru în Blender. Este alcătuită din mai multe părți, pe care le-am denumit în mod corespunzător Corp, Ferestre, Anvelope etc. și fiecare parte are un material atribuit unui nume corespunzător.

Pentru a deschide modelul în Swift 3D, trebuie să fie în format .3ds. Pentru a-l exporta ca atare, selectați-l (toate părțile), apoi mergeți Fișier> Export> Studio 3D și salvați-l pe computer.


Pasul 2: Importarea în Swift 3D

Deschideți Swift 3D. Pentru a importa modelul nou exportat, mergeți Fișier> Nou de la 3DS. Găsiți fișierul și faceți clic pe Deschidere.


Pasul 3: Ajustarea materialelor

S-ar putea să fi observat că materialele nu arată exact la fel în Swift 3D ca și în Blender. Acum vom analiza modul în care putem modifica aceste materiale.

Să presupunem că dorim să modificăm materialul corpului mașinii pentru a deveni mai strălucitor (și astfel încât să ridice evidențierile speculare). Mai întâi, selectați rețeaua de corp în fereastra de ierarhie. În panoul Proprietăți, selectați Material și faceți dublu clic pe pictograma previzualizare. Se deschide o fereastră cu proprietățile materialului Corp. Pentru a-l face strălucitor, jucați-vă cu Rezistența evidențierii și Dimensiunea evidențierii (și apăsați Generare Preview pentru a vedea modificările). Când sunteți mulțumit de rezultate, faceți clic pe OK.


Pasul 4: Iluminarea

Acum avem nevoie de lumină pentru a ne lumina scena. În fereastra Galerii, în fila Scheme de iluminare, puteți găsi scheme de iluminare pre-făcute. Pentru această demonstrație, voi folosi schema de iluminare "Implicit". Pentru ao aplica, glisați și fixați-o în scenă. Dacă doriți, puteți să-l ajustați utilizând Trackball-ul de iluminare.

Notă: Schema de iluminare numită "Implicit" nu este de fapt schema de iluminare implicită!


Pasul 5: Animație

E timpul să ne întoarcem mașina. La fel ca în cazul schemelor de iluminare, puteți găsi animații pre-făcute în fila Animații din fereastra Galerii. Vom folosi animația ER-Horiziontal Stânga. Din nou, glisați și fixați-o pe model.

O animație va fi creată în peste 20 de cadre. Dacă curățați cronologia, veți vedea animația în fereastra de vizualizare activă.


Pasul 6: Camera

Avem nevoie de o cameră prin care să vedem modelul nostru. În bara principală de instrumente, dați clic pe pictograma Creează țintă pentru cameră. Poziționați camera așa cum este prezentat în imagine. Schimbați unul dintre porturile de vizualizare în vizualizarea Câmpul țintă și faceți clic pe acesta pentru a deveni portul vizual activ.


Pasul 7: Previzualizarea exportului

Faceți clic pe Editorul de previzualizare și export. Asigurați-vă că este selectat butonul Vector. Aici puteți juca cu setările Fill and Outline. Acestea sunt setările pe care le-am folosit.

Când ați terminat, faceți clic pe Generați toate ramele. Redați animația de câteva ori pentru a vă asigura că arată exact așa cum doriți. Ar trebui să arate similar cu aceasta:


Pasul 8: Extinderea animației

În scopurile noastre, 20 de cadre nu sunt suficiente pentru o animație netedă, așa că trebuie să facem mai mult. Reveniți la Editorul scenelor. Selectați mașina și faceți clic pe butonul Animare. Extindeți animația la 120 de cadre.


Pasul 9: Exportul final

Introduceți din nou Editorul de previzualizare și exportare. Fără a schimba setările anterioare, faceți clic pe Generați toate cadrele. Du-te viziona un film sau două, și când te întorci, animația va fi, sperăm, redată complet. Pentru a-l exporta, asigurați-vă că tipul fișierului țintă din fila General este setat la "Swift 3D Flash Importer", apoi faceți clic pe "Export All Frames" și salvați fișierul .swft.

Animația dvs. ar trebui să pară similară cu aceasta:


Pasul 10: Importați în Flash

Deschideți Flash. Pentru a importa fișierul, mergeți Fișier> Import> Import la bibliotecă. Găsiți fișierul și deschideți-l. Flash o va importa ca clip video în Bibliotecă.

Notă: Puteți, de asemenea, să selectați "Import în scenă", care va importa fiecare cadru în linia temporală principală. Deși acest lucru poate fi util în unele cazuri, este de obicei mai convenabil să îl importați ca clip video.


Pasul 11: Sugestii

În plus față de pașii de mai sus, iată o scurtă listă de lucruri pe care le puteți face pentru a îmbunătăți rezultatul final:

  • Cast umbra: Pentru a crea o umbră de turnare, creați un avion în editorul Scene, scalați-l și plasați-l chiar sub mașină. Editează materialul, oferindu-i o rezistență maximă de 0 (acest lucru se va asigura că nu va primi evidențiază). Apoi, în Flash, ștergeți stratul de culori (staționare). Veți fi lăsat cu o umbră de turnare!
  • ferestre: Pentru a îmbunătăți materialul ferestrelor, îl puteți face strălucitor (ca la pasul 3) sau reflectorizant (dacă aveți un fel de fundal).
  • Contur: În Flash, puteți crea un contur gros în jurul mașinii. Acest lucru îi va da un aspect desen animat și, mai important, va fi mai ușor să vedeți când este redus și folosit într-un joc.
  • De asemenea, este mult mai curat decât contururile făcute de Swift 3D.

Dacă urmați aceste sugestii, veți sfârși cu ceva similar cu acesta:


Concluzie

Au fost efectuate! Acum, când aveți animația turnantă a mașinii, o puteți programa pentru a crea un joc. Iată câteva linkuri care te-ar ajuta să faci acest lucru:

  • Construirea unui joc simplu de conducere cu ActionScript 3.0 de Stephan Cronin
  • Deplasați un tanc pe o misiune într-o zonă izometrică de război de Konstantin Serov
Cod