游戲引擎PushButton的教程和演示

1、Get Started開始PushButton，首先你需要下載當前的最新版本（ Eclipse，讓我覺得舒服）。解壓后我們找到PushButton的類庫所在，在Bin文件夾中我找到了PBEngine.swc(這花了我一陣時間來研究swc在flash中的職責)，也就是我們需要引用的類庫文件。我在上面提到過，并沒有發(fā)現(xiàn)有些帖子博客中提到的Manager.air，在這里我們直接在Flex中新建一個Flex項目，在建立時在lib文件夾中引入PBEngine.swc，到這里我們的準備工作就基本結束了。 為了證明我們的操作成功與否，我們需要做一些測試證明一下。我們在 <mx:Applica

2、tion   xmlns:mx="  layout="absolute"  applicationComplete="appComplete()"  width="480"  height="384" backgroundGradientAlphas="1.0, 1.0" backgroundGradientColors="#A53EE1, #C8C8C8"

3、>標簽中設置了應用程序結束時調用的 appComplete方法，在這個方法中我們需要調用 protected function appComplete():void Global.startup(this);用Matthew Casperson的話就是，當我們要用PushButton做什么事情之前，首先一定要調用Global.startup(this);這是一切的基礎。然后讓我們做一個簡單的動畫（一個屏幕上的圓，來完成我們第一期的練習）。   首先，在PushButton中，所有的東西都稱之為”Entity“ 翻譯成實體也好，所以，要顯示一個圓，我們需要兩個

4、實體，首先我們需要一個類似于舞臺類似于場景的東西我們稱之為 ”Scene“（這在以后的例子中仍然會用到）,然后需要一個圓，放到這個"Scene"中去。 在PushButton中，組件構成了實體，實體就像一個空的盒子一樣，每放入一個組件，盒子將擁有一個新的功能和特點。PushButton并沒有采用傳統(tǒng)的繼承的設計模式，并沒有在創(chuàng)建一個實體的時候創(chuàng)建一個類，而是實現(xiàn)了一個接口Entity的一個對象，并包含了實現(xiàn)其他功能接口的組件，由實體包裹著組件（模塊化的思想漸漸付出水面，但是精彩的還在后面，這種模塊化讓你想到了什么？XML？）。 我們創(chuàng)造了一個工廠類來產(chǎn)生

5、我們需要的實體，以供在應用程序入口Main.mxml中調用  1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Application  3   xmlns:mx=" 4   layout="absolute" 5   applicationComplete=&quo

6、t;appComplete()" 6   width="480" 7   height="384"> 8    9     <mx:Script>10         <!CDATA11      

7、;       12             import com.pblabs.engine.core.*;13                       

8、  14             protected function appComplete():void15             16             &

9、#160;   Global.startup(this);17                 18                 EntityFactory.createScene("scene");19&

10、#160;                EntityFactory.createPlayer("player", "scene");20             21       

11、0;     22         >23     </mx:Script>24     25 </mx:Application>26   在 EntityFactory中，我們先創(chuàng)建Scene。 1 package 2  3 &

12、#160;   import mx.core.*; 4      5     import com.pblabs.engine.core.*; 6     import com.pblabs.engine.entity.*; 7     import com.pblabs.renderin

13、g2D.*; 8     import com.pblabs.rendering2D.ui.*; 9     10     import flash.geom.Point;11     12     public class EntityFactory13   

14、;  14         static protected const SCENE_SPATIAL_COMPONENT:String = "Spatial"15         static protected const SCENE_RENDERER_COMPONENT:String 

15、= "Renderer"16         17         static public function createScene(name:String):IEntity18         19     

16、60;       var Scene:IEntity = allocateEntity();                                20 

17、60;           Scene.initialize(name);  21                                &#

18、160;                     22             var Spatial:BasicSpatialManager2D = new BasicSpatialManager2D(); 

19、    23             Scene.addComponent( Spatial, SCENE_SPATIAL_COMPONENT );                     

20、       24             25             var Renderer:Scene2DComponent = new Scene2DComponent();    

21、;                        26             Renderer.spatialDatabase = Spatial;     

22、                             27               28     &#

23、160;       var View:SceneView = new SceneView();                                29

24、60;            View.width = Application.application.width;                            

25、0;                      30             View.height = Application.application.height;     &

