Build en Wiimote Kontrollert Lights Bruke WiiFlash og Papervision3D
Del
Del
Del
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I dag skal vi bygge en wiimote kontrollert lyssabel hjelp WiiFlash og Papervision3D. Målet med denne opplæringen vil være å lære å bruke en wiimote innen flash og hvordan du kan kombinere det med Papervision3D. Etterpå, selvfølgelig, kan du bruke dette programmet til å trene for din Jedi lederskapet

Trinn 1 -. Last ned de nødvendige pakkene

Det første trinnet er også den enkleste; laste ned pakkene vi trenger. Gå til blog.papervision3d.org og wiiflash.bytearray.org å laste ned den nyeste versjonen av begge pakkene. Pakk begge pakkene og plassere bibliotekene (en katalog som heter "org") i arbeidskatalogen

Trinn 2 -. Lag Flash Document

Siden dette prosjektet vil bli helt skrevet i Actionscript 3.0, det første vi må gjøre er å lage en ny Flash-dokument og lage en referanse til vår viktigste klassen: lyssabel. Lagre det som "lightsaber.fla" i arbeidsmappen.

Deretter oppretter du en tom klasse kalt "lyssverd". Dette vil være den viktigste klassen hvor alt blir klargjort. Lagre det som "LightSaber.as" i arbeidsmappen
pakken {public class lyssabel {offentlig funksjon lyssabel () {}}}
Trinn 3 -. Den LightSaber3D Class

Den neste klassen vi 're kommer til å lage kalles LightSaber3D og dette vil inneholde all 3D-logikk. Lagre den som 'LightSaber3D.as "i din arbeids
pakken {public class LightSaber3D {offentlig funksjon LightSaber3D () {}}}
Trinn 4 -. The Complete lyssabel Class

Nå som alt klassene og biblioteker er på plass kan vi begynne å fylle dem i. Vi begynner med å sette opp Wiimote kommunikasjon. Følgende kode er den komplette koden for lyssabel klasse; i de følgende trinnene vil vi diskutere det nærmere
pakke {import flash.display *..; import flash.events. *; import org.wiiflash.Wiimote; import org.wiiflash.events. *; import LightSaber3D; public class lyssabel strekker Sprite {private Var wiimote: Wiimote; private Var lightSaber3D: LightSaber3D; offentlig funksjon Lightsaber (): void {stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect (); } Private funksjon onWiimoteConnect (pEvent: Hendelses): 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); } Private funksjon updateWiimote (pEvent: WiimoteEvent): void {lightSaber3D.updateLightSaber3D (wiimote.pitch); } Private funksjon buttonPressed (pEvent: ButtonEvent): void {lightSaber3D.turnOnLightSaber (); } Private funksjon buttonReleased (pEvent: ButtonEvent): void {lightSaber3D.turnOffLightSaber (); }}}
Trinn 5 - Import ..
import flash.display *, import flash.events *; import org.wiiflash.Wiimote, import org.wiiflash.events *; import LightSaber3D; Før vi kan gjøre noe med Wiimote innen flash, må vi inkludere wiiflash bibliotekene i klassen vår. For dette prosjektet trenger vi hoved Wiimote klasse og Wiimote hendelser. Vi har også vår LightSaber3D klasse, men som vil bli diskutert senere

Trinn 6 -. Generelt Concept

Før diskutere hva koden faktisk gjør og hvorfor vi trenger det, er det veldig viktig å vite den "generelle begrepet" bak denne søknaden. Vi bygger et 3d lyssabel som vi kan svinge rundt ved hjelp av en Wiimote og som en ekstra funksjon vi vil være i stand til å slå den på og av med "B" knappen på baksiden av Wiimote.

Hvordan oppnår vi alt dette? Vel jeg har bestemt meg for å bryte den opp i to klasser; en som håndterer Wiimote og en som styrer alle 3D aspekter. Wiimote klassen mottar dataene fra Wiimote og sender den videre til 3D-klassen. Dette gjøres gjennom hendelsesbehandlinger fra wiimote klassen
offentlig funksjon lyssabel (). Void {stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect ();}

Først oppretter vi en ny forekomst av Wiimote klassen og legge til en hendelse lytteren kalt "Event.CONNECT" til dette objektet. Dette gjøres fordi vi bare vil at programmet skal kjøre når det er en sammenheng med en Wiimote. Deretter prøver vi å koble til Wiimote server. Hvis det fungerer, vil "CONNECT" hendelse bli sendt, og programmet vil starte

De arbeidet i Wiimote-serveren vil bli forklart på slutten av denne opplæringen

Trinn 7 -.. Funksjon onWiimoteConnect
privat funksjon onWiimoteConnect (pEvent: Hendelses): 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); }

