Skybox con Sandy 3D Engine e Actionscript 3.0

Di admin in Actionscript, Sandy 3D engine Controls: +-close

Skybox

Uno skybox è una sorta i contenitore formato da 6 piani che ha la funzione di far da fondale per una applicazione 3D. Il framework Sandy 3D Engine ha un omonimo oggetto che gestisce in maniera molto semplice tutto ciò e, in questo tutorial, vedremo come utilizzarlo e come eventualmente effettuare uno switch delle texture per ognuna delle sue faccie. Inoltre, utilizzeremo un diverso sistema rispetto a quello usato in questo tutorial per caricare i file esterni all’interno del nostro programma, l’oggetto LoaderQueue.

Per la creazione delle texture possiamo utilizzare il software Terragen o cercare sul solito motore di ricerca.

SandyMain.as

  package {
    import flash.display.Sprite;
    import flash.events.*;
    import flash.ui.*;
    import flash.display.Bitmap;
    import flash.net.URLRequest;

    import sandy.core.Scene3D;
    import sandy.core.scenegraph.*;
    import sandy.primitive.*;
    import sandy.materials.*;
    import sandy.materials.attributes.*;
    import sandy.events.*;
    import sandy.util.*;

    public class SandyMain extends Sprite {
      private static const TOP = 'top';
      private static const LEFT = 'left';
      private static const BOTTOM = 'bottom';
      private static const RIGHT = 'right';
      private static const BACK = 'back';
      private static const FRONT = 'front';

      private var scene:Scene3D;
      private var camera:Camera3D;
      private var group:Group;
      private var queue:LoaderQueue;
      private var skyBox:SkyBox;    

      public function SandyMain():void {
        group = new Group("root");
        camera = new Camera3D( 1024, 768);
        camera.setPosition(0,0,0);
        scene = new Scene3D( "myScene", this, camera, group);
        skyBox  = new SkyBox( "container", 1000, 9, 9 );
        loadSkyTextures();
        group.addChild( skyBox );
      }

      private function loadSkyTextures(type:String = 'default'):void {
        queue = new LoaderQueue();
        queue.add( TOP, new URLRequest("assets/skybox/"+type+"/top.jpg") );
        queue.add( LEFT, new URLRequest("assets/skybox/"+type+"/left.jpg") );
        queue.add( BOTTOM, new URLRequest("assets/skybox/"+type+"/bottom.jpg") );
        queue.add( RIGHT, new URLRequest("assets/skybox/"+type+"/right.jpg") );
        queue.add( BACK, new URLRequest("assets/skybox/"+type+"/back.jpg") );
        queue.add( FRONT, new URLRequest("assets/skybox/"+type+"/front.jpg") );
        queue.addEventListener(SandyEvent.QUEUE_COMPLETE, loadComplete );
        queue.start();
      }

      private function setAppearance():void {
        var mTop = new BitmapMaterial( queue.data[TOP].bitmapData, null );
        var mLeft = new BitmapMaterial( queue.data[LEFT].bitmapData );
        var mBottom = new BitmapMaterial( queue.data[BOTTOM].bitmapData );
        var mRight = new BitmapMaterial( queue.data[RIGHT].bitmapData );
        var mBack = new BitmapMaterial( queue.data[BACK].bitmapData );
        var mFront = new BitmapMaterial( queue.data[FRONT].bitmapData );
        skyBox.top.appearance = new Appearance( mTop );
        skyBox.left.appearance = new Appearance( mLeft );
        skyBox.bottom.appearance = new Appearance( mBottom );
        skyBox.right.appearance = new Appearance( mRight );
        skyBox.back.appearance = new Appearance( mBack );
        skyBox.front.appearance = new Appearance( mFront );
      }

      private function loadComplete( event : QueueEvent ):void {
        setAppearance();
        addEventListener( Event.ENTER_FRAME, enterFrameHandler );
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
      } 

      private function enterFrameHandler( event : Event ):void {
        scene.render();
      } 

      private function keyPressed(event:KeyboardEvent):void {
        switch(event.keyCode) {
          case Keyboard.UP:
            camera.tilt +=2;
            //camera.rotateX -=2;
            break;
          case Keyboard.DOWN:
            camera.tilt -=2;
            //camera.rotateX +=2;
            break;
          case Keyboard.RIGHT:
            //camera.pan +=2;
            camera.rotateY -=2;
            break;
          case Keyboard.LEFT:
            //camera.pan -=2;
            camera.rotateY +=2;
            break;
          case Keyboard.CONTROL:
            camera.roll +=2;
          break;
          case 48:
            loadSkyTextures();
          break;
          case 49:
            loadSkyTextures('skybox');
          break;
        }
      }
    }
  }

Nel costruttore creaimo tutto ciò di cui necessita Sandy 3D engine con in aggiunta l’oggetto skybox. Attribuiremo una diversa texture per ogni faccia tramite la chiamata del metodo loadSkyTextures(), al quale sarà possibile passare un argomento: il nome della subdirectory dove andare a cercare i files da caricare. Da notare il codice che compone questo metodo, dove facciamo uso dell’oggetto LoaderQueue.

LoaderQueue si occupa di caricare i file specificati tramite il metodo add(), è una volta terminato esegue il dispatch dell’evento SandyEvent.QUEUE_COMPLETE che richiama il metodo setAppearance() che si occupa di rivestire ogni singola faccia con la relativa immagine.

Con questa impostazione eseguire una switch delle texture di ogni faccia è molto semplice. Alla pressione di un tasto ( in questo caso sono stati utilizzati i tasti numerici 0 e 1 ) effettuiamo una chiamata al metodo loadSkyTextures(); in cui passeremo un argomento diverso dipendentemente da quale rivestimento vogliamo far visualizzare alla pressione di quel tasto.

Qui di seguito il risultato finale: