コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】ボンバーマンを作ってみよう! プレイヤーを配置する

Power Apps ゲーム開発

スポンサードリンク

Power Apps でボンバーマンを作成しました！
こんな感じです！


こんな感じのゲームの作成方法をいくつかのセクションにわけて紹介していきたいと思います。

このセクションで紹介すること

  1. プレイヤー画像の読み込み(SVG形式)
  2. コントローラーの設置
  3. ボタン操作でキャラクターの移動を制御


1. キャラクター画像の読み込み(SVG形式)

それではまずプレイヤー画像の読み込みを行いたいと思います。
キャラクターイメージの用意は各自でお願いします。(参考までに私はこちらのサイト様より素材をお借りしました。)

今回キャラクターイメージの読み込みはSVG形式での読み込みを行います。
SVGってなに？って方はこちらのSVGファイルとは？基礎知識と作成方法、JPEG・PNGからSVGファイルに変換する方法を解説をみてみるとよいかもしれません。
SVGについて簡単に説明しますと、「Web上で使うことができる拡大縮小が可能なベクター画像」のことをいいます。

用意した画像をSVGに変換する際は、こちらのPNG SVG 変換 - 画像ファイルをオンラインで変換する が便利です。
簡単に使い方を説明します。(ブラウザはChromeの利用を想定)

  1. 画像を読み込んで変換します。
  2. 変換された画像を開きます。
  3. "ctrl + U"を押してWebページのソースコードを表示させます。
  4. 表示された文字列のうち「herf="XXXX"」のダブルクォートで囲まれた部分をコピーしてください。

それでは少し前提の説明が長くなってしまいましが、Power Appsの説明に移りたいと思います。
Power Appsを開いて、新しいキャンバスアプリをタブレットレイアウトで開いてください。

次にアプリが開かれたら用意していたSVGが読み込まれるようにします。
AppのOnStartに以下のように記載します。

App.OnStart

// プレイヤーのイメージのロード
ClearCollect(_Player,
{ID:0, href:"'data:image/png;base64,iVBORw0KGg....'"},
{ID:1, href:"'data:image/png;base64,iVBORw0KGg....'"},
...
{ID:11, href:"'data:image/png;base64,iVBORw0KGg....'"}
)

hrefにはSVGのhref要素を記載してください。
私の場合、IDに対応したイメージは下記のようにしています。

ID イメージ
0 正面(右足前)
1 正面(静止)
2 正面(左足前)
3 左向き(右足前)
4 左向き(静止)
5 左向き(左足前)
6 右向き(右足前)
7 右向き(静止)
8 右向き(左足前)
9 後ろ向き(右足前)
10 後ろ向き(静止)
11 後ろ向き(左足前)

続いて、「挿入」>「メディア」>「画像」より、画像を配置します。
配置された画像はわかりやすいように名前を変更しましょう。
名前の変更は下図のように行います。今回は"PlayerImage"という名前にします。

f:id:koruneko:20200229201805p:plain

Screen1の"OnVisible"に下記のようなコンテキスト変数を定義します。

Screen1.OnVisible

UpdateContext({_playerState:1});

この"_playerState"にはプレイヤーの状態を格納します。

そして、配置された画像の"Image"には下記のように記載します。

PlayerImage.Image

"data:image/svg+xml;utf8, " & EncodeUrl(
    "
    <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'>  <image id='image0' width='32' height='32' x='0' y='0'
    href=" & LookUp(_Player, ID = _playerState).href & "/>
</svg>
    "
)

これにより、SVG形式で画像を表示することができます。
"LookUp(Player, ID = playerState).href"としており、"_playerState"は現在1に設定されていると思うので、表示されている画像は、先ほどOnStartに設定したイメージのIDが1の要素が表示されていますね。


2. コントローラーの設置

続いてコントローラーを設置します。
お好きなコントローラーの画像を設置してください。

コントローラーには上下左右の4つのボタンが必要ですね。
なので「ボタン」を4つ挿入してください。名前はわかりやすいように、"UpButton"、"DownButton"、"RightButton"、"LeftButton"と設定してきます。
先ほど設定したボタンを下図のようにコントローラーを押したときに反応してほしい場所に設置します。