26、#160;                                            31     

27、;        Renderer.sceneView = View;                                    

28、;       32               33             Renderer.position = new Point(0,0);      

29、;                                      34           

30、60; Renderer.renderMask = new ObjectType("Renderable");                 35               36   &

31、#160;         Scene.addComponent( Renderer, SCENE_RENDERER_COMPONENT );     37             38         

32、60;   return Scene; 39           在類的數(shù)據(jù)成員我們發(fā)現(xiàn)了兩類組件的標記常量，一個叫"Spatial",一個叫"Renderer"，由于我并沒有從事過動畫創(chuàng)作和任何游戲開發(fā)，我只能在開發(fā)中逐漸理解他們的含義，最簡單的理解就是Spatial組件負責空間上的事務，如位置(position),大小(size)等等，而 Renderer組件則負責處理渲染事務，關于什么叫渲染

33、我并沒有專業(yè)開發(fā)人員更理解，不過它決定了物體的形狀，外貌等等。在創(chuàng)建Scene時，需要特殊注意的是，實體Scene的組件Render同樣需要一個View來將Scene渲染上去,這個時候我們需要創(chuàng)建一個SceneView如上代碼所示。然后我們需要創(chuàng)建Player，也就是那個球。 1 static public function createPlayer(name:String, scene:String):IEntity 2        

34、0; 3             var entity:IEntity = allocateEntity();                          

35、0;       4             entity.initialize(name);                         

36、60;                    5              6             var Spat

37、ial:SimpleSpatialComponent = new SimpleSpatialComponent();    7              8             Spatial.spatialManager = Name

38、Manager.instance.lookupComponentByName(scene, SCENE_SPATIAL_COMPONENT) as ISpatialManager2D;                             9   

39、          10             Spatial.objectMask = new ObjectType("Renderable");              &

40、#160;   11             Spatial.position = new Point(0,0);                        

41、0;          12             Spatial.size = new Point(50,50);                  

42、60;                  13             14             entity.addComponent( Spa

43、tial, "Spatial" );                             15              &#

44、160;          16             var Render:SimpleShapeRenderComponent = new SimpleShapeRenderComponent(); 17         &

45、#160;   18             Render.showCircle = true;                           

46、                 19             Render.radius = 25;               

47、;                                   20             Render.po

48、sitionReference = new PropertyReference("Spatial.position");    21             22             entity.addComponent( Rende

49、r, "Render" ); 23             24             return entity;25         26 27  

50、60;  28  讀者會發(fā)現(xiàn)和Scene的創(chuàng)建非常的類似，在Spatial決定了大小和位置后，Render中指定了這是顯示一個圓,并描述這個圓的半徑是25，在這里我們需要注意的是在Render的定義中，我們需要與Spatial的屬性進行關聯(lián)， 比如這里我們需要這個物體的空間位置，所以出現(xiàn)了 Render.positionReference = new PropertyReference("Spatial.position"); 在后面我們還會遇到和大小相關聯(lián)等等。 運行在Fl

51、exBuilder中運行我們的項目，您會得到一個圓，這時候，恭喜你，您已經(jīng)邁出了第一步。 我很喜歡PushButton，希望您也可以繼續(xù)。以上部分內容，來自 Matthew Casperson的博客Demo代碼下載頁面上一期我們說到了PushButton游戲引擎的helloworld，我們在一張幕布上成功畫出了一個圓，這一節(jié)，我們要做的就是讓這個圓動起來。這對我來說是激動人心的（因為我原本只是寫寫簡單的交互JS），上一節(jié)我們講到PushButton最大的特點就是以組件為中心，一個實體好比一個空箱子，放在里邊好多各種功能的石頭，這個箱子就具有了各種各樣的功能，這些有魔力的石頭

52、，也就是我們所說的組件。所以當我們要做這樣一個應用時，你可能會自然的想到，要被鼠標控制，這樣的一個功能，是不是一個組件的？you're right ,my friend。 復制內容到剪貼板 代碼:package    import ponents.*;    import com.pblabs.engine.entity.*;    import com.pblabs.engine.core.*;      

53、  import flash.geom.Point;        public class KeyboardController extends TickedComponent            public var PositionReference:PropertyReference = null;      

