Power AppsでNumber 9ゲームを作成してみた

2022/2/26 Power Appsで Number 9ゲームを作成してみた！ JPPGB #4 コルネ(koruneko32767)

自己紹介 Name コルネ なにしてる人？ Power Platform関連のお仕事に最近は従事しています。 アプリケーション開発やクラウド構築なんかも前まではやっていました。 そんなこともあり、最近はフュージョン開発に興味があるので面白そうな ことがあれば教えてください。 Twitter @koruneko32767 Blog コルネの進捗や備忘録が記されたなにか YouTube Korune Ch. コルネ #JPPGB 2

• https://twitter.com/koruneko32767
• https://koruneko.hatenablog.com/
• https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

Agenda • 作成したゲーム • ゲームの概要 • 実装のポイント * この資料は実際のPower Appsの画面の説明を みながら閲覧していることを前提に作成しています #JPPGB 3

作成したゲーム WelcomeScreen HomeScreen PlayScreen こちらからダウンロードして遊ぶことができます https://github.com/koruneko/Number-9 #JPPGB 4

• https://github.com/koruneko/Number-9

ゲームの概要 WelcomeScreen ➢ アプリ起動時に表示される画面です ➢ 定義用変数などもこの画面で読み込んでいます(OnStartプロパティを利用しないようにしています) HomeScreen ➢ 難易度選択画面です ➢ 右上のアイコンを選択することでLightモードとDarkモードの切り替えが可能です PlayScreen ➢ ゲームをプレーする画面です ➢ レベルごとに設定されたマス、秒数、表示方法で1~9の数字が表示されるので、その後1から順に表示された数字のマスを 選択し、時間と正答率を競います Beginner Normal Advanced Extreme ゲームのボード 3×3 10×6 10×6 10×6 表示時間[ms] 5000 5000 7500 7500 表示方法 一度に表示 一度に表示 1から順に表示 ランダムに表示 #JPPGB 5

実装のポイント OnStartプロパティの使用を避けアプリ読み込み時のパフォーマンス問題を回避 OnStartプロパティはアプリ読み込み時のパフォーマンスの問題を引き起こすことがあります。(参考: OnStart プロパティ) この問題の代替案として、Formulas プロパティが用意されています。 ただし、ここで定義された変数は変更することができません。 そこで今回はアプリ利用に必要な変数をWelcomeScreenで読み込むようにしています。 #JPPGB 6

• https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/object-app

実装のポイント Welcome画面の簡易テンプレート化 Welcome画面の改修がしやすくなるようにしてみました。 1. 表示するメッセージの情報を定義したコレクションを作成 2. “1”で定義したメッセージ数に応じてタイマーの時間を定義(タイマーは終了したら画面遷移するようにしています) 3. “1”で定義したメッセージを”2”カウントしているタイマーの時間に従って順に表示 Point 実際の処理でいうとコメントに記載のようなエラー処理は不要です。 ただし、これがないとエラーバナーメッセージが表示されます。 これの表示を回避するために変数読み込み前でも問題がないようにし ています。 #JPPGB 7

実装のポイント LightモードとDarkモードの実装 テーマの切り替えを実装したかったので実装しちゃいました。(ゲームには全く関係ないです！) 実装方法は単純で • テーマと、デフォルトテーマの定義 • テーマ切り替えボタンを押すと定義したテーマの順にテーマが切り替わる • 各カラープロパティにてテーマに対応した色の定義 (各テーマ毎に、背景色、文字色、コントロールの色をEnumで作っておいた方が運用楽だったかも) #JPPGB 8

実装のポイント ゲーム画面の共通化 同じような仕様なのにレベルが異なるだけで画面を分けて作成するのは避けたいですよね。 ということで、レベル選択時に画面遷移 + 変数の設定を行うようにしました。 さすがに数字をどういうパターンで表示するか？をここで定義することはできなかったのでそういった処理ばかりはゲーム画面でSwitch 関数で条件分岐させてます。 #JPPGB 9

実装のポイント 読み込まれるコントロールを最小にしてパフォーマンスの改善 数字はGallery内のコントロールで描画していますが、 TemplateSize = 0 の手法を用いて描画しています。 これはアプリの負荷を少しでも下げるためです。 ➢ 1~9のどの数字を選択したか？数字がない箇所を選択したか？は最低限判断したい ✓ SVGでの実装はできない ➢ マス数が増えるに従って、Gallery内で描画されるコントロール数が増やしたくない ➢ 折り返しの数の制限により横最大10までという制限を加えたくない ✓ 通常のGalleryの描画方法ではできない ➢ 各数字の処理を別々に記載したくない(仕様追加のときとか面倒) ✓ 数字ごとにコントロールの作成では要件を満たせない これらの要件を満たす手法の1つとしてGalleryの TemplateSize = 0 の手法があったのでこの描画方法を採用しました。 #JPPGB 10

実装のポイント 間違えたマスを選択したときにわかりやすく 間違えたマスをユーザーが選択したときに間違えたということをわかりやすくするために画面を赤く点滅させるようにしました。 違うマスが選択されたら”miss”というフラグをたたせて、画面の背景色を変化させています。 ✓ 連続でミスしても誤動作はしないようにする ✓ タイマーは1つで作っている という理由から、”miss”フラグにはtrue/falseを設定するレコードと、ミスをしたときのタイマーの値を保持するレコードを”miss”変数 に持たせました。 赤くする時間の管理はトグルコントロールで行い、既定の時間になったらトグルがチェックされるようにしフラグをクリアさせています。 #JPPGB 11

実装のポイント ゲームの基本である”1から順に選択”の判定 ユーザーが1から順番に押しているか？また、間違っているものを押していないか？を判断するためには次に押すべき数がわかっていな いといけません。 これを行うために変数を用意しますが、今回正答率も最後に出すようにしたかったので、「ユーザーが選択した数」、「ユーザーが正し い選択をした数」、「ユーザーがミスをした数」もそれぞれ記録するようにしたいです。 そこで、ユーザーの選択履歴をコレクションに入れました。フィールドには、 ✓ Value: 選択した数値 ✓ isCorrect: その選択が正しかったか？ を設定しています。 その数値が選択されたかどうかは、ユーザーが選択したコレクションのうち”isCorrect”がtrueな”Value”があれば判断できますし、 ゲームクリアは”isCorrect”がtrueのものの数をカウントすれば判断できますね。 #JPPGB 12