【RPGツクールMV】フィルターのビルド方法
RPGツクールMVアドベントカレンダー2017 11日目の記事です。
普段はUnityでの開発やってますが、時々気まぐれでコアスクリプトを眺めて色々いじったりしています。
さて、今回のネタですが予定では「吉良ｘボア誘い受けメソッド」について書く予定でしたが、「ピクチャ 合成方法 オーバーレイ」でググると既に紹介していただいてる記事があるので、予定を変更してフィルターについて書きます。
内容はかなりプログラマー寄りですが、理解し、既存のものを使えるようになるだけでグレースケール、セピア調、空間の歪み、ぼかしなどなど、表現の幅がかなり広がるはずです。
目次
なにが出来るの？
画面の描画に関してまぁ色々と出来ます。グレースケールをかけたり、画面をセピア調にしたりなどです。また、pixi.jsのフィルターDemoも参考になります。
フィルタの種類にもよる気はしますが基本的にWebGLの仕組みを利用しているため、WebGL非対応な環境では動かない場合があります。フィルターのかけ方については過去の記事やググると海外の方がプラグインを作っているのでそちらを参考にして下さい。
RPGツクールはpixi.jsで出来ている
フィルターの説明する前にRPGツクールMVが何で出来ているかという話が必要になります。これはそれほど難しい話ではなく「pixi.js」というjavascriptの2D描画ライブラリを使用しています。pixi.jsを利用することでRPGツクールMVはマルチプラットフォーム、高速な描画を実現しています。ちなみに高速な描画については下記URLから確認出来ます。
クリックすると大量のオブジェクトが生成されますがかなり安定して60FPSが維持できています。また、pixi.jsではWebGLを使用して描画しています*1。WebGLってなにって話なんですが簡単に言うとGPUを通して描画しているわけです。
ここまでが前置きです。
フィルターはpixi.jsの機能
話が前後してしまいましたが「MVはpixi.jsで出来ているよ」と「pixi.jsのフィルターDemoが参考になるよ」という話をしました。つまり「MVpixi.jsの機能を使えるよ」という話になるわけです。で、前述のDemoを見るとかなりいろいろな事をやれるのがわかると思います。夢が広がってきました。
フィルターのビルド準備
いよいよフィルターのビルド方法の話に入ろうと思うわけですが、実は公式で公開されてます。RPGツクールのではなく、pixi.jsのほうで。下記のgithubリポジトリがそれに当たります。
GitHub - pixijs/pixi-filters: A collection of filters for pixi.js v4
このリポジトリを利用してビルドをすることが出来ます。
リポジトリを見るとjsファイルが入っていますが、実はそれ単体で動いているものではないのでRPGツクールMVで使用できるようにするためビルドします。そのビルドの準備をしていきましょう。
1.npmをインストールする
pixi-filtersリポジトリではnpmを使用しているのでnpmをインストールする必要があります。npmはnode.jsのパッケージ管理ソフトなんですが、話が複雑になるのでここでは割愛します。
インストール方法は下記URLから自分の環境にあったものをダウンロードして実行すれば大丈夫なはずです。この辺記憶が定かじゃないです。
2.リポジトリをcloneする
gitを使わない人には慣れない言葉かもしれませんが、その場合はgithubからダウンロード、解凍後に適当なフォルダに入れてください。
3.npmを使ってパッケージを読み込む
次にCUI環境で配置したフォルダまで移動します。CUIはWindowsならPowershell、Macならターミナルとかで大丈夫です。愛用している環境があるならそれで大丈夫です。
移動したら
npm install pixi-filters
と入力してEnterキーを押すと
> npm install pixi-filters
E:\workspace\rpgmaker\pixi-filters
`-- pixi-filters@2.3.1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
こんな感じの文字が表示されると思います。僕が実行した感じだと2つWarningが出ていますが、パッと見問題無さそうなのでこれくらいはスルーです。
取り敢えずこれでビルド準備ができました！
ビルドする
ビルドする環境が整ったのでビルドしていきましょう。フィルターに関しては自作することも可能ですが、話が長くなりすぎるので別の機会にしたいと思います。今回はダウンロードしたファイルに含まれているものをそのままビルドします。後はリポジトリ内に書いてある説明通りなんですがいまいち分かりにくいと思うので説明していきます。
ビルドするのに先程使用したCUI環境を使います。閉じてしまった場合は再度開いてフォルダまで移動しましょう。
1.npm installする
npmはもうインストールしたやんけ！！
いや、そうではなく。最新のpixi-filterリポジトリではlernaというのを利用しているので読み込ませておく必要があるのです。
npm install
これを実行すると
> npm install
> undefined postinstall E:\workspace\rpgmaker\pixi-filters
> npm run bootstrap
> @ bootstrap E:\workspace\rpgmaker\pixi-filters
> lerna bootstrap --hoist
lerna info version 2.5.1
lerna info Bootstrapping 26 packages
lerna info lifecycle preinstall
lerna info Installing external dependencies
lerna info hoist Pruning hoisted dependencies
lerna info hoist Finished pruning hoisted dependencies
lerna info hoist Finished installing in root
lerna info Symlinking packages and binaries
lerna info lifecycle postinstall
lerna info lifecycle prepublish
lerna info lifecycle prepare
lerna success Bootstrapped 26 packages
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
こんな感じの結果が表示されると思います（またWarning出てるけど気にしない）。
2.取り敢えず全部ビルド
取り敢えずフォルダ内にあるフィルターを全てビルドしてみましょう。
npm run build
これを実行して暫く待つとビルドが完了します。
lerna success run Ran npm script 'build' in packages: lerna success - pixi-filters lerna success - @pixi/filter-advanced-bloom lerna success - @pixi/filter-ascii lerna success - @pixi/filter-bloom lerna success - @pixi/filter-bulge-pinch lerna success - @pixi/filter-color-replace lerna success - @pixi/filter-convolution lerna success - @pixi/filter-cross-hatch lerna success - @pixi/filter-dot lerna success - @pixi/filter-drop-shadow lerna success - @pixi/filter-emboss lerna success - @pixi/filter-glow lerna success - @pixi/filter-godray lerna success - @pixi/filter-multi-color-replace lerna success - @pixi/filter-outline lerna success - @pixi/filter-pixelate lerna success - @pixi/filter-rgb-split lerna success - @pixi/filter-shockwave lerna success - @pixi/filter-simple-lightmap lerna success - @pixi/filter-tilt-shift lerna success - @pixi/filter-twist lerna success - @pixi/filter-zoom-blur lerna success - @tools/demo lerna success - @tools/screenshots
最終的にこんな感じになるかと思います。ビルドが完了するとRPGツクールMVでも利用できる形でjsファイルが出力されるので、それをプラグインとして読み込めば利用することが出来ます。RPGツクールMVで必要なjsファイルの位置ですが
pixi-filters/ascii/lib/filter-ascii.js
とかになります。他にも-esがついているものや.mapファイルもありますが、それらは不要です。
3.個別にビルド
毎回全部ビルドすると時間がかかるので個別にビルドをする方法も紹介します。
npm run build -- --scope "@pixi/filter-ascii"
これで特定のフィルターをビルドすることが出来ます。また、
npm run build -- --scope "{@pixi/filter-ascii,@pixi/filter-emboss}"
このように{}で囲んで,区切りで指定することで任意の複数のフィルターをビルドすることが出来ます。
リポジトリを見ると他のコマンドも書いてありますが基本的には全ビルド、個別ビルドが出来れば問題なしです。
おまけ：フィルターの構成要素
本題であるビルド方法についてはこれで完了ですが、折角なのでビルドする前のフィルターってどうなっているのか見ておきましょう。これを読めば自作フィルターが作れるというわけでは無い点はご容赦下さい。ちょっとシェーダーに関する専門的な話が入ります。シェーダーという言葉が急に出てきましたがフィルターのようなものは一般的（？）にはシェーダーと呼ばれます。
要となるファイルは
- ○○.vert
- ○○.frag
- (フィルター名).js
ファイルの3種類になります。3ファイルではなく3種類としたのは、それぞれ複数あったりvertファイルは必要無かったりする場合があるためです。
1.vertファイル
vertはvertexの略で、シェーダーにおける頂点シェーダーを記述したファイルになります。頂点は3Dモデリングする時に出て来るあの頂点です。図形の頂点と言った方が分かりやすいかもしれません。その頂点位置の計算方法やパラメータを記述したものになります。
RPGツクールMVでは画像をペタッと貼ってるだけじゃないの？と思うかもしれませんが、細かく見てみると実は3D的に板上（平面的な）ポリゴンに画像を載せています。その為、四角形になるように頂点が配置されています。3Dモデルを使う場合は様々な計算をここに載せることが出来ますがRPGツクールMVの場合は2D（四角形）なので基本的には拡大・縮小の用途で使います。拡大縮小しない場合はこのファイルは不要になります。
2.fragファイル
fragはfragmentの略で、シェーダーにおけるフラグメントシェーダーを記述したファイルになります。頂点シェーダーでは頂点に関する計算を行いますが、フラグメントシェーダーでは「色」に関する計算を行います。フラグメントシェーダーにもパラメーターを含めることが可能です。このファイルの計算方法を色々と工夫することで例えばグレースケールだったりセピア調だったりにすることが出来ます。
RPGツクールでフィルターを作る場合、基本的にはフラグメントシェーダーを使用することが目的になるはずです。
3.(フィルター名).jsファイル
最後にjsファイルです。非常に紛らわしいですが、こいつ単体では機能しないので、こいつをプラグインとして読み込んでも意味がありません（そのためのビルドです）。
こいつは何をしているかというと、vertやfragでそれぞれの計算やパラメータを記述したので、実際にそれらのファイルをどう使うかをまとめたファイルと思って下さい。要するにこのjsファイルが有り、その下にvertファイルやfragファイルがあるという状況です。
最後に
「取り敢えずビルドしてみる」を目標に記事を書いてみましたがいかがでしたでしょうか（おまけは少し難しい内容になりましたが）。少し難しい内容で普段やらない作業ばかりなので大変だとは思いますがゲーム開発の上で「表現の幅が広い」というのは重要なことになります。理解はせずとも取り敢えずコマンド叩いて自分でビルドしてみるだけでも力になると思うので是非お試し下さい。
何かわからないことが有れば@weakboarの方にリプしてもらえれば暇な時に答える事も可能ですので、どうしてもわからないことがあれば是非お聞き下さい。
