使用 Xamarin Forms 构建拼图游戏

• 下载 SokobanForms01.zip - 17.9 MB

 

 

引言

了解你的平台

创建 Xamarin 跨平台解决方案

理解 Xamarin Forms 解决方案结构

• 一个 Xamarin Android 项目
• 一个 Xamarin iOS 项目
• 一个 UWP 项目
• 以及一个 Xamarin Forms 项目

在 Xamarin Forms 中构建游戏 UI

• 一个顶部工具栏部分，
• 一个用于游戏图块的下部部分，
• 以及一个滑入式菜单。

在 Xamarin Forms 中实现滑入式菜单

MainPage.xaml 的根元素如下所示

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Outcoder.Sokoban.Launcher.MainPage">
…

<MasterDetailPage.Master>
 <ContentPage Title="Menu" BackgroundColor="{StaticResource ChromePrimaryColor}">
  <StackLayout Padding="12">
   <Label Text="Undo" Style="{StaticResource MenuItemTextStyle}">
    <Label.GestureRecognizers>
     <TapGestureRecognizer Command="{Binding UndoCommand}"
                Tapped="HandleMenuItemTapped" />
    </Label.GestureRecognizers>
   </Label>
   <Label Text="Redo" Style="{StaticResource MenuItemTextStyle}">
    <Label.GestureRecognizers>
     <TapGestureRecognizer Command="{Binding RedoCommand}"
                Tapped="HandleMenuItemTapped" />
    </Label.GestureRecognizers>
   </Label>
   <Label Text="Restart Level" Style="{StaticResource MenuItemTextStyle}">
    <Label.GestureRecognizers>
     <TapGestureRecognizer Command="{Binding RestartLevelCommand}"
                Tapped="HandleMenuItemTapped" />
    </Label.GestureRecognizers>
   </Label>
  </StackLayout>
 </ContentPage>
</MasterDetailPage.Master>

void HandleMenuItemTapped(object sender, EventArgs e)
{
   CloseMenu();
}

void CloseMenu()
{
   IsPresented = false;
}

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Outcoder.Sokoban.Launcher.App">
 <Application.Resources>

  <ResourceDictionary>
   <Color x:Key="ChromePrimaryColor">#ff9a00</Color>
   <Color x:Key="ChromeSecondaryColor">#ee9000</Color>
   <Color x:Key="GameShadeColor">#55111111</Color>
   <Color x:Key="GameBackgroundColor">#303030</Color>
  </ResourceDictionary>

 </Application.Resources>
</Application>

<MasterDetailPage.Detail>
 <ContentPage Title="Game"
  BackgroundColor="{StaticResource GameBackgroundColor}">
      
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <Grid x:Name="topContentGrid" BackgroundColor="{StaticResource ChromePrimaryColor}">
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
   
    <Grid HorizontalOptions="Start" Padding="12,0,0,0" 
          WidthRequest="30" HeightRequest="30">
     <Image Source="MenuButton.png" Aspect="AspectFit" 
            HorizontalOptions="Fill" VerticalOptions="Fill">
      <Image.GestureRecognizers>
       <TapGestureRecognizer Tapped="HandleMenuButtonTapped" />
      </Image.GestureRecognizers>
     </Image>
    </Grid>
      
    <StackLayout Orientation="Horizontal" Grid.Column="1" Padding="12,0,0,0">
     <Label Text="Level" Style="{StaticResource LabelStyle}" />
     <Label Text="{Binding Level.LevelNumber, Mode=OneWay}" 
              WidthRequest="30" Style="{StaticResource LabelStyle}"  />
    </StackLayout>
   
    <StackLayout Orientation="Horizontal" Grid.Column="2">
     <Label Text="{Binding Level.Actor.MoveCount, Mode=OneWay}" 
            Style="{StaticResource LabelStyle}" />
     <Label Text="Moves" Style="{StaticResource LabelStyle}" />
    </StackLayout>
  
    <StackLayout Orientation="Horizontal" Grid.Column="3" Padding="12,0,12,0">
     <Label Text="Code" Style="{StaticResource LabelStyle}" />
     <Entry x:Name="levelCodeTextBox" Style="{StaticResource LevelCodeEntryStyle}"
         Focused="HandleLevelEntryFocused"
         Unfocused="HandleLevelEntryUnfocused"
         Completed="HandleLevelEntryCompleted"
         BackgroundColor="Transparent" />
    </StackLayout>
   </Grid>
   <AbsoluteLayout x:Name="gameLayout" Grid.Row="1"
     BackgroundColor="Transparent" VerticalOptions="FillAndExpand" 
     HorizontalOptions="FillAndExpand" />
     
   <ContentView x:Name="overlayView"  HorizontalOptions="Fill" VerticalOptions="Fill"
      Grid.RowSpan="2"
      BackgroundColor="{StaticResource GameShadeColor}"
      IsVisible="{Binding FeedbackVisible, Mode=OneWay}">
     <Label
      Text="{Binding FeedbackMessage, Mode=OneWay}"
      FontSize="Large"
      TextColor="White"
      IsVisible="{Binding ContinuePromptVisible, Mode=OneWay}"
      VerticalTextAlignment="Center"
      HorizontalTextAlignment="Center" />
   </ContentView>
  </Grid>

 </ContentPage>
