パーティクル!プラグイン

フォーラムルール
素材の利用規約を決めたいけど、どんなことを書けばいいのか分からない場合は、
素材のテンプレートをご利用下さい。
アバター
ツキミ
記事: 21
登録日時: 2017年2月27日(月) 11:39

パーティクル!プラグイン

投稿記事by ツキミ » 2018年7月16日(月) 11:12

パーティクル!プラグイン v0.1.2
Tsukimi

プラグイン紹介
pixiビルドインの particles を pixi-particle.js でコントロールするプラグインです。
いわゆるパーティクルシステムが出来ます!


デモ
4コマ動画です!
https://www.youtube.com/watch?v=DRbnXTH8LU8
デモ内使用したパーティクルエフェクト:
燃え盛る火、花火、土けむり、集中線

使い方
事前準備:

1. まず、
https://pixijs.io/pixi-particles-editor/
このサイトで希望のエフェクトを作成し、設定ファイルをダウンロードする。
画像
ちなみに Load をクリックすると、DLした設定ファイル、或いはデフォルト設定を読み込める。


2. プロジェクフォルダーの data/ の下に、particles というフォルダーを作り、設定ファイルを入れる
画像
同じく、 imgs/ の下に、particles というフォルダーを作り、使いたいパーティクル画像を入れる
画像


3. 本プラグインをDLし、
先程 data/particles に追加した設定ファイルの名前をプラグインパラメータに書き込む
画像

以上で、事前準備が終わります。
あとは、たった1つのプラグインコマンド(createPEmitter)だけで、
ゲーム内で先程作成したパーティクルエフェクトを呼び出せます!


プラグインコマンドと、メモ欄のタグによるパーティクルエミッターが作成できます。
(ちなみに、大文字Pはパーティクルの略です)

■■■プラグインコマンドのパーティクルエミッター作成、調整

プラグインコマンド:
イベントコマンド「プラグインコマンド」から実行。
(パラメータの間は半角スペースで区切る)

*** 以下の PEmitter を 全部 PE に省略できます。 ***

 createPEmitter {id} {config} {eventId} {imageNames ...}
 エミッターを作る。
  id: エミッター識別名、調整、削除の時に使う。好きな名前をどうぞ。
  config: data/particles/ に入っているエミッターの設定ファイル
  eventId: エミッターの追従対象。
       -1:プレイヤー、0:このイベント、1~:該当イベント
       x:画面依存、screen:画面依存(当マップのみ)
  imageNames: img/particles/ に入っているパーティクル画像名
         複数あったら半角空白で区切る

 例: createPEmitter star#1 starEmitter x star1 star2
   名前がstar#1のエミッターを作り、設定ファイルをstarEmitter.jsonにし、
   画面依存にする。パーティクルの画像はstar1.pngとstar2.png。

    (最初は createPEmitter test 設定ファイル名 -1 画像名 でテストしてはどうですか!)


 pausePEmitter {id}
エミッターを一時中断する。

 resumePEmitter {id}
エミッターを再開する。

 stopPEmitter {id}
エミッターを中止する。(パーティクルが全部消えたあと、自動で削除する)

 deletePEmitter {id}
