Box2D + WinRTでゲームを作る (13) – Menuページを作る

公開:2013-06-11 20:51
更新:2017-07-30 10:00
カテゴリ:シューティングゲーム,xaml,windows store apps,c++,windows,audio,ゲーム,box2d + winrtでゲームを作る

ページ切り換えのアイデア

最初UIの切り換えをWindow::Current->ContentにFrameをセットしてページを遷移する方法、つまり普通のやり方でやろうかなと思ったけれど、ページの中にFrameを埋め込み、そこにページを埋め込むやり方もあることを知り試すことにした。後者のほうがコード変更が少なくてすみそうだからだ。

早速試してみる

さっそく試してみることにする。MainPageはSwapChainBackgroundPanelを使っているので、その中にFrameを配置するだけである。いろいろな状態を表示するためのGridとかもあったけれどいったん削除した。

xml <common:LayoutAwarePage x:Class="sfgame.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="using:sfgame" xmlns:common="using:sfgame.Common" mc:Ignorable="d" NavigationCacheMode="Enabled" d:DesignWidth="1366" d:DesignHeight="768"> <SwapChainBackgroundPanel x:Name="DXSwapChainPanel"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="Snapped"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Frame x:Name="m_MainFrame" ></Frame> </SwapChainBackgroundPanel> <Page.BottomAppBar> <AppBar x:Name="GameAppBar" Height="88" VerticalAlignment="Bottom" Opened="OnAppBarOpened"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top"> <Button x:Name="Reset" Tag="Reset" Style="{StaticResource ResetButtonStyle}" Click="OnResetButtonClicked"/> <Button x:Name="ResetLicense" Tag="ResetLicense" Style="{StaticResource ResetButtonStyle}" Click="OnResetLicenseButtonClicked" Visibility="Collapsed"/> <Button x:Name="Store" Tag="Store" Style="{StaticResource BuyButtonStyle}" Click="OnLoadStoreClicked" HorizontalAlignment="Left"/> </StackPanel> <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top"> <Button x:Name="ChangeBackground" Tag="Change Background" Style="{StaticResource RotateButtonStyle}" Click="OnChangeBackgroundButtonClicked"/> <Button x:Name="Play" Tag="Play" Style="{StaticResource PlayButtonStyle}" Click="OnPlayButtonClicked"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> </common:LayoutAwarePage>

こうしておいて、このフレームにMenuPageをNavigateするようにすればよいのである。試してみるとMenuPageで画面が覆われ、SwapChainBackgroundPanelの内容が見えなくなってしまった。

これはMenuPageの背景が透明になっていなからだと気づいたので、Pageの背景をTransparentで塗りつぶしてみても状況は変わらない。試行錯誤の結果、MenuPage内にあるGridの背景色をTransparentで塗りつぶすことで透過されるようになった。具体的にはGridのBackgroundプロパティに「Transparent」をセットする。

cpp <Grid Style="{StaticResource LayoutRootStyle}" Background="Transparent">