ツクールMVのopacityの注意点もといAlphaFilterを使いたかった話

はいどーもこんばんは、透明になって消えたいニートです。
本日はツクールMVでAlphaFilterを使いたかった話をしていきたいと思います。
最後にサンプルコードも載せますよ。

AlphaFilterってなんやねん

AlphaFilterとはその名前の通り、Spriteのalpha値を変更するためのフィルタです。
これは最新版のPixiJSには実装されているのですが、ツクールMV1.6.1に使われているPixiJSには実装されていませんでした。
「でもSpriteのアルファ値を変更するって、opacityがあるじゃない」と思うかもしれません。
ですがこれ、ちょっと問題が発生する場合があるんです。
順番に見ていきましょう。

opacityの問題点

opacityの問題点を把握するためにまずは以下のコードをプラグインとして導入してください。

導入後、ゲームを実行して以下のように操作してください。

1.マップ画面に行く
2.キーボードのCtrlキーを押す
3.画像が表示される
4.画像が表示されたらShiftキーを長押しする

「画像が表示されて、透明になって消えただけだけど、なにか問題が?」と思うかもしれません。
ですが緑色の敵キャラの「目」の部分をよく見てください。
なにか消えるのが遅くなっているように見えませんか?
この画像だとあまり気にならないかもしれませんが、例えば「のっぺらぼうの顔」「目」「鼻」「口」と4つのパーツにわけているとき、「のっぺらぼうの顔」が先に消えかけているのに「目」が最後まで残っているように見えて違和感が出るでしょう(これと似た事例が実際にありました)。
これは「レイヤーが同一なため起こる」問題のようです。すなわちContainer(Sprite)はLayerの役割を持つわけではないために起こるというのです。

僕は絵に詳しくないのでこの話を聞いてもぶっちゃけよくわからなかったのですが、解決方法はあります。
ズバリ別レイヤーで表示させるか、フィルタを利用するのです。
今回はフィルタを利用しようと思います。

さてフィルタと言っても、何か特殊なプログラムを組む必要はありません。
PixiJSに用意されてある機能(ツクールMVもPixiJSを利用して作られている)を使うだけで大丈夫です。
具体的にはAlphaFilterですね。
ただいくつか問題がありますので、これも見ていきましょう。

ツクールMVの最新バージョンにはAlphaFilterが存在しない

最初に書いたように、ツクールMV1.6.1に使われているPixiJSにはAlphaFilterが実装されていません。
これを解決するには以下の二種類の方法があるかと思います。

1.手動でPixiJSを最新版に更新する
2.AlphaFilterを自分で実装する

お手軽なのは1ですね。
これは例えばhttps://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.jsなどから新しいPixiJSをダウンロードし、js/libsフォルダに入れて更新するだけです。
これでもうAlphaFilterを自由に使うことができます。
ただ問題は、PixiJSを更新すると動かなくなるプラグインが出てくるかもしれないことです。
もともと想定されているバージョンと違うので、これは仕方がないですね。

AlphaFilterを自分で実装する

というわけで影響範囲を狭めるために僕がオススメするのは「AlphaFilterを自分で実装する」方法です。
具体的なコードはGitHubで書いてくださっている方がいます。
あるいは実際のPixiJSのコードを見てもよいかもしれません。
上記のURLで書かれているコードとは若干違いますが(大事な部分の処理は一緒です)、僕は以下のようなコードを書きました。

これを使って先ほどのサンプルプログラムを改造してみます。
具体的には以下のようになります。

詳しいコードの説明は割愛しますが、2点だけ大事な部分に触れておきます。
まずはここ。

ここでAlphaFilterを追加しています。
1というのは透明度のことです(0~1の範囲で指定。opacityは0から255なので注意)。
そしてここ。

opacityで透明度を操作するのではなく、追加されたフィルタのalphaプロパティの値で透明度を変更します。
あとは実際にゲームを実行してみてください。
左側に表示されている敵キャラに比べ、右側に表示されている敵キャラの方が目の部分が綺麗に消えているのがわかりますでしょうか?

追記:こまさんから以下のような情報をいただきました。

コードはそのままにしていますが、参考までにどうぞ!

終わりに

いかがでしたでしょーか。
微妙な違いではありましたが、依頼で作成したプログラムは顔グラフィック(正確には立ち絵ですが)が重要かつ頻繁にフェードイン・フェードアウトするものなので、目だけが残っているとそれなりに違和感がありました。
最初は「こんなもんじゃないのか?」と思ったのですが、改めて調べてみるとAlphaFilterなんてものがあったのでこれを利用して修正してみた感じですね。

Spriteを直接どうこうしてゲームを作っている方は少ないかもしれませんが、はまったことのメモとして書いておきました。
ほなそんな感じでまた。
お仕事も募集中です。

おまけ

おまけでPixiJSのフィルタを使えるようにする方法を紹介しておきます(デモサイトもあるようです)。

1.以下のURLからフィルタを落としてくる(https://cdn.jsdelivr.net/npm/pixi-filters@2.6.1/dist/pixi-filters.js
2.普通に導入(あるいは全部コピペしたのをプラグインの一部として置いておく。ライセンスも必ず)
3.PIXI.filters.xxxxのxxxに使いたいフィルタ名を入れればOK

なお、上記で紹介しているURLのコードにはAlphaFilterは含まれていませんでした。

フォローする