flex 结合sandy引擎创作 （2）

flex 结合sandy引擎创作 （1）

http://blog.csdn.net/hero82748274/archive/2009/01/22/3850800.aspx

 

之前利用flex创建一个立方体，但是还没有贴图，以及互动。在这里我们添加一些额外的操作，包括鼠标 和键盘的操作。以及换皮肤的功能。

  <textarea cols="50" rows="15" name="code" class="c-sharp">&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"&gt; &lt;mx:Script&gt; &lt;!--[CDATA[ import mx.events.ListEvent; import mx.core.UIComponent; import sandy.core.Scene3D; import sandy.core.scenegraph.*; import sandy.primitive.*; import sandy.core.data.*; import sandy.materials.*; import sandy.materials.attributes.*; private var scenne:Scene3D; private var camera:Camera3D; private var ranY:Number=0.5; private var box:Box; [Embed(source="skin.jpg")] [Bindable] public var imgCls:Class; // 嵌入图片资源 private var bt:Bitmap=new imgCls()as Bitmap; [Bindable] private var myxml:XML=&lt;item&gt; &lt;skin&gt; &lt;myskin&gt;默认皮肤&lt;/myskin&gt; &lt;/skin&gt; &lt;skin&gt; &lt;myskin&gt;黄色皮肤&lt;/myskin&gt; &lt;/skin&gt; &lt;/item&gt;; private var app:Appearance; private var app2:Appearance; private function init():void { var ui:UIComponent=new UIComponent(); //创建一个组件 var sprite:Sprite=new Sprite(); ui.addChild(sprite); canvas.addChild(ui); //添加容器 camera=new Camera3D(300, 300); //创建一个摄影机 camera.z=-400; var root:Group=createScene(); scenne=new Scene3D("scene1", sprite, camera, root); addEventListener(Event.ENTER_FRAME, Run); addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel); this.addEventListener(KeyboardEvent.KEY_DOWN, keydown); ui.setFocus(); } private function createScene():Group { var g:Group=new Group(); box=new Box("box", 100, 100, 100); var materialAttr:MaterialAttributes=new MaterialAttributes(new LineAttributes(0.5, 0x2111BB, 0.4), new LightAttributes(true, 0.1)); //创建材质属性,线性光， var material:Material=new ColorMaterial(0xFFCC33, 1, materialAttr); //创建颜色材质 var material2:Material=new BitmapMaterial(bt.bitmapData); //创建图片贴图 material.lightingEnable=true; //开启光线 app=new Appearance(material); //为物体创建材质表面 app2=new Appearance(material2); box.rotateX=10; box.rotateY=0; box.appearance=app; //指定材质表面 //box.appearance=app2; g.addChild(box); box.rotateX=30; box.rotateY=30; g.addChild(box); return g; } private function Run(event:Event):void { scenne.render(); //渲染场景 box.rotateX+=1; //让立方体会在x轴上旋转 box.rotateY+=1; //让立方体会在y轴上旋转 } private function mouseWheel(event:MouseEvent):void { if (event.delta &gt; 0) { camera.z+=12; //向前滚动的时候向前滚动 } else { camera.z-=12; //向后滚动 } } private function keydown(event:KeyboardEvent):void { trace("dd"); if (event.keyCode == Keyboard.UP) { trace("dds"); camera.z+=12; } else if (event.keyCode == Keyboard.DOWN) { camera.z-=12; //使用摄影机来控制深度 } else if (event.keyCode == Keyboard.LEFT) { camera.pan+=2; } else if (event.keyCode == Keyboard.RIGHT) { camera.pan-=2; } else { } } private function seletSkin(event:ListEvent):void { // trace(event.target.selectedItem); // box.appearance=app2; if (event.currentTarget.selectedItem == "默认皮肤") box.appearance=app; else box.appearance=app2; } ]]--&gt; &lt;/mx:Script&gt; &lt;mx:Canvas id="canvas" x="72" y="66" width="411" height="359"&gt; &lt;/mx:Canvas&gt; &lt;mx:ComboBox id="mycombox" change="seletSkin(event)" dataProvider="{myxml..myskin}" x="400" y="36" focusEnabled="false"&gt; &lt;/mx:ComboBox &gt; &lt;mx:Label x="348" y="38" text="皮肤选择" width="54"/&gt; &lt;/mx:Application&gt; </textarea> 

 

一，创建了一个立方体后，在原有基础上，增加一个鼠标互动。

  addEventListener(MouseEvent.MOUSE_WHEEL ,mouseWheel);

private function mouseWheel(event:MouseEvent):void
  {  
     if (event.delta>0)
   {
    camera.z+=12;//向前滚动的时候向前滚动
   } else
   {
    camera.z-=12;//向后滚动
   }
  
  }

 

使用鼠标滑轮让立方体产生一种透视的感觉，好像摄影机推镜和拉镜一样。

 

二，我们希望在程序加上键盘交互？

  this.addEventListener(KeyboardEvent.KEY_DOWN,keydown);
  ui.setFocus();

<textarea cols="50" rows="15" name="code" class="c-sharp">private function keydown(event:KeyboardEvent):void { trace("dd"); if (event.keyCode==Keyboard.UP) { trace("dds"); camera.z+=12; } else if (event.keyCode==Keyboard.DOWN) { camera.z-=12;//使用摄影机来控制深度 } else if (event.keyCode==Keyboard.LEFT) { camera.pan+=2; } else if (event.keyCode==Keyboard.RIGHT) { camera.pan-=2; } else { } } </textarea>

让立方体能够四个方向移动。左右前后

 

三,如何进行皮肤贴图？

我们希望为立方体创建贴图

 [Embed(source="skin.jpg")]
           [Bindable]
           public var imgCls:Class;// 嵌入图片资源
           
           private var bt:Bitmap=new imgCls() as Bitmap;

使用Embed外部嵌入一张名为skin.jpg的图片转换一个Class类。这样我们可以转换我们希望的位图类。

接下来，使用sandy类为我们提供的位图贴图材质，把我的之前转换的位图bt.bitmapData，作为参传递过去。

 var material2:Material=new  BitmapMaterial(bt.bitmapData);//创建图片贴图

 app2=new Appearance(material2); //指定表面材质

 

四。如何进行换皮肤？

在程序里面放入一个combox

使用combox 选择我们的皮肤

 <mx:ComboBox  id="mycombox"   change="seletSkin(event)" dataProvider="{myxml..myskin}" x="594" y="66"></mx:ComboBox>

<textarea cols="50" rows="15" name="code" class="c-sharp"> private function seletSkin(event:ListEvent):void { trace(event.target.selectedItem); // box.appearance=app2; if(event.target.selectedItem=="默认皮肤") box.appearance=app; else box.appearance=app2; } </textarea>

 

利用combox选择来切换皮肤。

 

下面是最终的效果图

 

通过控制上 下 左右 已经鼠标的滚动 等就可以进行一些交互性的操作。

注意一点，由于combox会接收焦点，因此为了避免在使用键盘的时候发生错误，所以在combox的属性里面设置 不接收焦点

<textarea cols="50" rows="15" name="code" class="c-sharp">&lt;mx:ComboBox id="mycombox" change="seletSkin(event)" dataProvider="{myxml..myskin}" x="400" y="36" focusEnabled="false"&gt; &lt;/mx:ComboBox &gt;</textarea>

focusEnabled=false；

 

 演示效果：在博客园的夏天的树人http://files.cnblogs.com/hero82748274/ddd.swf