解決)部分的に透過？された画像表示

[こめかみ]

上手く説明しづらいのですが、
・マップを隠すように画像(障子)を左右から開閉するように移動させたい
・障子の背景にはシルエット(笹や月)が透過？している
・移動するのはあくまで障子だけでシルエットの位置は固定
・障子が覆いかぶさった部分のみシルエットを表示したい(マップには表示したくない)

障子とシルエットを統合した画像を複数枚用意してアニメーション風にする以外で
上記を行いたいのですが、何か方法はあるでしょうか？

[this]

面白い演出ですね。
純粋に興味がわきましたが、マップとピクチャの間柄でその表現は難しいかと思います。

一案として、実行時に現在マップをピクチャ化してしまう方法が考えられます。

障子| マップ画像 |障子

【ピクチャ番号（表示階層）】
障子（右）：1
障子（左）：2
マップ画像：4
月と笹：3

月と笹とマップ画像は最初から表示させておきます。
（月と笹はマップ画像の後ろに隠れた状態）
障子を閉めるタイミングに合わせてマップ画像の両端をトリミングしていくと
障子より上の月と笹が少しずつ現れます。

[こめかみ]

this様
ご回答ありがとうございます。
障子に限らずなのですが、扉のようなものが閉まると、そこにシーンに合わせたイラストが浮かび上がってるという表現が行いたく質問させて頂きました(シーンやマップの切り替えの合間にアイキャッチ風に使用したい次第です)

ご提案頂いた方法への質問なのですが
・表示する予定のマップを事前にスクショなりをしてからピクチャ化ということでしょうか？
・ピクチャの端をトリミングしていくというのは、動的に行う方法があるのでしょうか？
それとも障子の動きに合わせて端を徐々に削ったものを複数枚用意するということでしょうか？

理想としてはリアルタイムの好きなタイミングで障子＋シルエットの開閉を表示させたかったのですが、仕様上難しいでしょうか？
"プレイ中のゲーム画面をリアルタイムで(任意のトリミングサイズで)スクショしてピクチャに反映できるプラグイン"があればと思ったのですが、こちらも簡単には実装できない内容でしょうか？

面白い演出ですね。
純粋に興味がわきましたが、マップとピクチャの間柄でその表現は難しいかと思います。

一案として、実行時に現在マップをピクチャ化してしまう方法が考えられます。

障子| マップ画像 |障子

【ピクチャ番号（表示階層）】
障子（右）：1
障子（左）：2
マップ画像：4
月と笹：3

月と笹とマップ画像は最初から表示させておきます。
（月と笹はマップ画像の後ろに隠れた状態）
障子を閉めるタイミングに合わせてマップ画像の両端をトリミングしていくと
障子より上の月と笹が少しずつ現れます。

[人喰いマカロン]

thisさんがご提案されていることを実現させるのは相当難しいというか無理がありますね。
そういったプラグインも提供されていないですし、そもそも何をどうしたら動的にマップのスクショを取ったり、
動的にトリミングできるというのでしょうか。

そんなややこしいことをせずとも、実現させる方法はあります。
ちと美しくない方法ですし、ファイル容量は増えてしまいますが、
ピクチャの移動は使わずに、すべてアニメーションとして、一枚ずつ描画していく方法なら
それっぽく見えるのではないでしょうか。

要するに、こみかみさんが上げてくださっているサンプル画像を、
もっとフレーム数を増やして小刻みに描画するのです。

かなり力技ですが、フレーム枚数を増やして描画速度を早くすれば、
ヌルヌル動いているように見えると思います。

[Plasma Dark]

面白そうだったのでピクチャでピクチャをマスクするプラグインのサンプルを書いて試してみました。
スクショを貼っておきますが、やりたいことはこういうことで合っているでしょうか。

そもそも何をどうしたら動的にマップのスクショを取ったり、
動的にトリミングできるというのでしょうか。

前者はメニュー画面を開くためにマップのスクショを取る方法が標準搭載されているので、それを使えば実現可能です。ピクチャとして利用するにはひと工夫必要ですが。
後者はpixi.jsのmaskを利用することで比較的手軽に実現できます。
私が書いたプラグインのサンプルもその方法を使っているので、よろしければ参考にしてください。

[Plasma Dark]

書き込みひとつにつき4枚までしか画像はアップロードできないのでした。
先ほどの続きと、イベントコマンドです。

[こめかみ]

人喰いマカロン様
アニメーションで作ろうかとも思ったのですが、複数のパターンを作るとなった時に手間が掛かりそうだという理由で、今回はPlasma Dark様のプラグインを利用させて頂こうと思います。
ご回答頂いたのに申し訳ありません。
(アニメーションの場合は一度作ってしまえばあとは流すだけというメリットもあるので、ケースバイケースで使い分けれればと思います)

[こめかみ]

Plasma Dark様
わざわざプラグインを作って頂きありがとうございます。
想定通りの表現を行うことができました！
１つめ(龍のシルエット)は左右の障子画像でそれぞれ処理を行ってできました。
２つめ (女の子)のように、色調は変えず帯画像の縦移動に映し込むなど、使い道が色々とありそうです。

※とは言うものの、どういう原理で処理されているのかイマイチ理解が及ばずで
２つめの水色の帯なのですが、これを濃い色(帯の枠の青色)にしたり、透明にすると映らなくなってしまいます。
赤に塗ると映り込みました。重ねる画像間の色調や明るさによって変わるのでしょうか？

[this]

解決して何よりです。
さすがPlasma Darkさんですね。

[Plasma Dark]

２つめの水色の帯なのですが、これを濃い色(帯の枠の青色)にしたり、透明にすると映らなくなってしまいます。
赤に塗ると映り込みました。重ねる画像間の色調や明るさによって変わるのでしょうか？

pixi.jsをさほど読み込んでいないので、挙動からの推測になりますが、恐らくマスク画像のRGB値のRが大きい部分ほど不透明度が大きくなる（赤要素が大きいほど、くっきりと映る）仕様なのだと思います。

白は(255, 255, 255) でR = 255ですので、不透明にならずに表示されます。
黒は(0, 0, 0) で R = 0ですので、不透明度0となって表示されなくなります。