Power Appsで横スクロールアクションゲームを作る ジャンプ編
1年以上前に作ったゲームアプリですが、今更ながら作り方の解説記事を書いてみます。
↓昨年9月に行われた海外コミュニティ主催のPowerAppsゲーム作成コンペで優勝したアプリ
こんな感じの横スクロールアクションゲームを去年作成しました。
いくつかのセンテンスに分けて、作り方の解説記事を書いていきます。
要素分け
早速作っていきたいところですが、アクション要素的にどういった要素がこのゲームに含まれているか抜き出してみます。
・ジャンプしてる。
・横スクロールしてる。
・地面の高さが変わってる。
・ぶつかるとぶっとんで、もどってきてる。
・コイン取ってる。
こんな感じでしょうか。
今回やるところ
この記事では上記のうち、
・ジャンプ
について書いていきます。
ジャンプをつくる
ジャンプに出てくる要素
最初にジャンプのところをやっていきましょう。
使う要素は以下のとおりです。
コントロール ４つ
・イメージ（プレイヤー）
・タイマー（描画更新タイマー）
・アイコン（地面）
・ボタン（ジャンプボタン）
変数 ３つ
・GroundY 地面のY座標を表します。
・PlayerY プレイヤー（今回は犬くん）のY座標を表します。
・AccelerationY プレイヤーにかかっている加速度です。
地面を作る
ジャンプするには、まず地面が必要です。
ジャンプした後に、着地しないといけないので地面がないとだめです。
ScreenのOnVisibleなどで地面用の変数を初期化します。
適当に600とかにしておきます。
Screen.OnVisible.
UpdateContext({GroundY:600})
とりあえず地面を見えるようにしたいので、適当にアイコンをおいておきます。
横幅最大値の四角アイコンを設置して、Yプロパティに上記の変数GroundYを設定します。
※OnVisibleプロパティは画面表示時に実行されます。うまく動作しない場合はScreenを切り替えてみてください。または代わりにテストしやすいボタンで実装してもいいですね。
Rectangle.Y.
GroundY
コレでとりあえず地面ができました。
プレイヤー.Yに変数設定
プレイヤー用画像を準備して、メディア > イメージで追加します。
次に、プレイヤーのY座標用の変数を準備します。
OnVisibleで初期化しておきます。
Screen.OnVisible.
UpdateContext({GroundY:600,PlayerY:0})
準備できたら、イメージのYに設定します。
Image.Y.
PlayerY
コレでひとまずPlayerYを変動させると、プレイヤー画像の座標が変わるようになりました。
重力をつくる
まだ現状だと犬さんは空中に浮いてますね。
全然リアルじゃありません。
なので重力を作ります。
まずは加速度用の変数を初期化します。
Screen.OnVisible.
UpdateContext({GroundY:600,PlayerY:0,AccelerationY:0})
次にタイマーコントロールを追加し、Durationを50とかにします。
Timer.Duration.
50
OnTimerStartで描画更新の処理を作っていきます。
（今後ここがすごいごちゃごちゃしてきます。描画の処理もそうですし、当たり判定やらも書いていく。
メインの処理を書いていく場所になります。ローコーディングってなんぞや？ってなってきます。）
今回は描画更新のたびに加速度に対して重力をかけていきたいので、下方向にひっぱる。座標的には値を追加していきます。
また、プレイヤーの高さは加速度に影響されて変動していきます。これも処理します。
// 加速度が重力の影響を受ける
UpdateContext({AccelerationY:AccelerationY + 10});
// プレイヤーの高さが加速度方向に移動する
UpdateContext({PlayerY:PlayerY + AccelerationY});
10のとこが重力加速度ですね。完全にマジックナンバーになっちゃってますが。
上記がかけたら、うまくいってるか実験してみましょう。
Timerのプロパティを確認して、繰り返しと自動開始をONにしてください。
そしたら、右上の再生ボタンで再生モードにします。
うまくいっていれば、犬くん（プレイヤー画像）がすーっと自由落下して画面外へ消えていきます。
まだ地面を考慮してないので、着地はしてくれないですね。
地面に着地する
現状だと地面に潜っていってしまってます。着地するには、Timer.OnStartの処理を修正します。
// プレイヤーの高さが加速度方向に移動する
If(
// もし地面にうまっちゃってたら・・・
PlayerY + AccelerationY > GroundY,
// 地面の上に乗せて、加速度リセット。
UpdateContext({PlayerY: GroundY,AccelerationY:0});,
// そうでないなら、重力方向に加速する。
UpdateContext({PlayerY: PlayerY + AccelerationY});
)
これで地面に立つことが・・・
できてないっすね。
プレイヤーイメージのYプロパティを下記のように修正すると、地面の上に立ってくれます。
Image.Y.
PlayerY-Image1.Height
できた！やったぜ！
ジャンプする
最後です。
ボタンを押したら犬くんをジャンプさせようと思います。
もう地面も重力もありますから、あとは上にジャンプ（加速）すればいいだけです。
ボタンを設置して、OnSelectに下記のように記述します。
Button.OnSelect.
UpdateContext({AccelerationY:-100});
うまく動いているか確認するには、再生モードにしてボタンをクリックします。
うまく行っていれば犬くんがぴょーんと飛び上がるはず。
（-100の値を変更すると・・・？どうなるでしょう？）
ジャンプ完成！
これでやっとジャンプができました！お疲れさまでした！
どうでしょう、Power Appsでアクションゲームが作れる気がしてきませんか？
手順を追うので精一杯でなにがどうなってるかイマイチわからないかもしれませんが、１手順１手順はあまり難しいことはしていません。少し落ち着いたら見返して、変数がどういう事になってるか追ってみてください。
改善案
GroundYはコントロールのYプロパティで代用してもいいかもしれない。と思いました。
残り作業
さぁジャンプができたので残りは
・横スクロール
・地面の高さ変動
・衝突判定とやられ処理、復帰処理
・コイン取得判定と処理。
ですね。
思ったより記事にすると長くなるので完結は年明けかな。。。
PowerApps Advent Calendar 2019
この記事はPowerApps Advent Calendar 2019参加記事です。
