La caricature 3D a été réalisée à partir de photos du directeur sur 3DS Max. Quelques dessins ont permit de mieux préparer le modeling. Un squelette à été ajouté pour permettre une animation facile du modèle 3D.

Le panneau de configuration a été réalisé avec SimpleGUI dont vous pouvez obtenir plus de détails et un lien pour le téléchargement sur le blog de Soulwire. Vous pouvez le réduire en cliquant sur le signe "-" en haut à gauche.

L'affichage des particules se fait en bitmap. Cette technique permet un gain de performances considérable en comparaison à l'affichage d'un trop grand nombre de MovieClip dans une scène.

• Obtenir un résultat visuellement agréable
• Permettre à l'utilisateur de personnaliser la grille
• M'entraîner à la Programmation Orienté Objet (POO) en actionscript 3

L'application s'inspire directement du film Tron : Legacy et notamment du générique de fin avec ses lumières laissant des traces. 

Cliquez pour tester

Réglez votre faisceau, choisissez la couleur, l'épaisseur, la profondeur, la vitesse, etc. et lancez la génération. N'en faites pas trop, vous risqueriez de planter votre navigateur.

La grande nouveauté est l'amélioration des performances graphiques grâce au nouveau système de rendu bas niveau Mohehill (trou de taupe). Pour plus d'explications, un peu de lecture.

Pour pouvoir utiliser Mohehill, les gars de chez Away3D on mis à disposition une version Alpha, nommée Broomstick (manche à balais), de leur moteur de rendu. Bien entendu, cette Alpha utilise Molehill sinon je n'en parlerai pas.

Dans le cadre de l'expérimentation, j'ai aussi utilisé la Class jiglibFlash permettant de gérer la physique et les collisions.

En bref, vous mélangez le trou de taupe avec le manche à balais auxquels vous ajoutez du jiglib et vous obtenez un petit jeu sans but mais intéressant en terme de performances et de qualité graphique.

Cliquez pour tester

Bon nombre d'entre vous n'ont probablement pas accès au jeu flash puisque celui-ci nécessite l'installation du Flash Player 11 Incubator et d'un navigateur compatible.

Pour parler des performances, le nombre de polygones qu'on peut afficher à l'écran est incroyable comparé aux anciennes version de flash. Les pertes de framerate viennent des calculs de collisions en premier.

Vivement les prochaines améliorations.

Le patron du bar souhaitait une page simple permettant plusieurs choses au visiteur plusieurs choses :

• Rejoindre facilement la page Facebook du bar
• Le contacter facilement
• Le trouver facilement
• En savoir un peu plus à son sujet

• Le site se compose d'une seule page.
• Le bloc happy hour à été réalisé en javascript/jQuery. Il indique dans combien de temps commence l'happy hour (ou un autre message si l'happy hour est maintenant ou vient de se terminer).
• Le système de partage Facebook "like" est directement lié à la page facebook du bar plutôt qu'au site du comptoir.
• La galerie a aussi été réalisée avec le plugin Slides
• Le formulaire de contact fonctionne en ajax avec contrôle javascript et PHP.

De base, le design devait ressembler à ça

Mais la charte graphique ne correspondait pas assez à celle du bar, tout particulièrement la devanture. Il a donc fallu faire quelques sacrifices et modifier les couleurs.

Posez votre ordinateur portable ou la webcam sur une surface stable, autorisez flash à utiliser votre webcam (nécessaire) et déplacez-vous de gauche à droite et de haut en bas pour voir le résultat. 

L'univers 3D, réalisé avec Away3D est là pour montrer un exemple d'utilisation du tracker. Le debugger permet de voir comment sont detectés les mouvements. Vous pouvez le désactiver.

Pour expliquer rapidement le fonctionnement :
A chaque frame, le script compare l'image actuelle à celle l'instant d'avant. Les coordonnées de tous les pixels qui ont changé de couleurs sont stoqués dans un tableau et la moyenne de ces coordonnées permet d'obtenir la position de la personne. Une simple limitation de la hauteur permet de cibler la tête.

Il s'agit d'une première version. De nombreux problèmes sont à corriger. L'idéal serait de ne detecter que le visage et non les mouvements comme c'est le cas actuellement.

La suite bientôt.

Après quelques recherches mon choix du moteur de rendu pour flash s'est porté sur away3D. Celui-ci présente des performances souvent supérieures aux concurrents (Papervision 3D, Sophie3D). Il faut tout de même garder en tête que tout risque de changer avec l'arrivée du nouveau player notamment avec nos amis Russes d'Alternativa 3D.

Sans plus attendre, je vous invite à tester ma première application fash 3D :

SYSTEME SOLAIRE 3D environ 1,4 Mo

Quelques informations :

• Le moteur de rendu utilisé est Away3D
• Les transitions se font avec la class Tweener (caurina)
• Les textures proviennent en majorité de ce site. Je les ai ensuite modifiées pour les alléger, ajouter l'ombre et améliorer les couleurs
• Le soleil est en fait un plan toujours tourné vers la caméra
• Par soucis de performances, seule la planète active contient beaucoup de polygones, les autres planètes en contiennent moins. Cela ne se voit pas grâce à la distance.
• Le code à été intégralement fait sur Flash Builder 4

Télécharger le PDF

Vous aurez besoin de ciseaux, de colle et de patience. Un petit aperçu pour voir le "chef-d'œuvre" final avec 3 bonhommes collés.

J'admets, ça ne sert à rien. Mais ça occupe si vous vous ennuyez. Finalement je vous rend service.

Jouer au jeu

Comme souvent, j'ai fait ce jeu en quelques jours simplement pour m'entraîner. Certaines parties du code mériteraient d'être retravaillées tout comme les images et les sons. 

Il existe bien un niveau maximum, y arriverez-vous ?

Celle-ci a été codée en Actionscript3. Les évènement et leurs fréquences sont gérés depuis un fichier XML. Il est donc très facile d'en rajouter de nouveaux à la liste et de modifier les intitulés et les fréquences.