54、;  public var Speed:Number = 0;        protected var xMovement:Number = 0;        protected var yMovement:Number = 0;            public override funct

55、ion onTick(tickRate:Number):void                    var position:Point = owner.getProperty(PositionReference);               

56、 if (InputManager.isKeyDown(InputKey.RIGHT)                            xMovement += Speed * tickRate;         

57、       while (xMovement >= 1)                                    position.x += 1;&

58、#160;                   xMovement -= 1;                           

59、0;             else if (InputManager.isKeyDown(InputKey.LEFT)                            xMovem

60、ent -= Speed * tickRate;                while (xMovement <= -1)                         

61、0;          position.x -= 1;                    xMovement += 1;              

62、60;                                      if (InputManager.isKeyDown(InputKey.DOWN)    

63、0;                       yMovement += Speed * tickRate;                while (yMovement >= 1) 

64、60;                                  position.y += 1;             

65、;       yMovement -= 1;                                        &#

66、160;else if (InputManager.isKeyDown(InputKey.UP)                            yMovement -= Speed * tickRate;         

67、       while (yMovement <= -1)                                    position.y -= 1;

68、                    yMovement += 1;                           

69、60;             看了上面的代碼，我們的目光會鎖定在這個類繼承的這個叫 TickComponent，這是一個比較關鍵的組件，在我看來，既然FLEX沒有時間軸的概念，那么Tick這個概念就很重要了，這對于你在每一個tickRate時間點上都可對相應的實體進行檢測和控制，此篇就是對鍵盤的簡單控制。鍵盤控制的細節(jié)就不做多講解，xMovement/yMovement在我理解就是一個緩沖，讓你的每一次鍵盤操作更流暢而不僵硬。這里我們第一次在組件中看到owner的

70、身影，他代表對該實體的引用（也就是說每個石頭上有這么個標記要owner，指明放石頭的盒子），通過owner可以訪問很多實體的屬性，比如現(xiàn)在我們說的這個position,還有未來要接觸比較關鍵的線速度(linearVelocity)。我們寫完這個組件后需要把它加入到我們原本編輯好的圈圈實體內，像添加其他組件一樣 復制內容到剪貼板 代碼:var Input:KeyboardController = new KeyboardController();            Inpu

71、t.PositionReference = new PropertyReference("Spatial.position");            Input.Speed = 50;            entity.addComponent(Input, "Input");組件實體的結構化很徹底，有沒有又讓你想

72、起什么？XML？運行實例，你會發(fā)現(xiàn)，小圈圈已經(jīng)可以跟上你的大腦暢游了下一期我們將嘗試讓我們的角色變得更有趣一些，把圓圈變成會動的小人？上一節(jié)我們說到了鍵盤控制，能讓我們的下圈圈動起來，這讓我著實的興奮。那么這一節(jié)，我們讓我們的圈圈消失掉，取而代之的是類似于“合金彈頭”的人物造型，每一次接近于現(xiàn)實游戲的進步都讓我感覺到興奮，讓我們看看該如何操作。我們看一下我們原本實體里的 render組件1 var Render:SimpleShapeRenderComponent = new SimpleShapeRenderComponent(); 

73、;2  3  Render.showCircle = true;                                       

74、0;    4  Render.radius = 25;                                      

75、0;           5  Render.positionReference = new PropertyReference("Spatial.position");    6  7  entity.addComponent( Render, "Render" ); 

76、0;平淡無奇，只能看出是一個圓，半徑為25像素。我們來稍微改動一下，恐怕我們再也不需要這個圓了1 var Render:SpriteRenderComponent = new SpriteRenderComponent();2  3  Render.loadFromImage = "./media/idleright.png"            

77、;                                                  

78、;                         4  Render.positionReference = new PropertyReference("Spatial.position");    5  6

79、0; entity.addComponent( Render, "Render" );  從代碼上看很容易看出我們替換成了一張圖片，圖片如下，這很酷，很“合金彈頭”。 到這可能我們預期的目的已經(jīng)達到了，的確，你的想法是對的。但是，作為素材，加載的速度是很重要的，放在文件中被下載固然是一種天經(jīng)地義的做法，但是在這里，PushButton提供給了我們一種新的做法，將圖片加載到flash中，使加載速度更快捷（當然這是我的理解，Matthew Casperson也的的確確是這樣說的，具體如何實現(xiàn)的，在這里我仍然無

80、法回答，也無法驗證，歡迎專家來講解將圖片加載到FLASH里的原理）。這里我將這些資源理解為嵌入式資源。  1 package 2  3     import com.pblabs.engine.resource.ResourceBundle; 4  5     public class Resources extends ResourceBundle

81、0;6      7         Embed(source="./media/idleright.png", mimeType="application/octet-stream") 8         public var ImgIdleRight:Class; 

82、 9         10     11    很明顯，com.pblabs.engine.resource.ResourceBundle的這個ResourceBundle起到了這個作用，我們看到了圖片被Embed，而且還設置了mimeType.這和重要，在以后的學習過程中，無論聲音（mp3文件），圖片，以至于我們未來遇到的最重要的xml都將以這種方式嵌入到我們的游戲中去。而這些XML將構成我們以后游戲的主

83、框架，也就是表示層和控制層相分離，這種業(yè)務分離是很重要的，無論你在從事網(wǎng)站開發(fā)還是其他方面的開發(fā)，都至關重要。這些將在以后的章節(jié)中介紹，現(xiàn)在我們將用as代碼實現(xiàn)一個簡單游戲，而后，我們將業(yè)務分離采用xml+as的方式構筑我們的游戲，這也符合大多數(shù)開發(fā)模式。 下一期我們將會使這個角色動起來，Animation，這是很有意思的一件事，就好比你控制的人物在空閑時候自己會擦擦槍，跑起來把槍抗在后背上？這次繼續(xù)來說這個Animation的概念，這對于我這個對游戲從未接觸的人是一次全新的接觸，因為曾經(jīng)玩過的游戲，那些自己會動起來的人物，從來沒想過是如何做的，比如我們的這個游戲人物，當我鍵盤空閑時

84、候，希望他做著身子上下顫抖的動作。經(jīng)過一番學習，才接觸到，這是一個PNG里六個連續(xù)靜態(tài)圖像（）循環(huán)連播形成的，在PushButton中有專門處理這種png圖片的東西，稱之為divider。下面我就在原本的基礎上加上我們的動畫（Animation）。 1 var Animation:AnimationController = new AnimationController(); 2            &#

85、160;Animation.spriteSheetReference = new PropertyReference("Render.spriteSheet");  3             Animation.currentFrameReference = new PropertyReference("Render.spriteIndex");

86、 4             Animation.defaultAnimation = "IdleRight"     5              6      

87、60;      var IdleRightSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent(); 7             IdleRightSpriteSheet.imageFilename = "./media/idleright.png"&

88、#160;8              9             10             var divider:CellCountDivider = new&#

89、160;CellCountDivider();11             divider.xCount = 6;12             IdleRightSpriteSheet.divider = divider;13      &

90、#160;      14             var IdleRightAnimation:AnimationControllerInfo = new AnimationControllerInfo();15             

91、IdleRightAnimation.frameRate = 12;16             IdleRightAnimation.loop = true;17             IdleRightAnimation.spriteSheet = IdleRightSpr

92、iteSheet;18             Animation.animations"IdleRight" = IdleRightAnimation;19             20         &#

93、160;   entity.addComponent(Animation, "Animation"); 就這樣我們給實體加入了Animation這一組件，AnimationController這一組件需要和Render的兩個屬性相連接即1 Animation.spriteSheetReference = new PropertyReference("Render.spriteSheet"); 2     &

94、#160;       Animation.currentFrameReference = new PropertyReference("Render.spriteIndex"); 之后需要說明的是AnimationController.Animations是一個數(shù)組,你可以用Animation"key"=AnimationControllerInfoSample的形式定義多個AnimationControllerInfo。如本例中1 

95、Animation.animations"IdleRight" = IdleRightAnimation;而AnimationControllerInfo這個東西，就記錄了一個動畫的全部，如frameRate頻率，loop是否循環(huán)播放，以及SpriteSheetComponent（無論怎么翻譯），它決定了你素材（如png）的來源，以及divider（xCount給出這個png一共有多少個連續(xù)圖像）。你可以定義多個AnimationControllerInfo，用來描述角色不同的動作，最后設置一個默認的動作，本例中為1 Animation.def

96、aultAnimation = "IdleRight"     但是你要保證你的這個動作是注冊過的。就這樣我們的角色可以在空閑的時候發(fā)出顫抖動作了，這讓我很興奮，有了這些，我們可以讓我們的角色有向左向右跑，甚至跳的動作，只要在相應的時間點上設置Animation就可以了，這是很奇妙也是相當有用的地方。下次我們會繼續(xù)完善這個人物的各個Animation，。上次說到讓一個角色動起來，也就是讓他“渾身顫抖”，在動游戲中，我們更新角色動作是一件基本的事情，在PushButton中，處理動作變換是一件簡單的事，上次我們創(chuàng)建了一個Ani

97、mationControllerInfo，并且讓它成為了角色默認的Animation(Default Animation)，我們只需要在現(xiàn)有的基礎上添加若干個AnimationControllerInfo然后讓它們互相切換就可以了.我沒接觸過其他的游戲引擎，不過這讓我覺得自然和方便。 1     var IdleRightSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent(); 2   &

98、#160;         IdleRightSpriteSheet.imageFilename = "./media/idleright.png" 3              4           

99、60; var divider:CellCountDivider = new CellCountDivider(); 5             divider.xCount = 6; 6             IdleRightSpriteShe

100、et.divider = divider; 7              8             var IdleRightAnimation:AnimationControllerInfo = new AnimationControllerInfo();

101、 9             IdleRightAnimation.frameRate = 12;10             IdleRightAnimation.loop = true;11        

102、     IdleRightAnimation.spriteSheet = IdleRightSpriteSheet;12             13             Animation.animations"IdleRight" 

103、;= IdleRightAnimation;14             /end of IdleRight15               var IdleLeftSpriteSheet:SpriteSheetComponent = new Spr

104、iteSheetComponent();16             IdleLeftSpriteSheet.imageFilename = "./media/idleleft.png"17             var divider2:CellCountDivider =&

105、#160;new CellCountDivider();18             divider2.xCount = 6;19             IdleLeftSpriteSheet.divider = divider2;20    &#

106、160;        21             var IdleLeftAnimation:AnimationControllerInfo = new AnimationControllerInfo();22           &#

107、160; IdleLeftAnimation.frameRate = 12;23             IdleLeftAnimation.loop = true;24             IdleLeftAnimation.spriteSheet = IdleL

108、eftSpriteSheet;25             Animation.animations"IdleLeft" = IdleLeftAnimation;26             /end of IdleLeft27    &#

109、160;       var RunLeftSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();28             RunLeftSpriteSheet.imageFilename = "./media/runleft.png"29

110、60;            var divider3:CellCountDivider = new CellCountDivider();30             divider3.xCount = 12;31      &

111、#160;      RunLeftSpriteSheet.divider = divider3;32             33             var RunLeftAnimation:AnimationControllerInfo&#

112、160;= new AnimationControllerInfo();34             RunLeftAnimation.frameRate = 12;35             RunLeftAnimation.loop = true;36  

113、;           RunLeftAnimation.spriteSheet = RunLeftSpriteSheet;37             Animation.animations"RunLeft" = RunLeftAnimation;38   

114、0;         /end of RunLeft39               var RunRightSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();40     &

115、#160;       RunRightSpriteSheet.imageFilename = "./media/runright.png"41             42             var runRig

116、htDivider:CellCountDivider = new CellCountDivider();43             runRightDivider.xCount = 12;44             RunRightSpriteSheet.divider =&

117、#160;runRightDivider;45             46             var runRightAnimation:AnimationControllerInfo = new AnimationControllerInfo();47   &

118、#160;         runRightAnimation.frameRate = 12;48             runRightAnimation.loop = true;49            

119、0;runRightAnimation.spriteSheet = RunRightSpriteSheet;50             51             Animation.animations"RunRight" = runRightAnimation;52

120、60;            / end of RunRight53             entity.addComponent(Animation, "Animation");54              /end of Animation 這著實是一個繁瑣而體力的過程，這在以后的開發(fā)中會進行優(yōu)化(利用結構化的XML直接構建) 。但是原作者在第一版的教程中全部使用了Actionscript，不過在第二版的教程中，作者使用了以xml為基礎開發(fā)的類似于“小蜜蜂”的游戲，在這一期中，我們仍然需要機械的書寫一些代碼，就如上面貼出的一樣。 在方向控制