</MasterDetailPage.Detail>

实现平台特定的基础设施

public abstract class InfrastructureBase : IInfrastructure
{

 protected InfrastructureBase(ISynchronizationContext synchronizationContext)
 {
  SynchronizationContext = ArgumentValidator.AssertNotNull(synchronizationContext, 
                                                           "synchronizationContext");
 }

 public abstract int LevelCount { get; }

 public abstract Task<string> GetMapAsync(int levelNumber);

 public ISynchronizationContext SynchronizationContext { get; }

 public virtual void SaveSetting(string key, object setting)
 {
  Application.Current.Properties[key] = setting;
 }

 public virtual bool TryGetSetting(string key, out object setting)
 {
  return Application.Current.Properties.TryGetValue(key, out setting);
 }

 public virtual T GetSetting<T>(string key, T defaultValue)
 {
  object result;
  if (TryGetSetting(key, out result))
  {
   return (T)result;
  }

  return defaultValue;
 }

 public abstract void PlayAudioClip(AudioClip audioClip);
}

各种 `IInfrastructure` 成员，包括 `LevelCount`、`GetMapAsync` 和 `PlayAudioClip`；需要为每个平台实现。我们稍后会关注这一点，但首先让我们检查 `ISynchronizationContext` 成员。

抽象线程同步上下文

class UISynchronizationContext : ISynchronizationContext
{
 public bool InvokeRequired => Thread.CurrentThread.IsBackground;

 public void InvokeIfRequired(Action action)
 {
  if (InvokeRequired)
  {
   Xamarin.Forms.Device.BeginInvokeOnMainThread(action);
  }
  else
  {
   action();
  }
 }
}

class Infrastructure : InfrastructureBase
{
 const string levelDirectory = "Levels";
 readonly List<string> fileList;

 readonly Activity activity;
 readonly AudioClips mediaClips;

 public Infrastructure(
  ISynchronizationContext synchronizationContext,
  Activity activity,
  AudioClips mediaClips)
  : base(synchronizationContext)
 {
  this.activity = ArgumentValidator.AssertNotNull(activity, "activity");
  this.mediaClips = ArgumentValidator.AssertNotNull(mediaClips, nameof(mediaClips));

  fileList = activity.Assets.List(levelDirectory).Where(name => name.EndsWith(".skbn")).ToList();
 }

 public override int LevelCount => fileList?.Count ?? 0;

 public override Task<string> GetMapAsync(int levelNumber)
 {
  string fileName = $@"{levelDirectory}/Level{levelNumber:000}.skbn";

  using (var stream = activity.Assets.Open(fileName))
  {
   using (StreamReader reader = new StreamReader(stream))
   {
    string levelText = reader.ReadToEnd();

    return Task.FromResult(levelText);
   }
  }
 }

