Skip to main content

Heart Ripple

In this tutorial, you'll learn how to use Material Graph to create a heart ripple effect.

heart ripple

How to Use This Template​

Open Effect House, go to Templates, click the Screen tab, and select the Heart Ripple template.

template screen

Hierarchy​

In the Hierarchy panel, there are two main render groups. The 2D Foreground Effects render group contains an editable Bloom Camera object, with two heart image options, rainbow and single color. The 2D Bloom Effects render group contains a 2D Camera object, with corresponding Bloom image.

heart hierarchy

Edit Bloom Effect​

To tweak the bloom effect:

  1. Select the Bloom Camera [EDIT BLOOM] object under the 2D Foreground Effects render group in the Hierarchy panel
  2. Go to the Inspector panel
  3. Navigate to the Post Process section
  4. Tweak the Bloom parameters to your desired specifications
bloom properties

Modify Materials​

This effect uses Material Editor to generate a heart ripple effect.

material graph

There are two materials for you to choose from: RainbowHeart_Mat and SingleColorHeart_Mat.

RainbowHeart_Mat​

To customize the rainbow heart material,

  1. Go to the Assets panel
  2. Select the RainbowHeart_Mat [EDIT] material
  3. Head to the Inspector panel
  4. Customize the Material Properties. The available properties are:

Base Property | Property | Description | | :------- | :---------- | | Saturation | Controls the saturation of the rainbow color | | Opacity | Controls the opacity of the rainbow color | | Opacity Range | Controls the opacity range throughout the whole screen. Lower value will result in more fade out. | | Color Loop | How frequently the rainbow color will repeat among the heart ripples. Increasing this value will make the heart ripple more colorful. |

Transform | Property | Description | | :------- | :---------- | | Pos | Controls the heart ripple position on the screen | | Scale | Controls the scale of the whole heart ripple effect | | Density | When the scale is fixed, increasing the value will create more layers | | Stroke Weight | Controls the thickness of the heart ripple lines | | Edge Blur | Controls the blur of the heart ripple lines | | Depth Refactor | Increasing this value will create more depth impact on the heart ripple | | Speed | Controls how fast the heart ripple moves |

SingleColorHeart_Mat​

To customize the single color heart material,

  1. Go to the Assets panel
  2. Select the SingleColorHeart_Mat [EDIT] material
  3. Head to the Inspector panel
  4. Customize the Material Properties. The available properties are:

Base Property | Property | Description | | :------- | :---------- | | Base Color | Controls the color of the heart ripple | | Opacity | Controls the opacity of the color | | Opacity Range | Controls the opacity range throughout the whole screen. Lower value will result in more fade out. |

Transform | Property | Description | | :------- | :---------- | | Pos | Controls the heart ripple position on the screen | | Scale | Controls the scale of the whole heart ripple effect | | Density | When the scale is fixed, increasing the value will create more layers | | Stroke Weight | Controls the thickness of the heart ripple lines | | Edge Blur | Controls the blur of the heart ripple lines | | Depth Refactor | Increasing this value will create more depth impact on the heart ripple | | Speed | Controls how fast the heart ripple moves |