Lancer de dés avec le moteur physique Jiglib et Away3D

Dans ce tutoriel, nous construirons une boîte dans laquelle nous pourrons lancer des dés. Pour ce faire, nous utiliserons Away3D en tant que moteur 3D et Jiglib en tant que moteur physique. Restons coincés dans…

Étape 1: Nouveau fichier ActionScript 3.0

Comme le titre l'indique, nous allons d'abord créer un nouveau fichier ActionScript 3.0..

Étape 2: Modifier le profil

Dans le panneau Propriétés, appuyez sur le bouton Modifier..

Étape 3: Choisissez la version de Flash Player

Choisissez le profil de Flash Player 9 et cliquez sur OK..

Étape 4: Obtenez le moteur Away3D!

Enregistrez votre fichier sous "3D Dice.fla" dans un nouveau dossier appelé "3D Dice". Téléchargez maintenant le moteur Away3D à partir de Téléchargements Away3D. Nous utiliserons la version 2.3.3 pour Flash Player 9. Décompressez une archive et copiez tous les dossiers dans le dossier "Dés 3D"..

Étape 5: Procurez-vous le moteur physique Jiglib pour Flash!

Vous devez installer un programme SVN pour obtenir ces fichiers sources. Voici l'adresse du SVN. Si vous ne voulez pas vous occuper de tout cela, vous pouvez aussi les obtenir à partir des fichiers sources de ce tut. Après avoir déplacé les classes Away3D et Jiglib dans votre dossier 3D Dice, vos documents doivent ressembler à ceci:

Étape 6: Importer des textures

J'ai dessiné des textures pour nos dés. Bien sûr, vous pouvez les changer mais elles ne sont pas mauvaises :) Vous pouvez trouver d'autres textures dans le fichier source.

Dés textures:

Maintenant, nous devons leur donner des noms de liens afin de les attacher au moment de l'exécution (faites ceci pour chaque image de votre bibliothèque, une par une):

Sélectionnez Image, puis cliquez avec le bouton droit de la souris sur> Propriétés.

Exporter pour ActionScript> Supprimer la partie ".png"

Étape 7: Commencez à coder

OK, nous sommes prêts à commencer à coder. Nous importons d'abord nos classes:

importez les caméras absentes3d. *; importer les conteneurs away3d. *; importer des matériaux absents3d. *; importer away3d.primitives. * importer away3d.lights.DirectionalLight3D

importer jiglib.physics.RigidBody; importer jiglib.plugin.away3d.Away3DPhysics; importer jiglib.plugin.away3d.Away3dMesh; importer jiglib.math.JNumber3D

Étape 8: Variables d'installation

Après avoir importé nos classes, nous devons définir nos variables pour les utiliser dans les prochaines étapes..

scène var: Scene3D; caméra var: HoverCamera3D; var view: View3D; var light: DirectionalLight3D; var physique: Away3DPhysics;

var boxWidth: Number = 250 var boxHauteur: Number = 30 var boxDepth: Number = 250 var boxThickness: Number = 5

var diceTextures: Array = [new WhiteShadingBitmapMaterial (new diceTexture1 (0,0)), new WhiteShadingBitmapMaterial (new diceTexture2 (0,0)), nouveau WhiteShadingBitmapMaterial (nouveau diceTexture3 (0,0)), nouveau WhiteShadingBitmapMaterial 0)), nouveau WhiteShadingBitmapMaterial (nouveau diceTexture5 (0,0)), nouveau WhiteShadingBitmapMaterial (nouveau diceTexture6 (0,0))]

var wallTexture: WhiteShadingBitmapMaterial = nouveau WhiteShadingBitmapMaterial (nouveau walltexture (0,0)) var groundTexture: WhiteShadingBitmapMaterial = nouveau WhiteShadingBitmapMaterial (nouveau groundtexture (0,0))

var diceScale: Number = 30 var dés: Array = new Array () var diceRandomForce: Number = 50

Comme vous l'avez peut-être deviné, les premiers sont destinés à Away3D. Les noms de variables sont simples, vous pouvez donc deviner à quoi ils servent.

diceTextures contient les textures des dés. Nous prenons des images de texture en dés de la bibliothèque et les plaçons dans WhiteShadingBitmapMaterial. Nous avons choisi ce matériau car il gardera la lumière et pour améliorer encore les performances, il sera également plat. WhiteShadingBitmapMaterial est le meilleur pour nos besoins.

wallTexture et groundTexture utilisent des images différentes. L'utilisation de l'un de ces cas dans notre cas serait terrible.

Étape 9: Configuration d'Away3D

Ensuite, nous devons construire Away3D.

fonction initAway3D (): void scene = new Scene3D ();

 camera = new HoverCamera3D (); camera.distance = 300

 light = new DirectionalLight3D (color: 0xFFFFFF, ambient: 0.25, diffuse: 0.75, spécular: 0.9) scene.addChild (light) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (voir); physics = new Away3DPhysics (affichage, 4)

La première ligne de cette fonction crée notre scène 3D, dans laquelle nous ajoutons des objets 3D. Pour la caméra, nous avons choisi HoverCamera3D. HoverCamera est le meilleur moyen de faire tourner la caméra autour des objets. En fait, vous n'avez pas besoin d'utiliser de lumière pour ce projet, mais cela rend l'expérience cool. Nous créons la vue et la plaçons au milieu de la scène..

