🍨 😲 🤚🏿 UWPゲーム：高度なスプラッシュスクリーン 🤐 👩🏾‍💻 🕴🏻

こんにちは、Habr！独学プログラマ向けの実験的な記事シリーズを継続します。MicrosoftDeveloperコミュニティのメンバーの1人であるAlexei PlotnikovがUWPでのゲームの作成について語っています。今日は、拡張スプラッシュスクリーンについてお話します。コメントを残すことを忘れないでください、あなたは開発プロセスに影響を与えることができます。

著者に発言権を与えます。

客観的に言えば、拡張スプラッシュスクリーンのトピックは、このサイクルの終わり近くにあると考えるべきです。これは、アプリケーションの最も重要な部分であるだけでなく、原則として必須ではありません。ただし、サイクルはプロジェクトの開発と並行して記述されるため、記事の記述順序に若干の調整が導入されます。拡張されたスプラッシュスクリーンが用意されており、サイクル中に彼に送られる状況があるので、最初に彼について話すことにしました。

私たちは小さなことから始めます-スプラッシュスクリーンとは何ですか？なぜそれを拡張する必要があるのですか？ UWPが登場するずっと前から、アプリケーションのスクリーンセーバーに出会ったことは確かです。遠くまで行かない Visual Studioを起動すると、適切なキャプションが付いた長方形の画像を入力します。

各プログラムは、インターフェイスを初期化してロードするのに少し時間が必要であるため、この時点でユーザーは何かが起こっていることを理解し、スプラッシュ画面が表示されます。起動プロセスがより複雑で時間がかかるプログラムでは、高度なスプラッシュ画面が使用されます。これらについては、アプリケーションのダウンロードステータスを示すテキストまたはステータスバーがよく表示されます。

それでは、UWPでの動作を見てみましょう。主な違いはプラットフォームの機能です。普遍的であるため、ここでは「ウィンドウ」の概念は優先事項ではなく、「スクリーン」の概念が前面に出てきます。画面が表示されるコンテナはデバイスに依存し、ウィンドウはPCのみにあります。

アプリケーションの起動時にユーザーに最初に表示されるのは、PNG画像と背景の塗りで構成されるスプラッシュスクリーンです。アプリケーションを作成したばかりで何も変更しなかった場合、スプラッシュスクリーンはシステムのメインカラーでペイントされ、中央にはアプリケーションで自動的に作成される基本的な「スタブ」画像があります。デフォルトでは、この画像は「Assets」フォルダーにあり、「SplashScreen.png」と呼ばれます。また、ファイル名には「scale-200」などが含まれる場合があります。これはスケーリングシステムの一部であり、シリーズのいずれかの記事で個別に説明しますが、ここでは一般的な用語でのみ説明します。

アプリケーションはさまざまなデバイスで実行できるため、さまざまなサイズの画像の複数のバージョンを作成して、さまざまな画面解像度で伸張または圧縮によって品質が失われないようにすることができます。プロジェクト内の画像の標準名は、名前と拡張子の2つの部分で構成されています。このような画像は、100％のスケールの画像として認識されます。名前と拡張子の間に「.scale-xxx」（xxxはスケーリング係数）を追加すると、このスケールの画面ではデフォルトで考慮され、残りの部分で伸縮します（スケールのバージョンがない場合）。たとえば、スケールが200％の場合、スプラッシュスクリーンのイメージ名は「SplashScreen.scale-200.png」になります。さらに本文では、将来の記事で予定されているテーマを複製しないように、100％のスケールの画像のみを検討します。

ここで、画像のサイズについて直接説明します。アプリケーションのすべての基本的な視覚的リソースには、各スケールのサイズが固定されています。標準スケールのスプラッシュ画面の画像は、620x300ピクセルのサイズにする必要があります。別のサイズを使用しようとすると、エラーに関する警告が表示されますが、上記のスクリーンショットを見ると、明らかに異なるサイズの正方形の画像を見ることができます。実際、620x300ピクセルのサイズもあり、そのほとんどが透明です。これは禁止されていないだけでなく、多くのシナリオで推奨されています。

