UWP 异形推箱子 - 第 3 部分

引言

这是三部分系列文章的第三部分，您将在此系列中探索如何为通用 Windows 平台 (UWP) 实现一个基于 XAML 的游戏。

本系列文章链接

• 第一部分
• 第二部分
• 第三部分（本文）

检索地图

public async Task<string> GetMapAsync(int levelNumber)
{
 string fileUrl = string.Format(@"ms-appx:///{0}Level{1:000}.skbn",
    levelDirectory, levelNumber);
 
 StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(fileUrl));
 string levelText = await FileIO.ReadTextAsync(file);
 
 return levelText;
}

探索单元格控件

void UpdateDisplay()
{
    wallImage.SetVisibility(cell is WallCell);
    floorImage.SetVisibility(cell is FloorCell || cell is GoalCell);
    floorHighlightImage.SetVisibility(hasMouse && (cell is FloorCell || cell is GoalCell));
    treasureImage.SetVisibility(cell.CellContents is Treasure);
    playerImage.SetVisibility(cell.CellContents is Actor);
    goalImage.SetVisibility(cell is GoalCell && !(cell.CellContents is Treasure));
    goalActiveImage.SetVisibility(cell is GoalCell && cell.CellContents is Treasure);
}

SetVisibility 方法是一个自定义扩展方法，它避免了使用三元表达式来设置 UIElement 的 Visibility 属性。它减少了冗余。请参阅列表 3。

列表 3. UIElementExtensions SetVisibility 方法。

public static void SetVisibility(this UIElement element, bool visible)
{
    element.Visibility = visible ? Visibility.Visible : Visibility.Collapsed;
}

换句话说，它将此

wallImage.Visibility = cell is WallCell ? Visibility.Visible : Visibility.Collapsed;

变为此

wallImage.SetVisibility(cell is WallCell);

顺带一提，微软没有借此机会用一个简单的布尔属性替换 UIElement 的 Visibility 属性，这确实很可惜，因为 UWP 中已经对许多不太重要的东西进行了改造。当然，现在引入一个新的可见性枚举值（如 Android 的“Gone”可见性值）可能有点晚了。

此外，SDK 中没有内置的 BooleanToVisibilityConverter，这意味着新开发者在弄清楚如何根据布尔值隐藏或显示元素时，大部分时间都会卡住。好消息是，随着 Windows 10 创意者更新的发布，x:Bind 现在可以隐式地与 bool 和 Visibility 枚举值相互转换。但这仅在运行创意者更新的计算机和设备上有效。

位图缓存

位图会占用大量内存。如果您的 UWP 应用打算在手机上运行，那么您需要注意将内存使用量降至最低。

注意： 在 Windows Mobile 上，对于内存超过 1GB 的设备，您的应用最多只能使用 390 MB。此限制强制执行，无论有多少系统内存可用，并且如果超出该限制，操作系统将退出您的应用。

为了减少推箱子游戏所需的 RAM 量，BitmapImage 对象被缓存在一个字典中。虽然每个单元格都有自己的一组 Image 对象，但它与其他 CellControls 共享底层的 BitmapImages。

图像缓存是 CellControl 本身的一个简单的静态 Dictionary，如下所示。

static readonly Dictionary<string, BitmapImage> imageCache
   = new Dictionary<string, BitmapImage>();

当实例化 CellControl 时，也会创建一组 Image 对象。请参阅列表 4。CreateContentImage 方法首先尝试使用 relativeUrl 参数检索图像。如果之前已创建图像，则将其分配给 Image 的 Source 属性。

列表 4. CellControl CreateContentImage 方法

Image CreateContentImage(string relativeUrl)
{
  Image image = new Image
  {
   HorizontalAlignment = HorizontalAlignment.Stretch,
   VerticalAlignment = VerticalAlignment.Stretch,
   Stretch = Stretch.Fill
  };

 BitmapImage sourceImage;

 if (!imageCache.TryGetValue(relativeUrl, out sourceImage))
 {
  Uri imageUri = new Uri(BaseUri, relativeUrl);
  sourceImage = new BitmapImage(imageUri);
  imageCache[relativeUrl] = sourceImage;
 }

 image.Source = sourceImage;

 return image;
}

响应触摸事件

使用信号量实现线程安全的异步等待

lock (aLock)
{
    await DoSomethingAsync();
}

async Task<bool> JumpAsync(Jump jump)
{
 bool result = false;
 
 try
 {
  await moveSemaphore.WaitAsync();
 
  SearchPathFinder searchPathFinder = new SearchPathFinder(Cell, jump.Destination);
  if (searchPathFinder.TryFindPath())
  {
   for (int i = 0; i < searchPathFinder.Route.Length; i++)
   {
    Move move = searchPathFinder.Route[i];
 
    /* Sleep for the stepDelayMS period. */
    await Task.Delay(stepDelayMS).ConfigureAwait(false);
 
    Location moveLocation = Location.GetAdjacentLocation(move.Direction);
    Cell toCell = Level[moveLocation];
 
    if (!toCell.TrySetContents(this))
    {
     throw new SokobanException("Unable to follow route.");
    }
    MoveCount++;
   }
   /* Set the undo item. */
   Jump newMove = new Jump(searchPathFinder.Route) { Undo = true };
   moves.Push(newMove);
   result = true;
  }
 }
 finally
 {
  moveSemaphore.Release();
 }
 
 return result;
}

internal bool DoMove(Move move)
{
 try
 {
  moveSemaphore.Wait();
 
  return DoMoveAux(move);
 }
 finally
 {
  moveSemaphore.Release();
 }
}

关于图像资源

实现滑动菜单

• 撤销移动
• 重做移动
• 重新开始关卡

public class DelegateCommand : ICommand
{
 readonly Action<object> executeAction;
 readonly Func<object, bool> canExecuteAction;
 
 public DelegateCommand(Action<object> executeAction,
  Func<object, bool> canExecuteAction = null)
 {
  this.executeAction = executeAction;
  this.canExecuteAction = canExecuteAction;
 }
 
 public bool CanExecute(object parameter)
 {
  return canExecuteAction?.Invoke(parameter) ?? true;
 }
 
 public void Execute(object parameter)
 {
  executeAction?.Invoke(parameter);
 }
 
 public event EventHandler CanExecuteChanged;
 
 protected virtual void OnCanExecuteChanged()
 {
  CanExecuteChanged?.Invoke(this, EventArgs.Empty);
 }
 
 public void RaiseExecuteChanged()
 {
  OnCanExecuteChanged();
 }
}

ICommands 非常有用，因为它们与许多 UI 元素（如 Buttons）具有亲和力，这些元素会自动利用 CanExecute 方法来自动更改按钮的 IsEnabled 状态。

public Game(IInfrastructure infrastructure)
{
 this.infrastructure = ArgumentValidator.AssertNotNull(infrastructure, nameof(infrastructure));
 LevelContentBase.SynchronizationContext = infrastructure.SynchronizationContext;
 
 RestartLevelCommand = new DelegateCommand(_ => RestartLevel());
 UndoCommand = new DelegateCommand(_ => commandManager.Undo());
 RedoCommand = new DelegateCommand(_ => commandManager.Redo());
 
 /* Reset the level number to 0 if a debugger is attached. */
 if (Debugger.IsAttached)
 {
  infrastructure.SaveSetting(levelKey, 0);
 }
}

命令的实现

<SplitView Grid.Row="1" x:Name="splitView"
   DisplayMode="Overlay"
   OpenPaneLength="320"
   PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
   IsTabStop="False" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
 <SplitView.Pane>
  <StackPanel Background="{ThemeResource ChromeSecondaryBrush}">
   <Button Command="{x:Bind Game.RestartLevelCommand}"
      Content="Restart Level"
      Click="HandleMenuButtonClick"
      Style="{ThemeResource MenuItemTextButtonStyle}"/>
    <Button Command="{x:Bind Game.UndoCommand}"
      Content="Undo"
      Click="HandleMenuButtonClick"
      Style="{ThemeResource MenuItemTextButtonStyle}"/>
    <Button Command="{x:Bind Game.RedoCommand}"
      Content="Redo"
      Click="HandleMenuButtonClick"
      Style="{ThemeResource MenuItemTextButtonStyle}"/>
  </StackPanel>
 </SplitView.Pane>
 <SplitView.Content>
  <Grid x:Name="gameCanvasContainer" VerticalAlignment="Stretch" 
        HorizontalAlignment="Stretch" Background="Transparent">
   <Canvas x:Name="gameCanvas" Background="Transparent" />
  </Grid>
 </SplitView.Content>
</SplitView>

void HandleMenuButtonClick(object sender, RoutedEventArgs e)
{
 splitView.IsPaneOpen = false;
}

<ToggleButton
 FontFamily="Segoe MDL2 Assets"
 Content="&#xE700;"
 Foreground="White"
 Background="Transparent"
 BorderBrush="Transparent"
 TabIndex="1"
 AutomationProperties.Name="Navigation"
 ToolTipService.ToolTip="Navigation"
 IsChecked="{Binding IsPaneOpen, ElementName=splitView, Mode=TwoWay}" />

历史

2016年10月26日

• 首次发布