首頁 > ActionScript, FLEX, 程式設計 > 2009最夯的線上遊戲 - FLEX 控制 PV3D DAE 物件動作

2009最夯的線上遊戲 - FLEX 控制 PV3D DAE 物件動作

2009年4月24日  瀏覽次數 : 8,062

跑跑牛犇車是我在 2009-4-24 完成的一款線上遊戲,他是 2009 年最夯的線上遊戲,不過很可惜的是,夯只有夯 2009 年的 4-24 的 下午 1:23 到 1:24 分,簡單的說這款遊戲指夯了 一分鐘 @@ ,哈,其實是因為有網友在本站提到如何使用 FLEX 來控制 PV3D 的 DAE 做移動的動作,所以就寫了這篇教學給大家參考。

2009

圖 : Cora 不知情製作 ( 乳牛變紅牛了 )

image

在製作這個範例除了 FLEX 的開發工具是基本的之外,你還需要 PV3D 的元件庫,你可以到 PV3D 的官方網站下載 SWC 檔案,並且放入 FLEX 的 libs 的資料夾中,我用的 Papervision3D_2.0.883.swc 版本。

第二點,因為本來我還要製作動畫播放,所以我用了 DAEMC 這個類別檔,你可以到這邊下載 [ GOOGLE 文件 ] ,下載之後解壓縮放在 src 的資料夾中,以便程式碼引用。

你可以在這篇教學得到一些比較重要的重點

  • FLEX 中使用 PV3D
  • 偵聽應用程式的 KEYDOWN 事件
  • 把 DAE 的 XML 崁入 CLASS 中,可以免去讀取 XML 的空白時間
  • 把 DAE 的圖片貼圖 崁入 CLASS 中,可以免去讀取圖片的空白時間
  • DAEMC 的應用 ( 影格撥放的部分 改天再來寫吧 )
  • FLEX 操作 3D 物件的移動
  • 鍵盤偵聽的辨別方式

差不多是這樣子了,因為只是範例教學,場景的 PANEL 有點破圖,而且鍵盤偵聽事件必須要等按過任何一個按鈕之後才會有反應,不過就沒再修正了,因為不是重點阿~可以點擊下面的範例玩看看,跟茶壺不一樣的是這次不用開新視窗囉,因為我把 DAE 崁入 SWF 中了。如果配合著影格的移動,這隻牛就真的會一直往前跑囉。

 

所有的解釋我都放在原始碼中的註解中了,如果不了解的話應該看原始碼可以大概了解。

所有的 DAE 檔案 圖片 以及 原始檔我都壓縮好放在這邊 [ 原始檔 ]

Cow3d.as

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
package
{
 
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.objects.special.DAEMC;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
 
	public class Cow3d extends Sprite
	{
		private var scene:Scene3D;
		private var viewport:Viewport3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
 
		//將 DAE 檔案加入 FLASH
		[Embed(source = "cow.dae", mimeType = "application/octet-stream")]
  		private var COW_dae:Class;
  		//將 DAE 的貼圖也崁入 FLASH 中
  		[Embed(source = "cow.png")]    
  		private var COW_pic:Class; 
  		//這個是 DAE 模型的物件
  		private var cow_Object:DAEMC;
 
		public function Cow3d()
		{
			//初始化 3D 場景
			this.init3D();
			//初始化 3D 物件
			this.init3DObject();
		}
 
		private function init3D():void{
			//建立 3D 運鏡與場景
			this.viewport = new Viewport3D(530,380,false,true);
			this.addChild(this.viewport);
			this.renderer = new BasicRenderEngine();
			this.camera = new Camera3D();
			this.scene = new Scene3D();
			//this.camera.zoom = 2;
			//this.camera.focus = 150;
			this.camera.y = 400;
			//this.camera.rotationX = 45;
			//因為怕用到 STAGE 屬性,所以算圖必須要在 ADDED TO STAGE 之後才可以啟動
			this.addEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
		}
		private function onAddedToStage(event:Event):void{
			this.addEventListener(Event.ENTER_FRAME,onEventRender3D);
		}
		private function onEventRender3D(event:Event):void{
			//算圖
			this.renderer.renderScene(this.scene,this.camera,this.viewport);
		}
		private function init3DObject():void{
			//把 DEA 檔案物件化
			var cow_dae:Object = new COW_dae();
			//貼圖圖片物件化
			var cow_pic:Bitmap = new COW_pic();
			//把圖片的 BITMAP DATA 轉為 3D貼圖材質
			var cow_skin:BitmapMaterial = new BitmapMaterial(cow_pic.bitmapData);
			//放入貼圖材質庫中
			var materials:MaterialsList = new MaterialsList();
			//加入材質庫 材質名稱 texture0
			materials.addMaterial(cow_skin,"texture0");
			//建立 DAEMC 物件 ( 自動撥放 , 名稱 , 每秒影格撥放速度 )
			this.cow_Object = new DAEMC(false,null,0);
			//讀取 DAE 模型 並且 貼上材質
			this.cow_Object.load(cow_dae,materials);
			//放大 100 倍
			this.cow_Object.scale = 100;
			//將 3D 物件加入場景
			this.scene.addChild(this.cow_Object);
 
			//建立環境平台
			var colorMaterial:ColorMaterial = new ColorMaterial(0x666666);
			colorMaterial.fillAlpha = 0.5;
			var plane:Plane = new Plane(colorMaterial,1000,1000);
			plane.rotationX = 90;
			this.scene.addChild(plane);
 
		}
 
		public function go():void{
			//前進   moveRight 是因為模型是朝右邊
			this.cow_Object.moveRight(10);
		}
		public function back():void{
			//後退   moveLeft 是因為模型是朝右邊
			this.cow_Object.moveLeft(10);
		}
		public function turnLeft():void{
			//左轉
			this.cow_Object.rotationY -= 5 ;
		}
		public function turnRight():void{
			//右轉
			this.cow_Object.rotationY += 5 ;
		}
 
	}
}

CowKart.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="14" creationComplete="init()" keyDown="keyActive(event)">
	<mx:Script>
		<![CDATA[
 
 
			private var obj3d:Cow3d = new Cow3d();
			private function init():void{
				this.show3dArea.addChild(this.obj3d);
			}
			private function keyActive(event:KeyboardEvent):void{
 
				switch(event.keyCode){
					case Keyboard.UP:
						this.obj3d.go();
						break;
					case Keyboard.DOWN:
						this.obj3d.back();
						break;
					case Keyboard.RIGHT:
						this.obj3d.turnRight();
						break;
					case Keyboard.LEFT:
						this.obj3d.turnLeft();
						break;
				}
			}
		]]>
	</mx:Script>
	<mx:Panel width="550" height="440" layout="absolute" title="跑跑牛犇車 :: 使用鍵盤上下左右控制牛車  design by corAusir">
		<mx:UIComponent id="show3dArea"/>
	</mx:Panel>
	<mx:Button label="前進" click="this.obj3d.go()"/>
	<mx:HBox>
		<mx:Button label="左轉" click="this.obj3d.turnLeft()"/>
		<mx:Button label="後退" click="this.obj3d.back()"/>
		<mx:Button label="右轉" click="this.obj3d.turnRight()"/>
	</mx:HBox>
 
</mx:Application>

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::
  • funp
  • Hemidemi
  • YahooKimo
  • Google
  • udn
  • Haohao
  • Live

相關文章 :