スプラッシュ画面の背景色には、デフォルトのシステム色、またはアプリケーションマニフェストで指定した色が使用されます。

背景の色の設定と独自の画像の選択は、「スクリーンセーバー」サブセクションの「ビジュアルリソース」タブのマニフェストエディターウィンドウで実行されます。前の記事で述べたように、オブジェクトブラウザーでPackage.appxmanifestファイルをダブルクリックすると、マニフェストエディターを開くことができます。このエディターはUWPプラットフォームと一緒に開発されており、VSの最新バージョンでは、異なるスケールで1つの画像から必要なすべてのバリエーションをすばやく作成できるツールがありますが、このツールについては別の記事で個別に説明しますが、ここでは手動のパラメーター設定のみを検討します。

最初のフィールド「Background screen saver」では、 HTML （HEX）形式で背景色を指定する必要があります。ほとんどすべての画像エディター（Paint 3Dを含む）またはオンラインで適切な形式で色の値を取得できますが、英数字の値の先頭に「＃」記号を付ける必要があるこの色の記述規則を忘れないでください。たとえば、私のスクリーンセーバーは、背景として値 "＃fae57a"を使用します。

2番目のスクリーンセーバーでは、イメージファイルのストレージフォルダーとベース名を指定するよう求められます。「SplashScreen」の名前が必須ではないように、「Assets」フォルダーは画像を保存するための必須の場所ではありませんが、古いプロジェクトを転送する場合にのみそれらを変更する必要が生じる場合があります。他の場合では、基本的な値を使用する方がはるかに簡単なので、私のプロジェクトでは名前とパスを変更しないままにします。また、ベース名を指定するときに、スケールの表示を追加する必要がないことにも注意してください。下のウィンドウで選択すると、名前にこのようなプレフィックスが自動的に表示されます。

実際、下のウィンドウには、インストールされている画像のプレビューと、各スケールの選択用のボタンが含まれています。また、ウィンドウの横には、特定の縮尺に対して画像のサイズを示すヒントがあります。ご想像のとおり、任意の名前で適切なサイズの画像を選択すると、指定した名前で指定されたフォルダーに配置され、縮尺データが追加されます。

背景色と画像を選択したら、アプリケーションを起動して、変更の結果を確認できます。

これで、標準のスプラッシュスクリーンの準備ができました。次は、高度なバージョンの作成に進みます。前述したように、より複雑なプログラムでは、スクリーンセーバーの標準イメージの代わりに、ダウンロードステータスのスクリーンセーバーが表示されます。拡張されたUWPスプラッシュスクリーンは同じ機能を実行しますが、開始時に長いタスクがある場合にのみ使用するのが理にかなっています。私のアプリケーションでは、これらのタスクには、保存のロード、変更の初期計算、ネットワーク上のデータベースへのアクセス、購入の確認が含まれます。異なるデバイスでは、これらすべてのタスクに異なる時間がかかります。現時点で弱いデバイスでは、ユーザーがアプリケーションがハングしなかったことをユーザーが理解していると便利です。

ドキュメンテーションで修正された「拡張スプラッシュスクリーン」という名前にもかかわらず、実際には、ロードインジケーターを追加してスプラッシュスクリーンをシミュレートする自己作成ページを扱います。いずれの場合も、上記で調べた標準スクリーンの表示が先行します。。その結果、拡張スクリーンセーバーはほとんどの部分で標準を繰り返し、標準の後に最もスムーズに表示されるはずです。

設計の観点から見ると、この段階は非常に重要であり、想像力に応じて、アプリケーションの認識に大きな影響を与える非常に興味深く魅力的なスクリーンセーバーを作成できます。そのため、この手順を過小評価せず、次のような平凡なダウンロードインジケーターに限定してくださいProgressRing。