Enfin, nous créons de nouveaux Away3DPhysics. Le premier paramètre est "View3D" et le second est "gravité" (j'utilise 4 mais si vous voulez, vous pouvez essayer un autre numéro).

Étape 10: Créer des murs

function createWalls (): void var left: RigidBody = physics.createCube (width: boxThickness, height: boxHauteur, profondeur: boxDepth); left.movable = false; left.x = - (boxWidth + boxThickness) / 2 Away3dMesh (left.skin) .mesh.material = wallTexture var right: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, depth: boxDepth); right.movable = false; right.x = (boxWidth + boxThickness) / 2 Away3dMesh (right.skin) .mesh.material = wallTexture var front: RigidBody = physics.createCube (width: boxWidth, hauteur: boxHeight, profondeur: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2 Away3dMesh (front.skin) .mesh.material = wallTexture var retour: RigidBody = physics.createCube (largeur: boxWidth, hauteur: boxHeight, profondeur: boxThickness); back.movable = false; back.z = - (boxDepth + boxThickness) / 2 Away3dMesh (back.skin) .mesh.material = wallTexture var ground: RigidBody = physics.createCube (width: boxWidth, hauteur: boxThickness, profondeur: boxDepth, segmentsW: 2, segments H: 2); ground.movable = false; ground.y = - (boxHeight + boxThickness) / 2 Away3dMesh (ground.skin) .mesh.material = groundTexture Away3dMesh (ground.skin) .mesh.pushback = true

Ça ressemble à un vrai bordel :) En fait non. Cliquez sur les murs de la boîte dans la démo suivante pour savoir comment nous définissons leur position:

Nous utilisons les cubes comme murs, mais pour ce faire, nous utilisons physics.createCube, vous ne pouvez pas définir de matériau directement dans les paramètres. Jiglib Away3D plugin ne le permet pas (bien que vous puissiez changer le fichier Away3DPhysics.as pour le permettre si vous le souhaitez). Pour changer de matériau, nous devons obtenir l’objet original Away3D:

Away3dMesh (rigidObject.skin) .mesh

En utilisant cela, nous attachons nos textures aux faces de nos murs. Nous avons défini false sur false parce que nous ne voulons pas qu’ils soient déplacés, non? :) Lorsque nous créons un sol, nous définissons également sa propriété pushback sur true, afin que le sol ne puisse pas sauter par-dessus les murs..

Étape 11: Créer un dé

function createDice (): void var dés: RigidBody = physics.createCube (largeur: diceScale, hauteur: diceScale, profondeur: diceScale); dice.y = 500 dice.movable = true Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.left = diceTextures [0] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.right = diceTextures [1] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.front = diceTextures [2] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.back = diceTextures [3] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.back = diceTextures [3] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.back = diceTextures [3] Cube (Away3dMesh (dice.skin). ) .cubeMaterials.top = diceTextures [4] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.bottom = diceTextures [5] dices.push (dés)

Comme vous pouvez le voir, c'est très simple. Nous créons essentiellement un cube et attachons des textures à ses faces. Pour attacher différentes textures à différents visages, nous utilisons cubeMaterials. cubeMaterials a 6 propriétés que nous utilisons. Ceux-ci sont:

• de face
• retour
• Haut
• bas
• la gauche
• droite

Vous pouvez leur attribuer n'importe quel matériau, mais nous utilisons des éléments de diceTextures créés à l'étape 8..

Étape 12: Réinitialisation des dés

 function resetOnlyPositions (): void pour (var i: int = 0; i 
Dans ces fonctions, nous réinitialisons leurs positions. Le premier est pour commencer. Le second s'exécute lorsque l'utilisateur clique sur la scène. La deuxième fonction ajoute également des forces aléatoires aux dés. Cela fait tomber nos dés.
 
Étape 13: Ajout de forces aléatoires aux dés
 
fonction addRandomForce (rigide: RigidBody) var forceX: Nombre = + Math.random () * (diceRandomForce) var forceY: Nombre = + Math.random () * (diceRandomForce) var forceZ: Numéro = + Math.random () * (diceRandomForce) rigid.addBodyForce (nouveau JNumber3D (forceX, forceY, forceZ), nouveau JNumber3D (rigid.x + diceScale, rigid.y, rigid.z)) rigid.addBodyForce (nouveau JNumber3D (-forceX, -forceY, forcé) ), nouveau JNumber3D (rigid.x - diceScale, rigid.y, rigid.z))
  
Nous obtenons d’abord des valeurs aléatoires pour nos forces. Avec ces valeurs, nous appliquons des forces dans des directions opposées aux côtés opposés de chaque matrice. Cela force les dés à tourner.
 
Étape 14: auditeurs
 
function initListeners (): void stage.addEventListener (Event.ENTER_FRAME, rendu); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
Dans cette fonction, nous ajoutons les écouteurs MOUSE_DOWN et ENTER_FRAME à la scène..
 
Étape 15: rendu
 
fonction render (e: Event): void view.render (); camera.targetpanangle = stage.mouseX / stage.stageWidth * 360 camera.targettiltangle = stage.mouseY / stage.stageHeight * 30 camera.hover (); physics.pas (); light.x = camera.x light.y = camera.y light.z = camera.z
 
La première ligne de cette fonction rend la 3D. Ensuite, nous utilisons des proportions vraies en mathématiques pour faire pivoter la caméra en utilisant les positions de la souris. Ensuite, nous égalisons la direction de la lumière aux positions de notre caméra. Cela rend notre lumière dynamique et donne à notre expérience un aspect plutôt cool..
 
Étape 16: dernière étape
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
Nous appelons nos fonctions une par une. J'ai appelé la fonction createDice () deux fois, il y a donc 2 dés dans la démo. Vous pouvez en ajouter autant que vous voulez. 
 
D'accord. Nous sommes prêts. Testez votre travail et cliquez sur la scène :) 
 
Conclusion
 
Dans ce tutoriel, nous avons appris à utiliser Jiglib avec Away3D et à construire une expérience simple. 
 
J'espère que ça vous a plu, merci d'avoir lu!



		
			
	   
	




Code