Flash遊戲引擎 CitrusEngine (十) 開始你的第一個行動APP遊戲吧 - 卷軸背景製作

目前戰鬥機已經可以透過觸控來操作了，不過一般像這種捲軸遊戲，我們還會透過可以滾動的背景，來讓角色有一直往前飛的感覺。
接下來本篇將為各位介紹滾動卷軸背景元件的作法。
如果你想讓戰鬥機可以有一直往上移動的感覺，相對的只要讓底圖一直下移(底圖的y增加)，就可以作出這種移動的感覺。

如上圖，首先作一張比螢幕範圍還高的底圖(因為我們只需要往前移動，而不需左右移動，所以底圖的寬度可以跟螢幕範圍一樣就行了)，讓底圖往下定速移動，當底圖移動到底時(最右邊的那張圖)，我們只要再這裡作一個判斷式，如果到底了，就改變底圖的y座標，讓他在回復到一開始的位子就可以作出一個無限滾動的底圖了。
我們開始實作一個底圖元件，我們在素材取得一張32x32的海面圖片，在用這張圖去重覆拼湊一個我們需要的大於螢幕範圍的底圖。
打開MainStarlingState，在initialize加上這段..

  //海面底圖
   var _seaTexture:Texture = Texture.fromBitmap(new SEA_IMAGE());
   _seaTexture.repeat = true; //重覆貼圖
   var _seaImage:Image = new Image(_seaTexture);
   _seaImage.width = _ce.stage.fullScreenWidth;
   _seaImage.height = 2000;
   //定義海面貼圖範圍
   _seaImage.setTexCoords(0, new Point(0, 0));
   _seaImage.setTexCoords(1, new Point(_seaImage.width / _seaTexture.width, 0));
   _seaImage.setTexCoords(2, new Point(0, _seaImage.height / _seaTexture.height));
   _seaImage.setTexCoords(3, new Point(_seaImage.width / _seaTexture.width, _seaImage.height / _seaTexture.height));

首先取得一張海面的材質，把他的repeat設成true，然後再把材質給Image，設定 一下Image的大小(我們這裡把圖片高度設成2000讓他大於螢幕範圍)，接下來用setTexCoords設定一下貼圖的範圍，第一個參數0 1 2 3 個別是 左上 右上 左下 右下，第二個參數是以素材大小為單位的尺寸座標(千萬不要搞錯了)，設定好之後就可以讓海面的素材重覆填充成一個我們要的大海面圖片。
圖片完成之後，接下來我們實作一個會圖片會滾動的元件。
建立一個繼承CitrusSprite的物件

package  
{
 import citrus.objects.CitrusSprite;
 
 /**
  * 海面卷軸滾動
  * @author Cain
  */
 public class SeaBg extends CitrusSprite 
 {
  private var stageHight:Number;
  public function SeaBg(name_:String,ob_:Object = null) 
  {
   super(name_, ob_);
   stageHight = _ce.stage.fullScreenHeight - 2000;
   updateCallEnabled = true; //自動update
  }
  
  override public function update (timeDelta:Number) : void
  {
   super.update(timeDelta);
   if (y>=0) 
   {
    //底圖到底就再Loop一次
    y = stageHight;
   }
  }
 }

}

這個SeaBg物件應該很單純，就是物件的y大於0的時候(圖片到底)就重新擺放一次，就可以達到loop的效果。
建立好後，我們把他add到場景上，並設定好參數。

add(new SeaBg("sea", { view:_seaImage, velocity : [0, 150] } ));

new一個SeaBg，這是剛剛作的滾動底圖，把他加到場景上，把大圖片設成view，velocity是速度，我們把y設成150，每個影格會移動150px(可以想成移動速率的意思..)
好了之後你可以先輸出一次，現在你的遊戲，除了可以操作，也擁有了一直往前方飛的速度感。
光只有海面好像有些乏味，我們來加上一些裝飾....
記得素材裡有一些小島的圖案，我們把他加到海面上，讓遊戲更生動一些。
以下實作一個小島的物件。

package  
{
 import citrus.objects.CitrusSprite;
 
 /**
  * 海島
  * @author Cain
  */
 public class Island extends CitrusSprite 
 {
  private var stageHight:Number;
  public function Island(name_:String,ob_:Object = null) 
  {
   super(name_, ob_);
   x = Math.random() * _ce.stage.fullScreenWidth;
   y = Math.random() * _ce.stage.fullScreenHeight;
   stageHight = _ce.stage.fullScreenHeight + 10;
   updateCallEnabled = true; //自動update
   registration = "center"; //素材居中
  }
  
  override public function update (timeDelta:Number) : void
  {
   super.update(timeDelta);
   if (y>stageHight) 
   {
    y = -10;
    x = Math.random() * _ce.stage.fullScreenWidth;
   }
  }
 }

}

一開始的時候，我們給改變x y讓他亂數出現在場景上，下面的update我們一直去檢查，如果他移動至畫面底部，在把他移動至頂端，這樣可以做到loop的效果，為了不讓他每次都在一樣的位置出現，所以x座標在亂數改變一次。
接下來把小島add到場景上。

//海島
   var islandImage:Image = new Image(textureAtlas.getTexture("g1"));
   add(new Island("Island1", { view:islandImage, velocity : [0, 150] } ));
   islandImage = new Image(textureAtlas.getTexture("g2"));
   add(new Island("Island2", { view:islandImage, velocity : [0, 150] } ));
   islandImage = new Image(textureAtlas.getTexture("g3"));
   add(new Island("Island3", { view:islandImage, velocity : [0, 150] } ));

記得速度得統一，才會有在同一個平面的效果，相對的如果你需要不同平面上的裝飾(比方雲層)，你可以改變速度(雲層的話，透視速度得在加快一些，您不妨自己試試看)。
輸出後你可以看到您的戰鬥機在還面上移動，不時也會越過小島..

專案下載

Flash遊戲引擎 CitrusEngine (十ㄧ) 開始你的第一個行動APP遊戲吧 - 發射子彈