少し考えて、ミルのブレードを回転させ、負荷の現在の状態を表示するテキスト行を追加することにより、負荷表示を実装することにしました。したがって、計画どおり、標準画面は静かに拡張画面に変わり、ブレードが回転し始め、テキストが下に表示されます。しかし、この問題の最初のステップを踏むと、利用可能な資料が問題を完全にカバーしておらず、それらのいくつかは最も成功した「クランチ」ではなく使用されているという結論に達しました。

以下では、ネットワーク上の記事と公式ガイドに基づいて、スプラッシュスクリーンを作成するための独自のレシピを説明しますが、それでもそれらは異なります。

ステップ1.空白のページを作成する

上で述べたように、拡張スプラッシュスクリーンは通常のアプリケーションページであり、基本的なスプラッシュスクリーンにできるだけ類似したものにします。プロジェクトに新しいページを追加するには、[プロジェクト]> [新しいアイテムの追加]メニューに移動し、表示されるダイアログで[空白ページ]アイテムを選択します。公式ドキュメントでは、このページの名前として「ExtendedSplash」を使用することをお勧めします。他の名前を自由に選択できますが、これには客観的な理由はありません。提案された名前を示し、「追加」をクリックします。

新しく作成されたページは2つのファイルで構成されます。1つはExtendedSplash.xamlをマークするためのもので、もう1つはコードExtendedSplash.xaml.cs / vbのためのものです。少し後でそれらに戻りますが、今のところは次のステップです。

手順2. ExtendedSplashを開始として割り当てる

公式ガイドでは、この手順は最後に行われますが、事前に行うことを好みます。実際のところ、国を追加してシステムスプラッシュ画面のすぐ後ろに表示するだけでは不十分であるため、 App.xaml.cs / vbファイルでいくつかの操作を実行する必要があります。

前の記事で思い出したように、これはそのライフサイクルを担当するメインアプリケーションファイルです。特に、OnLaunchedプロシージャがあります。このプロシージャは、アプリケーションの起動時にすぐに実行され、開始ページが設定されます。

新しいプロジェクト（VB.NET）を作成した直後のこの手順のコードは次のとおりです。

Protected Overrides Sub OnLaunched(e As Windows.ApplicationModel.Activation.LaunchActivatedEventArgs) Dim rootFrame As Frame = TryCast(Window.Current.Content, Frame) If rootFrame Is Nothing Then rootFrame = New Frame() AddHandler rootFrame.NavigationFailed, AddressOf OnNavigationFailed If e.PreviousExecutionState = ApplicationExecutionState.Terminated Then End If Window.Current.Content = rootFrame End If If e.PrelaunchActivated = False Then If rootFrame.Content Is Nothing Then rootFrame.Navigate(GetType(MainPage), e.Arguments) End If Window.Current.Activate() End If End Sub

コードを減らすために、コメントは削除されました。

この手順で何が起こっているかを完全に理解するには、アプリケーションのライフサイクルとナビゲーションをより深く理解する必要がありますが、これについては次のいずれかの記事で説明します。これまでのところ、このコードから理解する必要があるのは、最初にアプリケーションのコンテンツ（ビジュアルルート）として設定されるFrameオブジェクトを作成し、次にこのフレームがアプリケーションのMainPageページに移動することです。

ここでは、MainPageの代わりにExtendedSplashを設定する必要があると想定するのが論理的です。開始ページとして目的のページを取得しますが、この場合、ExtendedSplashページはナビゲーション履歴に保存され、戻ることができるため、このオプションは適していません。これは必要ありません。この問題を解決するには、ナビゲートするのではなく、アプリケーションコンテンツをフレームではなく、ExtendedSplashに直接設定します。これは、Pageオブジェクトですが、アプリケーションの視覚的なルートにもなります。

