【IT168专稿】在上一篇中，我们讨论了如何创建Sketch Flow项目和导入各种类型的游戏原型中所需要的图像资源文件等基础性内容。在本篇中，我们将讨论使用SketchFlow Map规划游戏主要模块、使用SketchFlow Map来创建可重用的组件屏幕和实现各屏幕间的导航等问题。
一、使用SketchFlow Map规划游戏主要模块
SkethFlow的地图面板是由文件Sketch.map提供的，此文件本质上也是一个XAML文件。
初始时的地图面板界面中仅有一个屏幕组件，而且文件Screen 1.xaml自动打开。
图1. 初始时的地图面板界面
通过操作地图面板，我们可以轻松地创建其他的屏幕组件、普通的可重用组件并创建它们之间的导航关系。
首先，请注意当鼠标移动到屏幕组件Screen 1上时的现象。在Screen 1按钮的下部出现四个小图标，分别用于创建一个新的与当前屏幕具有导航关系的屏幕组件、连接到一个已知的屏幕组件、创建并插入一个可重用的组件屏幕和修改当前按钮组件的可视化标记(颜色)。其中，可视化标记用于标记当前屏幕或组件的颜色，用于直观地指出当前屏幕或组件与其他屏幕的关系。
图2. 当鼠标移动到Screen 1上时在其下部出现四个小图标
其中，名称Screen 1可以重命名，以便更准确地标记当前屏幕。
拖动左边第一个小图标可以轻松地创建与此屏幕具有导航关系的其他屏幕。同时，新创建的当前屏幕被打开，如图9所示。
图3. 使用拖动方式创建与此屏幕具有导航关系的其他屏幕
除了使用上述方式外，你还可以通过在空白处单击右键使用弹出的快捷菜单或正文地图面板下部的小图标来实现上述功能。
接下来，我们来讨论如何利用Assets面板上的众多样式组件粗略地绘制一个屏幕。首先，把名称Screen 1重命名为Start，并且双击这个屏幕组件，使之成为当前屏幕。
系统提供了大量的常规使用SketchStyle控件，几乎对应于所有常用的Silverlight控件。切换到Assets面板，从其下选择Styles—SketchStyles。
【提示】在项目规则的后期正式开发之前，你可以把这些样式控件转换成标准的Silverlight控件。
你会注意到，右侧列出了33个样式组件，如图10所示。
图4. Microsoft Expression Blend 3内置了33个常用的样式组件以方便屏幕原型设计
你可以像操作标准的Silverlight控件一样把这些样式控件拖动到SketchFlow屏幕上。图11展示了把一个TitleCenter-Sketch和一个Button-Sketch拖放到屏幕Start上并导入一幅Adobe Illustrator矢量图形文件后的结果。
图5. 使用样式组件和Adobe Illustrator矢量图形设计屏幕Start
根据上面的介绍，你可以双击地图面板上的其他屏幕组件(或可重用组件)并使用样式控件设计这些屏幕。图12给出了本文示例奥比岛游戏某设计阶段的地图面板情况。图中，我们规则游戏中共有8个小岛，玩家可以选择其中某个岛屿开始游戏。另外，我们已经建立起部分屏幕间的导航关系，而且使用不同的颜色区别某些组件。
图6. 某设计阶段的地图面板情况
二、使用SketchFlow Map创建可重用的组件屏幕
在上面SketchFlow的屏幕设计过程中自然出现这样一个问题：有许多相同的内容，还需要重复设计它们吗?不必。你可以把这一部分内容一起选定并把它们转换成一个可重用的组件屏幕。当然，你也可以一开始单独设计一些可重用的组件屏幕供设计各种屏幕时使用。
图13给出的是在Island 1屏幕的设计中，我们把右上角的两个按钮样式Home和ScoreBoard共同选定，然后通过快捷菜单“Make into Component Screen…”把它们转换成一个可重用的组件屏幕的情形。
图7. 通过快捷菜单“Make into Component Screen…”把共同内容转换成可重用的组件屏幕
之后，我们把上面得到的可重用组件屏幕命名为Nav_bar。图14给出了选定当前组件的情形。易知，这个组件会出现在许多岛屿的开始界面中，所以把它规则为一个可重用组件屏幕。
图8. 一个可重用的导航作用的组件屏幕
使用上述组件屏幕是很简单的。你只需要直接把它拖动到已存在的屏幕上即可。这样一来，各个屏幕上即出现这个导航组件屏幕。当然，对应于某些屏幕，这个组件的位置可能还需要再次通过鼠标拖动进行调整。
最后需要指出的是，任意时刻你更新组件屏幕中的内容，只要保存，则其他引用此组件屏幕的屏幕都会进行相应的更新。
三、使用SketchFlow Map实现导航
通过使用(组件)屏幕下方的小图标“Create a connected screen”或“Connect an existing screen”创建的组件间的连接小箭头仅说明了这部分之间存在先后关系，但游戏方案的最后决定者在运行这样的原型工程时并不可能在这些屏幕间进行跳转。本节正要介绍如何加入屏幕间导航的问题。
典型情况下，我们会在一个屏幕上添加一个按钮样式，单击它以实现从当前屏幕跳转到下一个屏幕。为了简单起见，我们仅讨论操作上面创建的组件屏幕相关操作。
1、建立各屏幕间的导航
双击打开Nav_bar.xaml屏幕，单击其中的Home按钮并单击右键，然后从快捷菜单中选择“Navigate to”—“Start”，如图15所示。
图9. 使用快捷菜单创建屏幕间的导航关系
上述操作是易于理解的，即运行过程中当单击“Home”按钮时整个控制切换到游戏的开始屏幕Start中。
类似操作，单击其中的ScoreBoard按钮并单击右键，然后从快捷菜单中选择“Navigate to”—“ScoreBoard”。即是说，当运行过程中任意时刻单击导航栏中的ScoreBoard按钮时整个控制切换到游戏的玩家得分板屏幕ScoreBoard处。
2、运行测试屏幕间的导航
保存上述所有内容(菜单File—Save All)，选择菜单Project—Run Project(或按键F5)。一切顺利的话，在浏览器中会开启一个SketchFlow播放器(SketchFlow Player)。你可以使用左上方的导航栏进行各屏幕间的导航测试，或者使用左下方的地图面板选择某个屏幕并直接跳转到该屏幕处。
图10. 在奥比岛鸟瞰图屏幕草图中，你可以单击某个数字导航到对应的岛屿
四、小结
在本篇中，我们开始接触到SketchFlow原型游戏开发的关键部分，即使用SketchFlow Map规划游戏主要模块、创建可重用的组件屏幕和实现各屏幕间的导航等问题。在下一篇中。