 public override void PlayAudioClip(AudioClip audioClip)
 {
  mediaClips.Play(audioClip);
 }
}

class AudioClips
{
 readonly Context context;
 const string logTag = "AudioClips";

 readonly MediaPlayer levelIntroductionElement;
 readonly MediaPlayer gameCompleteElement;
 readonly MediaPlayer levelCompleteElement;
 readonly MediaPlayer treasurePushElement;
 readonly MediaPlayer treasureOnGoalElement;

 internal AudioClips(Context context)
 {
  this.context = ArgumentValidator.AssertNotNull(context, nameof(context));

  levelIntroductionElement = CreateElement(Resource.Raw.LevelIntroduction);
  gameCompleteElement = CreateElement(Resource.Raw.GameComplete);
  levelCompleteElement = CreateElement(Resource.Raw.LevelComplete);
  treasurePushElement = CreateElement(Resource.Raw.TreasurePush);
  treasureOnGoalElement = CreateElement(Resource.Raw.TreasureOnGoal);
 }

 MediaPlayer CreateElement(int audioResourceId)
 {
  var result = MediaPlayer.Create(context, audioResourceId);
  return result;
 }

 void Play(MediaPlayer element)
 {
  Task.Run(() =>
  {
   try
   {
    element.SeekTo(0);
    element.Start();
   }
   catch (Exception ex)
   {
    Android.Util.Log.Error(logTag,
     "Unable to play audio clip.",
     Throwable.FromException(ex));
   }
  });
 }

 internal void Play(AudioClip audioClip)
 {
  switch (audioClip)
  {
   case AudioClip.Footstep:
    /* Playing a sound effect on Android degrades performance. */
    //Play(footstepElement);
    return;
   case AudioClip.GameComplete:
    Play(gameCompleteElement);
    return;
   case AudioClip.LevelComplete:
    Play(levelCompleteElement);
    return;
   case AudioClip.LevelIntroduction:
    Play(levelIntroductionElement);
    return;
   case AudioClip.TreasureOnGoal:
    Play(treasureOnGoalElement);
    return;
   case AudioClip.TreasurePush:
    Play(treasurePushElement);
    return;
  }
 }
}

protected override void OnCreate(Bundle bundle)
{
 ...

 base.OnCreate(bundle);

 global::Xamarin.Forms.Forms.Init(this, bundle);

 var audioClips = new AudioClips(this);
 var infrastructure = new Infrastructure(new UISynchronizationContext(), this, audioClips);
 LoadApplication(new App(infrastructure));
}

`Xamarin.Forms.Platform.Android.FormsAppCompatActivity` 类的 `LoadApplication` 负责实现自定义的 App 类。参见清单 10。App 扩展了 `Xamarin.Forms.Application`，它是任何 Xamarin Forms App 的基类。

public partial class App : Application
{
 public App(IInfrastructure infrastructure)
 {
  InitializeComponent();

  var mainPage = new MainPage {Infrastructure = infrastructure};
  MainPage = mainPage;
 }

 protected override void OnStart()
 {
  // Handle when your app starts
 }

 protected override void OnSleep()
 {
  // Handle when your app sleeps
 }

 protected override void OnResume()
 {
  // Handle when your app resumes
 }
}

public partial class MainPage : MasterDetailPage
{
 bool loaded;
 GameState gameState = GameState.Loading;
 readonly Dictionary<Cell, CellView> controlDictionary
     = new Dictionary<Cell, CellView>();
 Game game;

 public Game SokobanGame => game;

 public IInfrastructure Infrastructure { get; set; }