コードを次のように修正します。

 Protected Overrides Sub OnLaunched(e As Windows.ApplicationModel.Activation.LaunchActivatedEventArgs) Dim rootFrame As Frame = TryCast(Window.Current.Content, Frame) If rootFrame Is Nothing Then rootFrame = New Frame() AddHandler rootFrame.NavigationFailed, AddressOf OnNavigationFailed If (e.PreviousExecutionState <> ApplicationExecutionState.Running) Then Window.Current.Content = New ExtendedSplash(e.SplashScreen) End If End If If e.PrelaunchActivated = False Then If rootFrame.Content Is Nothing Then rootFrame.Navigate(GetType(MainPage), e.Arguments) End If Window.Current.Activate() End If End Sub

お気づきのように、コードブロックは最初の条件で変更されました。このブロックの下部で、アプリケーションが実行されているかどうかを確認し、実行されていない場合は、新しいExtendedSplashページオブジェクトがアプリケーションコンテンツとして割り当てられます。

また、パラメーターとして、新しいExtendedSplashクラスを宣言するときに、SplashScreenクラスが指定されます。このクラスは、スプラッシュスクリーン上の画像のサイズと位置に関する情報を含むため、拡張スプラッシュスクリーンを作成する重要な部分です。これにより、ベーススクリーンを静かに独自のものに置き換えることができます。このクラスに必要なデータが含まれるように、OnLaunchedプロシージャがシステムから受け取った引数から取得します。

最後の仕上げがあります。コードファイル拡張子ExtendedSplash.xaml.cs / vbで、SplashScreen型のオブジェクトを受け入れるNewコンストラクターを追加する必要があります。

  Public Sub New(splashscreen As SplashScreen) InitializeComponent() End Sub

これで、アプリケーションが起動すると、MainPageではなくExtendedSplashページが表示されます。これにより、ページレイアウトに加えられた変更をすぐに確認でき、コードをデバッグする方が便利です。

ステップ3.ページレイアウト

ExtendedSplashページのレイアウトにおける最初の最も簡単な変更は、ページの背景色をメインのスプラッシュ画面と同じ色に設定することです。新しく作成されたページには、背景プロパティを持つグリッドルート要素が既に含まれています。デフォルトでは、このプロパティはシステムリソースを設定しますが、以前はアプリケーションマニフェストで指定されていた色に置き換えます。原則として、色の値は直接のBackground = "＃fae57a"を指すことができますが、アプリケーションのメインカラーは特別なファイルApplicationStyle.xamlに保存します。これについては、前の記事の最後で説明しました。背景のリソースは「BackgroundBrush」と呼び、適切な場所で参照します。

スタイルリソースファイル：

 <SolidColorBrush x:Key="BackgroundBrush" Color="#fae57a"/>   ExtendedSplash.xaml: <Grid Background="{StaticResource BackgroundBrush}"…

そして最後に、私たちの方法と公式ガイドや他の記事に記載されている方法との主な違いが始まる場所に着きました。

公式ドキュメントの記事を既に学習している場合は、Canvas要素を使用して画像をページに配置することを提案していることに気づきました。画像をサイズだけでなく位置も設定できるようにする必要がありますが、実際には、すべてが期待どおりに完全に移動するわけではありません。

マニュアルの作成者は、スプラッシュ画面の画像は状況によって異なる方法で拡大縮小できるという事実から進んでいます。その理由は、さまざまなデバイスのスケーリング係数と、PCのウィンドウのサイズの両方である可能性があります。これらのすべての状況でのベースイメージの動作はシステムによって規制されており、この動作をシミュレートできるように、前述のSplashScreenクラスが提供されます。このクラスの唯一のプロパティはRect型のImageLocationです。このプロパティには、画像のサイズ（幅、高さ）と位置（X、Y）に関する情報が含まれています。したがって、利用可能なデータに基づいて画像を操作するには、Canvas要素が適切であり、そのようなパラメーターに基づいてオブジェクトを操作することが適切です。

実際、推奨されるように拡張スクリーンセーバーを実装すると、すべてが機能しますが、PCでのみ機能します。電話でアプリケーションを実行すると、完全に予測不可能な変身が起こり始めます。画像が表示されないか、正しく表示されません。画面を水平位置で回転させると、画像は画面の端まで逃げ、部分的に切り取られ、垂直位置に戻ったときにのみ適切な場所に移動します。

