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

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

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

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

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

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

今回はステージ構成を作っていきます。

ステージ画像を設置

やり方の原理や考え方は前回の横スクのものと変わりません。

ステージをスクロールさせて、見切れたら右に移動させて、という具合です。

Coin dogのステージがどうなっているかというと、こんな感じで9つ分の画像で構成されています。

この9つのイメージに対して、前回のような処理を書いていくイメージです。

詳細は前回乗せたのでざっくり手順を書くと

・ステージの基準点を初期化

・基準の画像のXに変数を設定

・スクロール量設定を初期化

・タイマーで基準点を減算

・ループに対応させる

・複数ステージに対応させる

上記手順でスクロールするステージを設置することができます。

前回の記事を参考にStageImageを設置していきましょう。

参考

StageImage2.X

// * 1の部分をいじることで、StageImage1-9に対応できます。

If( 

    (StageImage1.X + (StageImage1.Width * 1)) > App.Width ,

    StageImage1.X +(StageImage1.Width * 1) - (App.Width +StageImage1.Width),

    StageImage1.X +(StageImage1.Width * 1)

)

StageImage2.Y

// アプリの縦幅 - ((セル１つ分の幅) * セル数)

// セル数をいじることで、なんマス分の高さにするか設定できます。

App.Height - ((StageImage1.Width/2) * 1)

StageImage2.Height

StageImage1.Width * 2.5

StageImage2.Width

App.Width / 8

こんな感じで適当に設定してみます。

これで横スクロールするステージが作成できました。

ステージに乗る

次に、以前作った犬くんを持ってきまして、ステージに乗れるようにします。

移植しただけだと地面に潜り込んでしまいます。

地面はGroundYで設定していました。

このGroundYをStepImageの地面のYと合わせて上げるとうまくいくはず。

・Playerの中心点を変数化して保持する

・描画ごとにGroundYを更新する

この作戦で行きます。

Playerの中心点を変数化して保持する

まずは判定で使うため、PlayerImageの中心点を変数化します。

Screen.OnVislble

UpdateContext({PlayerCenterX:PlayerImage_1.X + (PlayerImage_1.Width/2)})

描画ごとにGroundYを更新する

次にPlayerImageの中心点の真下にあるStepImageを調べて、地面の位置を取得します。

例のごとく描画タイマーに書いていきます。

Timer.OnStart

If(StageImage1_1.X < PlayerCenterX && StageImage1_1.X + StageImage1_1.Width > PlayerCenterX,UpdateContext({GroundY:StageImage1_1.Y}));

If(StageImage2_1.X < PlayerCenterX && StageImage2_1.X + StageImage1_1.Width > PlayerCenterX,UpdateContext({GroundY:StageImage2_1.Y}));
…

If(StageImage9_1.X < PlayerCenterX && StageImage9_1.X + StageImage1_1.Width > PlayerCenterX,UpdateContext({GroundY:StageImage9_1.Y}));

ちょっと量が多いですね。

オプション：関数化して可読性を上げる

かさばる関数はコードの可読性も下がるので、メソッド化してしまいましょう。

Button.OnSelectに実装を記述し、必要なタイミングでSelect(Button)のように記述すると、関数呼び出しのように使うことができます。

実装を書いておくボタン：

M_SetCurrentGroundY.OnSelect

実装を呼び出すタイマー：

Timer.OnTimerStart

Select(SetCurrentGroundY);

このように実装を切り分けることで、呼び出し元の実装からは簡潔になり、全体の流れを把握しやすくなります。

まとめ

これで起伏のあるステージの構成と、ステージの起伏に合わせてプレイヤーを大地に立たせることができました。

だいぶ形になってきましたね。

長い処理を関数化してしまうのはうまく使うと非常に便利です。通常のアプリ作成時にも活用してみてください。