CitrusEngine系列教程二：結合starling和Box2D開發遊戲

教程出自 cls分享站

 

1. CitrusEngine系列教程一：認識CitrusEngine

2. CitrusEngine系列教程二：結合starling和Box2D開發遊戲

3. CitrusEngine系列教程三：使用flash cs 設計關卡

4. CitrusEngine系列教程四：Citrus的2D動畫和攝像頭

5. CitrusEngine系列教程五：使用PhysicsEditor建立box2d剛體

6. CitrusEngine系列教程六：使用Tiled Map Editor建立地圖

............................................................................

 

首先腦補一下相關知識吧

Starling是一個ActionScript類庫，它模仿了傳統的Flash顯示列表。然而，和傳統的顯示對象不一樣，Starling對象徹底存在於Stage3D環境。這意味着，全部的顯示對象都直接由GPU渲染，這會帶來很是明顯的性能提高。=》 Starling中文站

Box2DFlashAS3 是Box2D物理引擎的ActionScript 3.0移植版本。它具備功能強大，效率較高等優勢，應用Box2DFlashAS3可使咱們的網站模擬真實世界的物理效果，從而使咱們的站點具備很是強的真實感。而咱們熱心的拉登大叔給咱們寫過很多 優質教程 。
這個教程參考官方例子，=》 官方例子演示

最後效果：

http://www.chenlinsheng.com/?p=415 

開始以前，能夠下載  CEV3-1-6-Starling-Feathers-Box2D.swc  ，也能夠像我同樣單獨去下載box2d，starling等源碼來本身配置折騰…固然，也能夠直接下載本文末尾提供的flex項目源碼
1.建立主類
在StriusEngine中使用Starling，你必須繼承StarlingCitrusEngine類，這個類繼承於CitrusEngine（在教程一的時候咱們使用的就是這個），主要提供了Starling的簡單實現。
爲了成功實現Starling，咱們須要在構造函數中調用setUpStarling函數，該函數有三個參數debugMode(調試模式)，viewport 抗鋸齒(默認爲1)與anti-aliasing視圖大小(默認是舞臺大小)。同時須要是運行於Flash player11。

1. public class Main extends StarlingCitrusEngine {
   
2. public function Main() {
   
3. setUpStarling(true);
   
4. }
   
5. }

複製代碼

2.建立遊戲state
直譯爲狀態，一個state能夠是一個關卡，也能夠將不少關卡放在一個state。state包含了遊戲的邏輯，主類用來管理目錄。一樣這個咱們須要用StarlingState代替以前的State。不過一樣是經過重寫initialize()方法來添加遊戲元素，一樣別忘了

super.initialize().

1. public function StarlingDemoGameState() {
   
2. super();
   
3. }
   
4. override public function initialize():void {
   
5. super.initialize();
   
6. }

複製代碼

主類
state = new StarlingDemoGameState();


3.添加box2d
注意！box2d須要第一個被添加！不然在新建其餘基於box2d的遊戲元素（hero等）時候會報錯，另外這個物理引擎的註冊點事基於對象的中心點，因此座標以中心點爲準

1. var box2D:Box2D = new Box2D("box2D");
   
2. box2D.visible = true;
   
3. add(box2D);

複製代碼

接下來咱們新建一些預設好的遊戲元素，（新建元素的時候通常有兩個參數，第一個參數是name（必選），CitrusEngine中是使用那麼訪問元素的，第二個Object類型，可選，能夠給該元素的一些屬性設置默認值

1. add(new Platform("bottom", {x:stage.stageWidth / 2, y:stage.stageHeight, width:stage.stageWidth}));
   
2. add(new Platform("cloud", {x:250, y:250, width:170, oneWay:true}));
   
3. var coin:Coin = new Coin("coin", {x:360, y:200});
   
4. add(coin);
   
5. var hero:Hero = new Hero("hero", {x:100, y:350, width:60, height:135});
   
6. add(hero);
   
