Wednesday, November 7, 2007

Silverlight Experiment: movement

This took me longer to do partly because I don't know trigonometry and because silverlight/blend doesn't really have a concept of fps (frames per second) or enterframe like flash does. Flash movies are like merry go rounds, they just keep going around and around until you stop them. You use this fact to tell flash to do "stuff" every time a certain horse comes around again. "Stuff" usually involves moving, fading, scaling, etc. Say you wanted an object to move horizontally across the screen by 1 pixel every time your movie looped.

In flash it might look like this:

item.onEnterFrame = function(){
"bob" every time i see you, i want you to:
---> this._x += 1;
---> advance a step from the last place you were.
}

Blend doesn't really have an onEnterFrame ability built into it. Flash is timeline based at its very core (like a movie) but Blend is static (like a webpage). So you can either use javascript's setTimeout() function or you can employ a storyboard timer workaround, via Stegman & Andy. I did some brief tests and it seems that the storyboard timer is faster. I will post some examples of this in action when I get some time. Until then, here is the basic setup and javascript:

the xaml:
{Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="350" Height="150" x:Name="Page" Loaded="onLoaded">
{Canvas.Resources>
{Storyboard Completed="timerCompleted"
x:Name="timer" Duration="00:00:0.02" />

{/Canvas.Resources>
{/Canvas>


the Javascript:

function onLoaded(sLight)
{
root= sLight.findName("Page");
plugin = sLight.getHost();
var timer = sLight.findName("timer");
timer.begin();
}

function timerCompleted(sender, args)
{
///// DO STUFF HERE. Like take a step.
var ball = sender.findName("ball");
ball["Canvas.Left"] = ball["Canvas.Left"] + 1;

// restart the timer

sender.begin();
}
You can use this approach for creating your casual game or just to move stuff around.

No comments: