【IT168专稿】Microsoft Expression Blend 3的一大亮点是引入了一个新的工具—SketchFlow。Microsoft引入这个工具的主要目的是用来实现游戏(或应用程序)开发过程原型阶段的辅助设计。

　　借助于SketchFlow，您很快就可以为你的各种想法设计出草图。您可以从第一张粗略草图开始运行、探讨原型。然后，你可以把这些想法转化为可工作的原型，其精细程度可根据你的需要，从极其粗糙到接近真实产品都可胜任。

　　最后，你可以通过SketchFlow播放器向开发人员展示游戏所要实现的交互式用户体验，以供游戏正式开发前的审查和评论。当您准备进一步开发时，可以将原型通过Expression Blend或Visual Studio转换成一个真正的应用程序。

　　在本文中，让我们一起来构建一个基于Silverlight技术的迷你型奥比岛游戏的粗略原型。文章将细致地介绍使用SketchFlow设计这个角色型游戏的原型开发阶段所使用的主要技术。

　　一、创建Sketch Flow项目AoBiIslandGamePrototype

　　启动Microsoft Expression Blend 3，选择“File”—“New Project…”。在随后的“New Project”对话框中，选择工程类型为“Silverlight”且模型类型为“Silverlight 3 SketchFlow Application”创建一个名称为AoBiIslandGamePrototype的解决方案，如图1所示。

　　图1. 选择创建一个Silverlight 3 SketchFlow应用程序

　　注意到，Microsoft Expression Blend 3在创建一个Silverlight 3 SkethcFlow型应用程序时会同时创建两个工程(如图2所示)。一个是Silverlight应用程序项目(AoBiIslandGamePrototype)，另一个是Silverlight库项目(AoBiIslandGamePrototypeScreens)。以下大部分的原型图操作主要是充实第二个Silverlight库项目的过程。

　　图2. Silverlight 3 SkethcFlow应用程序同时创建两个工程

　　现在，请单击菜单“Window”—“Workspaces”—“Design”，把工作空间切换到设计模式(这样更有利于原型阶段的设计)。

　　还注意到，整个程序窗口的中间部分自上而下依次为SkethFlow动画面板、SkethFlow屏幕设计面板和SkethFlow地图面板，如图3所示。

　　上述三个部分大致的使用次序为：首先，主要使用地图面板组织屏幕模块的大致内容及创建其间的导航;其次，使用屏幕设计面板大致规划每一屏幕中的轮廓内容;最后，使用动画面板、元件面板、状态面板等细化每一屏幕。

　　图3. Silverlight 3 SkethcFlow应用程序工作主界面

　　二、导入图像资源文件

　　还可以导入Adobe PhotoShop图像文件和Adobe Illustrator矢量图形文件及Microsoft PowerPoint演示文稿文件。

　　图4给出了导入Adobe PhotoShop图像文件鲜花.PSD时的界面，你可以选择导入其中的某些层而不导入另外一些层。导入成功后，系统自动生成一个文件夹“鲜花_Images”，各图层中的文件都置于这个文件夹下。

　　图4. 导入Adobe PhotoShop图像文件鲜花.PSD的界面

　　图5给出了导入Adobe Illustrator矢量图形文件scene.AI后的初始界面。与导入Adobe PhotoShop图像文件*.PSD不同的是，*.AI文件中的各个图层中对应的矢量对象都被导入到当前屏幕对象中。下面给出了部分的导入后的XAML代码：

　　易见，Adobe Illustrator矢量图形文件scene.AI中的各种画笔、符号等均被转移成Path对象，且原来的各个矢量层均对应一个单独的元素。因此，可以实际开发中你可以事先利用Adobe Illustrator绘制好矢量图形文件，然后导入到Microsoft Expression Blend 3中。

　　图5. 导入Adobe Illustrator矢量图形文件scene.ai后的初始界面

　　此外，你还可以选择导入Microsoft PowerPoint中的演示文稿文件。图6给出了导入PowerPoint 2003演示文稿文件奥比岛游戏方案一.ppt后Silverlight库项目中的变化情形。

　　图6. 导入PowerPoint 2003演示文稿文件后屏幕上的变化

　　从图6中可以看出，导入PowerPoint 2003演示文稿文件后屏幕上的变化主要体现在两点：第一，每一张幻灯片都作为一个单独的.png文件导入到对应的一个SkethFlow屏幕文件中;第二，根据原先演示文稿中的幻灯片顺序，在地图面板中自动建立起这些幻灯片屏幕组件间的链接关系。

　　三、小结

　　本篇中介绍了基于Sketch Flow进行Silverlight游戏原型设计的基础性工作。在作好了初步准备后，在下一篇中，我们将讨论如何利用地图面板规划游戏主要模块及导航流程等问题。