Skip to main content

Magic 2D Window

note

This template was developed using Effect House 2.8.0.

The Magic 2D Window template leverages custom materials and post-processing effects to create a cutout filter effect. You can change the shape of the window and manipulate its position by touching the screen.

magic 2d window demo

How to Use This Template

Open Effect House, go to Templates, click the Screen tab, and select the Magic 2D Window template.

magic 2d window template

Hierarchy

The Hierarchy panel contains two main render groups. Inner Post Effects controls the appearance of the filter within the 2D window. Only one post effect should be activated at a time in the Hierarchy panel. 2D Window Effects contains the 2D cutout that encloses the filter. There is also a render group that provides tips on how to modify the effect.

magic 2d window hierarchy

Assets

In the Assets panel, the 2DWindow folder contains the assets for the 2D filter cutout. Expand the Materials folder to access Window_Mat [EDIT ME], which is the custom material assigned to the Custom Window Image [EDIT ME] object by default. The Subgraph folder contains the DraggableImage subgraph, and the Textures folder houses different shape textures for the 2D window.

Under InnerPostEffects, the Materials folder contains the BlackWhite_Mat, SimplePopArt_Mat, and X-Ray_Mat materials. BlackWhite_Mat and SimplePopArt_Mat can be viewed in Material Editor. The RenderTextures folder contains the InnerPostEffect_RT responsible for rendering the effect inside the 2D window.

magic 2d window assets

Window Material

Click Window_Mat [EDIT ME] in the Assets panel to view the built-in window material in Material Editor.

window_mat asset

The Window Effect Controller subgraph takes three different texture inputs. Inner Tex accounts for the effect inside the 2D window, Outer Tex controls the preview outside the 2D window, and Mask Tex refers to the shape of the 2D window.

window_mat visual scripting

The following diagram illustrates the subgraph's base logic.

subgraph diagram

Customize the Magic 2D Window

Add an Inner Post Effect

You can add different post-processing effects to the 2D window. Click + Add object in the Hierarchy panel, go to Post Effect, and then select Custom.

tip

Instead of using a material-based Custom post effect, you can also add a Filter object to Inner Post Effects.

Drag the new Custom object into the Inner Post Effects render group, then delete its Post Effects render group.

add new custom object

Click the Custom object, then go to the Inspector panel. To make your custom post-processing effect appear within the 2D window, you must assign the appropriate render texture. Expand the Camera component, click its Render Texture field, then select InnerPostEffect_RT and click OK.

change render texture

Now you can assign a material. In the Post Process component, click the Material field under Custom. Choose your own custom material, or use one of the Screen Effects from the Asset Library. This example uses the Silk Print material. Make sure the Custom object is selected in the Hierarchy panel to view the effect.

silk print example

Add a Custom Window Shape

You can also add custom shapes to the 2D window. First import a texture by clicking the Add button [+] in the Assets panel, going to Import, then From Computer, and selecting your desired texture. For best results, use a texture with a transparent background.

Then go to the Visual Scripting panel to view the Magic 2D Window Controller subgraph. Click the Add button [+] next to Textures to Cycle Through, and select your imported image.

custom window shape

Now the effect should include your custom window shape.