Silverlight 解谜游戏 之四 粒子特效

       前几篇一直在Blend中工作没体现出开发者的作用，本篇将为订书器（Stapler）添加自定义粒子效果，当订书器被点击时产生更好的视觉效果。其中将使用到nerdplusart 的Silverlight Particle Generator 粒子特效工具。

在结束本章内容后，点击Stapler 和Candies 将达到以下效果：



 

 

1. 在Projects面板中新增Interactivity 文件夹，再为Interactivity 新增ParticlesBehavior 子文件夹：



2. 右键ParticlesBehavior文件夹->Add New Item->Behavior，添加ParticlesBehavior：





3. 下载Silverlight Particle Generator 源代码，将代码中的ParticleControl.xaml 和ParticleControl.xaml.cs 文件加入（Add Existing Item）到ParticlesBehavior 文件夹：



4. 右键项目点击“Edit in Visual Studio”，对PaticlesBehavior.cs进行编辑来跟踪鼠标移动位置。将ParticlesBehavior 类声明改为Behavior<Canvas>，通过修改后AssociatedObject 类型将成为Canvas。在OnAttached 和OnDetaching 方法中分别添加和删除MouseMove 事件，当鼠标移动时便可记录下当前鼠标位置：

public class ParticlesBehavior : Behavior<Canvas>
{
private Point currentMousePosition;

public ParticlesBehavior()
{
this.ShowParticles = new ActionCommand(this.OnShowParticles);
}

protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
}

protected override void OnDetaching()
{
base.OnDetaching();
AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);
}

void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
{
currentMousePosition = e.GetPosition(null);
}

public ICommand ShowParticles
{
get;
private set;
}

private void OnShowParticles()
{
ParticleControl p = new ParticleControl();
p.OffsetX = currentMousePosition.X;
p.OffsetY = currentMousePosition.Y;
AssociatedObject.Children.Add(p);
}
}

 

5. VS里编译后回到Blend，在Assets->Behavior 中将会看到ParticlesBehavior 选项，将ParticlesBehavior 加入LayoutRoot中：



点击Triggers右侧的“+”按钮添加新EventTrigger；点击EventTrigger将SourceName设为staplerPath，EventName设为MouseLeftButtonDown；再次点击“+”为可为其他物品添加ParticlesBehavior特效。另，在ParticlesBehavior.cs中增加一些代码，便可出现下图中Particles Properties设置窗口（详情可下载源代码）：



6. 在Blend中F5，点击图片中的订书器（Stapler）便会出现粒子效果（但其不会自动消失），再点击Candies也会出现粒子效果，问题是所有的粒子效果仍然不能消失。打开ParticleControl.xaml.cs 进行编辑： 
    a. 在ParticleControl 类中定义int 型totalParticlesCreated

    b. 将this.particles.Count 替换为totalParticlesCreated 
    c. 在SpawnParticle方法最后添加totalParticlesCreated++

至此粒子效果就会自动消失了。

 

7. 最后为staplerPath添加RemoveElementAction，目的是为了每个物品只能点击一次：





将SourceName 和TargetName 都设置为staplerPath，EventName依然为MouseLeftButtonDown：



源代码下载：