ネットワーク上での多くの議論と、修正が推奨されている記事から判断すると、同様の問題に遭遇したのは私だけではないと結論付けることができます。私が見つけた最も人気のあるソリューションは、デバイスごとに異なるマークアップを使用することをお勧めします。 PC用のキャンバスとモバイル用のグリッド。この決定を完全に繰り返して、コンパートメントに実行可能なスプラッシュスクリーンが表示され、過剰な松葉杖を使用していると強く感じました。

最終的に、基本画面で正確に何が起こっているのか、それをどの程度シミュレートする必要があるのかを個別に把握することにしました。さまざまなデバイスとエミュレーターでの一連の実験の結果、イメージの位置に関する情報を完全に放棄できることに気付きました。ウィンドウのサイズ、デバイスのタイプ、またはその向きに関係なく、メインのスプラッシュ画面の画像は常に画面の中央に表示されます。したがって、画像のサイズに関する情報のみを抽出でき、基本画面を簡単に繰り返すことができます。

最初の段階での私のウィンドウレイアウトは次のようになります。

 <Grid Background="{StaticResource BackgroundBrush}"> <Image x:Name="SplashScreenImage3" Source="Assets/SplashScreens/SplashScreen3.png" Canvas.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Image x:Name="SplashScreenImage2" Source="Assets/SplashScreens/SplashScreen2.png" Canvas.ZIndex="2" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Image x:Name="SplashScreenImage1" Source="Assets/SplashScreens/SplashScreen1.png" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock x:Name="LoadingSatatusTextBox" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20" TextAlignment="Center" Foreground="{StaticResource ForegroundBrush}" FontWeight="Bold"/> </Grid>

分析を始める前に、初心者の開発者に連絡したいと思います。 XAMLマークアップ言語を初めて使用する場合は、ウィンドウデザイナー（コンストラクターとも呼ばれる）での作業をできる限り少なくすることを強くお勧めします。 Visual Studioの新しいバージョンごとに改善されていますが、依然として不正確なツールです。たとえば、Imageコントロールをページにドラッグすると、中央に配置したように見える場合がありますが、実際には、垂直および水平位置のプロパティではなく、インデントに基づいて配置を設定できます。マークアップでは、2つのプロパティ（HorizontalAlignmentおよびVerticalAlignment）を除き、画像の位置に影響を与えるインデントやその他の要因を除外することが非常に重要です。

しかし、マークアップに戻ります。エラーなしで機能するためには、Image要素のソースとして使用されるプロジェクトに画像ファイルを追加する必要があります。「SplashScreens」フォルダー「Assets」のサブフォルダーに配置しました。プロジェクトに画像を追加するには、目的のフォルダーを右クリックして、メニュー項目「追加>既存の項目...」を選択します。静止要素と移動要素を分離する必要があるため、3つの画像があります。

最初の画像と3番目の画像は基本620x300ピクセル（標準縮尺）と同じサイズであり、3番目の画像には画像全体と同じ場所にアイコンが含まれ、残りの部分は透明であることに注意することが重要です。これは、互いの相対的な配置にかかる労力を最小限に抑えるために行われます。ブレードの画像はエッジの下でトリミングされ、余分なセクションはありません。

3つの画像はすべて、ページの中央に厳密に配置されます。この例では、グリッド要素の中心ですが、ページのルート要素であり、インデントがないため、その中心はページの中心に等しくなります。次に、ブレードがミルの背後にあるという状況にならないように、重なり合う画像の正しい順序を設定する必要があります。これを行うにはCanvas.ZIndexプロパティを使用します。Image要素がマークアップに配置される順序は関係ありませんが、このプロパティの値のみが重要です。値が高いほど、要素の重なりが大きくなります（Z軸）。

