Suggerimento rapido incorporare un'animazione 3D vettoriale in un gioco Flash

In questo tutorial imparerai come prendere un modello 3D da Blender e utilizzarlo nei tuoi giochi Flash usando Swift3D.

Anteprima del risultato finale

Dai un'occhiata all'anteprima qui sotto. È proprio come uno di quei giochi di guida automobilistica che vedi su Internet - bene, no, non esattamente. Questa macchina è 3D, o almeno così sembra.

Panoramica

Sorpresa. In realtà non c'è 3D qui. L'auto è arte vettoriale 2D. L'effetto tridimensionale è stato ottenuto mostrando diversi fotogrammi di un'animazione turnaround dell'auto. In questo suggerimento rapido, illustreremo come prendere un modello 3D, animarlo ed esportarlo come arte vettoriale in modo che possa essere utilizzato in Flash. Per fare ciò, utilizzeremo una combinazione di tre programmi: Blender, Swift 3D e Flash.

Se non hai familiarità con Swift 3D, ti suggerisco di guardare i video tutorial offerti sul sito ufficiale di Swift 3D, erain.com. Puoi abituarti al programma in un pomeriggio.


Passaggio 1: esportazione da Blender

Inizieremo con il nostro modello in Blender. È composto da diverse parti, che ho di conseguenza chiamato Corpo, Windows, Pneumatici, ecc ... e ad ogni parte è assegnato un materiale con un nome corrispondente.

Per aprire il modello in Swift 3D è necessario che sia in formato .3ds. Per esportarlo come tale, selezionalo (tutte le parti), quindi vai File> Esporta> 3D Studio e salvarlo sul tuo computer.


Passaggio 2: importazione in Swift 3D

Apri Swift 3D. Per importare il nostro modello appena esportato, vai File> Nuovo da 3DS. Trova il file e fai clic su Apri.


Step 3: Regolazione dei materiali

Avrai notato che i materiali non sono esattamente gli stessi in Swift 3D come in Blender. Ora daremo un'occhiata a come possiamo modificare questi materiali.

Diciamo che vogliamo modificare il materiale del corpo dell'auto per renderlo più brillante (e in modo da raccogliere le luci speculari). Innanzitutto, seleziona la mesh Corpo nella finestra gerarchia. Nel pannello Proprietà, selezionare Materiale e fare doppio clic sull'icona di anteprima. Si aprirà una finestra con le proprietà del materiale del corpo. Per renderlo brillante, gioca con la forza di evidenziazione e le dimensioni di evidenziazione (e premi Genera anteprima per vedere le modifiche). Quando sei soddisfatto dei risultati, fai clic su OK.


Step 4: Illuminazione

Ora abbiamo bisogno di un po 'di illuminazione per rallegrare la nostra scena. Nella finestra Gallerie, sotto la scheda Schemi di illuminazione, puoi trovare schemi di illuminazione preconfezionati. Per questa dimostrazione, userò lo schema di illuminazione "Default". Per applicarlo, trascinalo nella scena. Se lo desideri, puoi regolarlo utilizzando la trackball dello schema di illuminazione.

Nota: Lo schema di illuminazione denominato "Predefinito" non è in realtà lo schema di illuminazione predefinito!


Passaggio 5: animazione

È ora di far girare la macchina. Proprio come con gli schemi di illuminazione, puoi trovare animazioni predefinite nella scheda Animazioni nella finestra Gallerie. Useremo l'animazione ER-Horizional Left. Ancora una volta, trascinalo sul modello.

Un'animazione rotante verrà creata su 20 fotogrammi. Se si esegue lo scrub della sequenza temporale, verrà visualizzata l'animazione nella vista attiva.


Passaggio 6: fotocamera

Abbiamo bisogno di una fotocamera attraverso la quale possiamo visualizzare il nostro modello. Nella barra degli strumenti principale, fare clic sull'icona Crea telecamera di destinazione. Posiziona la fotocamera come mostrato nell'immagine. Cambia una delle finestre nella vista Videocamera di destinazione e fai clic su di essa per renderla la vista attiva.


Passaggio 7: Anteprima esportazione

Fare clic su Anteprima ed esporta editor. Assicurati che il pulsante Vector sia selezionato. Qui puoi giocare con le impostazioni Fill e Outline. Queste sono le impostazioni che ho usato.

Quando hai finito, fai clic Genera tutti i frame. Riproduci l'animazione alcune volte per assicurarti che appaia esattamente come desideri. Dovrebbe assomigliare a questo:


Passaggio 8: estensione dell'animazione

Per i nostri scopi, 20 fotogrammi non sono sufficienti per un'animazione fluida, quindi è necessario allungarlo. Torna all'Editor delle scene. Seleziona l'auto e fai clic sul pulsante Anima. Espandi l'animazione a 120 fotogrammi.


Passaggio 9: esportazione finale

Immettere di nuovo l'editor di anteprima ed esportazione. Senza modificare alcuna delle impostazioni precedenti, fare clic su Genera tutti i frame. Vai a guardare un film o due, e quando torni, l'animazione si spera sarà completamente resa. Per esportarlo, assicurati che il tipo di file di destinazione nella scheda Generale sia impostato su "Swift 3D Flash Importer", quindi fai clic su "Esporta tutti i frame" e salva il file .swft.

La tua animazione dovrebbe essere simile a questa:


Passaggio 10: importazione in Flash

Apri Flash. Per importare il file, vai File> Importa> Importa nella libreria. Trova il file e aprilo. Flash lo importerà come clip filmato nella Libreria.

Nota: Puoi anche selezionare "Importa nello stage", che importerà ciascun fotogramma sulla timeline principale. Sebbene ciò possa essere utile in alcuni casi, di solito è più comodo importarlo come clip filmato.


Passaggio 11: suggerimenti

Oltre ai passaggi precedenti, ecco una breve lista di cose che puoi fare per migliorare il risultato finale:

  • Cast shadow: Per creare un'ombra proiettata, creare un piano nell'editor Scene, ridimensionarlo e posizionarlo appena sotto l'auto. Modifica il suo materiale dandogli una Forza Evidenziazione di 0 (questo farà in modo che non raccolga punti salienti). Successivamente, in Flash, elimina il livello Colori (stazionario). Rimarrai con un'ombra proiettata!
  • finestre: Per migliorare il materiale di Windows, puoi renderlo lucido (come nel passaggio 3) o riflettente (se hai qualche tipo di sfondo).
  • Schema: In Flash, puoi creare uno spesso contorno attorno all'auto. Ciò gli conferirà un aspetto da fumetto e, cosa ancora più importante, renderà più facile vedere quando viene ridimensionato e utilizzato in un gioco.
  • Inoltre, è molto più pulito rispetto ai profili renderizzati di Swift 3D.

Se segui questi suggerimenti, ti ritroverai con qualcosa di simile a questo:


Conclusione

Sono stati fatti! Ora che hai l'animazione del giradischi della macchina, puoi programmarla per creare un gioco. Ecco alcuni link che potrebbero aiutarti a farlo:

  • Costruire un semplice gioco di guida con ActionScript 3.0 di Stephan Cronin
  • Distribuisci un carro armato in una missione in una zona di guerra isometrica di Konstantin Serov