7. var enemy:Enemy = new Enemy("enemy", {x:stage.stageWidth - 50, y:350, width:46, height:68, leftBound:20, rightBound:stage.stageWidth - 20});
   
8. add(enemy);

複製代碼

簡單介紹一下上面用到的元素吧（英文好的朋友，能夠直接查看 官網api ，順便求路過的大神幫忙翻譯一下，各類求啊~）
Platform：平臺，能夠用來作地板，站臺，障礙物等，oneWay屬性設置爲ture的話，英雄能夠從Platform下面往上跳，差很少能夠說是穿牆術吧，哈
Coin：錢幣，默認被英雄觸碰後會消失，同時拋出一個事件，下問添加互動的時候會演示如何監聽這個事件
hero：英雄，遊戲主角，能夠想超級瑪麗那樣殺死敵人（壓死敵人），當他接觸敵人coin時候，coin會消失，hurtVelocityX, hurtVelocityY能夠設置英雄受傷時候回跳的距離
enemy：敵人，leftBound, rightBound設置敵人的活動範圍，敵人會依據設置來回走動直到遇到障礙物

4.添加 Starling  素材
添加素材的方法不少，這個教程我用了三種，直接給地址：
var coin:Coin = new Coin("coin", {x:360, y:200, view:"levels/SoundPatchDemo/jewel.png"});

使用Quad類，Quad根據指定的尺寸和顏色建立一個四邊形。 最後一個參數決定是否在渲染的時候預乘透明度值，從而影響混合輸出的顏色值，大多數狀況下可使用默認值。
add(new Platform("cloud",{x:450,y:580,width:170,height:30,oneWay:true,
view:new Quad(170,30,0x000FF0)}))



經過Embed嵌入預先畫好的美術圖與xml和動畫片系列組合完成素材的導入；

1. [Embed(source="../embed/Hero.xml", mimeType="application/octet-stream")]
   
2. private var _heroConfig:Class;
   
3. [Embed(source="../embed/Hero.png")]
   
4. private var _heroPng:Class;
   
5. var bitmap:Bitmap = new _heroPng();
   
6. var texture:Texture = Texture.fromBitmap(bitmap);
   
7. var xml:XML = XML(new _heroConfig());
   
8. var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
   
9. hero.view = new AnimationSequence(sTextureAtlas, ["walk", "duck", "idle", "jump", "hurt"], "idle");

複製代碼

這裏也腦補一下一些 Starling  的紋理知識吧，=》 中文api
Texture：紋理是用來儲存展現圖像的信息。它不能直接被添加到顯示列表；
相應的它必須映射到一個顯示對象上。 在Staring中那個顯示對象就是「Image」類。
Texture.fromBitmap（）：fromBitmap經過一個bitmap來建立紋理對象。 注意：若是Starling須要處理一個丟失的設備
上下文，那麼不容許你釋放紋理數據。
TextureAtlas： TextureAtlas紋理集是一個將許多小的紋理整合到一張大圖中。這個類是用來從一個紋理集中讀取    紋理
TextureAtlas(texture:Texture, atlasXml:XML = null)經過指定紋理和用於描述範圍的XML來建立一個紋理集
5.添加聲音交互（主類添加聲音，state中用_ce.sound 調用）
a.在主類添加聲音
sound.addSound("Collect", "sounds/collect.mp3");
b.給coin添加觸碰監聽

1. coin.onBeginContact.add(coinTouched);
   
2. private function coinTouched(contact:b2Contact):void {
   
3. trace('coin touched by an object');
   
4. }

複製代碼

c.coinTouched添加播放聲音的方法，
_ce.sound.playSound("Collect",1,0);
這樣就能夠了，當coin被觸碰時，就會播放collect.mp3了
6.使用控制檯
運行遊戲的時候，按「Tab」鍵，控制檯會在頂部出現，基本上是一個輸入框，這時咱們能夠經過name訪問遊戲中的元素並進行設置，如：

1. set hero y 0

複製代碼

呼，終於寫完了。下期見

=》原文及源碼下載