Rhythm Game Button Prompts

Unity Engine
1

Hi all,

I’m creating a rhythm game that syncs button prompts up to animations. I’ve been investigating and testing the timeline system, as I’d like to be able to place notes into a track at the same time as scrubbing through animations such that I can place them accurately in-time with animations without needing to touch any code.

So as to not constrain the design in the early stages to a perfectly even attack and fall off, I became interested in Timeline’s ability to animate values over time with curves. That brings me to my current implementation of the system. The below image represents a single note; the straight lines are the different breakpoints for the different categories of hit (miss, good, perfect). The green line represents the score over time; if the user inputs a button press, the score is simply compared to the ranges to be categorized at the frame in the graph where they registered an input.

1349×177 12.5 KB

I was really happy with this system until it became time to figure out how to read this data and assemble the minigame at runtime. I naiively assumed getting the keyframes for this graph at runtime would be a trivial matter of nesting through to the animation clip asset, and calling a getter of some sort; teaches me to not check the API before I leap! In my research, I found this is only possible in-editor using the AnimationUtility class.

All I really need is that center keyframe, the frame at which the score reaches its peak value. That’s the value I’m going to use to arrange the score that will visually display the notes to the player in the UI.

I am not excited about pursuing the avenue of writing an editor script to cache this keyframe at runtime, as the association between each note instance is currently separated from the generic note class where the editor script would be housed; It looks like it would take a huge .asset file with all the keys in a lookup table indexed unique IDs, or some other implementation like that. It might be possible to create an editor script to assign a value to a variable in the behavior for each note in OnGUI, but this feels more hackish than anything else, and I am not experienced enough with editor scripts to be confident in how I would implement this.

A lazy implementation would simply to have a variable in the behavior that I manually set to the frame where the center keyframe is. But the programmer in me hates this option deeply, even if it will not really be that big of a QoL feature for the tool.

A final option is to simply poll the animationclip at each frame as it’s being loaded and write a simple max algorithm to store the frame where the score value reaches its peak, but I’d like to avoid anything that eats up O(n) runtime when it feels like caching and retrieving this value should be so easy.

I am also very willing to refactor the system entirely if I’ve went down an unhelpful rabbit hole. The important thing for me is to preserve this workflow, where I can assign the various note ranges visually without touching code in the same view as scrubbing through the animation frame by frame.

enchantingwellmadebarracuda

Usually I consider myself pretty able to figure out solutions myself, but this feels like a lose/lose situation to me, so I wanted to come here for expert advice and guidance. If you’ve read to this point, thank you very very much for lending your time, effort and expertise to help me in this issue.

Here are the relevant classes:

BattleTrack.cs

[TrackClipType(typeof(Note))]
[TrackBindingType(typeof(BattleManager))]
public class BattleTrack : AnimationTrack {}

BattleBehavior.cs

public class BattleBehavior : PlayableBehaviour
{
    public float score = 1f;
    public float missRange = 3f;
    public float goodRange = 6f;
    public float perfectRange = 9f;
    public float noteCenter = 0f;
}

Note.cs

public class Note : PlayableAsset
{
    //variables that will show up in inspector through the timeline
    public BattleBehavior noteProperties;
    public override double duration {get;} = .5;

    public override Playable CreatePlayable (PlayableGraph graph, GameObject owner)
    {
        return ScriptPlayable<BattleBehavior>.Create(graph, noteProperties); 
    }
}
2

The API you are looking for is the TrackAsset.curves/TimelineClip.curves property, which is the animation clip that stores the animated track data.

One suggestion is to query the AnimationCurve from the AnimationClips in a TrackAsset.CreateTrackMixer override and assign it to the the playable asset/behaviour when you create them. That will only run when the playable graph is built, and prior to Note.CreatePlayable being called. If that is still expensive, then you could cache the values using a serialized field in the NotePlayableAsset, and only run the queries on the animation clip when not in playmode, or if it’s unset.

Also, I’d suggest overriding TrackAsset, not AnimationTrack, if you are just using scripting playables.

3

Hey there. I am finally getting back to this after a big move, and have tried to implement your suggestion. Here’s my first pass.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Timeline;
using UnityEngine.Playables;
using UnityEditor;

[TrackClipType(typeof(Note))]
[TrackBindingType(typeof(BattleManager))]
public class BattleTrack : TrackAsset {
  
    public override Playable CreateTrackMixer(PlayableGraph graph, GameObject go, int inputCount) {
        #if UNITY_EDITOR
        AnimationClip clip = this.curves;
        Debug.Log("Creating track mixer for: " + this.name);
        Debug.Log("HasCurves?:" + this.hasCurves);
        Debug.Log("Curves: " + this.curves);

        if(clip != null) {
            foreach(var binding in AnimationUtility.GetCurveBindings(clip)) {
                if(binding.propertyName == "score") {
                    AnimationCurve curve = AnimationUtility.GetEditorCurve(clip, binding);
                    foreach(Keyframe key in curve.keys) {
                        Debug.Log("Keyframe at: " + key.time);
                    }
                }
            }
        }
        #endif
      
        return base.CreateTrackMixer(graph, go, inputCount);
    }
}

My issue now is hasCurves is always false, and curves is always null, despite the timeline having these curves right there inside of the BattleTrack. Any suggestions? None of the other code has changed. Here’s a screenshot of the current graph.

1563×296 37.3 KB

4

Either a track or a clip can have curves. The code sample provided is checking for curves on the track, but the image has them on the clip.

So, you can either make a playable behaviour on the track (similar to how the note playable asset) which will give you something similar to the recorded animation tracks, or check for the curves on each clip. e.g.

foreach (var clip in GetClips())
if (clip.curves != null) …

5

Ah, gosh, I feel really dumb. That makes so much sense. Thank you very much for pointing that out! I’ll refactor accordingly and try again.