Music Band

This effect allows creators to tap the various band members on the screen to create music, like a MIDI controller. This tutorial will show you how to import your own assets and attach them to the correct objects in the Music Band Template.

This tutorial covers the following:

• Opening template
• Importing assets
• Replacing assets
• Deep dive: More details on the inner workings of the Music Band visual scripting and subgraph

Prepare

Before we get started, prepare a set of PNGs for a texture sequence. They should all share the same aspect ratio and resolution for best results. There are two states that a band member can be in, so you’ll want a texture sequence for “Dance” and one for “Tap”. We’ve provided some additional music band texture sequences here:

MusicBandCharacters_AdditionalSequence.zip

You’ll also want to prepare some audio files. These must be .mp3 files that don’t contain copyrighted material or you’ll receive an error while uploading. We’ve provided an additional audio file here:

MusicBandCharacters_AdditionalAudio.mp3

Tip:

For best practices on preparing assets, check out 2D Texture Sequence Preparation and Audio Asset Preparation.

Open the template

Start by opening Effect House, logging in with the account you want to use to publish your effect, and find the Templates tab on the left-hand side. From here, you’ll see some templates under various categories. Music Band will be among them.

Click on Music Band and let the template project load. Then, save your project to a folder of your choice to save your progress.

Import assets

We will import a new “Dance” texture sequence asset by clicking + Add asset > Import > Texture Sequence.

Select all “Dance” images and click Open.

You’ll see a new texture sequence appear in the Assets window.

Tip:

It’s recommend to rename and categorize your assets so you can find them easily. This is especially important when there are a lot of assets. To rename it, right-click > Rename and type the new name. Then click and drag it to the folder with the rest of the textures. You can delete the empty “Textures” folder.

Repeat these steps for the “Tap” version of your texture sequence as well.

Let’s import an audio file by clicking + Add asset > Import > From Computer.

Select your audio file and click Open.

Wait for the audio file asset to import. Remember, if this file contains copyrighted material, it will fail to import.

Replace assets

Let’s take a look at the Hierarchy panel to see how this project is setup.

Each band member contains three objects: one audio object, one idle dance state object, and one tap state object.

Let’s replace the “Crow Beat” object with the new assets we just imported. Expand the “Crow Beat” by clicking the arrow next to the Object, then clicking “CrowDanceState.”

Navigate to the “Animation Sequence” component in the Inspector Panel of the object and click “Texture Sequence”, then select the “Dance” sequence from the pop-up Assets window.

Tip:

When replacing the “Texture Sequence” for tap state, remember to check the frame number and update it in the corresponding subgraph.

If the frame number of your “Tap State” sequence is 4, then find the “CrowTapEventController” and change the number from 3 to 4 of the “TapStateSeq_FrameNum” property.

You can find the number of frames by clicking on the Texture Sequence in the Hierarchy and looking at the “Duration”.

Now, we will replace the audio that is played when the character is tapped.

Click “CrowAudio” in the Hierarchy.

Navigate to the “Audio Player” component in the Inspector Panel of the object and click “Audio File”, then select the audio file from the pop-up Assets window. There are some additional settings here, such as “Play Mode” and “Volume”.

Congratulations! Now you’ve customized the Music Band template and made it your own! If you have any questions, please feel free to reach out for help on our Discord.

Visual Scripting & Subgraph deep dive

Each of the following purple comment boxes is responsible for the behavior of a band member. Let’s take a closer look at the “Crow Beat Control” comment box.

Here we can see all the references being passed into the subgraph. The first reference is the “Dance State” Image component, the second is the “Dance State” Scene object, the third is the “Tap State” Animation Sequence, the fourth is the “Tap State” Scene object, and the last is the “Audio Player” from the crow’s Audio component.

To get a new reference, click the + next to a component’s details and select “Get”.

To inspect inside the subgraph, double click on it.

The node setup is relatively straightforward. We use the “Image Tap” node to “Play” the desired animation sequence via the “Animation Sequence Controller.” From there, we simply toggle the visibility of the animation sequence to hide the one that is not currently playing. For example, when we tap the crow, it should show the “Tap” state animation sequence and hide the “Dance” state animation sequence.

The “Audio Player Controller” plays the audio file connected to the Audio Player.