Share
Aujourd'hui, nous allons construire un sabre laser contrôlé par Wiimote avec WiiFlash et Papervision3D. Le but de ce tutoriel sera d'apprendre à utiliser une télécommande dans Flash et à la combiner avec papervision3D. Ensuite, bien sûr, vous pouvez utiliser cette application pour vous former à votre maîtrise Jedi.
La première étape est aussi la plus simple. télécharger les packages dont nous avons besoin. Allez sur blog.papervision3d.org et wiiflash.bytearray.org pour télécharger la dernière version de ces deux packages. Décompressez les deux packages et placez les bibliothèques (un répertoire appelé "org") dans votre répertoire de travail..
Étant donné que ce projet sera entièrement écrit en ActionScript 3.0, la première chose à faire est de créer un nouveau document Flash et de faire référence à notre classe principale: LightSaber. Enregistrez-le sous "lightsaber.fla" dans votre répertoire de travail.
Ensuite, créez une classe vide appelée "LightSaber". Ce sera la classe principale où tout sera initialisé. Enregistrez-le sous "LightSaber.as" dans le répertoire de travail.
package public class LightSaber fonction publique LightSaber ()
Le prochain cours que nous allons créer s'appelle LightSaber3D et celui-ci contiendra toute la logique 3D. Enregistrez-le sous le nom 'LightSaber3D.as' dans votre répertoire de travail..
package classe publique LightSaber3D fonction publique LightSaber3D ()
Maintenant que toutes les classes et les bibliothèques sont en place, nous pouvons commencer à les renseigner. Nous allons commencer par configurer la communication par Wi-Fi. Le code suivant est le code complet de la classe LightSaber. dans les étapes suivantes, nous en discuterons plus en détail.
package import flash.display. *; importer flash.events. *; importer org.wiiflash.Wiimote; importer org.wiiflash.events. *; importer LightSaber3D; Classe publique LightSaber étend Sprite private var wiimote: Wiimote; var privé lightSaber3D: LightSaber3D; fonction publique LightSaber (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect (); fonction privée onWioteConnect (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); private function updateWiimote (pEvent: WiimoteEvent): void lightSaber3D.updateLightSaber3D (wiimote.pitch); touche de fonction privéePrimée (pEvent: ButtonEvent): void lightSaber3D.turnOnLightSaber (); bouton de fonction privéReleased (pEvent: ButtonEvent): void lightSaber3D.turnOffLightSaber ();
import flash.display. *; importer flash.events. *; importer org.wiiflash.Wiimote; importer org.wiiflash.events. *; importer LightSaber3D;
Avant de pouvoir faire quoi que ce soit avec la Wiimote dans Flash, nous devons inclure les bibliothèques wiiflash dans notre classe. Pour ce projet particulier, nous aurons besoin de la classe principale WiiMote et des événements Wiimote. Nous incluons également notre classe LightSaber3D, mais nous en discuterons plus tard.
Avant de discuter de ce que le code fait réellement et pourquoi nous en avons besoin, il est très important de connaître le "concept général" de cette application. Nous construisons un sabre laser 3D que nous pouvons utiliser avec une télécommande Wiimote. Nous pourrons également l’activer et la désactiver à l’aide du bouton "B" situé à l’arrière de la télécommande..
Comment pouvons-nous réaliser tout cela? Eh bien, j'ai décidé de le diviser en deux classes. celui qui gère la Wiimote et celui qui contrôle tous les aspects 3D. La classe wiimote reçoit les données de la wiimote et les transmet à la classe 3D. Ceci est fait par les gestionnaires d’événements de la classe wiimote.
fonction publique LightSaber (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; wiimote = new Wiimote (); wiimote.addEventListener (Event.CONNECT, onWiimoteConnect); wiimote.connect ();
Tout d'abord, nous créons une nouvelle instance de la classe wiimote et ajoutons un écouteur d'événement appelé "Event.CONNECT" à cet objet. Ceci est fait parce que nous voulons que l'application ne s'exécute que lorsqu'il existe une connexion avec une télécommande. Ensuite, nous essayons de nous connecter au serveur Wiiote. Si cela fonctionne, l'événement "CONNECT" sera envoyé et l'application démarrera.
Le fonctionnement du serveur Wiimote sera expliqué à la fin de ce tutoriel..
fonction privée onWioteConnect (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);
Si nous sommes connectés au serveur Wiimote et qu’une Wiimote est trouvée, cette fonction sera exécutée. Il va créer une nouvelle instance de la classe lightsaber3D et l'ajouter à la scène. Ensuite, quelques fonctions internes seront appelées pour créer un sabre laser 3D et l’activer. Les 3 prochaines lignes sont plus importantes pour nous en ce moment. Ils ajoutent 3 écouteurs d'événement à l'objet Wiimote et ces écouteurs transmettront les données nécessaires à la classe lightsaber3D..
Pour plus d'informations sur les événements Wiimote disponibles, consultez l'API wiiflash, elle est incluse dans le package que vous avez téléchargé précédemment.
fonction privée updateWiimote (pEvent: WiimoteEvent): void lightSaber3D.updateLightSaber3D (wiimote.pitch); touche de fonction privéePrimée (pEvent: ButtonEvent): void lightSaber3D.turnOnLightSaber (); bouton de fonction privéReleased (pEvent: ButtonEvent): void lightSaber3D.turnOffLightSaber ();
Ces 3 fonctions appellent les 3 fonctions publiques de la classe lightsaber3D. C'est assez simple, tant que vous appuyez sur le bouton "B", le sabre laser est allumé et si vous déplacez la télécommande, la valeur du capteur de hauteur est transmise à la fonction qui contrôle le mouvement du sabre laser..
En séparant ces classes et en utilisant des écouteurs d'événements, il sera très facile de réutiliser les deux classes dans d'autres projets. Ils ne dépendent pas les uns des autres, vous pouvez donc remplacer la télécommande par un clavier ou une souris normaux sans avoir à ajuster le code lightsaber3D. D'où le pouvoir de la programmation orientée objet :-)
Comme toute la communication Wi-Fi est configurée, il est temps de commencer à programmer. Pour cela, nous utilisons Papervision3D. Nous allons utiliser une classe pour configurer un environnement 3D et y construire notre sabre laser. Normalement, vous le divisez en plusieurs classes, mais comme nous n’avons qu’un seul sabre laser, il n’est pas vraiment nécessaire de le faire ici. Cela étant dit, il s’agit d’une bonne quantité de code. Pour éviter que votre navigateur ne tombe, vous pouvez télécharger le fichier LightSaber3D.as pour le visualiser..
Premièrement, nous aurons besoin des classes nécessaires de la bibliothèque papervsion3D pour créer un environnement 3D. Cela consistera en une fenêtre d'affichage, une scène, une caméra et un moteur de rendu. Pour plus de détails sur le concept de programmation 3D, consultez le site Web de papervision3D.
Puisque notre sabre laser sera composé de 2 cylindres avec un petit filtre anti-luminescent, nous n’avons besoin que des 3 classes susmentionnées. Le filtre de luminescence que nous utilisons fait partie de la bibliothèque de flash standard.
fonction publique LightSaber3D (): void viewport = new Viewport3D (600, 450, true); addChild (viewport); renderer = new BasicRenderEngine (); scene = new Scene3D (); camera = new Camera3D ();
Maintenant que nous avons toutes les classes disponibles, il est temps de construire le sabre laser - mais avant de pouvoir le faire, nous avons besoin d'un environnement 3D. Nous allons créer une fenêtre, une sorte de fenêtre par laquelle nous regardons, une scène où nous plaçons nos objets, une caméra qui agit comme un "œil" et enfin le moteur de rendu qui rend tout..
Nous utilisons le constructeur pour cela, car c'est l'endroit le plus logique. Comme vous vous en souvenez probablement à l'étape 5, nous appelons ce constructeur lorsqu'il y a une connexion avec le serveur Wiimote, juste au moment où nous en avons besoin.
fonction publique buildLightSaber (): void lsHolder = new DisplayObject3D (); var handleColor = new ColorMaterial (0xCCCCCC); var bladeColor = new ColorMaterial (0x99FF33, 0.6); // donne au sabre laser un code couleur = new Cylinder (handleColor, 16, 150, 8, 3, 16); lame = cylindre neuf (bladeColor, 12, 500, 8, 3, 8);
La fonction buildLightSaber est celle qui ajoute tous les objets 3D à la scène. Le sabre laser est constitué d'une lame et d'un manche placés dans un conteneur. La lame et le manche sont de simples cylindres avec un matériau de couleur à la surface. Notez que la lame est rendue légèrement transparente en ajoutant un paramètre supplémentaire au constructeur du matériau de couleur..
blade.useOwnContainer = true; blade.filters = [new GlowFilter (0x66FF33)];
Un filtre luminescent très simple est attaché à la lame, elle sera donc entourée d'un véritable sabre laser. À ce stade, vous pouvez remplacer le matériau de couleur par un matériau bitmap pour ajouter des textures, mais ici, nous utiliserons simplement une couleur..
// positionne la lame et le manche handle.y = 0; blade.y = 325; lsHolder.addChild (handle); lsHolder.addChild (lame); // place le titulaire un peu au centre de l'écran lsHolder.y = -200; scene.addChild (lsHolder);
Maintenant, nous ajoutons les deux objets à un conteneur appelé "lsHolder". Nous faisons cela parce que nous voulons un objet que nous pouvons manipuler. Enfin, nous ajoutons le conteneur à la scène pour qu’il soit visible lors du rendu du tout..
// déplace maintenant la caméra un peu à droite pour un bon angle sur le sabre laser camera.x = -200; //… mais il faut quand même regarder le sabre laser camera.lookAt (lsHolder);
Enfin, nous déplaçons la caméra de 200 pixels vers la gauche. Nous avons donc un léger angle avec le sabre laser. Ceci est purement fait pour rendre plus visible ce que nous faisons. Bien sûr, nous devons également indiquer à la caméra où regarder, c'est ce que nous faisons à la dernière ligne.
// rend maintenant la scène pour que nous puissions réellement voir le rendu au sabre laser.renderScene (scene, camera, viewport);
La dernière ligne de la fonction buildLightSaber est très importante et mérite une attention particulière. Tout ce que vous programmez en 3D sera invisible jusqu'à ce que vous le rendiez, c'est ce que nous faisons ici.
Un peu plus tôt, nous avons décidé que nous voulions que le sabre laser soit actif uniquement lorsque le bouton "B" situé à l'arrière de la télécommande est enfoncé. Par conséquent, nous avons ajouté deux écouteurs d'événement, l'un envoyé lorsque vous appuyez sur le bouton "B" - et l'autre lorsque vous relâchez le bouton "B". Les deux prochaines fonctions seront invoquées sur ces événements.
fonction publique turnOnLightSaber (): void blade.visible = true; fonction publique turnOffLightSaber (): void blade.visible = false;
Pour créer un effet d'activation / désactivation de notre sabre laser, il suffit de rendre la lame visible ou invisible. Avec quelques efforts supplémentaires, vous pouvez ajouter une routine qui fait grossir et rétrécir la lame, mais ce n'est pas nécessaire pour ce tutoriel..
fonction publique updateLightSaber3D (pitch: Number) // calcaulte la différence de degrés du pitch var newPitch: Number = 90 + Math.round (pitch * (180 / Math.PI) - lsHolder.rotationX); // l'applique lsHolder.pitch (newPitch); // et le rendre. renderer.renderScene (scène, caméra, fenêtre d'affichage);
C'est la fonction où la magie se produit. Chaque fois que la Wiimote envoie des données à notre application, cette fonction est appelée. Pour notre petite application, nous n'avons besoin que de la valeur du capteur de hauteur, qui est donc transmise en tant que paramètre à cette fonction. Comme expliqué précédemment, il devrait être facile de remplacer la télécommande par une souris ou un clavier sans avoir à changer ce code.
var newPitch: Number = 90 + Math.round (pitch * (180 / Math.PI) - lsHolder.rotationX);
La valeur de hauteur de la Wiimote sera donnée en radians, mais la fonction de hauteur de papervision3D attend des degrés. Nous devons donc effectuer certains calculs. Comme la fonction de hauteur utilise un angle relatif, nous devons soustraire l’angle actuel de la valeur du capteur de hauteur. Sinon, le sabre laser deviendrait incontrôlable.
// l'applique lsHolder.pitch (newPitch); // et le rendre. renderer.renderScene (scène, caméra, fenêtre d'affichage);
Après avoir ajusté le conteneur à sa nouvelle valeur, nous devons à nouveau restituer la scène..
Et nous avons fini! Avec seulement 151 lignes de code, nous avons créé notre propre programme de formation au sabre laser Jedi! Bien que pas avant que nous l'exportions bien sûr. Pour obtenir les meilleures performances, nous devons l’exécuter en tant que projecteur autonome. Accédez à vos paramètres de publication, appuyez sur les cases du projecteur et utilisez les paramètres énumérés ci-dessous..
Maintenant publiez-le et vous avez terminé.
Pas tout à fait… Avant de pouvoir exécuter cette application, nous devons démarrer le serveur wiiflash et y connecter la Wiimote. Cela devrait être très simple. Exécutez le serveur (vous le trouverez dans le package que vous avez téléchargé à l'étape 1) et appuyez sur les boutons 1 + 2 de votre télécommande..
Une note rapide sur la création d’applications et de jeux utilisant la Wiimote. Les données de capteur que vous recevez de la Wiimote ne sont pas extrêmement précises. Vous remarquerez cela dans l'application que nous venons de construire. C'est pourquoi la plupart des jeux que vous trouverez sur la Wii sont basés sur la reconnaissance de mouvement. Cela signifie que le système (dans ce cas la Wii) reconnaît un certain mouvement effectué avec une télécommande et lui associe une certaine action (visuelle). Par exemple, si vous faites un mouvement qui ressemble à celui de servir une balle de tennis, la Wii calculera votre vitesse et votre direction en fonction des données du capteur et les traduira en animation 3D fluide. Les calculs impliqués dans ces routines sont très complexes et ne sont donc pas inclus dans ce tutoriel..
Que la force soit avec toi…
Accentsconagua