CitrusEngine系列教程一：認識CitrusEngine

教程做者：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建立地圖

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

終於要作遊戲項目了那，以前一直作flex應用開發如pdf在線編輯器 什麼的，此次終於輪到遊戲了，但我真沒什麼遊戲開發經驗，因此近來一直在腦補遊戲開發知識，偶然發如今這個引擎，感受仍是蠻不錯。至於這個教程就不說爲了方便你們什麼的大話了，其實也就是爲了加深本身的理解，也但願和你們的交流中得到更大進步。好了，不說廢話，如下進入正題~

首先什麼是CitrusEngine？
Citrus引擎提供了一個快速原型遊戲的架構，特別是ACT橫版過關類的。內置實現了platform 包，支持角色 (Hero) 、道具盒子(Sensor) 、平臺 (platform) 並擴展了 MovingFLatform是自運動的平臺。 目前的版本同時封裝了原生Starling渲染。對於物理引擎部分，同時支持 box2d、nape、AwayPhysics。此引擎基於MIT開源協議！

CitrusEngine有何特色？

一、可視化的關口編輯器，它有一個強大的視覺化場景構建界面；

二、它支持Starling Framework等渲染引擎；

三、它支持Box2D、Nape等物理引擎：翻滾箱子，滑輪，車，以及其餘任何你能想到的東西，若是沒有網格的限制的話；

四、強健的文檔，包含ASDoc API，教學視頻，和友好的開發手冊；

五、標準的API意味着開發者和設計人員能夠將精力花在調整有趣的東西上，同時縮短了調試時間。

核心構成

（http://www.chenlinsheng.com/?p=406）

如何使用Crtues Engine

接下來咱們經過建立一個簡單的demo來簡單瞭解一下Crtues Engine的用法吧（此示例用的圖片來自官網例子）

（http://www.chenlinsheng.com/?p=406）

1.使用Crtues Engine須要繼承CitrusEngine類，若是想使用Starling，你必須繼承StarlingCitrusEngine類。同時你須要調用setUpStarling函數來建立Starling環境，該函數有三個參數debugMode(調試模式)，viewport 抗鋸齒(默認爲1)與anti-aliasing視圖大小(默認是舞臺大小)。

public class CitrusTest extends StarlingCitrusEngine
{
public function CitrusTest()
{
setUpStarling();//建立 Starling 視圖
}
}

2.建立遊戲狀態

當咱們的主類設置完成後，咱們還須要設置遊戲狀態state。同一時間只能運行一個state。在遊戲中能夠設置每個關卡都是一個state，也能夠把全部關卡設置同一個state。

這裏，首先咱們新建一個類來繼承StarlingState並將其設置成遊戲的state

public class GameState extends StarlingState
{
public function GameState()
{
super();
}

public function CitrusTest()
{
setUpStarling();//建立 Starling 視圖
state=new GameState();
}

3.接下來能夠在GameState中重寫initialize()方法來給遊戲添加box2d環境（box2d開源物理引擎，咱們熱心的拉登大叔給咱們寫了很多優秀的教程，不瞭解的能夠去他的網站看看：http://www.ladeng6666.com/blog/）和英雄，站臺等元素。

override public function initialize():void{
super.initialize();
//建立一個box2D世界，須要第一個建立
var physics:Box2D=new Box2D(「box2d」);
// physics.visible=true;//若是設置爲true，不一樣的顯示元素會以不一樣的顏色塊顯示，顏色 塊其實也反映了該元素/角色的發生碰撞的位置，範圍
add(physics);

接下來添加hero、enemy、coin、Platform的等遊戲元素，這些元素通常都具備兩個參數，第一個是name，第二個爲可選參數，Object類型，能夠進行座標等參數設置，如

//Platform新建一個站臺做爲地板,注意座標x爲512而非0，由於box2d是用顯示對象的中心點做爲註冊點
var floor:Platform=new Platform(「floor」,{x:512,y:748,width:1024,height:40});
add(floor);

//MovingPlatform移動站臺，speed設置速度，
var mp1:MovingPlatform=new MovingPlatform(「moviePl」,
{x:400,y:550,width:200,height:40,startX:400,startY:550,endX:500,endY:151});
// mp1.waitForPassenger=true;//waitForPassenger設置是否在有乘客時才移動
add(mp1);
//建立一個遊戲角色，該角色能夠用左右方向鍵行走，空格跳躍，默承認以向超級瑪麗同樣壓死敵人
var hero:Hero=new Hero(「hero」,{x:50,y:650,width:80,height:48});
hero.view=new heroView();
add(hero);
//leftBound，rightBound設置活動範圍
var enemy:Enemy=new Enemy(「enemy」,
{x:900,y:700,width:25,height:30,leftBound:10,rightBound:1000});
add(enemy);

//新建一個金幣
var goal:Coin=new Coin(「ring」,{x:967,y:80,width:64,height:64});
//onBeginContact第一次被接觸時候分派事件
goal.onBeginContact.add(function(c:b2Contact):void{
trace(「win」);
});
add(goal);
4.設置顯示元素的view，能夠理解爲皮膚吧。view能夠是一個類或者顯示對象，圖片等，在starling中也能夠用Quad對其進行簡單的填充

p1.view=new Quad(300,40,0×000000);

[Embed(source="assest/hero.png",mimeType="image/png")]
private var heroView:Class;
hero.view=new heroView();

此次大概就到這裏吧，下次咱們探討一下攝像頭和flash動畫的使用吧。

=》完整源碼下載