Share
Oggi costruiremo una spada laser controllata da Wiimote usando WiiFlash e Papervision3D. L'obiettivo di questo tutorial sarà imparare come usare un wiimote in flash e come combinarlo con papervision3D. In seguito, ovviamente, puoi usare questa app per allenarti per il tuo maestro Jedi.
Il primo passo è anche il più semplice; scarica i pacchetti di cui abbiamo bisogno. Vai a blog.papervision3d.org e wiiflash.bytearray.org per scaricare l'ultima versione di entrambi i pacchetti. Decomprimi entrambi i pacchetti e posiziona le librerie (una directory chiamata 'org') nella tua directory di lavoro.
Poiché questo progetto sarà interamente scritto in ActionScript 3.0, la prima cosa che dovremo fare è creare un nuovo documento Flash e fare riferimento alla nostra classe principale: LightSaber. Salvalo come "lightsaber.fla" nella tua directory di lavoro.
Successivamente, crea una classe vuota chiamata "LightSaber". Questa sarà la classe principale in cui tutto viene inizializzato. Salvalo come "LightSaber.as" nella directory di lavoro.
package public class LightSaber public function LightSaber ()
La prossima lezione che creeremo si chiama LightSaber3D e questa conterrà tutta la logica 3D. Salvalo come "LightSaber3D.as" nella tua directory di lavoro.
package public class LightSaber3D public function LightSaber3D ()
Ora che tutte le classi e le librerie sono a posto, possiamo iniziare a riempirle. Iniziamo con l'impostazione della comunicazione wiimote. Il seguente codice è il codice completo per la classe LightSaber; nei seguenti passaggi ne discuteremo più in dettaglio.
pacchetto import flash.display. *; import flash.events. *; import org.wiiflash.Wiimote; import org.wiiflash.events. *; importare LightSaber3D; public class LightSaber estende Sprite private var wiimote: Wiimote; private var lightSaber3D: LightSaber3D; funzione pubblica LightSaber (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect (); funzione privata onWiimoteConnect (pEvent: Event): void lightSaber3D = new LightSaber3D (); addChild (lightSaber3D) lightSaber3D.buildLightSaber (); lightSaber3D.turnOffLightSaber (); wiimote.addEventListener (WiimoteEvent.UPDATE, updateWiimote); wiimote.addEventListener (ButtonEvent.B_PRESS, buttonPressed); wiimote.addEventListener (ButtonEvent.B_RELEASE, buttonReleased); funzione privata updateWiimote (pEvent: WiimoteEvent): void lightSaber3D.updateLightSaber3D (wiimote.pitch); private function buttonPressed (pEvent: ButtonEvent): void lightSaber3D.turnOnLightSaber (); private function buttonReleased (pEvent: ButtonEvent): void lightSaber3D.turnOffLightSaber ();
import flash.display. *; import flash.events. *; import org.wiiflash.Wiimote; import org.wiiflash.events. *; importare LightSaber3D;
Prima di poter fare qualsiasi cosa con il wiimote in flash, dovremo includere le librerie wiiflash nella nostra classe. Per questo particolare progetto avremo bisogno della classe principale WiiMote e degli eventi wiimote. Includiamo anche la nostra classe LightSaber3D, ma questa sarà discussa in seguito.
Prima di discutere su cosa effettivamente fa il codice e perché ne abbiamo bisogno, è molto importante conoscere il "concetto generale" alla base di questa applicazione. Stiamo costruendo una spada laser tridimensionale che possiamo oscillare usando un wiimote e come funzionalità aggiuntiva saremo in grado di accenderlo e spegnerlo usando il pulsante "B" sul retro del wiimote.
Come otteniamo tutto questo? Bene, ho deciso di suddividerlo in due classi; uno che gestisce il Wiimote e uno che controlla tutti gli aspetti 3D. La classe wiimote riceve i dati dal wiimote e li passa alla classe 3D. Questo viene fatto tramite i gestori di eventi della classe wiimote.
funzione pubblica LightSaber (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect ();
Per prima cosa, creiamo una nuova istanza della classe wiimote e aggiungiamo un listener di eventi chiamato "Event.CONNECT" a questo oggetto. Questo è fatto perché vogliamo solo che l'applicazione venga eseguita quando c'è una connessione con un wiimote. Successivamente, proviamo a connetterci al server wiimote. Se funziona, l'evento "CONNECT" verrà inviato e l'applicazione verrà avviata.
Il funzionamento del server wiimote verrà spiegato alla fine di questo tutorial.
funzione privata onWiimoteConnect (pEvent: Event): void lightSaber3D = new LightSaber3D (); addChild (lightSaber3D) lightSaber3D.buildLightSaber (); lightSaber3D.turnOffLightSaber (); wiimote.addEventListener (WiimoteEvent.UPDATE, updateWiimote); wiimote.addEventListener (ButtonEvent.B_PRESS, buttonPressed); wiimote.addEventListener (ButtonEvent.B_RELEASE, buttonReleased);
Se siamo connessi al server wiimote e viene trovato un wiimote, questa funzione verrà eseguita. Creerà una nuova istanza della classe lightsaber3D e la aggiungerà allo stage. Successivamente, verranno chiamate un paio di funzioni interne che creeranno una spada laser 3D e la "accenderanno". Le prossime 3 linee sono più importanti per noi adesso. Aggiungono 3 ascoltatori di eventi all'oggetto wiimote e questi ascoltatori trasmetteranno i dati necessari alla classe lightsaber3D.
Per maggiori informazioni sugli eventi wiimote disponibili, dai un'occhiata all'API wiiflash, inclusa nel pacchetto scaricato in precedenza.
funzione privata updateWiimote (pEvent: WiimoteEvent): void lightSaber3D.updateLightSaber3D (wiimote.pitch); private function buttonPressed (pEvent: ButtonEvent): void lightSaber3D.turnOnLightSaber (); private function buttonReleased (pEvent: ButtonEvent): void lightSaber3D.turnOffLightSaber ();
Queste 3 funzioni chiameranno le 3 funzioni pubbliche all'interno della classe lightsaber3D. È piuttosto semplice, se premi il pulsante "B" l'accendino è acceso e se muovi il wiimote, il valore del sensore di pitch viene passato alla funzione che controlla il movimento della spada laser.
Rompendo queste classi e utilizzando gli ascoltatori di eventi sarà molto facile riutilizzare entrambe le classi in altri progetti. Non dipendono l'uno dall'altro in modo da poter sostituire il wiimote con una normale tastiera o mouse senza dover regolare alcun codice lightsaber3D. Quindi, il potere della programmazione orientata agli oggetti :-)
Poiché è stata impostata tutta la comunicazione wiimote, è ora di iniziare a programmare in 3D. Per questo usiamo Papervision3D. Useremo una classe per creare un ambiente 3D e costruire la nostra spada laser al suo interno. Normalmente lo dividerei in più classi, ma dal momento che abbiamo solo una spada laser non è davvero necessario farlo qui. Detto questo, è un bel pezzo di codice, quindi per evitare che il browser cada, è possibile scaricare il file LightSaber3D.as per la visualizzazione.
Innanzitutto, avremo bisogno delle classi necessarie dalla libreria papervsion3D per creare un ambiente 3D. Questo consisterà in un viewport, una scena, una fotocamera e un motore di rendering. Per maggiori dettagli sul concetto di programmazione 3d, date un'occhiata al sito Web di papervision3D.
Dato che la nostra spada laser sarà composta da 2 cilindri con un piccolo filtro a incandescenza collegato ad esso, abbiamo solo bisogno delle 3 classi sopra menzionate. Il filtro glow che usiamo fa parte della libreria flash standard.
funzione pubblica LightSaber3D (): void viewport = new Viewport3D (600, 450, true); addChild (finestra); renderer = new BasicRenderEngine (); scene = new Scene3D (); camera = new Camera3D ();
Ora che abbiamo tutte le classi disponibili, è il momento di costruire la spada laser, ma prima di poter fare ciò abbiamo bisogno di un ambiente 3D. Creeremo un viewport, una sorta di finestra attraverso cui guardiamo, una scena in cui posizioniamo i nostri oggetti, una fotocamera che agisce come "l'occhio" e infine il motore di rendering che lo rende tutto.
Usiamo il costruttore per questo, dal momento che è il posto più logico. Come probabilmente ricorderai dal passaggio 5, chiamiamo questo costruttore quando c'è una connessione con il server wiimote, giusto in tempo quando ne abbiamo bisogno.
public function buildLightSaber (): void lsHolder = new DisplayObject3D (); var handleColor = new ColorMaterial (0xCCCCCC); var bladeColor = new ColorMaterial (0x99FF33, 0.6); // dai alla maniglia laser un po 'di colore handle = new Cylinder (handleColor, 16, 150, 8, 3, 16); blade = new Cylinder (bladeColor, 12, 500, 8, 3, 8);
La funzione buildLightSaber è quella che aggiunge effettivamente tutti gli oggetti 3D allo stage. La spada laser è costituita da una lama e una maniglia, che sono collocati in un contenitore. La lama e l'impugnatura sono cilindri semplici, con un materiale colorato sulla superficie. Si noti che il blade è reso leggermente trasparente aggiungendo un parametro extra al costruttore del materiale colore.
blade.useOwnContainer = true; blade.filters = [new GlowFilter (0x66FF33)];
La lama ha un filtro antiriflesso molto semplice ad esso collegato, quindi avrà quella lucente spada laser genuina illuminata intorno ad esso. A questo punto puoi sostituire il materiale colorato con un materiale bitmap per aggiungere alcune trame, ma qui useremo solo un colore semplice.
// posiziona la lama e maneggia la maniglia.y = 0; blade.y = 325; lsHolder.addChild (maniglia); lsHolder.addChild (lama); // posiziona il supporto al centro dello schermo lsHolder.y = -200; scene.addChild (lsHolder);
Ora aggiungiamo entrambi gli oggetti in un contenitore chiamato "lsHolder". Lo facciamo perché vogliamo un oggetto che possiamo manipolare. Infine, aggiungiamo il contenitore alla scena in modo che sia visibile quando eseguiamo il rendering di tutto.
// ora sposta leggermente la fotocamera verso destra per un buon angolo sulla camera laser camera.x = -200; // ... ma ha ancora bisogno di guardare la spada laser camera.lookAt (lsHolder);
Come passaggio finale spostiamo la fotocamera di 200 pixel verso sinistra, quindi abbiamo una leggera angolazione sulla spada laser. Questo è puramente fatto per rendere più visibile ciò che stiamo facendo. Ovviamente, dobbiamo anche dire alla telecamera dove guardare, quindi è quello che facciamo nell'ultima riga.
// ora esegui il rendering della scena in modo che possiamo effettivamente vedere il renderabro della spada laser.renderScene (scena, telecamera, finestra);
L'ultima riga della funzione buildLightSaber è molto importante e richiede una certa attenzione. Qualsiasi cosa tu programmi in 3D sarà invisibile finché non la esegui, quindi è quello che facciamo qui.
In precedenza abbiamo deciso che vogliamo che la spada laser sia attiva solo quando viene premuto il pulsante "B" sul retro del Wiimote. Pertanto abbiamo aggiunto due listener di eventi, uno che viene inviato quando viene premuto il pulsante "B" e un altro quando viene rilasciato il pulsante "B". Le prossime due funzioni saranno invocate su quegli eventi.
public function turnOnLightSaber (): void blade.visible = true; public function turnOffLightSaber (): void blade.visible = false;
Per creare un effetto on / off per la nostra spada laser, rendiamo la lama visibile o invisibile. Con qualche sforzo in più potresti aggiungere una routine che fa crescere e ridurre la lama, ma non è necessario per questo tutorial.
public function updateLightSaber3D (pitch: Number) // calcola la differenza in gradi del pitch var newPitch: Number = 90 + Math.round (pitch * (180 / Math.PI) - lsHolder.rotationX); // applicalo lsHolder.pitch (newPitch); // e renderlo. renderer.renderScene (scene, camera, viewport);
Questa è la funzione in cui avviene la magia. Ogni volta che il wiimote invia i dati alla nostra applicazione, questa funzione verrà invocata. Per la nostra piccola applicazione abbiamo solo bisogno del valore del sensore di pitch, quindi viene passato come parametro a questa funzione. Come spiegato in precedenza, dovrebbe essere facile sostituire il wiimote con un mouse o una tastiera senza dover modificare questo codice.
var newPitch: Number = 90 + Math.round (pitch * (180 / Math.PI) - lsHolder.rotationX);
Il valore del pitch del wiimote verrà indicato in radianti, ma la funzione pitch di papervision3D si aspetta gradi, quindi dobbiamo fare alcuni calcoli. Poiché la funzione di pitch usa un angolo relativo, dobbiamo sottrarre l'angolo corrente dal valore del sensore di pitch. Altrimenti la spada laser andrebbe fuori controllo.
// applicalo lsHolder.pitch (newPitch); // e renderlo. renderer.renderScene (scene, camera, viewport);
Dopo aver lanciato il contenitore sul suo nuovo valore, dobbiamo rendere nuovamente la scena.
E abbiamo finito! Con solo 151 linee di codice abbiamo creato il nostro programma di allenamento della spada laser Jedi! Anche se non prima di esportarlo, ovviamente. Per ottenere le migliori prestazioni dovremmo eseguirlo come un proiettore stand-alone. Vai alle impostazioni di pubblicazione, tocca i box del proiettore e usa le impostazioni come elencato di seguito.
Ora pubblicalo e il gioco è fatto.
Non proprio ... Prima di poter eseguire questa applicazione, dobbiamo avviare il server Wiiflash e collegarci il wiimote. Questo dovrebbe essere molto semplice. Esegui il server (lo troverai nel pacchetto scaricato al passaggio 1) e premi i pulsanti 1 + 2 sul Wiimote.
Una breve nota sulla creazione di applicazioni e giochi che utilizzano il Wiimote. I dati del sensore che ricevi dal wiimote non sono estremamente accurati. Lo noterai nell'applicazione che abbiamo appena creato. Ecco perché la maggior parte dei giochi che troverai sul Wii sono basati sul riconoscimento del movimento. Ciò significa che il sistema (in questo caso il Wii) riconosce un certo movimento fatto con un wiimote e attacca una certa azione (visiva) ad esso. Ad esempio, se fai movimenti che assomigliano a servire una pallina da tennis, il Wii calcolerà la tua velocità e direzione dati i dati del sensore e li tradurrà in un'animazione fluente in 3D. I calcoli coinvolti con queste routine sono molto complessi e quindi non inclusi in questo tutorial.
Che la forza sia con te…
Accentsconagua