Skip to main content

Heart Mosaic

The Heart Mosaic template uses material graphs and custom materials to create an interactive mosaic effect.

demo

Open the Template​

To use the template in your Effect House project:

  1. Go to Templates
  2. Click the Screen tab
  3. Select the Heart Mosaic template
open template

Hierarchy​

The Hierarchy panel consists of the following four render groups:

  • Tip holds the hints you can refer to to customize the effect
  • General Preprocessing Effects is responsible for the camera and the heart images tracking the eyes
  • 2D Preprocessing Effects contains the 2D camera
  • Full Screen Mosaic Shaders contains the three examples of mosaic shaders you can select from: Simple Mosaic, Gradient Mosaic, and Ramp Texture
  • 2D Foreground Effects renders the sliders used to adjust the hearts' resolution
hierarchy

Assets​

The Assets panel houses the custom materials and textures used in this template. You can select a material to further customize it in the Inspector panel.

assets

Customize the Material​

This template offers three examples of mosaic shaders, with the option to further customize the material used in each one.

Sprite Ramp Mosaic​

The Sprite Ramp Mosaic material allows you to change the resolution of the effect with a slider.

sprite ramp demo

Let's try customizing the material of Ramp Texture Example (selected by default). First, click the Ramp Texture Example shader in the Hierarchy panel to open its Post Process properties in the Inspector panel. You can see that the assigned material is SpriteRampMosaic_Mat.

ramp texture material

Now click SpriteRampMosaic_Mat and see its material properties in the Inspector panel.

ramp material properties

The assigned Ramp Texture is HeartRamp. You can swap it out for another asset in the Sprite Ramp Textures folder. For example, try using CandyRamp_Tex to see how this texture appears in the effect.

candy ramp demo

You can leave the Number of Cells in Ramp Texture value at 11 because CandyRamp_Tex contains 11 candy hearts. However, if you create and import your own ramp texture, change this value to the number of units in it.

candy ramp texture

Gradient Mosaic​

The Gradient Mosaic material highlights the brightness of the pixels captured by the camera.

sprite ramp demo

Start by deselecting Ramp Texture Example in the Full Screen Mosaic Shaders render group in the Hierarchy panel, and then selecting Gradient Mosaic Example.

select gradient mosaic

Then go to the Inspector panel to see the assigned post process material: GradientMosaic_Mat.

gradient mosaic texture

Now click GradientMosaic_Mat in the Assets panel to open its properties in the Inspector panel.

gradient mosaic properties

You can swap out the assigned Symbol Texture with one from the IndividualTextures folder in the Assets panel.

individual textures folder

For example, you can select the SingleHeart_Tex asset to replace the hearts with roses. Or you can create or download your own square image to use in the effect.

rose_texture

Adjust the Minimum Brightness property to dynamically change the size of the symbol in correlation to the brightness.

adjust minimum brightness

Simple Mosaic​

The Simple Mosaic material is the simplest one offered in this template as it does not offer a gradient and uses one color for the symbol texture. The shading is also simply set by adjusting the brightness and scaling the size of the image.

simple mosaic demo

In the Hierarchy panel, select only the Simple Mosaic shader.

select simple mosaic

Notice that the assigned material is SimpleMosaic_Mat in the Inspector panel.

select simple mosaic

Now click SimpleMosaic_Mat in the Assets panel to open its properties in the Inspector panel. Similar to the Gradient Mosaic material, you can swap out the assigned Symbol Texture with one from the IndividualTextures folder in the Assets panel. The shading is also simply set by adjusting the brightness and scaling the size of the image.

simple mosaic properties

Visual Scripting: Sliders​

The Set by Slider property for each material is dynamically set by the sliders, meaning if you use a slider to adjust the cell resolution values, the Cell Resolution X and Cell Resolution Y fields in the Inspector panel will automatically update. Before we take a look at the subgraphs, expand the 2D Foreground Effects render group in the Hierarchy panel.

simple mosaic properties

This render group offers a horizontal and vertical slider bar. By default, the vertical slider bar is enabled. To use the vertical slider bar, go to the Visual Scripting panel and do the following:

  • In the Horizontal Slider for Mosaic Materials subgraph, deselect Hide Slider Always and select Enabled**
  • In the Vertical Slider for Mosaic Materials subgraph, select Hide Slider Always and deselect Enabled
tip

Once you've selected either the horizontal or vertical slider, it is recommended that you delete the subgraph that is not enabled (or the slider you are not using). This will reduce the number of nodes in your project.

If you want to define static values for Cell Resolution X and Cell Resolution Y of a material, you can delete the subgraphs.

visual scripting

You can now see a horizontal slider bar in place of the vertical slider bar.

horizontal slider

Try adjusting the other parameters within the subgraph:

  • Hide Slider on Record will cause the slider to disappear upon recording
  • Hide Slider Always will always hide the slider on the screen
  • Full Screen Slider Hitbox allows you to swipe left and right anywhere on the screen to adjust the minimum and maximum symbol size, even without the slider
  • Min Symbol Size determines the smallest number of symbols offered in a row. The symbols are easier to see as they are larger. For example, this is what it looks like when this parameter is set to 10.00.
min symbol size
  • Max Symbol Size determines the largest number of symbols offered in a row. The symbols are harder to see as they are smaller. For example, this is what it looks like when this parameter is set to 65.00.
max symbol size