Power Appsの使い方

Power AppsとPower Automateの使い方やできることがわかるブログを目指しています。

Power Apps で横スクロールアクションゲームを作る コイン取得編

1年以上前に作ったゲームアプリですが、今更ながら作り方の解説記事を書いてみます。

 

↓昨年9月に行われた海外コミュニティ主催のPowerAppsゲーム作成コンペで優勝したアプリ

https://twitter.com/bothernpa/status/1045855585797722112

 

こんな感じの横スクロールアクションゲームを去年作成しました。

いくつかのセンテンスに分けて、作り方の解説記事を書いていきます。

 

今回はコイン取得をやっていきます。

コインを取得したら、コインが消えるようにします。

 

前提条件

ジャンプ編で作成した犬くんとの衝突判定を書いていきます。

犬くんがジャンプできるようにしておいてください。

 

手順

・コイン画像を設置

CoinVisibleに設定する変数を初期化

Visibleに変数を設定

・当たり判定処理を記述

・コインの分だけ量産

StepImageとの相対位置を設定

CoinImage.Yの設定

CoinImage.Xの設定

 

コイン画像を設置

コイン画像をプレイヤーの上に設置します。

CoinVisibleに設定する変数を初期化

コインの表示非表示を切り替えるため、コインのVisibleに変数を指定したいので

設定用の変数を初期化しておきます。

コインを量産する場合は、それぞれのコインに変数が必要になります。

 

Screen.OnVisible

UpdateContext({CoinVisible:true});

 

Visibleに変数を設定

コインのVisibleに変数を設定して表示、非表示を切り替えられるようにします。

 

CoinImage.Visible

CoinVisible

 

当たり判定処理を記述

描画更新タイマーで当たり判定をします。

プレイヤーがコインにちょっとでもかぶってたら当たりという条件で、コインを非表示にしています。

 

Timer.OnTimerStart

If(

    // 横方向の判定。コインにプレイヤーがかぶっていたら当たり。

    CoinImage1.X <= PlayerImage_2.X + PlayerImage_2.Width && CoinImage1.X + CoinImage1.Width >= PlayerImage_2.X

    &&

    // 縦方向の判定。コインにプレイヤーがかぶっていたら当たり。

    CoinImage1.Y <= PlayerImage_2.Y + PlayerImage_2.Width && CoinImage1.Y + CoinImage1.Width >= PlayerImage_2.Y    

    ,

    // 当たったら、コインを非表示にする。

    UpdateContext({CoinVisible:false});

);

 

コインの分だけ量産

とりあえず1つだけ作って、原理を確認できました。

 

あとはこれを量産すれば、コインを並べることができます。

StageImageの数だけ量産しましょう。

 

CoinImage.Yの設定

StageImage.Yの相対位置で指定することができます。

CoinImage1- 9 で異なるので注意しましょう。

 

CoinImage.Y

StageImage1.Y - 200

 

CoinImage.Xの設定

StageImage.Xの相対位置で指定することができます。

CoinImage1- 9 で異なるので注意しましょう。

 

CoinImage.X

StageImage1.X

 

まとめ

手順ができたら、犬くんをジャンプさせてコインにぶつけてみましょう。

うまくいっていれば、コインが消えるはずです。

Power Apps / Power Automate の開発技術支援サービスや1日トレーニングコースを提供しています。

Power Apps や Power Automateに関する仕事のご依頼は下記ページからお問い合わせください。
ZEE CitizenDevSupport