Skip to main content

Flag

Use the Cloth component to create and stylize your own custom waving flags.

flag 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 Flag template
flag template

Hierarchy​

There is one render group in the Hierarchy panel. The General render group contains the core objects in the template, such as the Flag Cloth and the Sky Background image.

flag hierarchy

Assets​

The Assets panel contains the built-in assets for this template. Replace them with your own materials and textures to customize.

flag assets

Customize the Flag Texture​

We have provided several flag textures that you can use at your disposal. You can also import your own to customize your flag even further.

To change the flag texture:

  1. Go to the Assets panel
  2. Select Flag_Mat(CHANGE TEXTURE) in the Materials folder
  3. Go to the Inspector panel
  4. Change the Texture under Material Properties from AlienFlag_Tex to your desired texture
flag change texture   flag new

Adjust the Cloth Properties​

This template requires a mesh that is a flat plane where all the vertices are evenly and uniformly spaced. Flag_Mesh_500 is used by default; this is a plane with 500 evenly and uniformly spaced vertices. The higher the number of vertices, the better, and more realistic, the cloth will look. Use modeling software to create your own.

In the Physics Effect Settings, we want to change the Contact Velocity Iterations. This property sets the number of iterations for calculating the velocity of objects upon contact.

physics settings

Keeping the default value of 5 lessens some of the stretch factor that is applied to the cloth settings, so let's switch it to 2 instead. Feel free to play around with this setting and adjust to your liking.

note

Changing the value of Contact Velocity Iterations may affect the performance of your effect. If the cloth is the focal point in your effect, it may be fine to leave this value at 5. If you want to combine cloth with other features, we recommend changing this value to a lower number.

Edit the properties of the Cloth component in the Inspector panel to customize the appearance and behavior of the flag. Refer to the Cloth component guide for a better understanding of each of these properties.

cloth properties

The Cloth component allows you to have vertex attachment enabled. This means that you can take specific vertices on the cloth and pin them to defined points. To achieve this, we used third-party software to paint the top and bottom vertices on the left side of the cloth red. Then, when importing the cloth to Effect House, we also imported the vertex color.

We applied a Cloth Configuration and assigned the Vertex Color to the respective color. Creating this configuration ensures that the cloth will attach to the defined point under Transform, which in this case is the flag pole.

cloth properties