 public MainPage()
 {
  /* Uncomment to generate the LevelCode class. */
  //LevelCodesGenerator.GenerateLevelCodes();

  InitializeComponent();

  Appearing += HandleAppearing;

  var overlayTapRecognizer = new TapGestureRecognizer();
  overlayTapRecognizer.Tapped += HandleOverlayTap;
  overlayView.GestureRecognizers.Add(overlayTapRecognizer);

  levelCodeTextBox.Keyboard = Keyboard.Create(KeyboardFlags.CapitalizeSentence);
 }
…
}

async void HandleAppearing(object sender, EventArgs e)
{
 if (loaded)
 {
  return;
 }

 loaded = true;

 game = new Game(Infrastructure);
 BindingContext = game;

 /* Here we give the UI a chance to layout
  * so that sizes can be correctly determined. */
 await Task.Yield();
 await Task.Yield();

 game.PropertyChanged += HandleGamePropertyChanged;

 game.Start();

 SizeChanged += HandleWindowSizeChanged;
}

void HandleGamePropertyChanged(object sender, PropertyChangedEventArgs e)
{
 switch (e.PropertyName)
 {
  case nameof(Game.GameState):
   ProcessGameStateChanged();
   break;
 }
}

void ProcessGameStateChanged()
{
 switch (game.GameState)
 {
  case GameState.Loading:
   break;
  case GameState.GameOver:
   break;
  case GameState.Running:
   if (gameState == GameState.Loading)
   {
    InitialiseLevel();
   }
   break;
  case GameState.LevelCompleted:
   break;
  case GameState.GameCompleted:
   break;
 }

 gameState = game.GameState;
}

void InitialiseLevel()
{
 foreach (var control in controlDictionary.Values)
 {  
  DetachCellView(control);  
 }
 controlDictionary.Clear();

 gameLayout.Children.Clear();

 LayoutLevel();

 levelCodeTextBox.Text = game.LevelCode;
}

void LayoutLevel()
{
 Level level = game.Level;
 int rowCount = level.RowCount;
 int columnCount = level.ColumnCount;

 /* Calculate cell size and offset. */
 double windowWidth = gameLayout.Width;
 double windowHeight = gameLayout.Height;
 int cellWidthMax = (int)(windowWidth / columnCount);
 int cellHeightMax = (int)(windowHeight / rowCount);
 int cellSize = Math.Min(cellWidthMax, cellHeightMax);

 int gameHeight = rowCount * cellSize;
 int gameWidth = columnCount * cellSize;

 int leftStart = (int)((windowWidth - gameWidth) / 2);
 int left = leftStart;
 int top = (int)((windowHeight - gameHeight) / 2);

 /* Add CellControls to represent each Game Cell. */
 for (int row = 0; row < rowCount; row++)
 {
  for (int column = 0; column < columnCount; column++)
  {
   Cell cell = game.Level[row, column];

   CellView cellControl;
   if (!controlDictionary.TryGetValue(cell, out cellControl))
   {
    cellControl = new CellView(cell);
    controlDictionary[cell] = cellControl;

    DetachCellView(cellControl);
    AttachCellView(cellControl);

    gameLayout.Children.Add(cellControl);
   }

   AbsoluteLayout.SetLayoutBounds(cellControl, new Rectangle(left, top, cellSize, cellSize));

   left += cellSize;
  }

  left = leftStart;
  top += cellSize;
 }
}

void HandleCellTap(object sender, EventArgs e)
{
 if (levelCodeTextBox.IsFocused)
 {
  return;
 }

 CellView button = (CellView)sender;
 Cell cell = button.Cell;

 /* This event is passed on to the Game object. */
 game.ProcessCellTap(cell, false);
}

public void ProcessCellTap(Cell cell, bool shiftPressed)
{
 /* When the user clicks a cell, we want to
  have the actor move there. */

 GameCommandBase command;

 if (shiftPressed)
 {
  command = new PushCommand(Level, cell.Location);
 }
 else
 {
  command = new JumpCommand(Level, cell.Location);
 }

 commandManager.Execute(command);
}