マークアップの最後の要素は、ダウンロードステータスを表示するテキストブロックです。これは、水平面に対して中央にあり、比較的垂直の下にあります。また、テキストが画面の端に「くっつかない」ように、下から小さなインデントが示されています。さらに2つのプロパティがテキストの色とスタイルを示します。

テキストの色のリソースは次のように設定されます。

 <SolidColorBrush x:Key="ForegroundBrush" Color="#c89103"/>

この時点で、マーキングを使用した作業の最初の段階は完了したと見なすことができますが、ブレードの回転アニメーションを追加するときにその段階に戻ります。

ステップ4.ページコード

作業の最も重要な部分は、ファイルExtendedSplash.xaml.cs / vbにあるページコードで行われます。

最初のステップは、Windows.UI.Core名前空間をインポートし、後のコードで必要になる変数を追加することです。

 Imports Windows.UI.Core Public NotInheritable Class ExtendedSplash Inherits Page Friend splashImageRect As Rect Private splash As SplashScreen Friend ScaleFactor As Double Public Sub New(splashscreen As SplashScreen) InitializeComponent() End Sub End Class       : Public Sub New(splashscreen As SplashScreen) InitializeComponent() AddHandler Window.Current.SizeChanged, AddressOf ExtendedSplash_OnResize splash = splashscreen If splash IsNot Nothing Then AddHandler splash.Dismissed, AddressOf DismissedEventHandler ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel splashImageRect = splash.ImageLocation SetSizeImage() End If End Sub

コードは、ルートコンテナーのサイズ変更イベントにサブスクライブすることから始まります。これは、ウィンドウサイズまたはデバイスの向きが変更されたときに画像サイズを変更するために必要になります。次に、引数で渡されたSplashScreenクラスがローカル変数に転送されます。ローカル変数は、必要な画像サイズに関する情報を参照します。

空でないはずのローカルスプラッシュ変数を確認した後、さらに操作を進めます。これで、システムスプラッシュ画面が閉じたときに発生するDismissedイベントにサブスクライブできます。この点は、スプラッシュスクリーンの一般的な原理を理解するために重要です。実際、コードがNewプロシージャ内で実行されている間、ページはまだ初期化中で表示の準備ができていません。したがって、基本的なスプラッシュ画面はアプリケーションを「保護」し、実行中と目的のページが表示されることを示します。多くの点で、静的なパッチではなく、長時間の初期化プロセスがライブ視覚化に伴うように、拡張スプラッシュ画面が必要な理由です。

コードの次の行は、サイズを正しく解釈するために現在のスケーリング係数を保存し、サイズ自体はさらにコードの変数splashImageRectに格納されます。そして最後に、最後の行がプロシージャを呼び出し、受信したすべてのデータを操作します。

もちろん、このコードを追加すると、上記のイベントが関連付けられているプロシージャがなく、SetSizeImageプロシージャも存在しないため、3つのエラーメッセージが表示されます。

それらを追加します。

 Private Sub SetSizeImage() End Sub Private Sub DismissedEventHandler(sender As SplashScreen, args As Object) End Sub Private Sub ExtendedSplash_OnResize(sender As Object, e As WindowSizeChangedEventArgs) End Sub           SetSizeImage: Private Sub SetSizeImage() SplashScreenImage1.Height = splashImageRect.Height / ScaleFactor SplashScreenImage1.Width = splashImageRect.Width / ScaleFactor SplashScreenImage2.Width = splashImageRect.Width / ScaleFactor * 0.3073 SplashScreenImage2.Margin = New Thickness(-splashImageRect.Width / ScaleFactor * 0.547, -splashImageRect.Width / ScaleFactor * 0.1633, 0, 0) SplashScreenImage3.Height = splashImageRect.Height / ScaleFactor SplashScreenImage3.Width = splashImageRect.Width / ScaleFactor ScaleFactor = 1 End Sub

