Question

I am creating a Guitar Hero Clone using C# and am having some trouble syncing animations and the sound.

A rundown of what I do now:

• A read a file and get the note highway, note time and not length (This is all done correctly)
• The notes are put into an array
• Before a song starts, I generate a Storyboard, read in the entire array of notes, and then create DoubleAnimations to make the rectangle objects (notes) scroll down the screen.
• I set the BeginTime on the animation to 1 second before the expected play time (the duration is spent approaching the end) , and the animation duration to 1 second. However, what I expect to happen (the notes playing in sync) inst happening.

Here is the code for creating the animation:

private void StartNote(MidiNoteEvent evnt)
    {
        const double length = 0;
        int[] highwayArray = evnt.Highway;

        for (int i = 1; i <= highwayArray.Length; i++ )
        {
            var highway = highwayArray[i-1];
            if (highway > 0)
            {
                string name = evnt.Time.ToString() + "|" + highway.ToString(); 
                var rect = new Rectangle {Tag=name, Height = length+5, Width = 50 };
                Canvas.SetTop(rect,-6);

                int offset;

                if (i == 1)
                {
                    offset = 20;
                    rect.Fill = new SolidColorBrush(Colors.Green);
                }
                else if (i == 2)
                {
                    offset = 120;
                    rect.Fill = new SolidColorBrush(Colors.Red);
                }
                else if (i == 3)
                {
                    offset = 220;
                    rect.Fill = new SolidColorBrush(Colors.Yellow);
                }
                else if (i == 4)
                {
                    offset = 320;
                    rect.Fill = new SolidColorBrush(Colors.Blue);
                }
                else
                {
                    offset = 420;
                    rect.Fill = new SolidColorBrush(Colors.Orange);
                }

                rect.Margin = new Thickness(offset, 0, 0, 0);

                guitarCanvas.Children.Add(rect);

                var duration = new Duration(TimeSpan.FromSeconds(1));

                var myDoubleAnimation2 = new DoubleAnimation
                                             {Duration = duration, BeginTime = TimeSpan.FromSeconds(evnt.Time-1)};

                _notes.Children.Add(myDoubleAnimation2);

                Storyboard.SetTarget(myDoubleAnimation2, rect);

                // Set the attached properties of Canvas.Left and Canvas.Top
                // to be the target properties of the two respective DoubleAnimations
                Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

                myDoubleAnimation2.To = guitarCanvas.Height;

                myDoubleAnimation2.Completed += new EventHandler(myDoubleAnimation2_Completed);

                // Begin the animation.
                //sb.Begin();
            }
        }

    }

I am not sure of how to fix this problem, am I misunderstanding how the animation works? Using the wrong units? Or is it something else entirely? Any tips are very much appreciated, even if it is a complete rewrite of how I display notes.

Answer 1

How are you playing your sound? I did something similar with video. I started the video in the same storyboard as I put my other animations so they’d all be on the same timer. So I had my Storyboard with a MediaTimeline and then added my other animations to the same Storyboard.

Worked great. Just make sure you set SlipBehavior to “Slip” on the storyboard.

In the actions for a button click, I had:

<BeginStoryboard Name="playVideoSB">
    <Storyboard SlipBehavior="Slip" Completed="Storyboard_Completed" FillBehavior="Stop">
        <MediaTimeline Source="{Binding Filename}" Storyboard.TargetName="video" Name="mediaTime"/>
    </Storyboard>
</BeginStoryboard>

I added to that storyboard in the code something like this:

BooleanAnimationUsingKeyFrames bukf = new BooleanAnimationUsingKeyFrames();
Storyboard.SetTargetProperty(bukf, new PropertyPath(PropertyFoo));

Storyboard.SetTarget(bukf, myObject);

bukf.KeyFrames.Add(new DiscreteBooleanKeyFrame(true, KeyTime.FromTimeSpan(start)));
bukf.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(end)));
playVideoSB.Storyboard.Children.Add(bukf);

I happened to be using boolean animations, but it should work with doubles.