ディレクターのためのUnity講座｜DOTweenで作るシンプルインタラクション

Tomoaki Kuroko

2021年6月7日 10:20

ディレクターでも作ってみたい！

なんて思ったことのあるディレクターはいませんか？

はじめまして、こんにちはMESONのディレクターのトミーです。

ARやVRの開発の現場に立ち会っていると、一緒に作っているエンジニアさんたちが楽しそうだなと思ったりします。そして、プロジェクトで作っているものがどのように動いているのか気になったりします。

なら自分でも作ってしまえばいいではないか！

ということで、「非」エンジニアのディレクター向けの開発記事を書いてみたいなと思います！

なので、この記事のテーマは「とにかく動けばいい！とにかく見えればいい！」です。一旦は小難しいことは見て見ぬ振りをして、面白いところを先にかじってしまいましょう！

今回は、『DOTween』というUnity用のアニメーションアセットを使って、簡単なインタラクションを作っていきます！　

Dotweenでなにができるの？

本題に入る前に『DOTween』となにかを見てみましょう。

DOTweenとは、Unityのアニメーションアセットです。
Unityには、俗に「Tween系」と呼ばれる多くのアセットがあり、その中の一つです。

Tween系の由来は、「Between」。
移動値と時間を指定してアニメーション、インプットとアウトプットアクションをつないでくれる機能を持っています。

なぜTween系のアセットを使うのかというと、普通にコーディングするよりも圧倒的に簡単に動きを作ることができるからです！難しいコーディングを省いて、自分の思った通りの動きを少ないのコードで作ることができます。

とはいえ、ものは試し。
今回つくりたいものを先にお見せします！

これはほんの数行のコードとUnityの設定で動いています。
ここまでできればあとは、自分の想像力をもとに工夫をしていくだけです！

【準備01】 Unityとエディタのセットアップ

DOTweenを始めるためにはUnityとコードを書くためのコードエディタ（Visual Studioなど）が必要になります。

まだUnityとコードエディタのセットアップがお済みでない方は、以下の記事を参考に準備をしてください！

Windows向けUnityインストール方法

■ 初めてUnityをインストールする手順について＜Windows編＞

Mac向けUnityインストール方法

■ 初めてUnityをインストールする手順について＜MAC編＞

Visual Studioインストール方法

以下のMicrosoftのVisual Studio公式ページから、Visual Studioのインストーラをダウンロードしてください。Windowsの方は「Visual Studio」、Macの方は「Visual Studio for Mac」を選択してください。

どちらかをダウンロードすると自動的にインストーラのダウンロードがはじまるかと思います。そうしたら、通常のアプリ同様にインストールをしてください。

＊初回Unity起動時には、まだVisual StudioとUnityが連結されていない可能性があります。その場合は、以下のステップで設定をしてください！

1. Unityのメニューの「Editor」から「Preferences」を選択
2. 「External Tools」を選択し、「External Script Editor」を「Visual Studio」に設定

【準備02】 DOTweenをAsset Storeからゲット

DOTweenは、自分のUnityに入れるまでは「Unity Asset Store」というところにいます。

まずは自分のUnityアカウントからUnity Asset Storeに行ってみましょう。
Unity Asset Storeでは、数多くのツールやアセットが存在していますが、今回必要なアセットは「DOTween」だけです、下記のリンクか検索からDOTweenを見つけてください。

DOTweenを見つけたら、右側にある「Add to My Assets」のボタンを押してください。そうすると自分のアセットリストに追加されて、Unity側からも使えるようになります。

（DOTweenはフリーアセットなので、無料です！嬉しい限りですね！）

【実装01】 DOTweenをUnityに入れてみる

2つの準備が終わったら、ようやくDOTweenをUnityに入れてみます！　

ステップは以下になります。

1. Unityを起動して、新規プロジェクトを作成
2. Unityが起動したら、WindowからPackage Managerを選択
3. Package Manager左上のタブから「MyAsset」を選択
4. MyAssetからDOTweenを選択して、ダウンロード・インストールを実行
5. DOTweenのセッティング画面が表示されたら、確認をしてApplyを選択（＊デフォルトのままで問題ありません。）

これで自分のUnityにDotweenが入りました！
これで準備は完了です！次は早速アニメーションを作ってみます！

【実装02】 DOTweenを使ったアニメーションの作り方

DOTweenは、1行のコードでもアニメーションを制作できます！
早速その作り方を見ていきます！

では、おもむろに「Project」のタブから「C# Script」を選択して、「MyFirstDotween」と名付けてみます。

物は試し。スクリプトにすでに書かれているものを消して、以下の一文を作成したC#のスクリプトに貼り付けてみます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; 

public class MyFirstDotween : MonoBehaviour
{
   void Start()
   {
       transform.DOLocalJump(new Vector3(0, 0, 0), 3f, 1, 1f); 
   }
void Update()
   {
   
   }
}

このスクリプトでは、「void Start()」の中にDOTweenのコードが入っています。中身を少しだけ見てみましょう！

transform.DOLocalJump(
    new Vector3(0, 0, 0), // ジャンプの到達地点の座標
    3f, // ジャンプの力
    1, // ジャンプの回数
    1f // ジャンプの時間
    );

中身はこんな感じになっています。わかってしまえば、どのように動いているか簡単ですよね！
ちなみに数字の後ろについている「f」は、floatを意味していて、小数点を使うものの語尾に付ける必要があるものです。

それでは次に、Unityの「Hierarchy」のタブを確認し、Cubeを出してみます。そのCubeに、先程つくった「MyFirstDotween」をドラッグアンドドロップします。そうして「Inspector」のタブを見てみると「MyFirstDotween」と書かれているものが見つかると思います。

そうすれば準備は完了です！

Unityの再生ボタンを押して、Cubeジャンプを見てみましょう！

これだけでは面白くないので、もう少し動きを足してみましょう！

先程のDOTweenのコードを以下のように書き換えます。
と言っても一文加えるだけです。

transform.DOLocalJump(new Vector3(0, 0, 0), 3f, 1, 1f); 
transform.DOLocalRotate(new Vector3(360f, 360f, 360f), 0.6f).SetRelative();

DOTweenの面白いところは、このように簡単なコードを追加していくだけで、どんどんアニメーションを付けることができるところかなと思います！

【実装03】はじめて作るインタラクション

でも、ただ動くだけではつまらない。

最後に、今回の目的でもあるインタラクションを加えてみます。
「とりあえず動けばいい」ので、スペースキーを押すだけの簡単なインタラクションではどうでしょう？

そのために、先程はスルーした「MyFirstDotween」のUpdateを見てみます。

このUpdateは、Unityが処理をする毎フレームごとに更新がされる場所です。インプット関連は、できるだけ頻繁にインプットのあり・なしを知る必要があるので、Updateの場所にインプットの内容を書いていきます。

ここで必要な要素は以下の2つ！

『アクションのトリガー』と『アクションの内容』

では、早速スクリプトを調整しましょう！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; 

public class MyFirstDotween : MonoBehaviour
{
   void Start()
   {
   
   }
   
void Update()
   {
        if  (Input.GetKeyUp(KeyCode.Space)) // アクションのトリガー・スペースキーを押したときだけブロック内のアクションが発火
        {
            transform.DOLocalJump(new Vector3(0, 0, 0), 3f, 1, 1f); //アクションの内容
            transform.DOLocalRotate(new Vector3(360f, 360f, 360f), 0.6f).SetRelative(); //アクションの内容
        }
   }
｝

前のスクリプトからの変更点は、「void Update()」の中に、ifの条件を加えて、先程のDOTweenのスクリプトを移動させました。

今回は、「Input.GetKeyUp(KeyCode.Space)」の場合（スペースキーが押されている場合）だけ先程のアニメーションが動くようにしています。

これだけでインタラクションが作れてしまいます！
皆様の環境では再現できたでしょうか？

【参考01】 DOTweenを使えば色々できる！

「おいおい、簡単だよ、こんなの」という方へ。

DOTweenは様々なアニメーションをする機能が用意されています。
それらを複数組み合わせることで様々なアニメーションを作ることができます！

例えばこんなもの。

（アニメーションは適当につけています。）

これはDOTweenとUnityの基本的な機能だけで作っています。逆を言えば、それだけで作れてしまいます。DOTweenにはアニメーションをつくるための便利なプリセットがたくさん用意されているので、こんな感じのアニメーションもすぐに作れていまいます！

【参考02】 DOTweenの使い方ガイドの紹介

ぜひ皆様もチャレンジをしてもらいたいのですが、何もリソースがないと難しいと思うので、僕がDOTweenを触る際に毎回参考にしているドキュメントを紹介させてもらいます。

これはオオバさんという方がまとめてくれたDOTweenの使い方ガイドです。

値段も500円とお手頃なので、もしこの記事を通してDOTweenに興味をもってもらえたら買って損はないと思います。（むしろこれだけの知見を500円で提供してくれているオオバさん、ありがとうございます！）

MESONディレクターは手 "も" 動かす

MESONでは、ディレクター・デザイナーでも開発者と同様にUnityを使って作業を行う場面がしばしば見られます。

これはタスクの内容で求められることがあることもありますが、なにより自分の手を動かしてモノづくりを行う気質があるからだと思います。

それはUnityだけでなく、Cinema 4DやBlender、Touch DesignerにPhotoshop。多種多様なツールを使って思考を具体化して、それをもとにモノづくりを行っています。

つまり、MESONのディレクターはエンジニアではなくとも、モノづくり好きなんですね！

もし「モノづくりが好きなディレクター」の方がいましたらぜひご連絡ください！ARやVRを使って人を驚かせるような体験を作っていきましょう！

もしくは私トミーのTwitterまでお気軽にご連絡ください！

Tweets by KurokoTom

次回は、DOTweenの便利機能の紹介をしたいと思っていますので、乞うご期待！さらに第3回くらいを目処に、VRヘッドセット「Oculus Quest2」のプロトタイピングの方法について紹介したいと思います！

この記事が気に入ったらサポートをしてみませんか？