既然這樣來寫個像是超級馬莉機制一樣的遊戲吧!!
什麼??(嚇)一開始就做這種的??
你沒聽錯，使用CitrusEngie可以很輕鬆的製作這種類型的遊戲XD
首先下載包裝好的Library
Download complete engine
目前提供各種規格的swc，你可以依你的需求下載。
這個範例我們會用到Starling與Box2D，所以先下載這個Starling + Feathers + Box2D
下載後把它放入你的專案，就可以快樂的開始寫遊戲了!
import citrus.core.starling.StarlingCitrusEngine;
public class Main extends StarlingCitrusEngine
{
public function Main():void
{
super();
//啟動Starling
setUpStarling(true);
}
}
首先場景先繼承 StarlingCitrusEngine 物件，這樣就套入這個框架了然後我們要啟動Starling所以作了setUpStarling()這個方法，setUpStarling()會初始化Starling框架，裡面的可以注入你需要的Starling參數，第一個餐設定為true你會在左上角看到開啟的效能檢測(預設為false) 好了之後你可以輸出，沒問題的話你會看到這個畫面
畫面全黑只有左上角有效能偵測...因為我們還沒有加上遊戲畫面
現在作一個遊戲場景，首先建立一個Class，並繼承StarlingState這個Class
他是一個Starling Sprite
import citrus.core.starling.StarlingState;
public class StarlingDemoGameState extends StarlingState
{
public function StarlingDemoGameState()
{
super();
}
}
建立好的之後，我們在遊戲加上這個場景 state = new StarlingDemoGameState();
import citrus.core.starling.StarlingCitrusEngine;
public class Main extends StarlingCitrusEngine
{
public function Main():void
{
super();
//啟動Starling
setUpStarling(true)
//啟動遊戲場景
state = new StarlingDemoGameState();
}
}
state是遊戲的顯示場景，之後你也可以藉由state來替換場景(例如關卡)現在輸出還是看不到什麼東西，因為我們還沒有加入遊戲元件。
加入元件前先替我們的StarlingStat作幾件事。
1.複寫它的初始化 initialize()
2.然後加入Box2引擎
package
{
import citrus.core.starling.StarlingState;
import citrus.physics.box2d.Box2D;
public class StarlingDemoGameState extends StarlingState
{
public function StarlingDemoGameState()
{
super();
}
/**
* 初始化
*/
override public function initialize():void
{
super.initialize();
//加入Box2D物理引擎
var box2D:Box2D = new Box2D("box2D");
box2D.visible = true; //debug模式開關
add(box2D);
}
}
}
initialize()初始化函式，之後你可以把一開始要出現物件建構都寫在這。我們在裡面new一個Box2D物理引擎，然後把visible設成true(預設是false)，有玩過Box2D的人都知道，Box2D有提供debug顯示模式，讓你再配置顯示物件前方便讓你調整效果，如果沒有先設true的話，Box2D雖然有正確實行，不過還是什麼都看不見..
好了之後把Box2D引擎add到場景中，這樣就完成物理引擎的配置了，真的是超級方便XD
你可以先輸出一次，如果沒有錯誤，我們就可以開始加入遊戲元件了
我們先在場景上加入一個地板bottom
//加入地板
var bottom:Platform = new Platform("bottom", {
x:stage.stageWidth / 2,
y:stage.stageHeight,
width:stage.stageWidth
} );
add(bottom);
Platform是一個靜態的Box2D物件，使用這個引擎方便的地方就是不需要一開始再定義那些囉哩叭唆的物理定義(當然你事後要調整還是可以的)由於Box2D的定位點都是在中間(不是左上角喔!)，所以x y座標我們也得注意一下，設定在正確的位置。
好了之後輸出，看一下畫面..這時候你應該可以看到場景上已經有一個底了。
再來我們放上一個角色元件，這個元件的性質類似馬莉(主角)的功能。
//加入角色
var hero:Hero = new Hero("hero", {
x:100,
y:350,
width:30,
height:50
});
add(hero);
好了之後你可以輸出看一下效果..
你應該會看到主角也被增加到場景上了，更棒的是，你可以用鍵盤方向鍵去控制它的方向，按下空白鍵還可以跳躍。
Hero這個物件已經幫你實現了主角應該要有的互動控制了XD。
不過你可能因為衝過頭，而掉到場景外去，因為目前我們作的底寬度只有stage.stageWidth的寬度而已，而且角色的速度又太快了，你可以調整Hero物件的屬性
hero.acceleration = 0.3; //加速度 hero.maxVelocity = 5; //速度極限這樣做可以讓他的速度放慢一點..
舞台光是這樣有點乏味，再來我們加上一些讓它更有趣味性的東西。
//加入一個平台
var cloud:Platform = new Platform("cloud", {
x:250,
y:300,
width:100
,oneWay:true //單一方向判定
});
add(cloud);
//加入一個金幣
var coin:Coin = new Coin("coin", {x:250, y:150});
add(coin);
輸出後可以看到這樣的畫面
我們新增了一個平台，然後在平台在上面作了一個類似金幣的元件，你可以試著操作角色，跳躍到平台上面，然後把金幣吃掉...
目前你可以發現，角色可以從平台的底部穿越，然後跳躍到平台的上方，如果你不希望平台可以被穿越的話，只要把宣告平台的oneWay:true 單一方向判定設為false或註解起來就行了。
至於Coin元件，很明顯它是一個觸碰到角色就會消失的元件，很適合拿來製作像金幣或寶物物件。
最後我們加上敵人(像是馬莉中蘑菇的敵人)
//加入敵人
var enemy:Enemy = new Enemy("enemy", {
x:stage.stageWidth - 50,
y:350,
width:30,
height:30,
leftBound:20,
rightBound:stage.stageWidth - 20
});
add(enemy);
廢話不多說，馬上輸出來玩一下!
以下是StarlingState完整的程式碼
package
{
import citrus.core.starling.StarlingState;
import citrus.objects.platformer.box2d.Coin;
import citrus.objects.platformer.box2d.Enemy;
import citrus.objects.platformer.box2d.Hero;
import citrus.objects.platformer.box2d.Platform;
import citrus.physics.box2d.Box2D;
public class StarlingDemoGameState extends StarlingState
{
public function StarlingDemoGameState()
{
super();
}
/**
* 初始化
*/
override public function initialize():void
{
super.initialize();
//加入Box2D物理引擎
var box2D:Box2D = new Box2D("box2D");
box2D.visible = true; //debug模式開關
add(box2D);
//加入地板
var bottom:Platform = new Platform("bottom", {
x:stage.stageWidth / 2,
y:stage.stageHeight,
width:stage.stageWidth
} );
add(bottom);
//加入角色
var hero:Hero = new Hero("hero", {
x:100,
y:350,
width:30,
height:50
});
hero.acceleration = 0.3; //加速度
hero.maxVelocity = 5; //速度極限
add(hero);
//加入一個平台
var cloud:Platform = new Platform("cloud", {
x:250,
y:300,
width:100,
oneWay:true //單一方向判定
});
add(cloud);
//加入一個金幣
var coin:Coin = new Coin("coin", {x:250, y:150});
add(coin);
//加入敵人
var enemy:Enemy = new Enemy("enemy", {
x:stage.stageWidth - 50,
y:350,
width:30,
height:30,
leftBound:20,
rightBound:stage.stageWidth - 20
});
add(enemy);
}
}
}
DEMO展示原始碼下載
Flash遊戲引擎 CitrusEngine (三) 建立你的第一個遊戲-設定顯示素材
沒有留言:
張貼留言