Hvis vi er koblet til wiimote server og en wiimote er funnet, denne funksjonen vil bli henrettet. Det vil skape en ny forekomst av lightsaber3D klassen og legge den til på scenen. Deretter vil et par interne funksjoner bli kalt noe som vil skape en 3D-lyssabel og slå den "på". De neste 3 linjer er viktigere for oss akkurat nå. De legger til 3 hendelsen lyttere til Wiimote objektet og disse lytterne vil formidle de nødvendige data til lightsaber3D klassen.

For mer informasjon om de tilgjengelige Wiimote hendelser, ta en titt på wiiflash API, det er inkludert i pakken du lastet ned tidligere på

Trinn 8 - Grunnleggende kontroller
privat funksjon updateWiimote (pEvent: WiimoteEvent): void {lightSaber3D.updateLightSaber3D (wiimote.pitch);} private funksjon buttonPressed. (pEvent: ButtonEvent): void {lightSaber3D.turnOnLightSaber ();} private funksjon buttonReleased (pEvent: ButtonEvent): void {lightSaber3D.turnOffLightSaber ();}

Disse 3 funksjoner vil kalle de 3 offentlige funksjoner inne i lightsaber3D klassen. Det er ganske grei, så lenge du trykker på "B" -knappen lightaber er slått på, og hvis du flytter Wiimote, er verdien av banen sensoren sendes til funksjonen som styrer bevegelsen av lyssabel.

Ved å bryte disse klassene opp og bruke hendelsen lyttere vil det være svært enkelt å bruke begge klasser i andre prosjekter. De er ikke avhengige av hverandre, slik at du kan bytte ut Wiimote med et vanlig tastatur eller mus uten å justere noen av lightsaber3D kode. Derfor kraften i objektorientert programmering :-)

Trinn 9 - Papervision3D

Siden alle wiimote kommunikasjon er satt opp, er det på tide å begynne å gjøre noen 3D programmering. Til dette bruker vi Papervision3D. Vi vil bruke én klasse til å sette opp et 3D-miljø og bygge vår lyssabel i den. Normalt ville du bryte den opp i flere klasser, men siden vi bare har en lyssabel det er egentlig ikke nødvendig å gjøre det her. Sier at det er litt av en betydelig del av koden, så for å unngå at nettleseren fra å falle over, kan du laste ned LightSaber3D.as filen for visning.

Først trenger vi de nødvendige klassene fra papervsion3D biblioteket å bygge en 3D-miljø. Dette vil bestå av en synsfeltet, en scene, et kamera og en rendering motoren. For mer informasjon om konseptet med 3d programmering, ta en titt på nettsiden til Papervision3D.

Siden vår lyssabel vil bestå av 2 sylindre med litt glød filter er knyttet til det vi trenger bare de 3 ovennevnte klasser . Gløden filter vi bruker er en del av standard flash bibliotek

Trinn 10 - The Lightsaber
offentlig funksjon LightSaber3D (): void {view = new Viewport3D (600, 450, true);. addChild (view); renderer = new BasicRenderEngine (); scene = new Scene3D (); Kameraet = new Camera3D ();}

Nå som vi har alle tilgjengelige klasser, er det på tide å bygge lyssabel - men før vi kan gjøre det vi trenger et 3D-miljø. Vi setter opp et visningsfelt, en slags vinduet vi ser der, en scene hvor vi legger våre objekter, et kamera som fungerer som "øye" og til slutt gjengivelsesmotoren som gjør det hele tatt.

Vi bruker konstruktøren for dette, siden det er det mest logiske stedet. Som du sikkert husker fra trinn fem, kaller vi dette konstruktør når det er en forbindelse med Wiimote server, akkurat i tide når vi trenger dem

