手付けUIアニメーションのすすめ

始めまして。入社3年目のプログラマー J と申します。
キャッシュを考慮したコードを書いてみよう!を書いた人の同期です。

 

今回は、手付けで実装する簡単なUIのプログラムを紹介したいと思います。
UIを手付けで実装するメリットは、性能が低いハードでのFPS保持や、複雑・オシャレな動きをさせたいなどがあります。
デメリットとしては、プログラマーの工数が増えるのでスケジュールとの相談だったりです。

使用したライブラリはSiv3Dです。
お手軽にプログラムが書けるので個人的におススメです。
Siv3D Reference-JP

まずは四角形を1つ表示してみます。

次にUIに必要なインアニメ、アウトアニメ、待ちアニメを制御する処理を追加します。

状態の種類、現在の状態、描画フラグを定義し、更新処理をswitchで分けるようにしました。
このコードを実行すると s_IsDisp が false のためUI表示されません。

 

それでは、
・左クリックしたら状態を eState_In にしてUIを表示
・インアニメ中はα値を60フレームで0から255に変化
・右クリックしたら状態を eState_Out にする
・アウトアニメ中はα値を30フレームで255から0に変化してUIを非表示
となるように実装します。

特に難しいことはせず、最終的なパラメータに対してオフセットするような形です。

 

これで基本部分の実装はできました。

 

あとはアニメーションの補間にイージングを使用し、移動、拡縮、回転などを加えるとクオリティアップできます。

また、状態を増やすことでイン、アウトだけでなく、別の動きを追加することも簡単です。

 

最後に

やはり、手付けでアニメーションを実装するのは時間がかかるものの、見た目が良く、処理速度が速いので、時間があるときは是非お試しください。

それでは。


コメント投稿は締め切りました。