Multiple layering

We have an idea for the 12th puzzle. Multiple panels can be moved so that they overlap, and the pattern of the overlapping part changes. The player seeks the correct placement and stacking order of the panels.

Controlled by shaders

Rendering of overlapping parts requires order control and multiple conditional judgments, and should be controlled by a script. However, we will implement it with an experimental meaning to see how far we can go with the shader.

In this puzzle, the images of the overlapping panels are displayed overlapping, but the panels below are not displayed when two or more panels overlap. For example, assume that there are three panels A, B, and C from the front, the images thereof are Ap, Bp, and Cp, and the mask images representing the shapes of the panels are Am, Bm, and Cm. A display image is expressed by the following formula.

displayImage＝ Ap | Bp | (Cp & ~(Am & Bm))  　'|':Logical OR, '&':Logical AND, '~':Logical NOT

When there are four panels, it is expressed by the following formula.

displayImage＝ Ap | Bp | (Cp & ~(Am & Bm)) | (Dp & ~((Am & Bm)|(Am & Cm)|(Bm & Cm)) )

Controlled by script

A panel moves to the front when clicked. If the order is A, B, C, D, clicking B will change the order to B, A, C, D, and clicking C will change the order to C, B, A, D.

This information needs to be passed from the script to the shader. At first, we thought of replacing the image and the mask image according to the overlapping order, but it would be inefficient because multiple conditional branches would be applied to the image. Therefore, we decided to specify the overlapping order and position from the script, calculate the offset for each panel in the shader, and cut it out from one image.

Shader graph result

In the final form, the Shader Graph is quite complicated because it controls 5 panels.

Graph consists of two custom functions and one subshader (x5). For custom functions, script processing was used because order calculations and display image processing would be less visible if written in graphs.

Include custom functions in subshaders as well.

We tried to avoid conditional branching as much as possible so that it can be processed by calculation, but since the number of processing stages is large, we will check the performance on a slower actual device.