SHAZAML! » ParticlesBehavior

Video: Creating a Silverlight 3 Casual Game using Blend 3 and Triggers, Actions, and Behaviors

Mark Tucker — Mon, 09 Nov 2009 15:19:11 +0000

On Saturday, November 7, 2009 at 9:00am I presented at the Desert Code Camp in Phoenix, AZ. The topic of my presentation was Silverlight casual game development. In less than an hour I demonstrated how to use triggers, actions, and behaviors in Blend 3 to create a hidden object game. Because all code was contained in the TABs (Triggers, Actions, and Behaviors) there was no code behind for the main UserControl.

Here is a link to the presentation video in WMV format.

If you like you can see all the episodes and follow along with the tutorial.

Hidden Object: Episode 11 – Add Custom Shapes to the Particles Behavior

Mark Tucker — Tue, 06 Oct 2009 00:05:27 +0000

This is episode 11 of Creating a Hidden Object Game is Silverlight 3.

Growing up our family didn’t splurge on Lucky Charms cereal, but I remember the TV commercials with Lucky the leprechaun talking about all the fun marshmallow shapes: pink hearts, yellow moons, orange stars, green clovers, and blue diamonds. In later years other shapes appeared such as purple horseshoes, red balloons, rainbows, and pots of gold.

What does this have to do with our hidden object game? Currently the ParticleControl creates only one shape. Circles. Wouldn’t it be great if you could specify the shape of the particles? That’s what I thought and I knew it could easily be done once I saw this discussion post on the CodePlex site for the Silverlight String-To-PathGeometry Converter.

To the existing ParticlesBehavior, we will add two dependency properties with corresponding property get/set blocks:

public static readonly DependencyProperty ParticleShapeProperty =
    DependencyProperty.Register("ParticleShape", typeof(ParticleShape),
    typeof(ParticlesBehavior), null);

public static readonly DependencyProperty CustomShapePathDataProperty =
    DependencyProperty.Register("CustomShapePathData", typeof(string),
    typeof(ParticlesBehavior), null);

The ParticleShape property is an enum with a list of possible shapes and a custom option:

public enum ParticleShape
{
    Circle,
    Square,
    Star4,
    Star5,
    Star8,
    Custom
}

The CustomShapePathData property is a string that holds a special XAML Path markup syntax and is used when the ParticleShape property is set to Custom. Here is an example of a path definition for a triangle:

The value of the Data property is what is set on CustomShapePathData.

The only other change we need to make to ParticlesBehavior is in the OnShowParticles method where we set the ParticleShape and CustomShapePathData on the instance of ParticleControl.

In ParticleControl, we add the same two dependency properties for ParticleShape and CustomShapePathData with their corresponding property get and set.

The Ellipse, Rectangle, and Path all inherit from the Shape base class. So we change all the methods in ParticleControl that worked on an Ellipse to a Shape. In the SpawnParticle method, we call the newly created CreateShape method:

private Shape CreateShape()
{
    string pathData = "";

    switch (ParticleShape)
    {
        case ParticleShape.Circle:
            return new Ellipse();
 
        case ParticleShape.Square:
            return new Rectangle();

        case ParticleShape.Star4:
            pathData = star4;
            break;

        case ParticleShape.Star5:
            pathData = star5;
            break;

        case ParticleShape.Star8:
            pathData = star8;
            break;

        case ParticleShape.Custom:
            if (string.IsNullOrEmpty(CustomShapePathData))
                return new Ellipse();
            else
                pathData = CustomShapePathData;
            break;

        default:
            return new Ellipse();
    }

    string xamlPath = string.Format("", pathData);

    Path path = (Path)System.Windows.Markup.XamlReader.Load(xamlPath);

    return path;
}

If the ParticleShape property is set to Circle or Square, then a new Ellipse or Rectangle is created and returned. If the selected shape is a 4, 5, or 8-pointed star then a string constant containing the Path data syntax is set and a new Path is created using the XamlReader.Load method. If it is a custom shape, then the data is set based on the value of the CustomShapePathData property. If there is no custom path data, then an Ellipse is created.

When we compile the project and open Blend, we will now see the additional properties:

Here is what the custom triangle particles look like as well as the built-in shapes:

