2. Start Button Juice

v1.0

With the game paused at the start, we need to add a simple Start button. We will demonstrate how to set the Juicy Action Clock timeScale, which can be used in the level loading methods that you end up using for your project.

We will use the UI Canvas for the UI elements. There is already a Text Mesh Pro Button called "Start Button" in the Hierarchy.

Add Action Executor to the Button

Next, add an ActionRunner component to the button. Set the Auto Start and Auto Restart values to false.

In the Button component, add a new On Click () event, and drag in the Start Button object into the object field. Then, select Action Runner / Execute() as the function to call. Now when the button is clicked, the actions in the ActionExecutor list will trigger.

Adding Actions

Since this is a UI Button, we need to set the "Time" value on the ActionExecutor to "Unscaled", so that actions will be triggered even when the game is paused, or the timeScale is set to 0.

Set this value in the top right of the ActionExecutor box on the ActionRunner component.

Set Timescale

Add a Set Timescale action. Click the "Eye" button to expand the Overrides. Update the overrides if needed so that the Time Scale Target is "Juicy Actions", Effect Duration is 0, and Target Time Scale is 1. Confirm also that "Return to Base Time Scale" is false.

Set GameObject Active

Next, add a Set GameObject Active action. Add the Start Button object and the Dark Panel object to the GameObjects list, and ensure the Mode is "Set Inactive".

Play AudioClip

Finally, add a Play Audio Clip action. Populate the Audio Clips list with at least one suitable clip, such as "Quick Click" which comes with the demo scenes. Set "Play as 2D" to true.

Also move the Play Audio Clip action up one so that Set GameObject Active happens after the audio is played.

Press play, and start the game by clicking the button, which disappears, and you can then move around.

Connect the Button to the Executor

Open the Button component, and populate the "On Click()" event with the Start Button, ActionRunnerExecute method.

Adding More Juice

We can add a bit more to this button.

Button Interactable

First, add a Button Interactable action, so that we can display some juicy actions on the button over time, while ensuring the player doesn't click the button twice.

RectTransform Scale

Start by adding a RectTransform Scale action, and moving it above the Set GameObject Active action.

In the Overrides, set the Duration to something quick, like 0.15,and the Target Scale to 0,0,0. Update the Scale Curve to one that you'd like. Keep in mind the value of "0" on the left is the current scale, and a value of "1" on the right is the Target Scale.

The curve starts at 0 (left), but goes down, so the object will grow before shrinking.

Also set the Time Before Next Action to be "Determined by Action". This way the object won't turn off until after the scale action is completed.

Rotate

Next add a Rotate Action, again moving it higher than the RectTransform Scale action. Make sure the duration is equal to or less than that from the scale action, and set the other values as you'd like, to rotate the button on the Z axis.

Dark Background

Toggle on the Dark Panel in the UI Canvas. If the Start Button is below this in the Hierarchy, the button will appear on top of this panel. Add an Image Color Change Action to the Start Button.

Toggle off "Affect Target Image", and populate the "Images" list with the Dark Panel image component. Then, add a single color that is 0,0,0,0 β€” black with no alpha. Set the duration to match the other actions, and set the curve as you'd like.

Now we have a more exciting "Start" button for the game, utilizing a variety of Juicy Actions!

Last updated