【第1回】Power Appsでマリオもどきを作ってみる

仕事中にふとマリオがやりたいと思ったのでPower Appsでマリオを作ります。

ゲームでは欠かせない繰り返し動作

時間とともに落下、上昇、移動をさせるためにはタイマーを使ってその位置情報を更新させ続けなければいけません。しかしPower Appsのタイマーコントロールではリフレッシュレートが低いためにとてカクカクした動きになってしまいます。

そこで、以下の記事を参考にスライダーを使って高速で繰り返し動作をさせます。

【#PowerApps】PowerAppsでタイマーコントロールを使わずにタイマーコントロールよりも高速なループを実行する方法

https://qiita.com/github129/items/75f5f83d9842aab89da3

作り方

必要なオブジェクトの配置

とりあえず必要なオブジェクトを配置しました。スライダーは隠してあります。(もちろんマリオではなくただのおじさんです)

”ジャンプ”ボタンにはスライダーのリセットとおじさんのX,Y座標をリセットする指示をいれておきます。

鉛直上方投射の式

おじさんを上に飛ばすには、物体が垂直に飛ぶ様子を式で表す必要があります。

今回は上に飛ばすだけなので、鉛直上方投射の式に沿っておじさんを動かします。

速度：v=v₀-gt

変位：Y=v₀t+0.5gt²

t:時間,v₀:初速度,g:重力加速度(9.81[m/s²])

これが上方投射の式です。

しかし、Power Appsの座標軸は左上が原点、下方向、右方向が正なので式を書き換える必要があります。

速度：v=-(v₀-gt)

変位：Y=おじさんの初期位置-(v₀t+0.5gt²)

定数、変数の定義

上で紹介した定数、変数を定義します。

定数(Set関数)

• g:9.81
• ojisan(おじさんの初期位置):406(Y座標)
• v₀:100

変数(UpdateContext関数)

• t:スライダーのOnChangeを+1から0.01にしておきます(こちらのみSet関数)
• v:-(v₀-g*t)
• Y:ojisan-(v₀*t+0.5*g*t^2)

ジャンプボタンに指示を与える

Set(glbIsStop,!glbIsStop);If(!glbIsStop,Reset(Slider1));
Set(t,0);Set(ojisan,406);Set(v0,100);Set(g,9.81)

一行目：詳しくは参考にしたブログを見てください。

二行目：Set(t,0)は時間を0にします。Set(ojisan,406)はおじさんを初期位置に戻します。Set(v0,100)はおじさんに初速度を与えます。Set(g,9.81)は重力加速度gを定義します。

スライダーに指示を与える

If(glbIsStop,"",Set(t,t + 0.01));
UpdateContext({v:(-v0+g*t),Y:ojisan-v0*t+0.5*g*t*t})

一行目：詳しくは参考にしたブログを見てください。

二行目：速度v、位置Yを計算式に沿って更新します。

動かしてみる

いいかんじに飛び上がりました。しかし地面を設定していないのでおじさんは奈落の底へ落ちてしまいました。

そこで次回は「地面を設定」について書きます。