Principles of Microsoft Silverlight Graphics and Animation

1. Principles of Microsoft SilverlightGraphics and Animation Jeff Paries Lead Experience Developer Waggener Edstrom Worldwide Author: Foundation Silverlight 3 Animation

2. Shameless Plug • “The code that accompanies this book […] delights with clever and interesting animations one feels compelled to play with and modify..” - James Ashley, Amazon.com “Everything in this book is useful in some way and the total collection of project examples is outstanding.” - John O’Connor, Amazon.com • “This is by far the best book that I have found on Silverlight PERIOD.” - JP Sousa, Amazon.com

3. Session Topics • Graphics for Silverlight • Declarative Animation (XAML) • Keyframes, Animations, and Storyboards • Procedural Animation (C#) • Vectors • Particle Systems • Frame-based Animations • Kinematics

4. Graphics • Both vector and raster assets are supported • Raster • Photoshop (PSD) import • PNG 8/24 • JPG • Vector • Illustrator Import • XAML Shape Class (Ellipse, Line, Path, etc.)

5. Graphics • Image asset locations • Resource (within the DLL) • Within application package (XAP) • Outside application package (local) • External website (cross domain restrictions)

6. Graphics • PixelShaders • Drop Shadow, Blur, Emboss, etc. • WriteableBitmap (+ extension methods) • Direct manipulation of a bitmap • Set/GetPixel • Transform (Crop, Resize) • Draw Shapes/Curves • Blit (combine bitmaps)

7. Storyboards

8. Storyboards <Storyboard x:Name="Storyboard1"/>

9. Storyboards • Are containers • Can contain many animations • Can be left empty (used as timers) • <Storyboard x:Name="Move" Duration="00:00:00"/> • Can also be created in code

10. Animations

11. Animations <Storyboard x:Name="Storyboard1"> <DoubleAnimation Duration="0:0:1" To="480" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Sun" d:IsOptimized="True"/> </Storyboard>

12. Animations • Are placed inside Storyboard containers • Used to change object properties over time • Animation types correspond to data types: • Double (Width, Height, Left, Top, etc.) • Color (Fill, Stroke, etc.) • Point (Path manipulation) • Object (Visibility) • Can be created with code

13. Animation Variants • Each animation type has two variations • From/To • UsingKeyframes

14. Keyframes • There are four types of keyframes • Linear • Spline (basic motion “easing”) • Easing* (easing functions) • Discrete (hold position until next keyframe) • Change type on Easing pane in Blend * Default type

15. Keyframes <LinearDoubleKeyFrameKeyTime="0:0:1" Value="460"/> <SplineDoubleKeyFrame KeyTime="0:0:1" Value="460"/> <SplineDoubleKeyFrame KeyTime="0:0:1" Value="460" KeySpline="0,0,0.5,1"/> <DoubleAnimation.EasingFunction> <BounceEaseEasingMode="EaseInOut"/> </DoubleAnimation.EasingFunction> <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="460"/>

16. Demos • Keyframe Types • Models Remixed • Data Visualization

17. What's a Vector? • Are a key component of procedural animation • Describe direction and distance independent of time • Movement is simple – for each unit of time that passes, add the vector components to the object’s XY position

18. 1-D Vector Movement 0,0 +X X Velocity = 1 +Y LayoutRoot Canvas

19. 2-D Vector Movement 0,0 +X X Velocity = 1 Y Velocity = -2 +Y LayoutRoot Canvas

20. Changing Vector Direction 0,0 +X 5,-5 5,5 Multiply appropriate component by -1 to reverse direction +Y LayoutRoot Canvas

21. Using Vectors in C# • Create/assign variables private Point ObjPosition; private double VelocityX = 1; private double VelocityY = -2;

22. Using Vectors in C# privatevoidMove_Completed(objectsender, EventArgs e) { VelocityY += Gravity; ObjPosition.X += VelocityX; ObjPosition.Y += VelocityY; Canvas.SetLeft(MyObject, ObjPosition.X); Canvas.SetTop(MyObject, ObjPosition.Y); Move.Begin(); }

23. Demo • Ball Drop

24. Particle Systems • Often used to model “fuzzy” objects: • Fire • Smoke • Explosions • Water

25. Particle Systems • For each unit of time that passes: • New particles may be created • Old particles are conditionally removed • Existing particle positions are updated

26. Particle Systems • MoveParticles method private void MoveParticles(object sender, EventArgs e) { for (inti = 0; i < Particles.Count; i++) { Canvas.SetLeft(Particles[i], Canvas.GetLeft(Particles[i]) + Particles[i].Velocity.X); Canvas.SetTop(Particles[i], Canvas.GetTop(Particles[i]) + Particles[i].Velocity.Y); } Move.Begin(); }

27. Demo • Basic Particle System

28. Particle Systems • Randomize! • Colors • Size • Life spans • Velocity • Add secondary animation • Let the user modify the system • Use emitters

29. Particle Systems • What particle emitters do • Define shape/area of system • Point • Rectangle (bounding box) • Can be animated

30. Particle Systems • Implement an emitter • Name your emitter object • Generate particles based on emitter location

31. Demo • Emitter-based Comet • Emitter-based Fountain

32. Particle Systems • WriteableBitmap class • Pixel-level access to bitmaps • Generate images on the fly • BlitWriteableBitmap class by Bill Reiss • Allows blit/blend

33. Particle Systems • Blit • Combines multiple bitmaps/elements Image Element

34. Particle Systems ImageToWrite.Blit(Destination Rectangle, WriteableBitmap Source Image, Source Rectangle, BlendMode); DestinationImage.Blit(new Rect(150, 100, 100, 100), wbmp2, new Rect(0, 0, 100, 100), BlendMode.Additive);

35. Particle Systems • Blending modes • None • AlphaBlend • Additive • Subtractive

36. Demo • WriteableBitmap Example 1(courtesy Bill Reiss) • WriteableBitmap Example 2

37. Frame-based Animation • Imitates original “flipbook” techniques • Filmstrip • Accessible via: • Storyboards • Code • Visual State Manager • Complex frame-based animation (i.e. characters) requires planning

38. Sprites • 2-D or 3-D image or animation that becomes part of a larger scene • First used in the mid-70’s, still in use • Methods of producing sprite content • Rotoscoping live video (green screen) • Claymation • 3D Software • Vector artwork

39. Sprites with Discrete Keyframes • Series of images that depict the desired action • Images are aligned • Translated at some interval

40. Sprites with Discrete Keyframes

41. Demo • Dog Walk

42. Sprites with Visibility • Series of images added in XAML • Use a storyboard to change frames

43. Demo • Space Marine • Knight

44. Kinematics • Forward Kinematics • First object determines position of other objects • Inverse Kinematics • Last object position/rotation propagates up the object chain

45. Forward Kinematics Constrain Movement Angles: Blue = Thigh Constraint Green = Calf Constraint Two forward kinematic chains: Seg0 -> Seg1 Seg2 -> Seg3

46. Forward Kinematics private void MoveSegments(KinematicSegmentSegA, KinematicSegmentSegB, double Cyc) { double AngleA = Math.Sin(Cyc) * ThighConstraint + 90; double AngleB = Math.Sin(Cyc + Offset) * CalfConstraint + 45; SegA.RotateSegment.Angle = AngleA; SegB.RotateSegment.Angle = AngleA + AngleB; double radians = SegA.RotateSegment.Angle * Math.PI / 180; Canvas.SetLeft(SegB, Canvas.GetLeft(SegA) + Math.Cos(radians) * SegmentLength); Canvas.SetTop(SegB, Canvas.GetTop(SegA) + Math.Sin(radians) * SegmentLength); }

47. Demo • Forward Kinematics

48. Inverse Kinematics • Single (inverse) kinematic chain • 25 segments etc. #22 – Controls #21 #23 – Controls #22 End Segment #24 – Controls #23 #25 – Controls #24 Start Segment

49. Inverse Kinematics private Point Reach(KinematicSegmentseg, double x, double y) { double dx = x - Canvas.GetLeft(seg); double dy = y - Canvas.GetTop(seg); double angle = Math.Atan2(dy, dx); seg.RotateSegment.Angle = angle * 180 / Math.PI; Point tx = new Point(); tx.X = x - Math.Cos(angle) * segmentLength; tx.Y = y - Math.Sin(angle) * segmentLength; return tx; } private void Position(KinematicSegment seg1, KinematicSegment seg2) { double angle = seg1.RotateSegment.Angle * Math.PI / 180; Canvas.SetLeft(seg2, Canvas.GetLeft(seg1) + Math.Cos(angle) * segmentLength); Canvas.SetTop(seg2, Canvas.GetTop(seg1) + Math.Sin(angle) * segmentLength); }

50. Demo • Inverse Kinematics