幾重にも

１２番目のパズルのアイデアが固まった。複数のパネルが重なりあうよう移動でき、重なる部分の絵柄が変化する。正しい配置と重なり順を求めていく。

シェーダーで制御

重なる部分の描画は順序制御や複数の条件判定があり、本来スクリプトで制御すべきである。しかしシェーダーでどこまでやれるか実験的な意味もこめて実装する。

今回のパズルは、重なるパネルの画像が重なって表示されるが、２枚以上重なった部分はその下のパネルは表示されない、というもの。例えば、パネルが３枚で前面から A,B,Cとし、その画像が Ap,Bp,Cp、パネルの形状を示すマスク画像が Am,Bm,Cmのとすると、表示画像を式で書くと以下のものとなる。

表示画像＝ Ap | Bp | (Cp & ~(Am & Bm))  　ただし '|'は論理OR '&'は論理AND '~'は論理NOT

パネルが４枚の場合以下の式となる。

表示画像＝ Ap | Bp | (Cp & ~(Am & Bm)) | (Dp & ~((Am & Bm)|(Am & Cm)|(Bm & Cm)) )

スクリプトで制御

パネルはクリックされると最前面に移動する。A,B,C,Dの順のとき、Bをクリックすれば B,A,C,Dの順に、さらにCをクリックすれば C,B,A,Dの順となる。

この情報はスクリプトからシェーダーへ渡す必要がある。当初、重なり順に合わせて画像とマスク画像を入れ替えることを考えたが、画像に対し複数の条件分岐が入り非効率となる。そのため、スクリプトから重なり順と位置を指定し、シェーダー内でパネル毎のオフセットを計算し、１枚の画像から切り出す方式とした。

シェーダーグラフの結果

最終的には５枚のパネルを制御するためシェダーグラフはだいぶ複雑となった。

２つのカスタムファンクションと１つのサブシェーダー（×５）からなる。カスタムファンクションは、順序計算や表示画像の処理がグラフで書くと視認性が下がるためスクリプト処理とした。

サブシェーダー内にもカスタムファンクションを含む。

できるだけ条件分岐を避け、計算で処理できるようにしたが、処理段数は多いため遅めの実機で性能確認していく。