Trinn 11 -. Legge til 3D-objekter til Stage
offentlig funksjon buildLightSaber (): void {lsHolder = new DisplayObject3D (); Var handleColor = new ColorMaterial (0xCCCCCC); Var bladeColor = new ColorMaterial (0x99FF33, 0,6); //Gi lyssabel litt farge håndtaket = new Cylinder (handleColor, 16, 150, 8, 3, 16); bladet = new Cylinder (bladeColor, 12, 500, 8, 3, 8);

Funksjonen buildLightSaber er den som faktisk legger all 3D-objekter til scenen. Lyssabelen består av et blad og håndtak, som er plassert i en beholder. Blad og håndtak er enkle sylindere, med et fargemateriale på overflaten. Legg merke til at bladet er gjort litt gjennomsiktig ved å legge til et ekstra parameter til fargen materialet konstruktør
blade.useOwnContainer = sant.; blade.filters = [ny GlowFilter (0x66FF33)];

Bladet har en veldig enkel glowfilter knyttet til det, så det vil ha den ekte lyssabel gløden rundt det. På dette punktet kan du erstatte fargen materiale med et bitmap materiale for å legge til noen teksturer, men her vil vi bare bruke en enkel farge

Trinn 12 - Lights Container
//posisjon bladet &.; håndtere handle.y = 0; blade.y = 325; lsHolder.addChild (håndtak); lsHolder.addChild (blad); //Plassere holderen noe i midten av skjermen lsHolder.y = -200; scene.addChild (lsHolder);

Nå legger vi begge objektene til en beholder som heter "lsHolder". Vi gjør dette fordi vi ønsker ett objekt som vi kan manipulere. Til slutt legger vi beholderen til scenen slik at det vil være synlig når vi gjengi alt
//nå flytte kameraet litt til høyre for en god vinkel til lyssabel camera.x = -200.; //... Men det er fortsatt behov for å se på lyssabel camera.lookAt (lsHolder);

Som et siste skritt vi beveger kameraet 200 piksler til venstre, så vi har en liten vinkel på lyssabel. Dette er utelukkende gjort for å gjøre det vi gjør mer synlig. Selvfølgelig trenger vi også å fortelle kameraet hvor du skal lete, så det er det vi gjør i den siste linjen

Trinn 13 -. Render Sceneanmeldelser //nå rendre scenen slik at vi faktisk kan se lyssabelen renderer.renderScene (scene, kamera, view);

Den siste linjen i buildLightSaber funksjonen er svært viktig, og trenger litt oppmerksomhet. Uansett hva du programmerer i 3D vil være usynlig til du gjøre det, så det er det vi gjør her.

Trinn 14 - på og av

Tidligere har vi besluttet at vi ønsker lyssabelen å være aktiv bare når "B" knappen på baksiden av Wiimote trykkes. Derfor har vi lagt til to hendelsen lyttere, en som er sendt når "B" trykkes - og en annen når "B" knappen slippes. De neste to funksjonene vil bli påberopt på disse hendelsene.
offentlig funksjon turnOnLightSaber (): void {blade.visible = true; } Offentlig funksjon turnOffLightSaber (): void {blade.visible = false; }

Hvis du vil lage en on /off effekt for vår lyssabel vi bare gjøre bladet synlig eller usynlig. Med litt ekstra innsats kan du legge til en rutine som gjør bladet vokse og krympe, men det er ikke nødvendig for denne opplæringen

Trinn 15 - legge til litt magi
offentlig funksjon updateLightSaber3D (pitch: Number). { //calcaulte forskjellen i grader av banen Var newPitch: Number = 90 + Math.round (pitch * (180 /Math.PI) - lsHolder.rotationX); //Gjelder det lsHolder.pitch (newPitch); //Og gjengi det. renderer.renderScene (scene, kamera, view); }

Dette er funksjonen der magien skjer. Hver gang Wiimote sender data til vår søknad denne funksjonen vil bli påberopt. For vår lille programmet kun trenger vi verdien av banen sensor, så det er overlevert som en parameter til denne funksjonen. Som forklart før, bør det være lett å erstatte Wiimote med mus eller tastatur uten å måtte endre denne koden
Var newPitch: Number = 90 + Math.round (pitch * (180 /Math.PI) - lsHolder.. rotationX);

Den banen verdien av Wiimote vil bli gitt i radianer, men banen funksjon Papervision3D forventer grader, så vi trenger å gjøre noen beregninger. Fordi banen funksjonen bruker en relativ vinkel vi trenger å trekke den aktuelle vinkelen fra verdien av banen sensor. Ellers lyssabel vil spinne ut av kontroll
//gjelder det lsHolder.pitch (newPitch.); //Og gjengi det. renderer.renderScene (scene, kamera, view);.!

Etter pitching beholderen til den nye verdien, må vi gjengi scenen igjen

Trinn 16 - ferdige

Og vi er ferdig! Med bare 151 linjer med kode har vi laget vår egen Jedi lyssabel treningsprogram! Selv om ikke før vi eksporterer det selvfølgelig. For å få best mulig ytelse bør vi kjøre den som en frittstående projektor. Gå til publiseringsinnstillinger, trykk på projektoren bokser og bruke innstillingene som er nevnt nedenfor

Nå publiserer det og du er ferdig

Trinn 17 -.. WiiFlash Server

Ikke helt ... Før vi kan kjøre dette programmet må vi starte wiiflash serveren og koble Wiimote til det. Dette bør være meget enkel. Kjør server (du finner den i pakken du lastet ned i trinn 1) og trykknapper 1 + 2 på din wiimote.

Det endelige resultatet!

En siste merknad.

En rask kommentar på bygge programmer og spill som bruker Wiimote. Sensoren data du mottar fra Wiimote er ikke ekstremt nøyaktig. Du vil merke at i søknaden har vi nettopp bygget. Det er derfor de fleste av spillene du finner på Wii er basert på bevegelsesgjenkjenning. Dette betyr at systemet (i dette tilfelle Wii) gjenkjenner en viss bevegelse laget med en Wiimote og fester en viss (visuell) handling til den. For eksempel, hvis du gjør bevegelser som ligner serverer en tennisball, vil Wii beregne hastighet og retning gitt sensordataene og oversette det til en flytende 3D-animasjon. Beregningene som er involvert med disse rutinene er svært komplekse og derfor ikke inkludert i denne opplæringen.

Måtte kraften være med deg .. Anmeldelser