void HandleCellDoubleTap(object sender, EventArgs e)
{
 CellView button = (CellView)sender;
 Cell cell = button.Cell;
 game.ProcessCellTap(cell, true);
}

void HandleWindowSizeChanged(object sender, EventArgs eventArgs)
{
 if (layoutScheduled)
 {
  return;
 }
 layoutScheduled = true;

 Device.StartTimer(TimeSpan.FromSeconds(1.0),
  () =>
  {
   layoutScheduled = false;
   LayoutLevel();

   return false;
  });
   
}

实现 Forms CellView

public CellView(Cell cell) : this()
{
 this.cell = cell;

 var tapRecognizer = new TapGestureRecognizer();
 tapRecognizer.Tapped += HandleTapped;
 GestureRecognizers.Add(tapRecognizer);

 if (!(cell is SpaceCell))
 {
  if (cell is WallCell)
  {
   wallImage = AddChildTile(imageDir + "Wall.jpg");
  }
  else
  {
   if (cell is FloorCell || cell is GoalCell)
   {
    floorImage = AddChildTile(imageDir + "Floor.jpg");
    floorHighlightImage = AddChildTile(imageDir + "FloorHightlight.png");
   }

   if (cell is GoalCell)
   {
    goalImage = AddChildTile(imageDir + "Goal.png");
    goalActiveImage = AddChildTile(imageDir + "GoalActive.png");
   }

   treasureImage = AddChildTile(imageDir + "Treasure.png");
   playerImage = AddChildTile(imageDir + "Player.png");
   playerImage.Opacity = 0;
  }
 }

 cell.PropertyChanged += HandleCellPropertyChanged;

 UpdateDisplay();
}

Image CreateContentImage(string fileName)
{
 Image image = new Image
 {
  Aspect = Aspect.AspectFill
 };

 ImageSource sourceImage;

 if (!imageCache.TryGetValue(fileName, out sourceImage))
 {
  sourceImage = ImageSource.FromFile(fileName);
  imageCache[fileName] = sourceImage;
 }

 image.Source = sourceImage;

 return image;
}

static CellView()
{
 /* Btw. Xamarin.Forms on Android ignores the directories. */

 var os = Device.OS;
 if (os == TargetPlatform.Android
  || os == TargetPlatform.iOS
  || os == TargetPlatform.Other)
 {
  imageDir = string.Empty;
 }
 else
 {
  imageDir = "/Controls/CellControl/CellImages/";
 }
}

Image AddChildTile(string relativeUrl)
{
 Image image = CreateContentImage(relativeUrl);
 layout.Children.Add(image);

 return image;
}

void UpdateDisplay()
{
 if (wallImage != null)
 {
  wallImage.IsVisible = cell is WallCell;
 }

 if (floorImage != null)
 {
  floorImage.IsVisible = cell is FloorCell || cell is GoalCell;
 }

 if (floorHighlightImage != null)
 {
  floorHighlightImage.IsVisible = /*hasMouse &&*/ (cell is FloorCell || cell is GoalCell);
 }

 if (treasureImage != null)
 {
  treasureImage.IsVisible = cell.CellContents is Treasure;
 }

 if (playerImage != null)
 {
  playerImage.Opacity = 1;
  playerImage.IsVisible = cell.CellContents is Actor;
 }

 if (goalImage != null)
 {
  goalImage.IsVisible = cell is GoalCell && !(cell.CellContents is Treasure);
 }

 if (goalActiveImage != null)
 {
  goalActiveImage.IsVisible = cell is GoalCell && cell.CellContents is Treasure;
 }
}

处理 CellView 点击手势

void HandleTapped(object sender, EventArgs e)
{
 tapCount++;
 if (tapCount >= 2)
 {
  tapCount = 0;
  isTimerSet = false;

  OnDoubleTap(EventArgs.Empty);
  return;
 }

 if (!isTimerSet)
 {
  isTimerSet = true;
  Device.StartTimer(new TimeSpan(0, 0, 0, 0, 500), () =>
  {
   if (isTimerSet && tapCount == 1)
   {
    OnTap(e);
   }
   isTimerSet = false;
   tapCount = 0;
   return false;
  });
 }
}

