Skip to main content

Friend Roulette

note

This template was developed using Effect House 2.6.0.

The Friend Roulette template leverages your friends' profile information to create a virtual prize wheel effect.

friend roulette demo

How to Use This Template​

Open Effect House, go to Templates, click the Interactive tab, and select the Friend Roulette template.

friend roulette template

Hierarchy​

The Hierarchy panel contains one main render group, 2D Foreground Effects, responsible for all of the objects in the effect.

The Question Box object parents a replaceable Question [REPLACE TEXTURE] object, which simply contains the text of the question.

The Wheel Shadow object adds an extra layer of dimension to the wheel.

The Wheel [REPLACE TEXTURE] object makes up the six-slotted wheel design, and parents the six profile objects. Each profile object has a border to make it stand out.

The Pointer [REPLACE TEXTURE] object contains the finger pointer at the top of the wheel.

friend roulette hierarchy

Assets​

Expand the FriendRouletteAssets folder in the Assets panel. The Profiles folder contains profile photo textures for each of the six profiles. The Textures folder houses the textures for the built-in prize wheel, pointer, and question box objects.

friend roulette assets

Customize the Friend Roulette Wheel​

Change the Question Texture​

You can change the question by using your own texture. First import your own texture by clicking the Add button [+] in the Assets panel, going to Import, clicking From Computer, and then selecting your file. Then click the Question [REPLACE TEXTURE] object in the Hierarchy panel. Go to the Inspector panel and click the Texture field, then select your imported texture and click OK.

change question texture

Replace the Wheel and the Pointer​

You can also replace the wheel and pointer with assets of your own design. First, import your files into the Assets panel. Then click the Wheel [REPLACE TEXTURE] object or Pointer [REPLACE TEXTURE] in the Hierarchy panel. Go to the Inspector panel and click the Texture field, then select your imported texture and click OK.

image-0
image-1

tip

Adding more profiles to the effect decreases performance. If you decide to import your own wheel asset, use a design that incorporates fewer profiles, like the default wheel texture that features six profiles.

Modify Visual Scripting​

The Wheel Controller subgraph sets the behavior of the friend roulette wheel. You can modify the Spin Speed and the Min/Max Spin Duration. Spin Speed controls the degrees by which the wheel rotates. The friend roulette wheel spins for a random duration, in seconds, within the range set by the Min/Max Spin Duration.

wheel controller subgraph

Click into the subgraph to examine its logic.

wheel subgraph base logic

The effect is triggered by a Screen Tap. You can alter the effect trigger by changing the node in the orange Change the trigger that starts the spin comment box.

When the screen is tapped, a random spin duration is set. The RandomSpinDuration node chooses a duration based on the Min/Max Spin Duration.

The Transit by Time node controls the smooth appearance of the spinning wheel. Speed and duration values are inputted into the Transit by Time node. The Interpolator is set to Ease-out, which causes the wheel to gradually slow to zero over time.

The rotation value of the wheel is set by retrieving the Rotation value of the wheel every frame, and subtracting the current rotation value of the wheel.