One of the best ways to create these custom shapes is in Expression Design. Create a new document that is 100×100 pixels. Use the Pen, Polygon, or Polyline tools to create a path to your desired shape. Or create multiple paths and use Path operations (Unite, Front Minus Back, etc.) to create a single path.

Select the Path and on the Edit menu select Copy XAML. Paste the XAML into Notepad and copy the Data property string and paste it as the CustomShapePathData value:

It’s that easy:

Source code
Demo

In the next episode, we will create a custom mouse cursor and manage its use with a behavior.

Hidden Object: Episode 4 – Adding Particles with a Behavior

Mark Tucker — Fri, 18 Sep 2009 03:25:53 +0000

In the previous episodes of Creating a Hidden Object Game in Silverlight 3 we spent all of our time in Blend. Now we are going to put on our developer hat and create our own custom behavior that will shoot particles when an item is clicked. This will give a nice visual effect that compliments marking the item off the list and the sound effect.

Click here to see a demo of what the game will look like after we finish this episode.

I want to make sure that I give tons of credit to Robby Ingebretsen from nerdplusart for his Silverlight Particle Generator. If you haven’t had a chance to play with it before (and I do mean play) then take a few minutes to do so.

The plan is to take the ParticleControl from that solution and wrap it in a ParticlesBehavior that will be triggered when the item’s path (ex: staplerPath) is clicked.

First we need to take a side-step into the differences between an action and a behavior and their relationship to triggers. We will start to see some patterns emerge. In the previous episodes we looked at two actions (ChangeProperyAction & PlaySoundAction) and noticed that an action specifies what will happen and to which object. When the action will occur is specified by a trigger. There are two main types of actions (TriggerAction & TargetedTriggerAction). The first allows us to attach to an object and invoke some code when a trigger is fired whereas the second does that and defines a target for the action that is different from the object that the action is associated with. Both of these actions can only be called by a single trigger. A behavior in some ways appears simpler than an action because there is no direct connection to a trigger and therefore no Invoke method to be called. All we get are overrides for OnAttached and OnDetaching. But behaviors are powerful, can hold state, and can do various things based on many triggers.

For a class diagram of the Action and Behavior base classes as well as some great sample behaviors, check out the Behaviors and Triggers in Silverlight 3 article on SilverlightShow.

Hint: We will use the MagnifierOverBehavior in the next episode.

Enough talking lets open Blend and get coding. In the Projects panel, create a folder called Interactivity and under it a folder called ParticlesBehavior. Interactivity seems to be the term Microsoft uses to talk about both actions and behaviors and by the time we are done with this tutorial we will have created both types. I am doing this in Blend, because it has a template to create a basic behavior.

Right-click the ParticlesBehavior folder, pick Add New Item, select Behavior, and enter the name: ParticlesBehavior.

Click OK to create the behavior.

After saving all the files, open the solution concurrently in Visual Studio 2008 so that you can switch back and forth between Visual Studio and Blend as needed.

Go to the Silverlight Particle Generator page and download the source code. Copy the following files into the Interactivity\ParticlesBehavior folder and include them in the project:

ParticleControl.xaml
ParticleControl.xaml.cs
LICENSE.TXT

The quick idea behind the ParticlesBehavior is that it will be attached to the LayoutRoot canvas. The behavior will handle the canvas’s MouseMove event and store the current mouse position. When the ParticlesBehavior is notified that it should show particles, it creates an instance of the ParticleControl and positions it by setting the OffsetX and OffsetY properties.

We start by changing the class declaration so that ParticlesBehavior inherits from Behavior

public class ParticlesBehavior : Behavior

Now we need a way to trigger when the control will be shown or hidden. This is achieved by adding a command to ParticlesBehavior called ShowParticles. In the constructor, instantiate a new ActionCommand and pass it an Action delegate. The method that you use can have no parameters or one parameter (of type object). Later when triggers are associated with this behavior you can set the value of the CommandParameter. If you have a method that passes an object parameter, you can get access to the parameter.

This command then creates and sets properties on the ParticleControl and adds it to the Children collection of LayoutRoot. Update the ParticlesBehavior class to include this code:

