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

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

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

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

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

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

今回は横スクロールを作っていきます。

横スクロールで使うコントロール、変数など

コントロール　2種類

・イメージ 数個（木やステージなど）

・タイマー（描画更新タイマー）

描画更新用のタイマーはジャンプのものを利用してもOKです。同一アプリで作る場合は、同じものを使用しましょう。ない場合はDuration = 50のタイマーを用意してもらえばOKです。

変数　2種類

・TreeBasePositionX　木の基準位置

・ScrollValue　描画毎のスクロール量

木の画像を設置

まず適当に木を置きます。イメージを設置して、木の画像を指定します。

コントロールの名前もTreeImageにしておきます。

TreeBasePositionXを初期化

次にTreeImage.Xに変数を指定します。

最初に変数の定義が必要なので、Screen.OnVisibleで初期化しておきます。

Screen.OnVisible

UpdateContext({TreeBasePositionX:500});

TreeImage.Xの設定

初期化して準備ができたら、TreeImage.Xに変数を指定します。

TreeImage.X

TreeBasePositionX

これで変数を増減させると木も移動するようになりました。

ScrollValueの初期化

次に、描画更新用タイマーでTreeBasePositionXの値に減算していきます。

描画毎に加算する値は固定値でもいいですが、わかりやすくするため変数化しておきます。

先程と同様Screen.OnVisibleで設定します。

Screen.OnVisible

UpdateContext({TreeBasePositionX:500,ScrollValue:10});

横スクロールさせる

スクロール量の初期化ができたら、描画タイマーでTreeBasePositionXに減算していきます。

Timer.OnTimerStart

UpdateContext({TreeBasePositionX:TreeBasePositionX - ScrollValue})

これで再生すると、木が横にスーッと移動していくはずです。

 

横スクロールをループさせる

上記で木が横スクロールしてくれるようになりました！完成！ではありません。

今のままだと移動して見切れたきり、一生帰ってきません。見切れたら反対側から帰ってきてもらいましょう。

いじるのは描画タイマーだけです。

Timer.OnTimerStartに下記の通り記述します。

Timer.OnTimerStart

If(TreeBasePositionX + TreeImage.Width < 0,UpdateContext({TreeBasePositionX:App.Width}))

これで、見切れたら右から出てきてくれるようになります。

複数を横スクロールさせる

ひとまず無事横スクロールさせることができました。やったね。

ですが、これを横スクロールさせたいオブジェクトに対して全部やってたらきついものがあります。

１０本木があったら関数の量１０倍ですからね。

同じ動きのものはそんな事せずにスクロールさせることができます。

Power Apps では、コントロールとの相対位置で座標指定することができるので、

TreeImageをコピーして、Xプロパティをこんな感じにすることで一緒にスクロールさせられます。

TreeImage2.X

TreeImage.X + TreeImage2.Width

ですが、このままだと見切れたときに消えちゃうので具合が良くないです。

少し改良しましょう。

If()を使ってTreeImage2が画面外にいかないようにします。

TreeImage2.X

If( 

    (TreeImage.X + TreeImage2.Width) > App.Width ,

    TreeImage.X + TreeImage2.Width - (App.Width + TreeImage.Width),

    TreeImage.X + TreeImage2.Width

)

基準にするイメージとの位置関係にもよりますが、概ねこんな感じで相対位置を指定することができます。

まとめ

これで横スクロール的なものをつくることができるようになりました。

今回は木を例に上げましたが、ステージも全く同様にスクロールさせることができます。

だいぶゲームっぽくなってきたんじゃないでしょうか。

ちなみに、こういうゲーム作るのとかだとなにがどうなってるかよくわからなくなりがちなので、コメントはしっかり入れるようにしましょう。