このコードは、ページに配置される各画像のサイズを順番に設定します。 1番目と3番目の画像の場合、画像の幅と高さをSplashScreenクラスから削除したものに等しく設定し、スケーリング係数を調整するだけで十分です。 ScaleFactor変数の最後の行が1に設定されており、このプロシージャを再度呼び出すと、スケーリング係数の調整が実際に行われないことに注意してください。これは、公式ガイドのソリューションがモバイルで機能しないのと同じ問題によるものです。何らかの理由で、SplashScreenクラスは、最初にスケーリング係数を考慮に入れて画像のサイズを通知し、デバイスの回転などのさらなる操作なしで表示されます。そのため、初期化中に、この係数は最初の操作のために保存され、それ以降の係数では1にリセットされます。

Windows 10の今後のビルドの1つでは、この奇妙な状況が解消される可能性があり、このコードを変更する必要がありますが、これまでのところ、Fall Creators Updateまでのリリースされたすべてのアセンブリで正常に動作します。

別の考慮事項は、2番目の画像のサイズ設定です。より正確には、その場合、サイズを設定するだけでなく、位置を設定することに限定されます。なぜなら、最初はブレードがミル領域ではなく中央にあるからです。

ちなみに、画像は正方形であり、高さが比例して同じサイズに変更されるため、幅など、片側のサイズのみを設定するだけで十分です。サイズを設定する場合、スケーリング係数の調整に加えて、メイン画像に基づいてサイズも調整します。より正確には、画像の幅を基準にして、このサイズを占めるブレードの割合を計算します。私の場合、0.3073です。

次に、同じロジックに基づいて、画像全体の幅を基準として、中心から目的のポイントまでの距離を計算します。次の行では、インデントを左に推定距離まで設定します。

アプリケーションを起動し、この段階で結果がメインのスプラッシュ画面と視覚的に変わらないことを確認します。ここで、モバイルでアプリケーションを起動すると、ベースのイメージに比べてイメージのわずかなシフトが見られます。これは、ベース画面が画面の中央に位置するため、電話の上部にあるステータスバーや一部のモデルにある下部の仮想ボタンバーなどのインターフェイス要素を完全に無視するためです。コードに必要な変更を加えましょう。

最初に、ステータスバーの高さを格納する変数を準備します。

 Friend statusBarRect As Rect        : If Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar") Then statusBarRect = StatusBar.GetForCurrentView.OccludedRect End If

このコードは、一度に2つの面で興味深いものです。まず、ここで初めて、適応コードに直面しています。これについては、前の記事で説明しました。条件の本質は、ターゲットデバイス上に目的のクラスが存在するかどうかを確認し、存在する場合は、条件内のコードがエラーなしで実行されることです。

アダプティブコードにもかかわらず、StatusBarへのアクセスは成功せず、そのようなクラスが存在しないというメッセージを受け取ります。これは、最初にUWPアプリケーションには、操作なしでサポートされているすべてのデバイスで実行できる共通コードのみが含まれているためです。特定のプラットフォームに固有のクラスへのリンクは個別に追加されます。ステータスバーはモバイルデバイスに固有であるため、最初に目的のクラスライブラリへのリンクを追加する必要があります。 [プロジェクト]> [リンクの追加...]メニューに移動します。左側に「ユニバーサルウィンドウ」セクションとサブセクション「拡張機能」があります。ライブラリのリストで「UWP用のWindows Mobile拡張機能」ライブラリを見つけ、アプリケーションの最小バージョンに等しいバージョンを選択します。

これで、上記のコードはエラーなしで機能します。より正確には、モバイルでのみ動作し、他のすべてのデバイスでは無視されます。