public class ParticlesBehavior : Behavior

If you compile the project, you will now see the ParticlesBehavior in the Assets panel. Drag and drop it on LayoutRoot. The properties panel will have a ShowParticles group created for the ShowParticles Command and an empty Triggers list:

Click the plus sign to the right of Triggers and pick EventTrigger and set the SourceName (staplerPath) and EventName (MouseLeftButtonDown):

What this is saying is that when the staplerPath object is clicked then it will call the ShowParticles command on this behavior. You could also specify a CommandParameter which you then could use if OnShowParticles had an object parameter defined. When you click the plus sign next to Triggers again, you can specify another EventTrigger to be called when idolPath is clicked. Repeat this for all the paths.

Run the game now and click on an item. You should see lots of particles flowing from that location. Find another object and click it and there will be a second stream of particles. The ParticleControl currently doesn’t have a way to stop the particles from flowing. We will take care of that in a minute. But let’s first try to figure out what is happening between the triggers and the behavior. The command defined on the behavior is an ICommand, it knows nothing about triggers. And triggers just know when something is going to happen. How does it know to call a command on the behavior? The answer is the InvokeCommandAction that is created behind the scenes. This can be seen in a diagram from the Expression Blend SDK User Guide:

It might be a good learning opportunity to intercept the trigger before it calls InvokeCommandAction and see it doing the work of connecting the trigger to the behavior. Let’s create a trigger that we can use and debug. In a new folder under Interactivity called DebugEventTrigger, create a class called DebugEventTrigger.cs:

public class DebugEventTrigger : System.Windows.Interactivity.EventTrigger
{
    public DebugEventTrigger() : base() {}

    public DebugEventTrigger(string eventName) : base(eventName) {}

    protected override void OnEvent(EventArgs eventArgs)
    {
        base.OnEvent(eventArgs);
    }
}

We derive the class from EventTrigger so we can use it just list the triggers we have already used. Compile the project and in Blend, add this trigger to the triggers collection on the ParticlesBehavior and select the SourceName and EventName. Switch back to Visual Studio and set a breakpoint in the OnEvent method. Run the app in debug mode from Visual Studio. When the breakpoint is hit, look at the Locals window and you will see that the trigger has a single action, InvokeCommandAction, the CommandName is “ShowParticles” and the AssociatedObject is ParticlesBehavior.

Back to the issue of the never-ending particles. To fix this, we need just one set of changes to ParticleControl. The UpdateParticles method is the heart of the control and is called each time the Silverlight rendering process renders a frame. It updates existing particles, creates new particles, and removes expired particles. The particles are created 10 at a time until the particles collection reaches the MaxParticleCount. But because particles are also being removed from this collection the result is a never-ending flow of particles. Change this.particles.Count to totalParticlesCreated and define it as a private field at the top of the class definition as type int. At the end of the SpawnParticle method, increment the totalParticlesCreated value by one. Now the control will create particles until MaxParticleCount is reach and stop.

We have a fully-functioning ParticlesBehavior.

The last thing I did was add the dependency properties from ParticleControl (StartColor, EndColor, Fuzziness, MaxParticleCount, OriginVariance, Speed, ParticleSize, ParticleSizeVariance, Life, and LifeVariance) to ParticlesBehavior and set the values for each created instance of the ParticleControl. This gives a nice design-time experience to configure the particles. I changed a few values to better time the particles with the length of the sound played when an item is clicked:

There is one final thing we need to do when an item is clicked. Right now you can click on an item multiple times and it will play a sound and generate particles each time. To solve this, we can use the RemoveElementAction. This action removes the targeted element from its parent control. Drag the RemoveElementAction onto the staplerPath object. Since the trigger defaults to EventTrigger and MouseLeftButtonDown and the TargetName defaults to the AssociatedObject then we don’t have to change anything:

When we click on the staplerPath then it will:

Change the opacity of its corresponding TextBlock (ChangePropertyAction)
Play a sound (PlaySoundAction)
Spray particles (ParticlesBehavior)
Be removed from its parent control (RemoveElementAction)

Download the source for this episode.

In our next episode, we will use a magnifer pixel shader effect wrapped in a behavior to allow the user to zoom in on portions of the image.