はじめに
6/22(土)にゲーム作成コンテストを開催します!
現在上記connpass上でエントリー者募集中ですのでゲーム作成を行っている方はもちろん、ゲーム作成に興味のある方も気軽にエントリーしてください!
イベントは以下のスケジュールで進行します。
そして、なんと今回はスポンサー企業様のご協力により賞品を用意することができました👏
スポンサーとなっていただいた企業様、改めてありがとうございます。
さて、今回は私自身が最近ゲーム作成してないなーと思ったので、簡単なゲームを作成してみました。
名付けて音感神経衰弱です。
#JPPGB でゲーム作成コンテストを開催するよ!と宣伝してたら私も #PowerApps で久しぶりにゲーム作成したくなったので、音感神経推移弱を作成しました!
— コルネ (@koruneko32767) May 12, 2024
はてなブログに投稿しました
Power Appsで音感神経衰弱を作成 - コルネの進捗や備忘録が記されたなにか https://t.co/3kDgATLqHV#はてなブログ pic.twitter.com/CyHtIjcxJk
今回はこちらの作成方法を簡単に紹介します。
ゲーム作成の参考になればー
音感神経衰弱を作成する
作成するのは神経衰弱の絵柄ではなく、音を揃えるゲームです。
カードを選択すると音がなるので、同じ音を見つけ出して揃えるゲームです。
音感に自身のある方であれば余裕のゲームですね!
素材の用意
素材は魔王魂さんからお借りしました!
いつもお世話になっております。
神経衰弱で場に表示する情報を作成する
まずは、神経衰弱で場に表示される情報を作成します。
私はよくPower Appsの開発時には初期化ボタンを作成することをおすすめしています。
これは、開発時に気軽に変数の初期化を行えるようにするためです。
App.OnStart
はパフォーマンスの観点から推奨されていません。
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 関数 を使う必要がないですね。
さて、場の情報を作成する際に同時に以下の情報も作成したいと思います。
- カードを一意に特定するための"id"
- カードを選択中かを判断する"isSelect"
- カードを揃えたかを判断する"isCheck"
IniBtn.OnSelect
ClearCollect( neurasthenia, Shuffle( AddColumns( Table( SoundSource, SoundSource ), id, GUID(), isSelect, false, isCheck, false ) ) )
AddColumns 関数 も最近使用が変わって、追加する列名にダブルクォーテーションを付ける必要がなくなりましたね。
場にカードを表示させる
場の情報を作成し終えたので、この情報を利用してカードを表示させます。
コレクションをギャラリーを利用して表示させます。
(座標やサイズは割愛)
折り返しの数は 12 * 2 = 24枚のカードがありますので、 "5" にしておきます。
WrapCount
5
ギャラリーの中に四角形とオーディオを追加します。
四角形とオーディオの順序は四角形が先にくるようにしておいてください。(理由後述)
四角形は選択されたら外枠を設定して、選択状態がわかるようにします。
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)
これで音感神経衰弱の完成です!
課題
このゲームには1点不具合があります。
それは最初に選択したカードの音が最後までなり終わる前に次のカードを選択してしまうと、最初のカードを選択した際に鳴っていたオーディオがなり終わったタイミングで終了判定がされてしまう点です。
もし神経衰弱の作成を考えられている場合はこの点に気を付けてください。
おわりに
ゲーム作成コンテストのエントリー絶賛受付中です!
【JPPGB】ゲーム作成コンテスト #1 - connpass
お気軽にエントリーしてください!
また、当日はオンライン & オンサイトのハイブリット開催となります。
オンサイトに来ることのできる方は是非オンサイトでご参加ください!
なにかいいことがあるかも...?