游戲引擎PushButton的教程和演示

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

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

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

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

5、我們需要的實(shí)體，以供在應(yīng)用程序入口Main.mxml中調(diào)用  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)了兩類組件的標(biāo)記常量，一個(gè)叫"Spatial",一個(gè)叫"Renderer"，由于我并沒有從事過動(dòng)畫創(chuàng)作和任何游戲開發(fā)，我只能在開發(fā)中逐漸理解他們的含義，最簡(jiǎn)單的理解就是Spatial組件負(fù)責(zé)空間上的事務(wù)，如位置(position),大小(size)等等，而 Renderer組件則負(fù)責(zé)處理渲染事務(wù)，關(guān)于什么叫渲染

33、我并沒有專業(yè)開發(fā)人員更理解，不過它決定了物體的形狀，外貌等等。在創(chuàng)建Scene時(shí)，需要特殊注意的是，實(shí)體Scene的組件Render同樣需要一個(gè)View來將Scene渲染上去,這個(gè)時(shí)候我們需要?jiǎng)?chuàng)建一個(gè)SceneView如上代碼所示。然后我們需要?jiǎng)?chuàng)建Player，也就是那個(gè)球。 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  讀者會(huì)發(fā)現(xiàn)和Scene的創(chuàng)建非常的類似，在Spatial決定了大小和位置后，Render中指定了這是顯示一個(gè)圓,并描述這個(gè)圓的半徑是25，在這里我們需要注意的是在Render的定義中，我們需要與Spatial的屬性進(jìn)行關(guān)聯(lián)， 比如這里我們需要這個(gè)物體的空間位置，所以出現(xiàn)了 Render.positionReference = new PropertyReference("Spatial.position"); 在后面我們還會(huì)遇到和大小相關(guān)聯(lián)等等。 運(yùn)行在Fl

51、exBuilder中運(yùn)行我們的項(xiàng)目，您會(huì)得到一個(gè)圓，這時(shí)候，恭喜你，您已經(jīng)邁出了第一步。 我很喜歡PushButton，希望您也可以繼續(xù)。以上部分內(nèi)容，來自 Matthew Casperson的博客Demo代碼下載頁(yè)面上一期我們說到了PushButton游戲引擎的helloworld，我們?cè)谝粡埬徊忌铣晒Ξ嫵隽艘粋€(gè)圓，這一節(jié)，我們要做的就是讓這個(gè)圓動(dòng)起來。這對(duì)我來說是激動(dòng)人心的（因?yàn)槲以局皇菍憣懞?jiǎn)單的交互JS），上一節(jié)我們講到PushButton最大的特點(diǎn)就是以組件為中心，一個(gè)實(shí)體好比一個(gè)空箱子，放在里邊好多各種功能的石頭，這個(gè)箱子就具有了各種各樣的功能，這些有魔力的石頭

52、，也就是我們所說的組件。所以當(dāng)我們要做這樣一個(gè)應(yīng)用時(shí)，你可能會(huì)自然的想到，要被鼠標(biāo)控制，這樣的一個(gè)功能，是不是一個(gè)組件的？you're right ,my friend。 復(fù)制內(nèi)容到剪貼板 代碼: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;             看了上面的代碼，我們的目光會(huì)鎖定在這個(gè)類繼承的這個(gè)叫 TickComponent，這是一個(gè)比較關(guān)鍵的組件，在我看來，既然FLEX沒有時(shí)間軸的概念，那么Tick這個(gè)概念就很重要了，這對(duì)于你在每一個(gè)tickRate時(shí)間點(diǎn)上都可對(duì)相應(yīng)的實(shí)體進(jìn)行檢測(cè)和控制，此篇就是對(duì)鍵盤的簡(jiǎn)單控制。鍵盤控制的細(xì)節(jié)就不做多講解，xMovement/yMovement在我理解就是一個(gè)緩沖，讓你的每一次鍵盤操作更流暢而不僵硬。這里我們第一次在組件中看到owner的

