Power Appsの使い方

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

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

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

 

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

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

 

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

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

 

今回はコイン取得をやっていきます。

コインを取得したら、コインが消えるようにします。

 

前提条件

ジャンプ編で作成した犬くんとの衝突判定を書いていきます。

犬くんがジャンプできるようにしておいてください。

 

手順

・コイン画像を設置

CoinVisibleに設定する変数を初期化

Visibleに変数を設定

・当たり判定処理を記述

・コインの分だけ量産

StepImageとの相対位置を設定

CoinImage.Yの設定

CoinImage.Xの設定

 

コイン画像を設置

コイン画像をプレイヤーの上に設置します。

CoinVisibleに設定する変数を初期化

コインの表示非表示を切り替えるため、コインのVisibleに変数を指定したいので

設定用の変数を初期化しておきます。

コインを量産する場合は、それぞれのコインに変数が必要になります。

 

Screen.OnVisible

UpdateContext({CoinVisible:true});

 

Visibleに変数を設定

コインのVisibleに変数を設定して表示、非表示を切り替えられるようにします。

 

CoinImage.Visible

CoinVisible

 

当たり判定処理を記述

描画更新タイマーで当たり判定をします。

プレイヤーがコインにちょっとでもかぶってたら当たりという条件で、コインを非表示にしています。

 

Timer.OnTimerStart

If(

    // 横方向の判定。コインにプレイヤーがかぶっていたら当たり。

    CoinImage1.X <= PlayerImage_2.X + PlayerImage_2.Width && CoinImage1.X + CoinImage1.Width >= PlayerImage_2.X

    &&

    // 縦方向の判定。コインにプレイヤーがかぶっていたら当たり。

    CoinImage1.Y <= PlayerImage_2.Y + PlayerImage_2.Width && CoinImage1.Y + CoinImage1.Width >= PlayerImage_2.Y    

    ,

    // 当たったら、コインを非表示にする。

    UpdateContext({CoinVisible:false});

);

 

コインの分だけ量産

とりあえず1つだけ作って、原理を確認できました。

 

あとはこれを量産すれば、コインを並べることができます。

StageImageの数だけ量産しましょう。

 

CoinImage.Yの設定

StageImage.Yの相対位置で指定することができます。

CoinImage1- 9 で異なるので注意しましょう。

 

CoinImage.Y

StageImage1.Y - 200

 

CoinImage.Xの設定

StageImage.Xの相対位置で指定することができます。

CoinImage1- 9 で異なるので注意しましょう。

 

CoinImage.X

StageImage1.X

 

まとめ

手順ができたら、犬くんをジャンプさせてコインにぶつけてみましょう。

うまくいっていれば、コインが消えるはずです。

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

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

 

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

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

 

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

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

 

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

 

ステージ画像を設置

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

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

 

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

 

f:id:botherntu:20200215091751p:plain

 

この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

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

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

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

 

StageImage2.Height

StageImage1.Width * 2.5

 

StageImage2.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 で横スクロールアクションゲームを作る 横スク編

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 Apps または Power Automateでは、コネクタを使用してさまざまなサービスと連携させることができます。

 

使用できるコネクタは契約プランによってことなり、種類としては

・スタンダード(標準)コネクタ

・プレミアムコネクタ

の2種類存在しています。

 

このスタンダードとプレミアムというネーミング、おかしいと思うんですよ。

 

スタンダードコネクタでできることは限定的

スタンダードコネクタでなにができるかというとざっくり以下のようになります。具体的に知りたい方は各々調べてください。

 

・無料でサービスを提供しているAPIとの連携(twitter gmail など)

Office365系サービスとの連携

 

逆に、以下のようなことはできません。

HTTP接続でサービス連携する

SQL ServerMy SQLなどと連携する

・Azure系サービスと連携する(AzureADを除く)

・オンプレデータソースと連携する

・カスタムでコネクタを作成して任意のAPIと連携する

 

上記のことはもちろんプレミアムコネクタであれば連携できます。

正直、体験版かな?っていうレベルだと思います。

用途としてはOffice365系サービスの連携が主で、それ以外にはあまり本格的にはつかえません。

 

Power Appsもそうですが、Power Automateを本格的に活用していくのであればオプションプランを契約してプレミアムコネクタの活用が必須です。

(もちろんOffice365の連携フローで効率を上げるのも最高の使い方です。そのうちもっといろいろやりたくなるはず。

 

で、こういう声をたまに聞きます。

 

Office365でプレミアムコネクタ使わせてよ!」

 

と。

 

たしかに、スタンダード(標準)コネクタというネーミングだと、とりあえず使いたい機能が有って然るべきじゃね?っていう感想になるのも最もだと思います。

あれば何でも出来ちゃうHTTP接続とか、使わせてくれよと。僕も思うと思います。

 

”贅沢”は言わないんで、”普通”に使うHTTP接続くらいつかわせてくれ、と。

 

コネクタのネーミング的にそういう発想になると思うんです。

 

名前変えたらいいと思うんだよね

個人的な感覚では、

・スタンダードコネクタ → オープンコネクタ / フリーコネクタ

・プレミアムコネクタ  → スタンダードコネクタ

 

こういうネーミングにすべきなんじゃないかと思います。

こうすれば「あぁ、今のプランはスタンダードなコネクタすら使えない機能制限版みたいな状態なんだな」と理解しやすいのかなと。

 

Power Apps / Power Automateのポテンシャルはもっともっとあるんだということを知る切っ掛けになれば良しって感じで。

 

終わりに

基本的に僕は価値のあるものにはどんどんお金を払って使うべきだと思います。そうしないと便利なサービス、製品が成長しないし、自分も払う必要のない余計なコストを様々な形で払うことになるからです。

 

お金で解決できることはお金で解決しましょう。お金で解決できないことに頭と時間を使うべきです。

Power Apps 初期Screenを条件により切り替える

Power Appsでは、OnStartプロパティに設定することで初期画面を動的に変更することができます。

 

OnStartプロパティを開く

OnStartはツリービュー > App から参照できます。

 

Navigate()で初期画面を設定する

OnStartにNavigate()関数を記述することで、初期画面を設定できます。

OnStart()のテストは App > OnStart を実行します から行えます。

 

条件分岐させる

If()やSwitch()などにより分岐させることで動的に初期画面を変更することができます。

 

補足

OnStartプロパティの詳細については下記のリンクを参照してください。

 

参考リンク

OnStartプロパティ

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/object-app#onstart-property

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