Flare3D 2.5 + Starling Integration

From Flare3D Wiki
Jump to: navigation, search

This example shows how to integrate Flare3D with the Starling framework. Keep in mind that this will only work with Flare3D 2.5 and Starling 1.2+.

Usage Example

This example is divided in two parts: The Flare3D-specific main classs and the Starling-specific main class. In your project, you should set your FlareMain as your project's main class.

FlareMain.as

package
{
	import flare.basic.*;
	import flare.core.*;
	import flare.loaders.*;
	import flare.primitives.*;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import starling.core.*;
	import starling.display.*;
	import starling.events.*;
 
	[SWF(width = "800", height = "450", frameRate = "60", backgroundColor = "#ffffff")]
 
	public class FlareMain extends flash.display.Sprite
	{
		[Embed(source = "../bin/elsa.zf3d", mimeType = "application/octet-stream")] private var ElsaModel:Class;
 
		private var _scene:Scene3D;
		private var _starling:Starling;
		private var _starlingRoot:starling.display.Sprite;
		private var _elsa:Pivot3D;
		private var _cubes:Pivot3D;
		private var _spinY:Number = 0;
 
		public function FlareMain()
		{
			// we create our standard Flare3D Viewer, with a costom-located camera and a test model
			_scene = new Viewer3D( this );
                        _scene.addEventListener( flash.events.Event.CONTEXT3D_CREATE, contextCreate );
			_scene.autoResize = true;
 
			_scene.antialias = 2;
			_scene.clearColor = new Vector3D( 1, 1, 1 );
 
			_scene.camera = new Camera3D();
			_scene.camera.setPosition( 10, 100, -200 );
			_scene.camera.lookAt( 0, 0, 0 );
			_scene.registerClass( ZF3DLoader );
			_elsa = _scene.addChildFromFile( new ElsaModel() );
 
			// we add some more cubes
			var cube:Cube = new Cube( "cube", 30, 30, 30 );
			_cubes = new Pivot3D();
			_cubes.addChild( cube.clone() ).setPosition( 100, 0, 0 );
			_cubes.addChild( cube.clone() ).setPosition( -100, 0, 0 );
			_cubes.addChild( cube.clone() ).setPosition( 0, 0, 100 );
			_cubes.addChild( cube.clone() ).setPosition( 0, 0, -100 );
 
			// during this phase we'll take care of drawing Starling's content
			_scene.addEventListener( Scene3D.POSTRENDER_EVENT, postRenderEvent );
		}
 
                private function contextCreate( e:flash.events.Event ):void
		{
                        // we create our Starling instance and the "root" Starling Sprite object
			// shareContext must be set to "true" so Starling won't overwrite our
			// Context3D object
			_starling = new Starling( StarlingMain, stage, null, stage.stage3Ds[0] );
			_starling.addEventListener( "rootCreated", starlingRootEvent );
			_starling.start();
		}
 
		private function starlingRootEvent( e:starling.events.Event ):void
		{
			// now that we've made sure that the "root" object has been created,
			// we can add listeners to our button events to make Elsa rotate
			// when pressed
			_starlingRoot = _starling.root as starling.display.Sprite;
			_starlingRoot.addEventListener( "leftButtonEvent",  leftButton );
			_starlingRoot.addEventListener( "rightButtonEvent",  rightButton );
		}
 
		private function leftButton( e:starling.events.Event ):void
		{
			_spinY += 50;
		}
 
		private function rightButton( e:starling.events.Event ):void
		{
			_spinY -= 50;
		}
 
		private function postRenderEvent( e:flash.events.Event ):void
		{
			// prepare and draw the Starling frame
			_starling.nextFrame();
 
			// update Flare3D content
			_cubes.draw(true);
			_elsa.rotateY( _spinY / 25, false );
			_spinY *= 0.95;
		}
	}
}

StarlingMain.as

package
{
	import flare.basic.*;
	import starling.core.*;
	import starling.display.*;
	import starling.events.*;
	import starling.textures.*;
 
	public class StarlingMain extends Sprite
	{
		[Embed(source="../bin/atlas.png")]
		private var AtlasTexture:Class;
 
		[Embed(source="../bin/atlas.xml", mimeType="application/octet-stream")] 
		private var AtlasXml:Class; 
 
		[Embed(source="button_square.png")]
		private var ButtonTexture:Class;
 
		private var _sprite:MovieClip;
		private var _textureAtlas:TextureAtlas
 
		private var _leftButton:Button;
		private var _rightButton:Button;
 
		private var _scene:Scene3D;
 
		public function StarlingMain()
		{
			// load textures and sprite information for Starling, we also create
			// two buttons to interact with Flare3D content
			var texture:Texture = Texture.fromBitmap( new ButtonTexture() );
 
			_leftButton = new Button( texture, "<-" );
			_leftButton.addEventListener( Event.TRIGGERED, buttonEvent );
			_leftButton.useHandCursor = true;
 
			_leftButton.x = 200;
			_leftButton.y = 200;
 
			_rightButton = new Button( texture, "->" );
			_rightButton.addEventListener( Event.TRIGGERED, buttonEvent2 );
			_rightButton.useHandCursor = true;
 
			_rightButton.x = 550;
			_rightButton.y = 200;
 
			var xml:XML = XML( new AtlasXml );
			var textureSprite:Texture = Texture.fromBitmap( new AtlasTexture );
			_textureAtlas= new TextureAtlas( textureSprite, xml );
 
			addBirds();
 
			addChild( _leftButton );
			addChild( _rightButton );
		}
 
		private function addBirds():void
		{
			// create and add a few Starling sprites, we update them each frame
			// to reset their position when needed
			for( var i:int = 0; i < 3; i++ )
			{
				var mc:MovieClip = new MovieClip( _textureAtlas.getTextures( "flight" ) );
				addChild( mc );
				Starling.juggler.add( mc );
 
				mc.x = 100 + ( mc.width * i );
				mc.y = 150;
				mc.addEventListener( Event.ENTER_FRAME, frameEvent );
			}
		}
 
		private function frameEvent( e:Event ):void
		{
			var mc:MovieClip = e.target as MovieClip;
			mc.x++;
 
			if ( mc.x > ( 800 + mc.width ) ) mc.x = -mc.width;
		}
 
		public function get scene():Scene3D
		{
			return _scene;
		}
 
		public function set scene(value:Scene3D):void
		{
			_scene = value;
		}
 
		// we dispatch these events to notify Flare3D that we should rotate the model
		// this is to avoid having a Viewer3D reference in this class,
		// but that's also an option
		private function buttonEvent( e:Event ):void
		{
			dispatchEvent( new Event( "leftButtonEvent" ) );
		}
 
		private function buttonEvent2( e:Event ):void
		{
			dispatchEvent( new Event( "rightButtonEvent" ) );
		}
	}
}
blog comments powered by Disqus