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つ分の画像で構成されています。
この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
こんな感じで適当に設定してみます。
これで横スクロールするステージが作成できました。
ステージに乗る
次に、以前作った犬くんを持ってきまして、ステージに乗れるようにします。
移植しただけだと地面に潜り込んでしまいます。
地面は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);
このように実装を切り分けることで、呼び出し元の実装からは簡潔になり、全体の流れを把握しやすくなります。
まとめ
これで起伏のあるステージの構成と、ステージの起伏に合わせてプレイヤーを大地に立たせることができました。
だいぶ形になってきましたね。
長い処理を関数化してしまうのはうまく使うと非常に便利です。通常のアプリ作成時にも活用してみてください。
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});
TreeImage.Xの設定
初期化して準備ができたら、TreeImage.Xに変数を指定します。
TreeImage.X
TreeBasePositionX
これで変数を増減させると木も移動するようになりました。
ScrollValueの初期化
次に、描画更新用タイマーでTreeBasePositionXの値に減算していきます。
描画毎に加算する値は固定値でもいいですが、わかりやすくするため変数化しておきます。
先程と同様Screen.OnVisibleで設定します。
Screen.OnVisible
UpdateContext({TreeBasePositionX:500,ScrollValue: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
)
基準にするイメージとの位置関係にもよりますが、概ねこんな感じで相対位置を指定することができます。
まとめ
これで横スクロール的なものをつくることができるようになりました。
今回は木を例に上げましたが、ステージも全く同様にスクロールさせることができます。
だいぶゲームっぽくなってきたんじゃないでしょうか。
ちなみに、こういうゲーム作るのとかだとなにがどうなってるかよくわからなくなりがちなので、コメントはしっかり入れるようにしましょう。
Power Apps 標準コネクタとプレミアムコネクタっていうネーミングについての意見的な
Power Apps または Power Automateでは、コネクタを使用してさまざまなサービスと連携させることができます。
使用できるコネクタは契約プランによってことなり、種類としては
・スタンダード(標準)コネクタ
・プレミアムコネクタ
の2種類存在しています。
このスタンダードとプレミアムというネーミング、おかしいと思うんですよ。
スタンダードコネクタでできることは限定的
スタンダードコネクタでなにができるかというとざっくり以下のようになります。具体的に知りたい方は各々調べてください。
・無料でサービスを提供しているAPIとの連携(twitter gmail など)
・Office365系サービスとの連携
逆に、以下のようなことはできません。
・HTTP接続でサービス連携する
・SQL ServerやMy 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