Home Contact

X

Coder, not artist.

News

All code on here is free, but as a consequence it's up to you to check it, ha! If you have any questions, please use the contact button!

Twitter












Archives

Post Categories

Image Galleries

Syndication:

Path Animation in Silverlight

I’ve been spending some time working on prototyping some things I want to get working for a game I’m developing, and one thing I wanted was to get a couple of fly’s flying (buzzing?) around a lightbulb.

Ideally I wanted to draw a path and say – Fly – use this path and follow it until the end of time! Turns out in WPF I could do this, but not so in Silverlight. Everything I saw explaining how to do it, involved working out complex (to me) equations to get the motion correct, or using a set of key frames in a storyboard. Neither of which sounded great to me.

I am doing this game in Silverlight 4, and that’s when it struck me – what about the PathListBox? I can put the Fly onto the PathListBox, animate the StartPoint to 100, set the repeat behaviour to ‘Forever’ and get a (moderately) decent path motion…

First things first, take my Fly

fly

and convert it to a user control.

FlyIntoControl

Cunningly named:

FlyAsControl

After that, time to draw my path:

DrawPath

aaaand, convert that bad boy to a Layout Path:

MakeLayoutPath

This automatically creates a PathListBox (sweet):

MakesPathListBox

To which I then drag my Fly!

DragFlyControlOntoPathListBox

I then create a new storyboard (called ‘FlyAnimation’):

CreateStoryboard

Animate the ‘StartPoint’ property at ‘6 seconds’ to be 100%:

SetEndValue

And then set the repeat behaviour to be Forever:

SetRepeatBehaviour

F5 and hmmm nothing…

Oops, forgot to start the storyboard! So, hunt for the ‘ControlStoryboardAction’:

FindControlStoryboard

Drag it onto the Fly control:

ControlStoryboard_OnFly

And set the properties to begin the storyboard on Load:

ControlStoryboard_Settings

Press F5 and bask in path animation glory!

Caveat – I’m not 100% sure this is the best way to do this, but it worked alright for me!

PS. You might want to set the Stroke and Fill properties of your Path to be transparent, otherwise it looks a bit monorail like :)


Tuesday, September 21, 2010 3:17 AM

Feedback

No comments posted yet.


Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: