Power Appsの使い方

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

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});

 

Cn ゾ ! 0 を 
〃 本 の 基 準 の 初 期 化 。 値 は 適 当 て 0 に 
updateContext({TreegasepositionX: 599 } ) ;

 

TreeImage.Xの設定

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

 

TreeImage.X

TreeBasePositionX

 

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

 

ScrollValueの初期化

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

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

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

 

Screen.OnVisible

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

 

〃 TreeBasePositionx 才 の 基 の 初 期 化 . 値 ロ 適 当 「 
〃 5 「 「 引 IV 引 ” 曜 由 毎 の ス ク ロ ー ル す る 量 。 
L 第 d t に [ 00t に Xt ( { Tr に に 2 き 当 に PO 当 Ⅱ i00 た 509 , に 「 011V き Ⅱ に : 10 } ) ; 
ツ リ ー ビ ュ ー

 

横スクロールさせる

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

 

Timer.OnTimerStart

UpdateContext({TreeBasePositionX:TreeBasePositionX - ScrollValue})

 

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

 

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

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

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

 

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

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

 

Timer.OnTimerStart

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

 

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

 

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

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

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

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

 

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

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

)

 

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

 

まとめ

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

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

 

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

 

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

- ScrollVaIue}); 
If (TreeBasepositionX + O,

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

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