キャラクターにアニメーションを設定する ~勉強会資料その2~

このブログはPower Apps でローコーディングな勉強会 #14の資料その2になります。

このブログでは勉強会資料その1で表示させたキャラクターにアニメーションを付ける方法をご紹介します。

アニメーションを設定する

アニメーションの設定方法は至って単純です。
ボタンが押されたときに画像を切り替えればいいだけです！

ということでまずは切り替えて表示するための画像を用意しましょう。
画像は、正面・後ろ向き・右向き・左向きの画像を棒立ち・右足前・左足前の計12枚用意しました。

画像を切り替えるということは何かしらの変数を用意しておく必要があります。
なのでScreen1.OnVisibleに以下を追加します。

Screen1.OnVisible

UpdateContext({_playerState:1});

この変数をボタンが押されたときに変更されるようにします。
以下の式をボタンコントロールにそれぞれ追加します。

UpButton.Onselect

If(_playerState = 9, UpdateContext({_playerState:11}), UpdateContext({_playerState:9}))

DownButton.Onselect

If(_playerState = 0, UpdateContext({_playerState:2}), UpdateContext({_playerState:0}))

RightButton.Onselect

If(_playerState = 6, UpdateContext({_playerState:8}), UpdateContext({_playerState:6}))

LeftButton.Onselect

If(_playerState = 3, UpdateContext({_playerState:5}), UpdateContext({_playerState:3}))

これだけの設定では肝心の画像を切り替える処理がないのでPlayerImage.Imageを下記のように変更しましょう。

PlayerImage.Image

Switch(_playerState, 
0, 'Player-0-0',
1, 'Player-1-0',
2, 'Player-2-0',
3, 'Player-0-1',
4, 'Player-1-1',
5, 'Player-2-1',
6, 'Player-0-2',
7, 'Player-1-2',
8, 'Player-2-2',
9, 'Player-0-3',
10, 'Player-1-2',
11, 'Player-2-3'
)

以上でキャラクターがボタン操作で歩いているかのように設定することができました！
たったこれだけの設定でもなんだかゲームっぽいですよね！！！