void HandleCellDoubleTap(object sender, EventArgs e)
{
 CellView button = (CellView)sender;
 Cell cell = button.Cell;
 game.ProcessCellTap(cell, true);
}

推箱子游戏的 iOS 实现

class Infrastructure : InfrastructureBase
{
 readonly AudioClips audioClips;
 const string levelDirectory = "Levels";
 readonly List<string> fileList;

 public Infrastructure(ISynchronizationContext synchronizationContext, AudioClips audioClips) : base(synchronizationContext)
 {
  this.audioClips = ArgumentValidator.AssertNotNull(audioClips, "audioClips");
  fileList = Directory.EnumerateFiles(levelDirectory).ToList();
 }

 public override int LevelCount => fileList?.Count ?? 0;

 public override Task<string> GetMapAsync(int levelNumber)
 {
  string fileName = $@"{levelDirectory}/Level{levelNumber:000}.skbn";

  using (var stream = File.Open(fileName, FileMode.Open))
  {
   using (StreamReader reader = new StreamReader(stream))
   {
    string levelText = reader.ReadToEnd();

    return Task.FromResult(levelText);
   }
  }
 }

 public override void PlayAudioClip(AudioClip audioClip)
 {
  audioClips.Play(audioClip);
 }
}

class AudioClips
{
 readonly AVAudioPlayer levelIntroductionElement;
 readonly AVAudioPlayer gameCompleteElement;
 readonly AVAudioPlayer levelCompleteElement;
 readonly AVAudioPlayer footstepElement;
 readonly AVAudioPlayer treasurePushElement;
 readonly AVAudioPlayer treasureOnGoalElement;

 internal AudioClips()
 {
  const string audioDir = "Audio/";

  levelIntroductionElement = CreateElement(new NSUrl(audioDir + "LevelIntroduction.mp3"));
  gameCompleteElement = CreateElement(new NSUrl(audioDir + "GameComplete.mp3"));
  levelCompleteElement = CreateElement(new NSUrl(audioDir + "LevelComplete.mp3"));
  footstepElement = CreateElement(new NSUrl(audioDir + "Footstep.mp3"));
  treasurePushElement = CreateElement(new NSUrl(audioDir + "TreasurePush.mp3"));
  treasureOnGoalElement = CreateElement(new NSUrl(audioDir + "TreasureOnGoal.mp3"));
 }

 AVAudioPlayer CreateElement(NSUrl url)
 {
  string fileTypeHint = url.PathExtension;
  NSError error;
  var result = new AVAudioPlayer(url, fileTypeHint, out error);

  if (error != null)
  {
   Debug.WriteLine(error.LocalizedFailureReason);
   Debugger.Break();
  }

  return result;
 }

 void Play(AVAudioPlayer element)
 {
  element.PlayAtTime(0.0);
 }

 internal void Play(AudioClip audioClip)
 {
  switch (audioClip)
  {
   case AudioClip.Footstep:
    Play(footstepElement);
    return;
   case AudioClip.GameComplete:
    Play(gameCompleteElement);
    return;
   case AudioClip.LevelComplete:
    Play(levelCompleteElement);
    return;
   case AudioClip.LevelIntroduction:
    Play(levelIntroductionElement);
    return;
   case AudioClip.TreasureOnGoal:
    Play(treasureOnGoalElement);
    return;
   case AudioClip.TreasurePush:
    Play(treasurePushElement);
    return;
  }
 }
}

[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
 {
  global::Xamarin.Forms.Forms.Init();

  var audioClips = new AudioClips();
  var infrastructure = new Infrastructure(new UISynchronizationContext(), audioClips);
  LoadApplication(new App(infrastructure));

  return base.FinishedLaunching(app, options);
 }
}

结论

历史

2016年11月25日

• 首次发布