For Storyboard, CompositionTarget and DispatcherTimer which way you use is depands on what purpose you want to use it on.For most of developer, they are really prefer the Storyboard because it is much more easy to use and visual. But actually there are quite difference among them.Storyboard, normally I use it on simple object movement;Composition Target, I use it for NPC or enemy movement or large part movement compare to whole map;DispatcherTimer, this one is for player movement like running your warrior on the map or fighting.This time let's talk about how to show 2D player on the screen.First, use Photoshop create 8 images for our female wizard , only for right running behavior.Normally, each behaviors, we need separated images for action details, some high quality game use more images on different direction same behavior, could be 8 direction or 16 direction facing for a behavior like running .As showed on the start, our 8 images shows a right running behavior. 150 by 150 pix, named as0.png , 1.png,.......7.png. For silverlight project, use jpg or png, for WPF project.,use gif, png.Then, create a WPF project again, after that, add a fold call Player, put these 8 images in.〈 Window x:Class="WpfApplication4.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFGame">
〈Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver" /〉
〈/Window〉CS file:using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Shapes;using System.Windows.Threading;namespace WpfApplication4{ public partial class Window1 : Window { int count = 1; Image Spirit; public Window1() { InitializeComponent(); Spirit = new Image(); Spirit.Width = 150; Spirit.Height = 150; Carrier.Children.Add(Spirit); DispatcherTimer dispatcherTimer = new DispatcherTimer(); dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick); dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150); dispatcherTimer.Start(); } private void dispatcherTimer_Tick(object sender, EventArgs e) { Spirit.Source = new BitmapImage((new Uri(@"Player\" + count + ".png", UriKind.Relative))); count = count == 7 ? 0 : count + 1; } }}Then F5, your can see the female running on the screen.One more important thing, these 8 images better have been modified on background with Alpha transparency. You will know what I am talking.
Someone asked about the problems about Scott Guthrie's digg example.
Oh..that's a really old topic. I think lots of developers fixed these small bugs. I was trying to find my test codes about this issue. But...anyway,
here was the problems and answers:
1. watermarkedtextbox, ( http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx)
forget about it , use textbox unless you still on silverlight old edition, for 2.0 that one not exists.
2. The famous one --datagrid errors,(http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-3-using-networking-to-retrieve-data-and-populate-a-datagrid.aspx)
change the Data:DataGrid to data:DataGrid, sometimes it works, I did that, if not , don't stuck on it , on later article, it will be replaced by datalist. :-)
3.Don't forget add reference by using System.Xml.Linq somewhere, that' ll save your time.
That's all for today, Cheers
How to make the item move on the page? The third way--DispatcherTimer
Page.xaml would be same except windows3,
CS file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace WPFGame{
public partial class Window3 : Window {
Rectangle rect;
double speed = 5;
Point moveTo;
public Window3() {
InitializeComponent();
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Red);
rect.Width = 50;
rect.Height = 50;
rect.RadiusX = 5;
rect.RadiusY = 5;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, 0);
Canvas.SetTop(rect, 0);
DispatcherTimer dispatcherTimer = new DispatcherTimer(DispatcherPriority.Normal);
dispatcherTimer.Tick += new EventHandler(Timer_Tick);
dispatcherTimer.Interval = TimeSpan.FromMilliseconds(50);
dispatcherTimer.Start();
}
private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
moveTo = e.GetPosition(Carrier);
}
private void Timer_Tick(object sender, EventArgs e) {
double rect_X = Canvas.GetLeft(rect);
double rect_Y = Canvas.GetTop(rect);
Canvas.SetLeft(rect, rect_X + (rect_X <>
Canvas.SetTop(rect, rect_Y + (rect_Y <>
}
}
}
How to make the item move on the page? As I introduced before storyboard could be a nice
Solution, but here is another way to do that.
First step , same codes with before:
Run Visual studio 2008 sp1 editionNew project--->WPF Project.
On Window2.xaml
Only put a Canvas here called Carrier
〈 Window x:Class="WPFGame.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFGame">
〈Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver"
MouseLeftButtonDown="Carrier_MouseLeftButtonDown"/〉
〈/Window〉
cs file:
using System; using System.
Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WPFGame
{
public partial class Window2 : Window {
Rectangle rect;
double speed = 1;
Point moveTo;
public Window2() {
InitializeComponent();
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Red);
rect.Width = 50;
rect.Height = 50;
rect.RadiusX = 5;
rect.RadiusY = 5;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, 0);
Canvas.SetTop(rect, 0);
CompositionTarget.Rendering += new EventHandler(Timer_Tick);
}
private void Timer_Tick(object sender, EventArgs e) {
double rect_X = Canvas.GetLeft(rect);
double rect_Y = Canvas.GetTop(rect);
Canvas.SetLeft(rect, rect_X + (rect_X < moveTo.X ? speed : -speed));
Canvas.SetTop(rect, rect_Y + (rect_Y < moveTo.Y ? speed : -speed));
}
private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
moveTo = e.GetPosition(Carrier);
}
}
}
Then Ctrl+F5, done
How to make the item move on the page?Run Visual studio 2008 sp1 editionNew project--->WPF Project.
On Window1.xaml
Only put a Canvas here called Carrier
〈 Window x:Class="WPFGame.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFGame">
〈Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver"
MouseLeftButtonDown="Carrier_MouseLeftButtonDown"/〉
〈/Window〉
For cs file, here is the codes
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace WPFGame {
public partial class Window1 : Window {
Rectangle rect;
public Window1() {
InitializeComponent();
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Red);
rect.Width = 50;
rect.Height = 50;
rect.RadiusX = 5;
rect.RadiusY = 5;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, 0);
Canvas.SetTop(rect, 0);
}
private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
Point p = e.GetPosition(Carrier);
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimation = new DoubleAnimation(
Canvas.GetLeft(rect),
p.X,
new Duration(TimeSpan.FromMilliseconds(500))
);
Storyboard.SetTarget(doubleAnimation, rect);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
storyboard.Children.Add(doubleAnimation);
doubleAnimation = new DoubleAnimation(
Canvas.GetTop(rect),
p.Y,
new Duration(TimeSpan.FromMilliseconds(500))
);
Storyboard.SetTarget(doubleAnimation, rect);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
storyboard.Children.Add(doubleAnimation);
//if (!Resources.Contains("rectAnimation")) {
// Resources.Add("rectAnimation", storyboard);
//}
//Play the Animation
storyboard.Begin();
}
}
}
Pust F5, then click the left mouse button on the page, you will see the item move.
