Tweenを使って効率的に演出を作る

タイトル装飾

Tweenを使って効率的に演出を作る

Tweenを使って効率的に演出を作る

Unityを使ったゲーム開発ではオブジェクトに演出をつける方法はいくつかあります。
今回はそのうちの一つ「Tween」について説明します。

まずTweenを使う上でのメリットは何かをお伝えします。

 

①アセット管理しなくても良い

②アニメーション作成が苦手でも動きの補完をしてくれる

③作業者間で挙動の差異が出にくい

①アセット管理しなくても良い

ゲーム開発には演出がつきものです。

Animation、Timelineを使った複雑な演出がどんどん増えていく中

画面をリッチに見せる為の細かな演出も増えていきます。

例えば下記のようなものです。

 

例)

1:テキスト送りの下矢印:縦の動き

    

2:行き先を示すピン:横の動き

このような簡単な演出であれば、オブジェクトにTweenコンポーネントをアタッチするだけで制作を完結させることができます。

 

Tweenはanimationと違い、Controller等のアセットデータを必要としません。

また、複雑で豪華な動きを作ることは向いていませんが、数値制御による量産には向いています。

UIグラフィックの表示演出等、静的なオブジェクトのクオリティを上げつつ、アニメーションの統一が容易に出来ることが強みです。

②アニメーション作成が苦手でも動きの補完をしてくれる

Tweenは元々エンジニア向けのツールとして開発されたこともあり、基本的な制御は数値入力で行います。

また、アニメーションでよく使うカーブの形を「Easing」という機能で予め複数用意してくれています。

 

つまり、想像に最も近い動きのEasingを選び、それを元に編集するだけで演出を作ってくれるのです。

0から制作する必要がないため、アニメーション初心者でも簡単にアニメーションを作ることができるのです。

基本的な編集手順

①想像に最も近い動きのEasing(カーブ)を選ぶ

②①をどのように再生するかStyleを設定する

 ┗開始時と終了時の情報を入力し、再生方法を設定する

 

これだけです!

それでは、ここで出てきたEasing・Styleについて、代表的な機能を一部紹介します。

Easingの種類

●Linear

緩急はなく、一定の速度で動かせる

 

●Cubic in

緩急が強く、徐々に速度が上がる

●Cubic out

緩急が強く、徐々に速度が下がる

●Back in

緩急が強く、徐々に速度が上がる

●Back out

緩急が強く、徐々に速度が下がる

●Customize

AnimationのCurveようにキー制御によるカーブ設定が自由にできる

 

以上が基本的なTweenのAnimation機能です。

Styleの種類

●Once

一度のみの再生

●Loop

最初からのループ再生

●PingPong

アニメを再生し切ったら、逆再生で初期状態にアニメーションしてループ

等…

 

まだまだ機能は沢山ありますが上記のものさえ使えれば最低限のアニメーションが作れるため困りはしないです。

Tweenは移動値の他、色、アルファ値、回転値、スケール値など

様々なパラメータを動かすことができる他、複数のパラメータを組み合わせることも可能です。

③作業者間で挙動の差異が出ない

プロジェクトに参画するとよく起こりがちなのですが、画面をリッチにすればするほど

演出のアセットデータの管理が難しくなっていきます。

その結果、ほぼ同じ挙動なのに既存のAnimationを見つけられずに新規作成→画面ごとに微妙な差異が生まれてしまうことがあります。

上手く管理できないと不要なAnimationデータがどんどん増えていき、容量の圧迫や修正の手間も倍増してしまいます。

 

その点Tweenはコンポーネント管理でコピペが可能なため、作業者間での挙動の差異を減らす事が可能です。

まとめ

一口にTweenといっても、アセットストアからインストールしてきたもの、プロジェクト用にカスタマイズされたものなど様々な種類があり、最初は戸惑うかもしれません。

 

ですが、冷静にシステムを見直せば、使えるAnimationはほぼ一緒です。

Tweenをカスタマイズして扱えるパラメータを増やせば、複雑なアニメーションの制作も可能になるでしょう。

 

Animationと一緒に利用するプロジェクトもあるため

Tweenの特徴を理解し、目的に合わせて上手く活用することで今よりもっと

ゲーム開発がスムーズに進むと思いますので是非実践して見てください。

作者
  S.I
  デザイナー

目次

目次を生成中...