この記事で書かれていること
- 通常animationから作成してanimatorも自動生成された場合、常に実行時からanimationが動きます。
- 下図のように、animatorと組み合わせることで、スクリプトからキー押下など任意のタイミングで、一回だけanimationを動かすといったことも可能になります。
- この記事では、そのやり方について解説していきます。
- ↓動画解説はコチラから↓
- 【Unity】任意のタイミングでanimationを発動させるやり方【animation/animator】
animationのその他のテクニックについてこちらから
手順
- animationの作成
- animatorの編集
- スクリプトの作成
- 動作確認
それぞれ以下に書いていきます。
1. animationの作成
- 下記記事を参考にして、[Window]メニューから[animation]を追加して、任意のanimationを作成してください。
- 【Unity】ノンコーディングでオブジェクトを動かしたい【Animation】
- 今回のオブジェクトは、Cubeで進めていきます。
![a01のコピー.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fdd5b2a3f-bc15-5cf9-f7c5-8e903436c51f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=690ace6e7cf5906d224144824d246ac1)
![a01のコピー2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F24362126-84f3-97ba-4d9d-a4ed53f1abdf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f857db703a8584e2effd140e32fb3b77)
![スクリーンショット 2020-07-21 10.03.08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fb08d105e-5754-2c6f-2cc8-fbdc5869a2be.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1ca87e947e200b6f027b2f00d3591dee)
-
また、「アニメーションは1回だけでよい」場合、
下図のように、cubeanimのインスペクターウィンドウで、
「Loop Time」のチェックを外します。
![スクリーンショット 2020-07-21 11.09.17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F77c90a91-9a76-2dcc-dfcf-de2e27c47235.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=13c704f885aa7b786760f2e79ea9c162)
2. animatorの編集
-
自動生成されたanimatorは下図の通りとなります。
-
この状態では、実行時からanimationが動くので、今回はanimatorも編集していきます。
![a01のコピー3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F1165972d-00e8-6744-d34f-086a9faf78b1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=96f6b3180552d2ac3a0927d5a1f7cb85)
- さて、このあとのanimatorコントローラー内にあるオレンジのブロックである「cubeanim」の編集の仕方ですが、『泥臭いやり方』と『イケてるやり方』の二種類をご紹介しますね。
①泥臭いやり方
- まずは、自動生成された、オレンジ色の「cubeanim」をDeleteで削除します。
![スクリーンショット 2020-07-21 10.10.14.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F63d52e77-e9c0-74b4-6c3a-8966c28cd2a2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=95571dc216e0d817441fb117dfc3e983)
- オレンジ色の「cubeanim」を削除後、
空いている場所で[右クリック]-[Create State]-[Empty]を選択します。
![スクリーンショット 2020-07-21 10.11.27.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F1138f083-7f76-3efc-47fe-fd38b4a0f882.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=12fb0aca4b4dfa91c419cbc6f88546ba)
![スクリーンショット 2020-07-21 10.11.43.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fe76f84c5-e706-3310-3d9b-7c175c63c8ff.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7d440f36189f7e6b1a7c0f7cfff49421)
- Assetsの中にある「cubeanim」を、
下図のように、Animatorコントローラーへドラッグアンドドロップします。
![スクリーンショット 2020-07-21 10.14.55.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F90044e0f-f411-b11b-edbf-33a05dabb8af.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=305d37122e052a0b40788f171afa940f)
![スクリーンショット 2020-07-21 10.15.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F5f9b5862-eb04-9720-deae-f15279343305.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f70f3b6987dbf1b56ed52ef8417707c0)
②イケてるやり方
スクショの都合で、「cubeanim」ではなく、「cube2anim」になっていますが、そこはスルーしてください。
- 下図は、animationから自動生成された直後
![スクリーンショット 2020-07-21 12.31.24.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Ff6fcbe16-1d54-8183-3285-d1805e0781b1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ef9366e8d4346b3072a6ab4097a0889c)
- 空いている場所で[右クリック]-[Create State]-[Empty]で空のブロックを作る
![スクリーンショット 2020-07-21 12.31.43.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F35adcaf9-5dd2-e894-eef7-c55f374d761e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=42d6e4b6718d079b2b54eab0d90c0fd8)
- グレーの「New State」のブロックで右クリックして、「Set as Layer Default State」を選択する。
グリーンの「Entry」の次のブロックは、「New State」にするぜ、という設定です。
![スクリーンショット 2020-07-21 12.32.09.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fff62d5e3-9290-88bc-7ea9-58a79b91d4be.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c345442f4aaae3c3f198329a0737450c)
- 下図のようになったらok。
![スクリーンショット 2020-07-21 12.32.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F31bb0a32-d514-f792-e85f-9727d9348aed.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=979246203f26e55bdc7b6a9cc083b984)
- つづいて、オレンジのブロックから、電気のスイッチのように、
「オンになったらアニメーションする」ように、パラメーターを作ります。 - 下図のように、「Animatorコントローラー」の中にある[Parameters]-[+]-[Bool]を選択します。
Bool型はTrueかFalseのみ返すので、今回はBool型を使用します。
よく[Layers]で追加しようとするケースがあるので、注意しましょう。
![スクリーンショット 2020-07-21 10.24.49.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F56e5d966-d1a1-76bd-e09a-94a1dff721a2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e201f9db5da9faedf0089b27b015060b)
![スクリーンショット 2020-07-21 10.30.16.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F4abd5f8e-e266-59be-5b7d-b646ea25751d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=def058eee0f9d576c287951a26f85a6a)
![スクリーンショット 2020-07-21 10.33.10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F2301916e-24a6-e857-96bb-3b79066ef911.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9d22c14ceecbc301c0d75db658efdef2)
- 下図のように矢印がつながったらok。
![スクリーンショット 2020-07-21 10.35.07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fc13b161e-2150-ccba-5be5-a5517418bede.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b4495edc6de4e90d90297a256d70e80a)
- 同じように、グレーのcubeanimで[右クリック]-[Make Transition]を選択して、
今度はオレンジのブロックをクリックします。
下図のようにお互いが矢印でつながったらok。
![スクリーンショット 2020-07-21 10.44.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F2b46eaca-6f1f-24ea-82e2-088796f5f053.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3bb740e9202884db13d0f1f10f83b7d3)
- 最後に、オレンジのブロックから、グレーのcubeanimへ、決められた条件で遷移するように設定します。
下図のように、矢印をクリックして、インスペターウィンドウを表示させておきます。
![スクリーンショット 2020-07-21 10.46.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F846ffded-82e2-6d2c-31bf-eac1468665c8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=12c3908e834ec1a6415ea79f78a4ab85)
- 下図のように、「Conditions」の項目が「List is Empty」となっており、「何も入ってないよ!!」という状態なので、ここにBool型のパラメーターを追加してあげます。
![スクリーンショット 2020-07-21 10.46.19のコピー.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F8f148fc2-031a-5d9a-6bd2-38aa996964b1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=637a6bddd5f72b1022f0f02b3900c5db)
- 下図のように、[+]を押すと、現在設定されているパラメーターが追加されます。
今回はこのままで問題ありません。
![スクリーンショット 2020-07-21 10.46.19のコピー2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F124700be-4594-efb0-b7f9-8d4c68661a51.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5c39174a1c009b0176f3b42ae149ec9f)
![スクリーンショット 2020-07-21 10.50.03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F9ae976df-e9df-4367-47a8-f9113bd19a19.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ef8f9dd1dbedcec631e13c13dd47b357)
- 同様に、グレーのcubeanimから、オレンジのブロックへ戻る矢印も、
下図のように「Conditions」を設定します。この場合は「blRot」が「false」のときに遷移するようにします。
![スクリーンショット 2020-07-21 11.14.31.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fdc2a47d6-1887-cbae-16a5-6bc2c3d0f716.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7b05478f5c9b515a6b5f3d5228078332)
3. スクリプトの作成
-
オブジェクトcube内にスクリプトを作ります。
作り方(スクリプトのアタッチの仕方)は割愛します。
スクリプト名は適当につけてください。今回の例では「cubemove」としています。 -
下記スクリプト例のように、必要なのはたったの3行です。
(あとはどのタイミングでanimationを動かすかなので、if文の分だけステップ数が増えます)
public class cubemove : MonoBehaviour
{
//===== 定義領域 =====
private Animator anim; //Animatorをanimという変数で定義する
//===== 初期処理 =====
void Start()
{
//変数animに、Animatorコンポーネントを設定する
anim = gameObject.GetComponent<Animator>();
}
//===== 主処理 =====
void Update()
{
//もし、スペースキーが押されたらなら
if (Input.GetKey(KeyCode.Space))
{
//Bool型のパラメーターであるblRotをTrueにする
anim.SetBool("blRot", true);
}
}
4.動作確認
- 実行すると、Spaceキー押下時に、
下図アニメーションgifのように、cubeが「一回だけ回転」します。
(gifアニメだからループしているので注意)