loudoweb.fr - [3d] Débuter avec Minko sur FlashDevelop

[3d] Débuter avec Minko sur FlashDevelop



Pourquoi choisir Minko pour faire de la 3d avec flash.

Il existe quelques librairies 3d pour flash, quelles sont les fonctionnalités qui m'ont poussées vers Minko ?

  • Minko possède son propre format de fichier de modèle 3d (extension .mk) environ 8 à 10 fois moins lourd que le très usité Collada par exemple (extension .dae).
  • Les shaders sont simples à écrire et à maintenir ou faire évoluer. On les écrit entièrement en as3 et non en AGAL.
  • Minko studio et shader lab semblent prometteurs (le premier pour la gestion des matériaux, la compression en mk et l'assemblage de modèles 3d, le second pour la création de shader).
  • Minko a été créé par des français (Aerys), ce qui peut faciliter le support.

Mise en place d'un projet avec Minko et flashDevelop.

Tout d'abord, il convient de télécharger la dernière version de FlashDevelop. Ce qui est bien avec ce logiciel, contrairement à Flash builder, c'est que l'on a bien plus de facilité à créer un projet as3 orienté 3d. En effet, flashDevelop met à disposition un bon nombre de versions de flash déjà installées. Il n'y a plus qu'à choisir la version qu'il nous faut dans les propriétés du projet. Le paramètre de compilation -swf-version est quant à lui géré automatiquement. Pour rappel, voici une petite sélection des nouveautés apportées par les différentes version de flash qui permettent l'utilisation de la 3d. Il est toutefois possible de trouver plus d'informations sur le site d'Adobe.
Version flash player -swf-version fonctionnalités
11.0 13 Stage3d, JPEG-XR, Prise en charge améliorée des images bitmap haute résolution, Prise en charge de la compression LZMA pour les SWF, JSON natif, DisplayObjectContainer.removeChildren et MovieClip.isPlaying, flash player 64 bits.
11.1 14 = v11 avec corrections de bogues et mise à jour de sécurité.
11.2 15 Stage3d disponible pour AIR (mobile), clic droit, blocage souris (mouse lock), clic du milieu. Version minimale pour le fonctionnement de Minko.
11.3 16 Diffusion en continu de textures, Saisie clavier plein écran pour Flash Player, Evénements Framelabel, Bitmapdata.drawwithQuality, BitmapData.encode, Evénement ReleaseOutside.
11.4 17 Texture compressée avec prise en charge alpha pour Stage3D (ATF), Prise en charge de LZMA pour ByteArray.

Télécharger Minko

Ensuite, il nous faut télécharger les sources de la librairie. Minko étant constitué de plusieurs parties :

  • Minko constitue le coeur de la librairie (scene graph, rendu, shaders as3, lumières, géométries...).
  • Minko-Collada pour charger les fichiers DAE.
  • Minko-Picking pour gérer les intéractions de souris "pixel-perfect"
  • Minko-Effects contient quelques shaders et post-process.
  • Minko-max3ds pour charger les fichiers 3DS.
  • Minko-Mk pour utiliser les fichiers d'extension mk (via Aerys).

Pour la suite de cette article, nous ne chargerons que le coeur de la librairie. Pour cela, nous avons le choix entre télécharger directement l'archive ZIP(1), utiliser GITHUB(2), utiliser tortoiseGit via l'url du dépôt(3).

Minko sur github

L'idéal étant de garder la dernière version de Minko à portée, nous allons utiliser le logiciel GITHUB en cliquant sur le bouton Clone in Windows. Si vous ne possédez pas le logiciel, vous serez invité à le télécharger et il faudra cliquer de nouveau pour récupérer Minko. Voilà ce que ça donne en image :

Github for Windows, dépôt de Minko

Paramétrer le projet as3

Une fois les sources téléchargées, il faut paramétrer son projet as3 dans flashDevelop. Il y a deux choses à faire. D'abord choisir la bonne version de flash, ce sera donc 11.2 minimum.

flashDevelop, choix de la version de flash

Ensuite, il faut ajouter Minko dans son classpath...

flashDevelop, ajout de classpath

...en récupérant le chemin vers notre dépôt local de GITHUB (via les options).

GITHUB, chemin vers le dépôt

Premier script 3d avec Minko

Voilà un script commenté pour afficher un cube vert avec Minko. Je rédigerai une série d'articles plus complet sur le fonctionnement de Minko plus tard dont je posterai les sources sur github.

  	/**
  	 * Premiers pas avec Minko.
  	 * Tutoriel 1 : Création et affichage d'un cube.
  	 * éléments survolés : Scene, Viewport, Camera, Mesh, Material, CubeGeometry
  	 * @author Ludovic Bas
  	 */
  	public class Tutoriel1 extends Sprite 
  	{
  		private var _viewport : Viewport;
  		private var _scene : Scene;

    		public function Tutoriel1():void 
  		{
  			if (stage) init();
  			else addEventListener(Event.ADDED_TO_STAGE, init);
  		}

    		private function init(e:Event = null):void 
  		{
  			removeEventListener(Event.ADDED_TO_STAGE, init);
  			//la scène est un graphe de scène contenant tous les éléments 3d
  			//sous forme de noeuds.
  			_scene = new Scene();
  			//le viewport recevra le rendu 3d
  			_viewport = new Viewport();
  			//le viewport est un sprite, c'est pourquoi on l'ajoute à
  			//la displayList flash
  			addChild(_viewport);
  			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
  			createCamera();
  			createCube();
  		}
  		protected function enterFrameHandler(event : Event) : void
  		{
  			//A chaque frame la scène (=scene graph) est rendue dans le 
  			//viewport (=Sprite flash ~= Stage3d)
  			_scene.render(_viewport);
  		}
  		protected function createCamera():void {
  			var camera : Camera = new Camera();
  			//la caméra est un noeud de la scène, c'est pourquoi on l'ajoute
  			//dans la scène
  			_scene.addChild(camera);
  		}
  		protected function createCube():void {
  			//le mesh est un noeud de la scène qui nécessite
  			//une géométrie et un matériau.
  			var cube:Mesh = new Mesh(CubeGeometry.cubeGeometry, 
  					new BasicMaterial( { diffuseColor:0x00ff00ff } ));
  			//on déplace le cube pour l'éloigner de la caméra et ainsi
  			//le rendre visible dans notre application
  			cube.transform.translationZ = 5.;
  			_scene.addChild(cube);
  		}
  	}  

Liste des ressources pour Minko

Voici quelques liens utiles pour approfondir vos connaissances sur Minko :

Laissez un commentaire:

blog comments powered by Disqus Comments