Power Appsのススメ 〜その８〜 ゲームっぽく無限スクロール
Power Appsは業務アプリケーション用のローコード開発プラットフォーム、ではありますが、時折、「ゲームを作ってみた」といった記事も見かけます。
プログラマ心をくすぐられるような話なので、自分も試しにやってみました。
といっても、そんな凝ったこともできないので、まずは縦横の無限スクロールから始めてみます。
１．素材をどうするのか
こういった時にまず考えるのが、素材をどう入手するか。
絵心など全くない自分としては通常フリー素材をまず探すところから始めるのですが、今回はわかりやすいパターンにして自前でやってみることにしました。
右から左へ無限に流れるパターンを用意すればいいであれば、別に絵じゃなくてもいいだろう・・・・・・ということで、今回はとりあえずアイコンをスクロールさせてみます。
２．コンテナを使う
アイコン一個をスクロールさせるだけだとちょっとつまらないので、背景全体をスクロールさせることにしました。
そこで、コンテナを用意して、その上に適当にアイコンを散りばめてみます。
こんなふうに画面全体を覆うコンテナを１つ作ってアイコンを散りばめ、それをコピーして２つ同じものを作成します。
これで背景画像の代わりができました。
３．描画座標の制御
スクロールさせるには短時間で描画座標を変化させる必要があります。
今回は横スクロールを想定し、コンテナのX座標を制御するための変数を用意します。
App.OnStartで、初期化も兼ねて定義しておきます。
Set(OffsetX, 0);４．タイマーの用意
スクロールさせるにはタイマーを使います。
Durationはとりあえず1（1ms）にしときます。
（そんなに短い時間で動くとは思えないですけど）
プロパティでは、繰り返しと自動開始をオン、表示をオフにしておきます。
更新処理はOnTimerStartかOnTimerEndに実装することになりますが、今回はOnTimerEndにしてみました。
Set(OffsetX, Mod(OffsetX + 1, Container1.Width));５．座標の設定
Container1のXプロパティを以下のようにします。
-OffsetXContainer2のXプロパティはちょっと変わります。
Container1.Width - OffsetXこれで実装は完了。
それでは早速試してみましょう。
1周するのに1分ほどかかるので、本当に綺麗にスクロールを続けているのか確認するには時間がかかります。
手っ取り早く確認したい場合は、各コンテナのX座標計算時に増分を２とか４に増やすといいでしょう。
ただし、増分で画面幅（コンテナ幅）を割った際にあまりが出ないようにするひつようがあります。
まとめ
以上、今回はゲームっぽく無限スクロールを試してみました。
横だけでなく縦も同じ理屈で実装可能です。
次回は画面操作について何か書ければいいかな、と思っています。
この記事が気に入ったらサポートをしてみませんか？