f:id:koruneko:20200229231413p:plain

ただこのままですと見栄えが悪いですね。
なので、こちらのボタンを見えないようにしたいと思います。
このとき「非表示」に設定してしまうと、ボタンを押しても反応しなくなってしまうので注意してください。
4つのボタンをShiftを押しながら選択して、"Color"、"Fill"、"HoverColor"、"HoverFill"を下記のように設定します。

RGBA(0, 0, 0, 0)

この設定によりボタンが透明に設定されたかと思います。

3. ボタン操作でキャラクターの移動を制御

ボタンが押されたときにキャラクターが移動するようにします。
キャラクターの座標を設定するための変数を定義します。

Screen1.OnVisible

UpdateContext({_startX:48});
UpdateContext({_startY:48});
UpdateContext({_playerX:_startX});
UpdateContext({_playerY:_startY});

"StartX"、"StartY"のようにしているのはプレイヤーの初期位置を定義するためです。
続いて、この設定をプレイヤーの設定に割り当てます。

PlayerImage.X

_playerX

PlayerImage.Y

_playerY

次にボタンが押されたときにそれに対応した方向へキャラクターが移動し、イメージも変わるように設定します。

UpButton.Onselect

UpdateContext({_playerY:_playerY - 12});
If(_playerState = 9, UpdateContext({_playerState:11}), UpdateContext({_playerState:9}))

DownButton.Onselect

UpdateContext({_playerY:_playerY + 12});
If(_playerState = 0, UpdateContext({_playerState:2}), UpdateContext({_playerState:0}))

RightButton.Onselect

UpdateContext({_playerX:_playerX + 12});
If(_playerState = 6, UpdateContext({_playerState:8}), UpdateContext({_playerState:6}))

LeftButton.Onselect

UpdateContext({_playerX:_playerX - 12});
If(_playerState = 3, UpdateContext({_playerState:5}), UpdateContext({_playerState:3}))

これで、ボタンが押されたときにキャラクターがその方向へ歩いているようにみえるようになりましたね。
しかしこのままでは、ボタンを長押ししても反応してくれません。
Power Apps のボタンコントロールのリファレンスをみてみましょう。
こちらをみてみると、ボタンが押されているときの設定は

Pressed – コントロールが押されている間は true 、それ以外の時は false になります。

となっています。
この説明や、ボタンにあるプロパティを探しても"Pressed"が見つからないことが分かる通り、ボタンが押されているときの設定をボタンのみで完結させることはできません。
ではどうするかというと、今回はタイマーコントロールを使用します。
タイマーは1つでも実装が可能ですが、わかりやすくするため、上下左右それぞれのタイマーを用意します。
上でボタンを設定したときと同じようにタイマーを設定し、名前は"UpTimer"のように設定してください。
基本的に同じような設定になるので上方向の設定だけを紹介したいと思います。
残りの下、左、右の設定については各自同じように設定をお願いします。

"Pressed"は押されたときにtrueになるので、"Start"、"Repeat"をそれぞれ下記のように設定します。

UpButton.Pressed

この設定により、ボタンが押されたときタイマーがスタートするようになり、ボタンが押されている間タイマーが繰り返されるようになりました。
タイマーの"Duration"については、適当な数値を設定しておいてください。参考までに私は"150"に設定しています。
このままでは、特になにも起こらないのでタイマーが終わった時の操作を記載しましょう。

UpTimer.OnTimerEnd

Select(UpButton)

これでタイマーが終わるたびにUpButtonが押されるので、UpButton.OnSelectに記載された内容が実行されることになります。
最後にこれらのタイマーはみえなくてもよいので「非表示」にしておきましょう。

以上でプレイヤーの設定は完了です！
お疲れさまでした！！

性能について
Pressedが押されたときの設定にてタイマーを上下左右それぞれに設置しましたが、1つに纏めたほうがよいのでは？と思われるかもしれません。
しかし、私が検証を行ってみたところ、タイマーが性能に影響を及ぼすのは同時にタイマーが起動したときだと思われます。
なので、今回は無理にタイマーを1つに纏める必要はないと思います。


スポンサードリンク