ツキミ
ユーザー
FilterController.js v2.0.10
Tsukimi
Tsukimi
プラグイン紹介
このプラグインは、pixi ビルドインの filters をコントロールするためのプラグインです。
デモ
「まずどんな効果があるか見たい！」という方は、
PIXIのフィルターデモ
↑こちらのデモで遊んでみてください。
使い方
プラグインコマンドと、メモ欄のタグによるエフェクト作成ができます。
まずはプラグインコマンドから説明していきます。
※※※プラグインコマンドのエフェクト作成
まず最初は、作りたいエフェクトを選びます。例として、twist（画面のねじれ）を挙げます。
このエフェクトを作るには、プラグインコマンドで
・createFilter [id] [エフェクト名] [適用ターゲット]
createFilter ねじれ1号 twist 0
を実行するだけでいいです。
ねじれ1号：識別用の名前です。 番号、言葉……お好きな名前でどうぞ！
twist：どのエフェクトかを指定してください。（エフェクトの種類を参照）
0：エフェクトの適用ターゲットは何か。
さらに、エフェクトを イベント・バトラーの位置に参照させる こともできます。
・createFilter [id] [エフェクト名] [適用ターゲット] [イベントID]
イベントIDを指定すると、エフェクトはキャラのマップ位置を参照する。キャラが移動するとエフェクトも連れて移動する。
また、マップ/バトルから出るとエフェクトも消えます。
マップ：
バトル：
各エフェクトの細部パラメータを設定したい時は、
・setFilter [id] [パラメータ……]
setFilter ねじれ1号 408 100 96 10
ねじれエフェクトのパラメータを入力する必要があるので、パラメータを調べましょう。
パラメータが４つあるので、４つとも入力しましょう。
例: setFilter ねじれ1号 v1 v2 r50~v3 10
→ねじれ1号の x,y座標は変数１、２番に、半径は（50~変数３番）の間の乱数に、強度は 10 にする。
パラメータは数字以外、以下の文字も設定可能です。
下に各エフェクトのパラメータ一覧表の画像があるので、ダウンロードしてご覧ください！
setFilter ねじれ1号 408 100 96 10 の実行結果です。
エフェクトの位置が(408,312)から(408,100)になり、半径も96になり、強度も4から10に増えた。
続いて、エフェクトを移動させましょう。
・moveFilter [id] [パラメータ……] [時間(フレーム数)]
・moveFilterQ [id] [パラメータ……] [時間(フレーム数)]
多分皆さんはもう何となく意味が分かると思いますけど、
つまりエフェクトを現在のパラメータから時間(フレーム数)かけて新パラメータに移動する。
試してみましょう。
createFilter ねじれ1号 twist 0
setFilter ねじれ1号 408 312 0 0
moveFilter ねじれ1号 408 100 96 10 120
120フレームかけて、(408,312)から(408,100)に徐々に移動して、半径と強度も０からだんだん増していく。
moveFilter と moveFilterQ の違いは？
・moveFilter は前の移動ルートを取り消し、現在のパラメータから新たに移動ルートを設定する。
・moveFilterQ は移動ルートの列を作り、移動ルートを一つずつ実行していく。
→
setFilter ねじれ1号 0 0 x x
moveFilterQ ねじれ1号 408 312 x x 60
moveFilterQ ねじれ1号 816 0 x x 60
画面左上からスタートし、画面中央に移動してから画面右上に移動する。
画面がエフェクトいっぱいで、そろそろ一部のエフェクトを消したいよね！→
・eraseFilter [id]
eraseFilter ねじれ1号
今すぐねじれ1号を消す。
・eraseFilterAfterMove [id]
eraseFilterAfterMove ねじれ1号
ねじれ1号は移動ルートが全て実行完了後、自動で自分を消す。
フィルターを全部消したい場合は：
・eraseAllFilter
今すぐ全部のフィルターを消す。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
一部のエフェクトには、元々アニメが存在している。
そのアニメの速度を調整するには：
・setFilterSpeed [id] [変化スピード]
該当するエフェクトは godray(陽射し)、shockwave(波動)、oldfilm(古い映像エフェクト)です。
godrayとshockwave のデフォルトスピードは0.01、oldfilmのデフォルトスピードは1。
このエフェクトを作るには、プラグインコマンドで
・createFilter [id] [エフェクト名] [適用ターゲット]
createFilter ねじれ1号 twist 0
を実行するだけでいいです。
ねじれ1号：識別用の名前です。 番号、言葉……お好きな名前でどうぞ！
twist：どのエフェクトかを指定してください。（エフェクトの種類を参照）
0：エフェクトの適用ターゲットは何か。
- 効果ターゲット:
0: 画面
1: 全画面(メッセージウィンドウ含む)
2: マップ（全キャラ+地形タイル）、21: 全マップ（前記+parallax）
3: 地形タイル、31: 背景（タイル+parallax）
4: 全キャラ
4000+x: 特定キャラ(x-> -1: 自キャラ, 0: このイベント, 1以上: 該当イベント)
5: 全ピクチャ
5000+x: 特定ピクチャ (x-> ピクチャ番号)
※ ４の全キャラは非常に重くなるので、お使いは計画的に！
実行したらこうなります：
上は０の画面ターゲット、下は１の全画面（ウィンドウメッセージ含む）ターゲット。
0: 画面
1: 全画面(メッセージウィンドウ含む)
2: マップ（全キャラ+地形タイル）、21: 全マップ（前記+parallax）
3: 地形タイル、31: 背景（タイル+parallax）
4: 全キャラ
4000+x: 特定キャラ(x-> -1: 自キャラ, 0: このイベント, 1以上: 該当イベント)
5: 全ピクチャ
5000+x: 特定ピクチャ (x-> ピクチャ番号)
※ ４の全キャラは非常に重くなるので、お使いは計画的に！
実行したらこうなります：
上は０の画面ターゲット、下は１の全画面（ウィンドウメッセージ含む）ターゲット。
さらに、エフェクトを イベント・バトラーの位置に参照させる こともできます。
・createFilter [id] [エフェクト名] [適用ターゲット] [イベントID]
イベントIDを指定すると、エフェクトはキャラのマップ位置を参照する。キャラが移動するとエフェクトも連れて移動する。
また、マップ/バトルから出るとエフェクトも消えます。
マップ：
イベントID： 1以上：イベントID
0 ：このイベント
-1 ：ゲームプレイヤー
screen：ゲーム画面。イベントID未指定と同じ。
（screenは主にエフェクトをマップ限定にする時に使う）
0 ：このイベント
-1 ：ゲームプレイヤー
screen：ゲーム画面。イベントID未指定と同じ。
（screenは主にエフェクトをマップ限定にする時に使う）
バトル：
イベントID： 1以上：見方キャラ
0 ：このキャラ
-1以下：敵キャラ
screen：バトル画面。イベントID未指定と同じ。
（screenは主にエフェクトをバトル限定にする時に使う）
0 ：このキャラ
-1以下：敵キャラ
screen：バトル画面。イベントID未指定と同じ。
（screenは主にエフェクトをバトル限定にする時に使う）
各エフェクトの細部パラメータを設定したい時は、
・setFilter [id] [パラメータ……]
setFilter ねじれ1号 408 100 96 10
ねじれエフェクトのパラメータを入力する必要があるので、パラメータを調べましょう。
パラメータが４つあるので、４つとも入力しましょう。
例: setFilter ねじれ1号 v1 v2 r50~v3 10
→ねじれ1号の x,y座標は変数１、２番に、半径は（50~変数３番）の間の乱数に、強度は 10 にする。
パラメータは数字以外、以下の文字も設定可能です。
x ： 現在のパラメータ（パラメータを変えない）
v<数字> ： 変数番号<数字>の値を代入する
r<#1>~<#2>： #1~#2の間の乱数生成。
#1と#2もv<数字>で指定可能。
v<数字> ： 変数番号<数字>の値を代入する
r<#1>~<#2>： #1~#2の間の乱数生成。
#1と#2もv<数字>で指定可能。
下に各エフェクトのパラメータ一覧表の画像があるので、ダウンロードしてご覧ください！
setFilter ねじれ1号 408 100 96 10 の実行結果です。
エフェクトの位置が(408,312)から(408,100)になり、半径も96になり、強度も4から10に増えた。
続いて、エフェクトを移動させましょう。
・moveFilter [id] [パラメータ……] [時間(フレーム数)]
・moveFilterQ [id] [パラメータ……] [時間(フレーム数)]
多分皆さんはもう何となく意味が分かると思いますけど、
つまりエフェクトを現在のパラメータから時間(フレーム数)かけて新パラメータに移動する。
試してみましょう。
createFilter ねじれ1号 twist 0
setFilter ねじれ1号 408 312 0 0
moveFilter ねじれ1号 408 100 96 10 120
120フレームかけて、(408,312)から(408,100)に徐々に移動して、半径と強度も０からだんだん増していく。
moveFilter と moveFilterQ の違いは？
・moveFilter は前の移動ルートを取り消し、現在のパラメータから新たに移動ルートを設定する。
・moveFilterQ は移動ルートの列を作り、移動ルートを一つずつ実行していく。
→
setFilter ねじれ1号 0 0 x x
moveFilterQ ねじれ1号 408 312 x x 60
moveFilterQ ねじれ1号 816 0 x x 60
画面左上からスタートし、画面中央に移動してから画面右上に移動する。
画面がエフェクトいっぱいで、そろそろ一部のエフェクトを消したいよね！→
・eraseFilter [id]
eraseFilter ねじれ1号
今すぐねじれ1号を消す。
・eraseFilterAfterMove [id]
eraseFilterAfterMove ねじれ1号
ねじれ1号は移動ルートが全て実行完了後、自動で自分を消す。
フィルターを全部消したい場合は：
・eraseAllFilter
今すぐ全部のフィルターを消す。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
一部のエフェクトには、元々アニメが存在している。
そのアニメの速度を調整するには：
・setFilterSpeed [id] [変化スピード]
該当するエフェクトは godray(陽射し)、shockwave(波動)、oldfilm(古い映像エフェクト)です。
godrayとshockwave のデフォルトスピードは0.01、oldfilmのデフォルトスピードは1。
※※※マップ・イベントのメモ欄によるエフェクト作成
マップ開始時に自動でエフェクトを作り出し、マップから出るとエフェクトを消す。
マップとイベントのメモ欄に所定の書式で記入してください。
<Filter:[id],[エフェクト名],[効果ターゲット]>
- 基本的にプラグインコマンドの createFilter と同じ。
マップのメモ欄に記入すると画面依存に、
イベントのメモ欄に記入するとイベント依存になる。
例: <Filter:発光,godray,0>
<SetFilter:[id],[該当エフェクトのパラメータ ...]>
- setFilterと同じ。
基本的に上の<Filter>で作ったエフェクトを設定する時に
使ってください。
例: <Filter:発光,godray,0>
<SetFilter:発光,-30,0.5,2.5>
<SetFilterSpeed:[id],[変化スピード]>
- setFilterSpeedと同じ。
基本的に上の<Filter>で作ったエフェクトを設定する時に
使ってください。
例: <Filter:発光,godray,0>
<SetFilterSpeed:発光,0.03>
マップとイベントのメモ欄に所定の書式で記入してください。
<Filter:[id],[エフェクト名],[効果ターゲット]>
- 基本的にプラグインコマンドの createFilter と同じ。
マップのメモ欄に記入すると画面依存に、
イベントのメモ欄に記入するとイベント依存になる。
例: <Filter:発光,godray,0>
<SetFilter:[id],[該当エフェクトのパラメータ ...]>
- setFilterと同じ。
基本的に上の<Filter>で作ったエフェクトを設定する時に
使ってください。
例: <Filter:発光,godray,0>
<SetFilter:発光,-30,0.5,2.5>
<SetFilterSpeed:[id],[変化スピード]>
- setFilterSpeedと同じ。
基本的に上の<Filter>で作ったエフェクトを設定する時に
使ってください。
例: <Filter:発光,godray,0>
<SetFilterSpeed:発光,0.03>
※※※エフェクトの種類とパラメータ：
※displacement を使う時に、dispacement用の画像を"DisplacementMap"と命名し、img/picture/ に入れてください。
drive.google.com
フィルターパラメータと初期値.pdf
drive.google.com
上級者向け：カスタマイズの FilterController を作る。
この FilterController.js では、PIXI.Filters の各フィルターのパラメータを一部省略し、
ユーザーに簡単にパラメータを設定できるようにしています。
例えば、RGBSplitFilter には元々RGB各チャンネルのx,yのズレ、計３x２=６つのパラメータが設定できますが、
FilterController.jsではパラメータをズレの半径と角度の２つに削減しました。
今回は、６つのパラメータが設定できる、新しい FilterController "rgbsplit2" を作りましょう。
設定すべきものは３つ：
１．rgbsplit2 に対応する PIXI.Filter
２．rgbspilt2 のカスタマイズ パラメータ
３．実際の Filter Object を更新する function
コードは以下になります：
一行目・var newFilterName = "...";：
新しい FilterController の名前を設定する。
気をつけて頂きたいのは、名前は小文字しか使えません。"RGBSplit2"とかはダメです。
二行目・Filter_Controller.filterNameMap ：
新 FilterController と対応するPIXI.Filterをタイアップする。
三行目・Filter_Controller.defaultFilterParam ：
新 FilterController のカスタマイズパラメータ。
6つのパラメータを使いたいので、要素が６つある配列にしました。
五行目・Filter_Controller.updateFilterHandler[...] = function(filter, param) { ... };：
実際の RGBSplitFilter を更新する function。
filter は Object、paramはさっき設定されたカスタマイズパラメータの配列。
以上で新 FilterController の設定が完了です！
このコードを適当のtxtファイルにいれて、識別子を.jsに変えてプラグインマネージャでONにしたら追加完了です。
createFilter 新フィルター rgbsplit2 0
setFilter 新フィルター 10 10 -5 -5 0 0
などのプラグインコマンドで制御可能です。
もしフィルター生成時にしか設定する必要のない（updateで処理したくない）パラメータがあったら：
Filter_Controller.filterSpecialInit で設定できます。
例えば、DisplacementFilterは Sprite が必要なので、
などで設定できます。
ユーザーに簡単にパラメータを設定できるようにしています。
例えば、RGBSplitFilter には元々RGB各チャンネルのx,yのズレ、計３x２=６つのパラメータが設定できますが、
FilterController.jsではパラメータをズレの半径と角度の２つに削減しました。
今回は、６つのパラメータが設定できる、新しい FilterController "rgbsplit2" を作りましょう。
設定すべきものは３つ：
１．rgbsplit2 に対応する PIXI.Filter
２．rgbspilt2 のカスタマイズ パラメータ
３．実際の Filter Object を更新する function
コードは以下になります：
コード:
var newFilterName = "rgbsplit2";
Filter_Controller.filterNameMap[newFilterName] = PIXI.filters.RGBSplitFilter;
Filter_Controller.defaultFilterParam[newFilterName] = [1,-1,-1,0,0,1];
Filter_Controller.updateFilterHandler[newFilterName] = function(filter, param) {
filter.red = [param[0], param[1]];
filter.green = [param[2], param[3]];
filter.blue = [param[4], param[5]];
};新しい FilterController の名前を設定する。
気をつけて頂きたいのは、名前は小文字しか使えません。"RGBSplit2"とかはダメです。
二行目・Filter_Controller.filterNameMap ：
新 FilterController と対応するPIXI.Filterをタイアップする。
三行目・Filter_Controller.defaultFilterParam ：
新 FilterController のカスタマイズパラメータ。
6つのパラメータを使いたいので、要素が６つある配列にしました。
五行目・Filter_Controller.updateFilterHandler[...] = function(filter, param) { ... };：
実際の RGBSplitFilter を更新する function。
filter は Object、paramはさっき設定されたカスタマイズパラメータの配列。
以上で新 FilterController の設定が完了です！
このコードを適当のtxtファイルにいれて、識別子を.jsに変えてプラグインマネージャでONにしたら追加完了です。
createFilter 新フィルター rgbsplit2 0
setFilter 新フィルター 10 10 -5 -5 0 0
などのプラグインコマンドで制御可能です。
もしフィルター生成時にしか設定する必要のない（updateで処理したくない）パラメータがあったら：
コード:
Filter_Controller.filterSpecialInit["rgbsplit2"] = function(filter) {
};例えば、DisplacementFilterは Sprite が必要なので、
コード:
Filter_Controller.filterSpecialInit["displacement"] = function(filter) {
var sprite = new Sprite(ImageManager.loadPicture("displacementMap"));
filter.map = sprite._texture;
};ダウンロード
ここ、もしくはGitHubからダウンロードできます。
(ctrl+sで保存)
2020/08/31 更新：
フィルター３つ追加（bevel、tiltshift、glitch）
eraseAllFilter コマンド追加
ちょい最適化
2018/06/12 プチ更新：
適用ターゲット追加：
21：全マップ（キャラ+タイル+parallax）
31：背景（タイル+parallax）
2018/03/13 11:38 プチ更新：
内蔵する PIXI.filters のバージョンが v2.6.0 に。特に機能に変化なし。
2018/02/26 17:50更新：色々なフィルター追加、適用ターゲット追加
・フィルターを9つほど追加。
・単一キャラ、単一ピクチャに適用できるようになった。
・単一キャラ、単一ピクチャに適用できるようになった。
- 効果ターゲット:
0: 画面
1: 全画面(メッセージウィンドウ含む)
2: マップ（全キャラ+地形タイル）
3: 地形タイル
4: 全キャラ
4000+x: 特定キャラ(x-> -1: 自キャラ, 0: このイベント, 1以上: 該当イベント)
5: 全ピクチャ
5000+x: 特定ピクチャ (x-> ピクチャ番号)
※ ４の全キャラは非常に重くなるので、お使いは計画的に！
0: 画面
1: 全画面(メッセージウィンドウ含む)
2: マップ（全キャラ+地形タイル）
3: 地形タイル
4: 全キャラ
4000+x: 特定キャラ(x-> -1: 自キャラ, 0: このイベント, 1以上: 該当イベント)
5: 全ピクチャ
5000+x: 特定ピクチャ (x-> ピクチャ番号)
※ ４の全キャラは非常に重くなるので、お使いは計画的に！
・内蔵する PIXI.filters をv2.5.0に更新
・全体のコードを更新
・setFilter, moveFilterなどのパラメータ設定にゲーム変数、乱数指定可能。
・全体のコードを更新
・setFilter, moveFilterなどのパラメータ設定にゲーム変数、乱数指定可能。
0: 画面、1: 全画面、 2: マップ（全キャラ+地形タイル）、3: 地形タイル、 4：全キャラ、5：全ピクチャ
※４の全キャラは非常に重くなるので、お使いは計画的に！
※４の全キャラは非常に重くなるので、お使いは計画的に！
2018/01/04 12:24更新： バトル中、キャラID指定すると、エフェクトを該当バトラーに付ける機能を追加。
2018/01/03 23:05更新： バグ修正しました…… 今はDL可能です。（まだバグがありましたらお教えください OTZ）
2018/01/03 20:37更新： 重大バグ修正中。ダウンロードしないでください。
2018/01/03 更新：moveFilterQが正常に機能しないバグを修正しました、申し訳ありません。
- 製作者: ツキミ
- 非商用利用: 自由/ 報告、クレジット不要（してくれたら嬉しい！）
- 商用利用: 自由/ 報告、クレジット不要（してくれたら嬉しい！）
- 単体再配布: OK（ただし自作宣言はNG）
- 加工: OK
- 加工後の単体再配布: OK、でも説明のところにこのページのリンクを書いてください
- シリーズ: ツクールMVhttps://drive.google.com/file/d/1lHsa9n_vkAO8YGgUaf8hWKJNtkuPuUDY/view?usp=sharing
最後に編集:
