1. このサイトではcookie (クッキー) を使用しています。サイトの利用を継続した場合、cookieの使用に同意したものとみなさせていただきます。 詳しくはこちらをご覧ください。

パーティクル!プラグイン 導入説明動画追加!

ツキミ2018-07-13に開始した「ツクールMV」の中の討論

  1. ツキミ

    ツキミ ユーザー

    ParticleEmitter.js v0.1.2
    Tsukimi

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


    デモ
    4コマ動画です!

    デモ内使用したパーティクルエフェクト:
    燃え盛る火、花火、土けむり、集中線

    使い方
    事前準備:

    (以下、動画の文字説明です)
    1. まず、

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


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


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

    以上で、事前準備が終わります。
    あとは、たった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}
      ループ移動コマンド配列をクリアする。

    ■■■マップ・イベントのメモ欄によるエフェクト作成、調整
    *** 以下の 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で保存)


                                     
    TODO:

    更新履歴:
    2018/07/13 再更新:高度な移動コマンド(ループ移動など)追加、プレイヤー固定化をエミッター別に設定可能
    また、PEmitterPE に略することができるようになりました
    createPEmittercreatePE
     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}
      ループ移動コマンド配列をクリアする。
    2018/07/13 パラメータ「プレイヤー固定化」、コマンド「setPEmitterAsLocal」追加
    パラメータ「プレイヤー固定化」:
    プレイヤーに設定したエミッターはマップ移動後に消さないべきか否か。
    ONにすると、createPEmitter *** *** -1 *** ...
    で作ったパーティクルエミッターはマップ移動しても消えなくなります。

    コマンド:
     setPEmitterAsLocal {id} {true/false}
     マップにではなく、
      イベントの相対位置にパーティクルを生成するかどうか。
      (trueにすると、キャラが右に一マス移動する
       →全パーティクルも右に一マス移動する)
    2018/07/12 v0.1.0 ベータ版リリース
                                     

    • 製作者: ツキミ
    • 非商用利用: 自由/ 報告、クレジット不要(してくれたら嬉しい!)
    • 商用利用: 自由/ 報告、クレジット不要(してくれたら嬉しい!)
    • 単体再配布: OK(ただし自作宣言はNG)
    • 加工: OK
    • 加工後の単体再配布: OK、でも説明のところにこのページのリンクを書いてください
    • シリーズ: ツクールMV
     
    最後に編集: 2018-07-23
    #1
    平城山 圭, kuro, 神無月サスケ他5人がいいね!しています
  2. master2015hp

    master2015hp ユーザー

    Wow wow wow!!! you again Tsukimi ! :-D
    You did an AWESOME work there, this is absolutely stunning beautiful effects to have in game.
    Many likes to you :)
     
    #2
  3. master2015hp

    master2015hp ユーザー

    Hello tsukimi! I wonder is there anyway to move the Emitter in a specified pattern, ex: triangle, circle, zigzag?
     
    #3
    ツキミ がいいね!しました
  4. ツキミ

    ツキミ ユーザー

    Thank you master2015hp!

    I had a plan to make moveQ(ueue) and moveQR(outine) command,
    if the response of the plugin is not bad I would implement it; but since you had ask for it, I will add it in a few days.

    circle may be a little hard(maybe approximate by a Octagon routine), but triangle and zigzag has no problem.
     
    #4
    master2015hp がいいね!しました
  5. master2015hp

    master2015hp ユーザー

    Awesome, thanks Tsukimi! I have tested more on the pjxi particles editor today, it allows to have more than 1 particle image but all of them share the same Properties :-( it would be awesome if each image has it own properties right?
     
    #5
  6. ツキミ

    ツキミ ユーザー

    Well, a simple way to do this is to make two different config files,
    and create two emitters at the same time and place in the game ... !
    Particle system needs to be fast, and the easiest way to do so is to make particles all have the same properties ... I think the author of pixi-particle is thinking of this. (o・ω・o)
     
    #6
    master2015hp がいいね!しました
  7. master2015hp

    master2015hp ユーザー

    yes i think that's true :-| otherwise the game performance will be bad.
    Btw i have some questions related to your plugin.
    It seem that you assign Particles to map instead of Events/Player.
    * Can you make it someway so i can assign a Particle to Player or Event? So i only need to run the create particle once instead of running it every new maps.

    * Also the particle have a delay time before it catch up the target (as you can see in the video below)
    can you make an option to have the particle move along exactly with the target?
    I want to make an effect like Player is glowing but with particle fell behind like this it look weird :-|
     
    #7
  8. ツキミ

    ツキミ ユーザー

    2018/07/13 更新: パラメータ「プレイヤー固定化」、コマンド「setPEmitterAsLocal」追加
    パラメータ「プレイヤー固定化」
    プレイヤーに設定したエミッターはマップ移動後に消さないべきか否か。
    ONにすると、createPEmitter *** *** -1 *** ...
    で作ったパーティクルエミッターはマップ移動しても消えなくなります。

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

    (*1)
    I added a new feature in plugin parameters just now, so that you can choose "not to delete particle emitter(which is on player) after map transition" or not.
    This feature applying on event is a little bit weird to me, so I didn't put event as an option.

    (*2)
    Do you mean you want player always be in the middle of the circle of particle?
    If so, I add a new plugin command "setPEmitterAsLocal", you may test it out.

    please download again, open plugin parameter dialog and set "staticToPlayer" to true to make the above feature works.
     
    最後に編集: 2018-07-14
    #8
    master2015hp がいいね!しました
  9. master2015hp

    master2015hp ユーザー

    Awesome! thanks Tsukimi! :-D
    I have another questions want to ask you:
    * Is there any way to make an exception for a particle to disappear after Player moved to another map?
    I mean can we set only specified particles to remain on Player?
    like createPEmitter {id} {config} {eventId} {delete on map change true/false} {imageNames ...}
    I think this feature is not very important but it worth to be suggested.

    * I got this error when tried to run this plugin command: movePEmitterPos EM -10 20 60 easeOutBounce
    upload_2018-7-14_14-25-14.png
     
    #9
  10. ツキミ

    ツキミ ユーザー

    2018/07/13 再更新:高度な移動コマンド(ループ移動など)追加、プレイヤー固定化をエミッター別に設定可能
    PEmitterPE に略することができるようになりました
    createPEmittercreatePE
     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}
      ループ移動コマンド配列をクリアする。

    I've added "staticToPlayer" to plugin command, so that you can set dynamically.(please check)

    About the Easing Functions,
    I've done things too fast ;-; Now it is fixed (I think), please download again~

    Also I added "movePEmitterPosQ" & "movePEmitterPosQR" to do more complicate moves.
    And, all PEmitter can be briefed to PE now.
    (createPEmitter → createPE;<PEmitter:...> → <PE> )
    but note that do not use <PEmitter> and <PE> at the same time; please choose one ><
     
    #10
    master2015hp がいいね!しました
  11. master2015hp

    master2015hp ユーザー

    Errm.. i tested all the new functions, they work just A-W-E-S-O-M-E :-D
    However the plugin command: movePEmitterPos EM -10 20 60 easeOutBounce
    is still failed to run and this time it gives me another error log:
    upload_2018-7-14_19-27-11.png
     
    #11
  12. ツキミ

    ツキミ ユーザー

    This time, this time ... ...! >< What an idiot bug ><
    I changed my code to a new style of moving function in order to make queues and routines work, but forgot to adjust the "movePEmitterPos" arguments to match to it, so Q & QR is fine, but original move couldn't work.

    I really believe it's OK now, but may you download again and test it?
     
    #12
    master2015hp がいいね!しました
  13. sion

    sion ユーザー

    まさに探していたプラグインだと思い
    喜び勇んでさっそくDLして試しているのですが
    下記のようなエラーメッセージが出て進みません……
    文字列に関するエラーのようなのですが設定ファイルの名前などに
    使えない文字などが入ってしまっているのでしょうか
    初心者質問で申し訳ありませんが解決策など心当たりありましたらどうか
    アドバイスいただけないでしょうか……?
    [​IMG]
     
    #13
  14. master2015hp

    master2015hp ユーザー

    It worked now! That's awesome Tsukimi! You rock! :-D

    Erm.. suddenly i have an idea in my mind, is it possible to set the particle follow the Screen instead of Player/event?
    For example sometime we want to add an effect that always show up on screen and it will be hard to do so if it was a big map :=/ (and it will be even better if we can specific an anchor point of the screen where the particle be played,
    ex: 1 = screenWidth ; 0.5 = 1/2 screenWidth ... same to Height)
     
    #14
  15. sion

    sion ユーザー

    申し訳ありません
    自主解決できました!

    改めて素晴らしいプラグインを作っていただきありがとうございます。
     
    #15
  16. ツキミ

    ツキミ ユーザー

    返信おそくて、力になれなくてすみません;;
    問題解決できてよかったです!

    I'm not sure did I understand your idea right, but if you set eventId to x or screen, the emitter will be screen based...
    is this what you need?
    x: always show on screen(until been deleted), screen: show on screen only on current map(will auto-delete after map transition)
    the point be played may be set by setPEPos, but it is in coordinate instead of anchor point.
    (examp for default RMMV window size: setPEPos temp 408 312 will set to middle of the screen)
     
    #16
    master2015hp がいいね!しました
  17. master2015hp

    master2015hp ユーザー

    Oh my bad, i missed this part in your Help Section: -V you sure had thought it thoroughly :-D
    AWESOME! Thanks Tsukimi!
     
    #17
    ツキミ がいいね!しました
  18. sion

    sion ユーザー

    本当に基本的なミスだったのでお手を煩わせなくてよかったです。

    もしよろしければなのですが、動画内の花火の設定をどのようにしたか教えていただければありがたいです。
     
    #18
  19. ツキミ

    ツキミ ユーザー

    https://github.com/cji3bp62000/hello-world/tree/master/RMMVplugins/Particle-Configs
    にアップロードしました!
    hanabi.json を DL して、https://pixijs.io/pixi-particles-editor/ でloadをかけて確認できます~
    (パーティクル画像はサイトのデフォ素材の HardRain, particle)
    使う場面によって Blend Mode を Normal とかに変えると良いです!

    ちなみに、setPEPos では値(数値)と x 以外、以下のものも使えます:
     v<数字>   : 変数番号<数字>の値を代入する  例:v15
     r<#1>~<#2>: #1~#2の間の乱数生成。     例:r30~45
              #1と#2もv<数字>で指定可能。  例:rv15~v16

    例えば、 setPEPos *** r0~816 r0~312
    で、画面上半部にランダムに移動できますので、花火の演出との相性がいいです!
    (こちらの機能説明を入れ忘れたので、あらためて補足)
     
    最後に編集: 2018-07-15
    #19
    master2015hp がいいね!しました
  20. sion

    sion ユーザー

    丁寧に回答していただき感謝します!!

    ゲーム完成しましたら、報告させていただきます!
    ありがとうございました。
     
    #20
    ツキミ がいいね!しました

このページを共有