はじめに

6/22(土)にゲーム作成コンテストを開催します！

jppgb.connpass.com

現在上記connpass上でエントリー者募集中ですのでゲーム作成を行っている方はもちろん、ゲーム作成に興味のある方も気軽にエントリーしてください！

イベントは以下のスケジュールで進行します。

スケジュール

そして、なんと今回はスポンサー企業様のご協力により賞品を用意することができました👏
スポンサーとなっていただいた企業様、改めてありがとうございます。

さて、今回は私自身が最近ゲーム作成してないなーと思ったので、簡単なゲームを作成してみました。

名付けて音感神経衰弱です。

#JPPGB でゲーム作成コンテストを開催するよ！と宣伝してたら私も #PowerApps で久しぶりにゲーム作成したくなったので、音感神経推移弱を作成しました！

はてなブログに投稿しました
Power Appsで音感神経衰弱を作成 - コルネの進捗や備忘録が記されたなにか https://t.co/3kDgATLqHV #はてなブログ pic.twitter.com/CyHtIjcxJk
— コルネ (@koruneko32767) May 12, 2024

今回はこちらの作成方法を簡単に紹介します。

ゲーム作成の参考になればー

音感神経衰弱を作成する

作成するのは神経衰弱の絵柄ではなく、音を揃えるゲームです。

カードを選択すると音がなるので、同じ音を見つけ出して揃えるゲームです。

音感に自身のある方であれば余裕のゲームですね！

素材の用意

素材は魔王魂さんからお借りしました！

maou.audio

いつもお世話になっております。

神経衰弱で場に表示する情報を作成する

まずは、神経衰弱で場に表示される情報を作成します。

私はよくPower Appsの開発時には初期化ボタンを作成することをおすすめしています。
これは、開発時に気軽に変数の初期化を行えるようにするためです。

App.OnStart はパフォーマンスの観点から推奨されていません。

koruneko.hatenablog.com

Screen.OnVisible は画面を毎回切り替えないと実行されません。

従って初期化ボタンを用意しておくことで、パフォーマンスを損なうこともなく開発中も手軽に初期化ができるようになるわけですね。

さて、初期化ボタンを用意したらまずはPower Apps上に取り込んだ音源をコレクションにいれます。

IniBtn.OnSelect

ClearCollect(
    SoundSource,
    {
        Name: "1_1do",
        Audio: maou_se_inst_piano1_1do
    },
    {
        Name: "1_2re",
        Audio: maou_se_inst_piano1_2re
    },
    {
        Name: "1_3mi",
        Audio: maou_se_inst_piano1_3mi
    },
    {
        Name: "1_4fa",
        Audio: maou_se_inst_piano1_4fa
    },
    {
        Name: "1_5so",
        Audio: maou_se_inst_piano1_5so
    },
    {
        Name: "1_6ra",
        Audio: maou_se_inst_piano1_6ra
    },
    {
        Name: "1_7si",
        Audio: maou_se_inst_piano1_7si
    },
    {
        Name: "1_8do",
        Audio: maou_se_inst_piano1_8do
    },
    {
        Name: "1_am_chord",
        Audio: maou_se_inst_piano1_am_chord
    },
    {
        Name: "1_c_chord",
        Audio: maou_se_inst_piano1_c_chord
    },
    {
        Name: "1_f_chord",
        Audio: maou_se_inst_piano1_f_chord
    },
    {
        Name: "1_g_chord",
        Audio: maou_se_inst_piano1_g_chord
    }
);

続いて神経衰弱の場に表示するための情報を作成します。
上記のコレクション * 2を設定すればいいですね！

最近のアップデートでテーブル型のデータも Table 関数を利用することで複数のテーブルを1つのテーブルにすることができるようになりました！
もう ForAll 関数や Ungroup 関数を使う必要がないですね。

learn.microsoft.com

さて、場の情報を作成する際に同時に以下の情報も作成したいと思います。

カードを一意に特定するための"id"
カードを選択中かを判断する"isSelect"
カードを揃えたかを判断する"isCheck"

IniBtn.OnSelect

ClearCollect(
    neurasthenia,
    Shuffle(
        AddColumns(
            Table(
                SoundSource,
                SoundSource
            ),
            id,
            GUID(),
            isSelect,
            false,
            isCheck,
            false
        )
    )
)

AddColumns 関数も最近使用が変わって、追加する列名にダブルクォーテーションを付ける必要がなくなりましたね。

powerapps.microsoft.com

場にカードを表示させる

場の情報を作成し終えたので、この情報を利用してカードを表示させます。

コレクションをギャラリーを利用して表示させます。
(座標やサイズは割愛)

折り返しの数は 12 * 2 = 24枚のカードがありますので、 "5" にしておきます。

WrapCount

ギャラリーの中に四角形とオーディオを追加します。

四角形とオーディオの順序は四角形が先にくるようにしておいてください。(理由後述)

四角形は選択されたら外枠を設定して、選択状態がわかるようにします。

BorderThickness

If(ThisItem.isSelect, 2, 0)

また、選択されたら isSelect を true に設定するようにします。
すでに選択されていた場合は false ですね。

Patch(
    neurasthenia,
    ThisItem,
    {
        isSelect: !ThisItem.isSelect
    }
)

2枚選択されたら判定を行う

場のカードが2枚選択されたら判定を行うようにします。

判定にはトグルコントロール(切り替えコントロール)を利用します。

場のカードが2枚選択されたらトグルがチェックされるようにします。

Default

CountIf(neurasthenia, isSelect) = 2

トグルがチェックされたら判定を行います。

今回、ここの判定では選択したカードが同じだったかを判定します。

OnCheck

With(
    {_selectedItem: Filter(neurasthenia, isSelect)},
    If(
        First(_selectedItem).Name = Last(_selectedItem).Name,
        UpdateContext({isCorrect: true})
    )
);

選択されたら音を鳴らす

オーディオコントロールには2種類の表示プロパティがあります。

ここで、「オーディオコントロールは表示させておく必要がないので」ということで「表示」を「オフ」にすると音が鳴らなくなります。

これはこちらの設定によるものです。

オーディオコントロールは非表示にしたいが、音は適宜鳴らしたい。という場合は画像のように「表示」は「オン」にして、「コントロールの表示」を「オフ」にします。

これで、コントロールは非表示になるが音は鳴らせる。状態になります。

音は選択されたら鳴らしたいです。
よって以下のように設定すればいいですね。

ThisItem.isSelect

続いて、オーディオが鳴り終わったタイミングで

選択状態の解除
正解判定

を行わせます。

If(
    isCorrect,
    UpdateIf(neurasthenia, isSelect, {isCheck: true});
    UpdateContext({isCorrect: false})
);
If(
    CheckResult.Value,
    UpdateIf(neurasthenia, isSelect, {isSelect: false});
);

Reset(Self)