Starling 粒子特效

Starling 圖像引擎可以播放連續動作, 還可以製作粒子(Particle). 我們可以引入Starling-Extension-Particle-System 元件, 它是一個基於Starling 上擴充功能(Extension).

請按 [觀看] 範例

國外的ONEBYONE, 提供一個免費線上Particle Editor. 我們設定粒子特效後, 按輸出(Export) 會下載一個particle.zip 檔案. 這個壓縮檔包含:

• particle.pex - XML 格式內容, 是一些粒子特效的設定值
• texture.png - 粒子的圖案, 可在Particle Editor 自行設定

ONEBYONE  的線上Particle Editor

定義載入檔案:

[Embed(source="../embed/particle.pex", mimeType="application/octet-stream")]
private var ParticlePEX:Class;

[Embed(source="../embed/texture.png")]
private var ParticleTexture:Class;

private var _pd:ParticleDesignerPS;

建立粒子:

_pd = new ParticleDesignerPS(
      XML(new ParticlePEX()), 
      Texture.fromBitmap(new ParticleTexture())
    );
addChild(_pd);
_pd.emitterX = stage.stageWidth >> 1; 
_pd.emitterY = stage.stageHeight >> 1;
_pd.start();
_pd.startSize = 70;

Starling.juggler.add(_pd);

stage.addEventListener(TouchEvent.TOUCH, touchHandler);

用戶按下螢幕, 移動特效:

private function touchHandler(event:TouchEvent):void{
  var touch:Touch = event.getTouch(stage);
  var tween:Tween = new Tween(_pd, 1.5, Transitions.EASE_OUT_BACK);
  tween.animate("emitterX", touch.globalX);
  tween.animate("emitterY", touch.globalY);
  Starling.juggler.add(tween);
}

這個Particle Editor 製作粒子特效十分方便, 當然我們還可以在Action Script 設定和改變其值, 達至互動效果. 作者在iOS 和Android 測試運行, 效果相當理想. 大家可以 [下載] 範例試試看.

參考資料: http://www.ashan.org/?post=295