エミッターを中止する。(今すぐ全部のパーティクルを削除する)


 setPEmitterPos {id} {x} {y}
 エミッターの相対位置を(x,y)に設置する。
 x,yのパラメータは数字以外、以下の文字も設定可能です。
  x        : 現在の数値(数値を変えない)
  v<数字>   : 変数番号<数字>の値を代入する  例:v15
  r<#1>~<#2>: #1~#2の間の乱数生成。       例:r30~45
          #1と#2もv<数字>で指定可能。

  例: setPEmitterPos star#1 10 x
    star#1のx座標を10にする。(yは変えない)

 movePEmitterPos {id} {x} {y} {duration} (easingFunction)
 エミッターの相対位置を{duration}フレーム掛けて(x,y)に移動する。
  数値→x: 調整しない
  easingFunction: 移動のアニメーション(徐々に加速、減速等)
  指定が無ければ linear になります
  詳しくは:https://easings.net/ja

 例: movePEmitterPos star#1 -10 20 60 easeOutBounce
    star#1を60フレームかけて(-10, 20)に移動する。
    (アニメ:跳ね返る)


 setPEmitterZ {id} {z}
 エミッターのzレイヤーを変える。
  zレイヤー参照:
   0 : 下層タイル
   1 : 通常キャラの下
   3 : 通常キャラと同じ
   4 : 上層タイル
   5 : 通常キャラの上
   6 : 飛行船の影
   7 : フキダシ
   8 : アニメーション
   9 : マップタッチの行き先(白く光るヤツ)

 例: setPEmitterZ star#1 5
    発射位置を通常キャラの上にする。


 setPEmitterAsLocal {id} {true/false}
 マップにではなく、
  イベントの相対位置(ローカル)にパーティクルを生成するかどうか。
  (trueにすると、キャラが右に一マス移動する
   →全パーティクルも右に一マス移動する)


高度な移動コマンド:
(Q:Queue、R:Routine)

 movePEmitterPosQ {id} {x} {y} {duration} (easingFunction)
  移動コマンドの待ち列に新しい移動を追加する。
  前の移動が終わった後、自動で次の移動が再生される。
  主に移動コマンドを一気に指定したい時に使う。

  例: movePEmitterPosQ star#1 0 20 60 easeOutBounce
    movePEmitterPosQ star#1 20 x 30 easeInBounce

    (0,20)に移動した後、(20,20)に移動する


 movePEmitterPosQR {id} {x} {y} {duration} (easingFunction)
  ループ移動コマンド配列に移動を追加する。

   例: movePEmitterPosQR star#1 -20 20 30
     movePEmitterPosQR star#1 20 20 30
     movePEmitterPosQR star#1 20 -20 30
     movePEmitterPosQR star#1 -20 -20 30

     (-20,20)→(20,20)→(20,-20)→(-20,-20)→(-20,20)→…
     辺の長さが40の正方形に沿って時計回りに移動し続ける。

 clearPEmitterPosQ {id}
  移動コマンドの待ち列をクリアする。

 clearPEmitterPosQR {id}
  ループ移動コマンド配列をクリアする。



■■■マップ・イベントのメモ欄によるエフェクト作成、調整
[SPOILER="マップ・イベントタグ"]

*** 以下の PEmitter を 全部 PE に省略できます。 ***

マップ:
 <PEmitter:id,config,imageNames,...>
  コマンド createPEmitter と同じ効果。
  ただし、 eventId は screen になる。(指定できない)

  例:<PEmitter:star#1,starEmitter,star1,star2>


 <SetPEmitterPos:id,x,y>
  コマンド setPEmitterPos と同じ効果。


 <SetPEmitterZ:id,z>
  コマンド setPEmitterZ と同じ効果。

 <MovePEmitterPosQR:id,x,y,duration,easingFunc>
  コマンド movePEmitterPosQR と同じ効果。


イベント:
 <PEmitter:id,config,imageNames,...>
  コマンド createPEmitter と同じ効果。
  ただし、 eventId は 該当イベントのid になる。(指定できない)

   例:<PEmitter:star#1,starEmitter,star1,star2>

 <SetPEmitterPos:id,x,y>
  コマンド setPEmitterPos と同じ効果。

 <SetPEmitterZ:id,z>
  コマンド setPEmitterZ と同じ効果。

 <MovePEmitterPosQR:id,x,y,duration,easingFunc>
  コマンド movePEmitterPosQR と同じ効果。



ダウンロード
ここ、もしくはGitHubからダウンロードできます。
(ctrl+sで保存)


___________________________

2018/07/12 v0.1.0 ベータ版リリース
                                 

 
画像 #クレジット不要 (していただけたら嬉しい!)
画像 #素材の販売含めて営利可
画像 #改変可(改変後単体再配布も可、ただし説明にこのページのurlを乗せて)
画像 #素材だけの再配布も可(自作宣言はダメ)
 

“MV:プラグイン素材” へ戻る