このブログはPower Apps でローコーディングな勉強会 #14の資料その1になります。
このブログでは表示させたキャラクター(画像)をボタン操作で上下左右に動かす方法についてご紹介します。
画像を表示する
Power Appsの画面より新規にキャンバスアプリを作成してください。
レイアウトは横向きで作成したいためタブレットを選択します。
用意した画像をPower Appsに読み込ませます。
「ビュー」 > 「メディア」を選択します。
「参照」を選択して読み込ませたい画像を選択したら左上にある「←」を選択して編集画面に戻ります。
続いてキャンバスに画像を挿入します。
「挿入」>「メディア」>「画像」より、画像を配置します。
配置された画像はわかりやすいように名前を変更しましょう。
名前の変更は下図のように行います。今回は"PlayerImage"という名前にします。
画像の"Image"には先ほど読み込ませた画像を選択します。
例えば画像の名前が"Player-1-0"という名称でしたら、以下のようになります。
PlayerImage.Image
'Player-1-0'
これで画像をキャンバスに表示することができました。
ボタン操作でキャラクターを移動させる
先ほど表示させたキャラクターをボタン操作で移動させることができるようにします。
上下左右それぞに対応したボタンが欲しいのでボタンは4つ用意します。
名前はわかりやすいように、"UpButton"、"DownButton"、"RightButton"、"LeftButton"と設定しておきます。
また、表示されるテキストもわかりやすいように変更しておきましょう。
これらのボタンが押されたときにキャラクターが移動するようにします。
キャラクターの座標を設定するための変数を定義します。
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});
DownButton.Onselect
UpdateContext({_playerY:_playerY + 12})
RightButton.Onselect
UpdateContext({_playerX:_playerX + 12})
LeftButton.Onselect
UpdateContext({_playerX:_playerX - 12})
これで、ボタンが押されたときにキャラクターが移動するようになりました。
しかしこのままでは、ボタンを長押ししても反応してくれません。
Power Apps のボタンコントロールのリファレンスをみてみましょう。
こちらをみてみると、ボタンが押されているときの設定は
Pressed – コントロールが押されている間は true 、それ以外の時は false になります。
となっています。
この説明や、ボタンにあるプロパティを探しても"Pressed"が見つからないことが分かる通り、ボタンが押されているときの設定をボタンのみで完結させることはできません。
ではどうするかというと、今回はタイマーコントロールを使用します。
タイマーは1つでも実装が可能ですが、わかりやすくするため、上下左右それぞれのタイマーを用意します。
上でボタンを設定したときと同じようにタイマーを設定し、名前は"UpTimer"のように設定してください。
基本的に同じような設定になるので上方向の設定だけを紹介したいと思います。
残りの下、左、右の設定については各自同じように設定をお願いします。
"Pressed"は押されたときにtrueになるので、"Start"、"Repeat"をそれぞれ下記のように設定します。
UpButton.Pressed
この設定により、ボタンが押されたときタイマーがスタートするようになり、ボタンが押されている間タイマーが繰り返されるようになりました。
タイマーの"Duration"については、適当な数値を設定しておいてください。参考までに私は"150"に設定しています。
このままでは、特になにも起こらないのでタイマーが終わった時の操作を記載しましょう。
UpTimer.OnTimerEnd
Select(UpButton)
これでタイマーが終わるたびにUpButtonが押されるので、UpButton.OnSelectに記載された内容が実行されることになります。
最後にこれらのタイマーはみえなくてもよいので「非表示」にしておきましょう。
以上でキャラクターをボタン操作で移動させる設定は完了です！
お疲れさまでした！！
