Power Appsの使い方

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

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

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

 

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

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

 

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

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

 

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

 

ステージ画像を設置

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

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

 

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

 

f:id:botherntu:20200215091751p:plain

 

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

 

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

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

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

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

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

・ループに対応させる

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

 

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

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

 

参考

StageImage1.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)

)

 

StageImage1.Y

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

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

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

 

StageImage1.Height

StageImage1.Width * 2.5

 

StageImage1.Width

App.Width / 8

 

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

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

 

ステージに乗る

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

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

 

f:id:botherntu:20200215092119p:plain

 

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

このGroundYStepImage地面の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

УИ— И— 
I+(Stagermaqe2_ 
I+(Stagermoge5_ 
I+(Stagermaqe8_ 
P1ayerCenterX 
P1ayerCenterX 
р]ауегСепеегХ 
P1ayerCenterX 
StageIT03e1_1 
StageImoge2_1 Х • 
StageImoge5_1 Х • 
StageImoge8_1 Х • 
М _SetC и rre МС ип ау 
.“idth 
.“idth 
Р1 ayer-CenterX, updateContext( {Стоипау : StageIwage2_ 
LJpdeteCantext ( {Егоипау ; 3_ 
UpdateContext ( {Gr•oundV : S ta3eITagea_ 
Р1 ayer•CenterX, updateContext ( {Стоипау : StageIwage5_ 
Р1 ayer-CenterX, updateContext( {Стоипау : StageImage8_ 
{Егоипау ; паве9_

 

実装を呼び出すタイマー

Timer.OnTimerStart

Select(SetCurrentGroundY);

9 
十 
0n111 ぎ 引 : 
ツ リ - ビ ュ - 
.0 
日 コ App 
[ コ 5 は 
ー コ s—3 
[ M - に 「 を ou 
ndV 
〃 加 度 が 王 力 の 影 響 を 受 
updateContext({Acce1erationY: AccelerationY ・ 10 } ) ; 
〃 プ し イ ヤ ー の 高 さ か 加 速 度 方 向 に 移 動 す る 
ー playerY* Accelerationy 〉 GroundY. 〃 も し 地 面 に う ま 。 ち つ 。 て た ら ・ 
Updatecontext({playery; Gr 。 聞 評 譌 “ 飜 を 「 歌 ionY : 0 } ) 〃 地 面 の 上 に 第 せ て 、 カ 度 リ セ ッ ト 。 
Updatecontext({P1ayerY: PI 野 ” Ⅳ ・ A “ 猷 ” 飜 i 。 } ) ; ″ そ う で な い 宿 ら 、 重 力 方 向 に 加 速 す る . 
〃 ス テ - ジ を 生 に 移 を さ せ る 
UpdateContext({StageBasepositionX: Stage8asepositionX - ScrollVa1ue)); 
〃 ス テ ー シ か 見 切 れ た ら 、 右 に 恃 っ て く る 
If ( 、 t 谷 g に ga 、 に PO 、 i [ ionX ・ 、 [ 00 に 1 00 ] -1. Width 《 0 い 」 pda [ に 〔 on [ に 製 を ( { を g に g & 当 に PO 、 itiO X pp Width } ) ) ; 
〃 関 数 呼 び 出 し 6 「 。 衄 dy を 設 定 
に 1 に [ t ( M. - 、 に に [ し ! G 尸 0 リ 月 第 つ ;

 

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

 

まとめ

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

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

 

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

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

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