最後に、位置決めと画像サイズの設定コードを修正します。

 Private Sub SetSizeImage() SplashScreenImage1.Height = splashImageRect.Height / ScaleFactor SplashScreenImage1.Width = splashImageRect.Width / ScaleFactor SplashScreenImage1.Margin = New Thickness(0, -statusBarRect.Height, 0, 0) SplashScreenImage2.Width = splashImageRect.Width / ScaleFactor * 0.3073 SplashScreenImage2.Margin = New Thickness(-splashImageRect.Width / ScaleFactor * 0.547, -splashImageRect.Width / ScaleFactor * 0.1633 - statusBarRect.Height, 0, 0) SplashScreenImage3.Height = splashImageRect.Height / ScaleFactor SplashScreenImage3.Width = splashImageRect.Width / ScaleFactor SplashScreenImage3.Margin = New Thickness(0, -statusBarRect.Height, 0, 0) ScaleFactor = 1 End Sub

追加されたコードは、各画像をステータスバーの高さと等しいサイズだけ上方にシフトします。アプリケーションが任意のデバイスで起動されると、画像は基本画像と同じ場所に配置されます。残念ながら、このソリューションはまだ完全ではありません。一部の電話モデルにはハードウェアボタンがなく、代わりに電話コントロールボタンが電話自体の仮想パネルに配置されているため、同じシフト効果が発生し、検索しなかったため、このパネルの高さを取得する場所に関する情報が見つかりませんでした。また、一般的に、必要な変更を行うために、その存在または不在に関する情報を受信します。この情報がある場合は、コメントで必ず共有してください。

必要な調整がすべて行われたので、ウィンドウのサイズ変更またはデバイスの向きに対する反応を追加する必要があります。

 Private Sub ExtendedSplash_OnResize(sender As Object, e As WindowSizeChangedEventArgs) If splash IsNot Nothing Then splashImageRect = splash.ImageLocation SetSizeImage() End If End Sub

ここではすべてが非常に簡単です。 SplashScreenクラスを格納するオブジェクトが空かどうかを確認し、空でない場合はサイズ情報を削除してから、SetSizeImageプロシージャを繰り返します。

. , . , - , DismissedEventHandler. , . :

 Private Async Sub DismissedEventHandler(sender As SplashScreen, args As Object) Await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, New DispatchedHandler(AddressOf DismissExtendedSplash)) End Sub

DismissExtendedSplash , . , Async Await, . : Await , , . Await / /, Async.

DismissExtendedSplash, :

 Private Async Sub DismissExtendedSplash() LoadingSatatusTextBox.Text = " ..." Await Task.Delay(New TimeSpan(0, 0, 15)) Dim rootFrame As New Frame rootFrame.Navigate(GetType(MainPage)) Window.Current.Content = rootFrame End Sub

. , , . . , 15 . , 15 , .

, Frame, . , .

: , 15 .

5.

, , «». .

XAML :

 <Grid Background="{StaticResource BackgroundBrush}"> <Grid.Resources> <Storyboard x:Name="ImageRotateAnimation"> <DoubleAnimation Storyboard.TargetName="ImageRotate" Storyboard.TargetProperty="Angle" To="360" BeginTime="0:0:0.5" Duration="0:0:5" RepeatBehavior="Forever"/> </Storyboard> </Grid.Resources> <Image x:Name="SplashScreenImage3" Source="Assets/SplashScreens/SplashScreen3.png" Canvas.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Image x:Name="SplashScreenImage2" Source="Assets/SplashScreens/SplashScreen2.png" Canvas.ZIndex="2" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5"> <Image.RenderTransform> <RotateTransform x:Name="ImageRotate" Angle="0"/> </Image.RenderTransform> </Image> <Image x:Name="SplashScreenImage1" Source="Assets/SplashScreens/SplashScreen1.png" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock x:Name="LoadingSatatusTextBox" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20" TextAlignment="Center" Foreground="{StaticResource ForegroundBrush}" FontWeight="Bold"/> </Grid>

. -, 0 . , .

-, Storyboard, Double. Double . . , .

, . New :

ImageRotateAnimation.Begin

, , .

.

, , , .

UWPゲーム：高度なスプラッシュスクリーン

ステップ1.空白のページを作成する

手順2. ExtendedSplashを開始として割り当てる

ステップ3.ページレイアウト

ステップ4.ページコード

5.

More articles: