Share
In questo tutorial costruiremo una scatola in cui possiamo lanciare i dadi. Per fare questo utilizzeremo Away3D come motore 3D e Jiglib come motore fisico. Restiamo bloccati in ...
Come suggerisce il titolo, per prima cosa creeremo un nuovo file ActionScript 3.0.
Nel pannello Proprietà premi il pulsante Modifica.
Scegli il profilo di Flash Player 9 e fai clic su OK.
Salva il tuo file come "3D Dice.fla" in una nuova cartella chiamata "Dadi 3D". Ora scarica il motore Away3D da Away3D Downloads. Useremo la versione 2.3.3 per Flash Player 9. Scompatta un archivio e copia tutte le cartelle nella cartella "3D Dice".
È necessario installare un programma SVN per ottenere questi file di origine. Ecco l'indirizzo SVN. Se non vuoi occuparti di tutto ciò puoi anche ottenerli dai file sorgente per questo tut. Dopo aver spostato le classi Away3D e Jiglib nella tua cartella 3D Dice, i tuoi documenti dovrebbero apparire così:
Ho disegnato alcune trame per i nostri dadi. Certo, puoi cambiarle ma non sono male :) Puoi trovare altre trame nel file sorgente.
Dadi Textures:
Ora dobbiamo assegnare loro i nomi di collegamento per poterli allegare in runtime (fatelo per ogni immagine nella vostra libreria una per una):
Seleziona Immagine, quindi fai clic con il tasto destro del mouse su Proprietà
Esporta per ActionScript> Rimuovi la parte ".png"
OK, siamo pronti per iniziare la codifica. Per prima cosa importiamo le nostre classi:
importare away3d.cameras. *; import away3d.containers. *; import away3d.materials. *; import away3d.primitives. * import away3d.lights.DirectionalLight3D
importare jiglib.physics.RigidBody; import jiglib.plugin.away3d.Away3DPhysics; import jiglib.plugin.away3d.Away3dMesh; import jiglib.math.JNumber3D
Dopo aver importato i nostri corsi, dobbiamo definire le nostre variabili per usarle nei prossimi passi.
scena var: Scene3D; var camera: HoverCamera3D; var view: View3D; var light: DirectionalLight3D; fisica delle variabili: Away3DPhysics;
var boxWidth: Number = 250 var boxHeight: Number = 30 var BoxDepth: Number = 250 var boxThickness: Number = 5
var diceTextures: Array = [nuovo WhiteShadingBitmapMaterial (new diceTexture1 (0,0)), nuovo WhiteShadingBitmapMaterial (new diceTexture2 (0,0)), nuovo WhiteShadingBitmapMaterial (new diceTexture3 (0,0)), nuovo WhiteShadingBitmapMaterial (new diceTexture4 (0, 0)), nuovo WhiteShadingBitmapMaterial (new diceTexture5 (0,0)), nuovo WhiteShadingBitmapMaterial (new diceTexture6 (0,0))]
var wallTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (new walltexture (0,0)) var groundTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (new groundtexture (0,0))
var diceScale: Number = 30 var dices: Array = new Array () var diceRandomForce: Number = 50
Come avrai intuito, i primi sono per Away3D. I nomi delle variabili sono semplici, quindi puoi indovinare a cosa servono.
diceTexture tiene le trame del volto dei dadi. Prendiamo le immagini delle texture dei dadi dalla libreria e le inseriamo in WhiteShadingBitmapMaterial. Scegliamo questo materiale perché manterrà le cose in luce e per migliorare ulteriormente le prestazioni sarà anche piatto. WhiteShadingBitmapMaterial è il migliore per le nostre esigenze.
wallTexture e groundTexture utilizzano immagini diverse. Usando uno di questi nel nostro caso sembrerebbe terribile.
Quindi abbiamo bisogno di costruire Away3D.
function initAway3D (): void scene = new Scene3D ();
camera = new HoverCamera3D (); camera.distance = 300
light = new DirectionalLight3D (color: 0xFFFFFF, ambient: 0.25, diffuse: 0.75, specular: 0.9) scene.addChild (light) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (vista); physics = new Away3DPhysics (view, 4)
La prima riga in questa funzione crea la nostra scena 3D, in cui aggiungiamo oggetti 3D. Per la fotocamera scegliamo HoverCamera3D. HoverCamera è il modo migliore per accendere la fotocamera attorno agli oggetti. In realtà non hai bisogno di usare la luce per questo progetto, ma rende l'esperimento interessante :) Creiamo la vista e la posizioniamo nel mezzo della scena.
Infine, creiamo nuovo Away3DPhysics. Il primo paremeter è "View3D" e il secondo è "gravity" (io uso 4 ma se vuoi puoi provare un altro numero).
function createWalls (): void var left: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, depth: 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, height: boxHeight, depth: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2 Away3dMesh (front.skin) .mesh.material = wallTexture var indietro: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, depth: boxThickness); back.movable = false; back.z = - (boxDepth + boxThickness) / 2 Away3dMesh (back.skin) .mesh.material = wallTexture var ground: RigidBody = physics.createCube (width: boxWidth, height: boxThickness, depth: boxDepth, segmentsW: 2, segmentsH: 2); ground.movable = false; ground.y = - (boxHeight + boxThickness) / 2 Away3dMesh (ground.skin) .mesh.material = groundTexture Away3dMesh (ground.skin) .mesh.pushback = true
Sembra un vero casino :) In realtà no. Fai clic sui muri della scatola nella demo seguente per scoprire come impostiamo la loro posizione:
Utilizziamo i cubi come muri, ma per farlo usiamo physics.createCube, non è possibile impostare direttamente il materiale nei parametri. Il plug-in di Jiglib Away3D non lo consente (anche se puoi modificare il file Away3DPhysics.as per consentirlo, se lo desideri). Per cambiare materiale abbiamo bisogno di ottenere l'oggetto Away3D originale:
Away3dMesh (rigidObject.skin) .mesh
Usando questo, colleghiamo le nostre trame alle facce delle nostre pareti. Impostiamo il movimento su false perché non vogliamo che vengano spostati correttamente? :) Quando creiamo terreno, impostiamo anche la proprietà pushback su true, quindi il terreno non sarà in grado di saltare oltre i muri.
function createDice (): void var: RigidBody = physics.createCube (width: diceScale, height: diceScale, depth: 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.top = diceTextures [4] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.bottom = diceTextures [5] dices.push (dice)
Come puoi vedere è davvero semplice. Fondamentalmente creiamo un cubo e alleghiamo trame alle sue facce. Per collegare trame diverse a facce diverse, usiamo cubeMaterials. cubeMaterials ha 6 proprietà che usiamo. Questi sono:
Puoi impostare qualsiasi materiale per loro, ma usiamo elementi di dadiTexture che abbiamo creato nel passaggio 8.
Accentsconagua