Ausir ActionScript, FLEX, 程式設計 , , , , , , ,

  1. 2009年4月24日14:14 | #1

    我覺得紅牛比較帥

  2. 2009年4月24日14:17 | #2

    我只有乳牛的 MODEL 啦~ !!

  3. 2009年4月24日14:48 | #3

    很符合
    今年喔
    盼大家
    一起來
    向上犇

  4. 2009年4月24日18:09 | #4

    好搞啊~~~乳牛和紅牛~~~

  5. 2009年4月24日18:21 | #5

    @Alvin

    寫來搞笑的啦 @@”
    改天弄一個比較正式的來玩

  6. 2009年4月26日22:39 | #6

    您好
    想請問
    我用我自己的DAE檔時
    他不會顯示在正中間
    可是用牛就可以
    那是要自己在程式碼中去慢慢微調嗎

  7. 2009年4月26日23:42 | #7

    @樂

    應該是你模型建偏了…
    因為我在 LOAD 其他的模型檔
    也會正確的出現在正中間喔

  8. forgot
    2009年5月3日01:25 | #8

    請問
    private var renderer:BasicRenderEngine
    是什麼意思壓??
    這個跟之前做的玩轉茶壺完全不一樣耶

  9. 2009年5月3日01:29 | #9

    @forgot

    BasicRenderEngine 是 PV3D 的算圖引擎
    所有的 3D 物件就是靠這個算圖引擎把所有的節點做運算
    才可以顯示在場景上

    另外還有其他的算圖引擎

    上次我在寫茶壺的時候 我沒有移動 CAMERA 所以我就沒寫算圖引擎
    這次我本來想要移動 CAMERA
    但是後來沒有…

    上次用的是 view 的 singleRender
    如果要做場景與攝影機的互動就改成 BasicRenderEngine 來算圖了

  10. forgot
    2009年5月3日20:59 | #10

    請問有空可以寫一下DAEMC嗎??
    感覺那好像很有用耶

  11. forgot
    2009年5月3日21:31 | #11

    在順便問一下
    如果我在3D裡建了兩隻牛
    想要分別去控制他們要怎麼弄呢
    (我剛剛有去試了一下
    跟我想的一樣 他會兩隻一起動
    因為是使用同一個DAE)

  12. forgot
    2009年5月3日22:17 | #12

    還有還有 我想跟你討論一下FLEX 可以給我您的信箱嗎
    我的意見好像很多喔 囧

  13. 2009年5月4日17:59 | #13

    @forgot

    DAEMC 我會再寫不過阿 也沒甚麼特別就是 呵呵~
    而且我又不會 3DS 根本沒有物件給我玩

    再來就是 如果你建兩個隻牛
    當然要用兩個不同的 DAE 物件來載入阿~ 這樣才可以做分別的動作阿

    我會把我的信箱 E-MAIL 給你

  14. 2009年5月7日14:06 | #14

    請問將 DAE 檔案加入 FLASH
    跟 之前做的茶壺那一篇有什麼不一樣嗎
    比較好嗎

  15. 2009年5月7日15:03 | #15

    @樂

    使用 DAEMC 這個套件
    可以把 MODEL 的影格載入
    之後可以用影格的方式播放…

    改天可以寫個範例給大家看看

  16. Ray
    2009年6月10日23:01 | #16

    請問如何使用3dmax2009轉出dae,是使用內建的,還是有另外裝輸出dae的外掛。
    我使用你的dae的模型,都正確無誤,我使用自已轉出來的dae模型都是有問題。
    而我發現你的模型有調透明,請問一下材質跟透明度是要如何設定。

  17. 2009年6月10日23:06 | #17

    @Ray

    你的三個問題
    1.DAE轉出是要外掛的,不過這個模型不是我轉出來的,人家給我的
    2.的確是有調透明
    3.透明的部分我是直接寫在 PNG 貼圖上

    ^_^ 以上三個問題

  18. 邯鄲學步
    2009年7月9日00:17 | #18

    我按照你的要求做,最後不能通過編譯,提示DAEMC.as中的方法:
    override public function get fps():uint { return __fps; }
    有錯誤!找到DAMEC.as繼承的類DAE.as,發現沒有fps()這個方法,請問如何解决?

  19. Dennis
    2010年3月4日12:05 | #19

    @邯鄲學步
    對耶~我也有遇到這個問題, 不知道怎麼解決…

  20. 2010年3月4日15:56 | #20

    @邯鄲學步

    耶~~

    該不會 DAEMC 有改版
    因為當初我設定的時候沒有這個問題耶~

  21. 2010年3月4日18:28 | #21

    不错啊,受益匪浅,谢谢拉~~

  22. Dennis
    2010年3月9日16:41 | #22

    @Ausir
    知道問題的所在了, 因為pv3d 2.1之後的版本有大幅度的修改動畫的部份
    DAEMC2 目前還沒有同步跟上, 所以要使用DAEMC的話就必須使用2.0的版本
    此範例應該也是這個問題, pv3d改為2.0版本應該就可以跑了

  23. 2010年3月10日15:55 | #23

    @Dennis

    原來是這樣子
    真的是非常感謝你的回應

    因為我也超久沒有碰 PV3D 了 QQ

    謝謝你嚕 ^^

  1. 本篇文章目前尚無任何 trackbacks 和 pingbacks。