70、身影，他代表對(duì)該實(shí)體的引用（也就是說每個(gè)石頭上有這么個(gè)標(biāo)記要owner，指明放石頭的盒子），通過owner可以訪問很多實(shí)體的屬性，比如現(xiàn)在我們說的這個(gè)position,還有未來要接觸比較關(guān)鍵的線速度(linearVelocity)。我們寫完這個(gè)組件后需要把它加入到我們?cè)揪庉嫼玫娜θ?shí)體內(nèi)，像添加其他組件一樣 復(fù)制內(nèi)容到剪貼板 代碼:var Input:KeyboardController = new KeyboardController();            Inpu

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

72、起什么？XML？運(yùn)行實(shí)例，你會(huì)發(fā)現(xiàn)，小圈圈已經(jīng)可以跟上你的大腦暢游了下一期我們將嘗試讓我們的角色變得更有趣一些，把圓圈變成會(huì)動(dòng)的小人？上一節(jié)我們說到了鍵盤控制，能讓我們的下圈圈動(dòng)起來，這讓我著實(shí)的興奮。那么這一節(jié)，我們讓我們的圈圈消失掉，取而代之的是類似于“合金彈頭”的人物造型，每一次接近于現(xiàn)實(shí)游戲的進(jìn)步都讓我感覺到興奮，讓我們看看該如何操作。我們看一下我們?cè)緦?shí)體里的 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;平淡無奇，只能看出是一個(gè)圓，半徑為25像素。我們來稍微改動(dòng)一下，恐怕我們?cè)僖膊恍枰@個(gè)圓了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" );  從代碼上看很容易看出我們替換成了一張圖片，圖片如下，這很酷，很“合金彈頭”。 到這可能我們預(yù)期的目的已經(jīng)達(dá)到了，的確，你的想法是對(duì)的。但是，作為素材，加載的速度是很重要的，放在文件中被下載固然是一種天經(jīng)地義的做法，但是在這里，PushButton提供給了我們一種新的做法，將圖片加載到flash中，使加載速度更快捷（當(dāng)然這是我的理解，Matthew Casperson也的的確確是這樣說的，具體如何實(shí)現(xiàn)的，在這里我仍然無

80、法回答，也無法驗(yàn)證，歡迎專家來講解將圖片加載到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的這個(gè)ResourceBundle起到了這個(gè)作用，我們看到了圖片被Embed，而且還設(shè)置了mimeType.這和重要，在以后的學(xué)習(xí)過程中，無論聲音（mp3文件），圖片，以至于我們未來遇到的最重要的xml都將以這種方式嵌入到我們的游戲中去。而這些XML將構(gòu)成我們以后游戲的主

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

84、候，希望他做著身子上下顫抖的動(dòng)作。經(jīng)過一番學(xué)習(xí)，才接觸到，這是一個(gè)PNG里六個(gè)連續(xù)靜態(tài)圖像（）循環(huán)連播形成的，在PushButton中有專門處理這種png圖片的東西，稱之為divider。下面我就在原本的基礎(chǔ)上加上我們的動(dòng)畫（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"); 就這樣我們給實(shí)體加入了Animation這一組件，AnimationController這一組件需要和Render的兩個(gè)屬性相連接即1 Animation.spriteSheetReference = new PropertyReference("Render.spriteSheet"); 2     &

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

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

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

97、mationControllerInfo，并且讓它成為了角色默認(rèn)的Animation(Default Animation)，我們只需要在現(xiàn)有的基礎(chǔ)上添加若干個(gè)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 這著實(shí)是一個(gè)繁瑣而體力的過程，這在以后的開發(fā)中會(huì)進(jìn)行優(yōu)化(利用結(jié)構(gòu)化的XML直接構(gòu)建) 。但是原作者在第一版的教程中全部使用了Actionscript，不過在第二版的教程中，作者使用了以xml為基礎(chǔ)開發(fā)的類似于“小蜜蜂”的游戲，在這一期中，我們?nèi)匀恍枰獧C(jī)械的書寫一些代碼，就如上面貼出的一樣。 在方向控制