- 追加された行はこの色です。
- 削除された行はこの色です。
アニメーション関係をかいていきます
アニメーション関係をかいていきます。
#contents
*はじめに [#n1cc2566]
～の続きです。
基本的に今までのことでゲームは作れますが、アニメーションがないと反応が薄い、無機質なゲームになってしまいます。
[[カメラ・背景の設定をしよう]]の続きです。
基本的に今までのことでゲームは作れますが、アニメーションがないと&color(,#FBB){反応が薄い、無機質なゲームになってしまいます};。
アニメーションをつけることによってゲームの触り心地がよくなりもっと面白いゲームを作ることができます。
*画像のインポート [#tef7bab9]
まずアニメーションの素材となる画像をいれていきましょう
今までの羊の画像から２点の画像を追加します。３つ貼っておきます。
まずアニメーションの素材となる画像をいれていきましょう。
今までの羊の画像から２点の画像を追加します。今までの羊もあわせて３つ貼っておきます。
（ひとつめの画像は今までと同じ画像なので既に使っている人は入れなくてもいいです）
#download(hitsuji_dot.png)
#download(hitsuji_run1.png)
#download(hitsuji_run2.png)
#br
このインポートした画像は今までと同じようにAssetsフォルダの中に入れておけばいいのですが、そろそろいろんなものが入ってきてフォルダの中が乱雑になってきました。
基本的に、スクリプトはスクリプト、画像なら画像フォルダの中と分けておくと見やすくて作業もスムーズに進みます。
試しに、上の画像はAnimationフォルダというものを作って、その中に入れておきましょう。
このインポートした画像のPixcel per Unitを今までの画像と同じように32にしておきます。
今までと同じように Assetsフォルダ の中に入れておけばいいのですが、そろそろいろんなものが入ってきてフォルダの中が乱雑になってきました。
基本的に、&color(,#FBB){スクリプトはスクリプトフォルダの中、画像なら画像フォルダの中と分けておくと見やすくて作業もスムーズに進みます};。
試しに、上の画像は Characters フォルダというものを作って、その中に入れておきましょう。
#br
がぞ
#ref(スクリーンショット (1160).png,,768x432)
#br
*コンポーネントをつける [#qe0fa7a4]
まずアニメーションを作る前に羊にAnimatorのコンポーネントを付けましょう。
まずアニメーションを作る前に羊に ''Animator'' のコンポーネントを付けましょう。
いつも通り AddComponent から、今回は Animator というコンポーネントを付けてください。
#br
画像差し込み予定
#ref(スクリーンショット (1159).png,,768x432)
#br
このコンポーネントは後ほど作るAnimation controllerというものを制御してくれるものです。
このコンポーネントは後ほど作る ''Animation controller''というものを制御してくれるものです。
*Animation [#u00f7c18]
#br
それではアニメーションを作っていきましょう
画面上部からWindow > Animation > Animation でアニメーションタブを開くことができます。
それではアニメーションを作っていきましょう。
画面上部から Window > Animation > Animation でアニメーションタブを開くことができます。
#br
画像差し込み予定２枚
#ref(スクリーンショット (1154).png,,768x432)
#br
この画面では画像をパラパラ漫画のようにつなぎ合わせキャラクターを動かしているようなものを作ることができます。
ヒエラルキーで羊をクリックした状態でAnimationタブを押すと新しく「create」というボタンが出てくると思います。
ここで「羊をクリックした状態」というのがすごく重要で、Animationタブを触るときは基本的にそのアニメーションを作りたいオブジェクトを選択状態にしておくことが必要です。
そしてcreateをクリックし、名前を「run」にして保存してください。その後、このような画面になると思います。
この画面では&color(,#FBB){画像をパラパラ漫画のようにつなぎ合わせキャラクターを動かしているようなもの};を作ることができます。
Hierarchy で羊をクリックした状態で Animation タブを押すと新しく「create」というボタンが出てくると思います。
Animation タブを触るときは基本的に&color(,#FBB){そのアニメーションを作りたいオブジェクトを選択状態にしておくことが必要です};。
そして create をクリックし、名前を「run」にして保存してください。その後、このような画面になると思います。
#br
がぞ
#ref(スクリーンショット (1155).png,,768x432)
#br
この時間の部分に画像をドラッグ＆ドロップしていきます。入れる画像の順番はhitsuji_dot→hitsuhi_run1→hitsuji_dot→hitsuhi_run2→hitsuji_run2と５枚等間隔でいいかんじに入れてください。
ここで、最後のhitsuji_run2を２枚入れているのは不思議な感じがしますが、４枚だけだと最後のコマが一瞬で終わってしまいます。最後のコマの表示時間を稼ぐためにもう一枚入れているという感じです。
この時間の部分に画像をドラッグ＆ドロップしていきます。
入れる画像の順番は hitsuji_dot → hitsuhi_run1 → hitsuji_dot → hitsuhi_run2 → hitsuji_run2 としてください。
最後の hitsuji_run2 を２枚入れているのは不思議な感じがしますが、4枚だけだと&color(,#FBB){最後のコマが一瞬で終わってしまいます};。
最後のコマの表示時間を稼ぐためにもう一枚入れているという感じです。
#br
#ref(スクリーンショット (1174).png,,768x432)
#br
これで移動のアニメーションを作ることができました。
さて、アニメーションを作った時に勝手に新しく何かができていないでしょうか。
#br
がぞ
#ref(スクリーンショット (1161).png,,768x432)
#br
これがAnimationControllerです。これからAnimationControllerをいじっていきましょう。
これが AnimationController です。これから AnimationController をいじっていきましょう。
*AnimationController [#wf2957e2]
Animationcontrolerではアニメーションをフローチャートのように組み立てることができます。
ちなみに、今の状態でゲームを起動すると何もしていない状態が走っている状態になります。移動しているときだけ走っている状態にしたいので、もう一つ立っている状態のアニメーションを作りましょう
Animationタブを開いて、羊を選択した状態にしておいてください。
そして、「create new crip」を押すと、新しくアニメーションを作ることができます。このアニメーションの名前を「stand」という名前にして保存しておきます。
このstandにはhitsuji_dotという画像一つを付けておきましょう。これで立ち絵の完成です。
そしてまたAnimationControllerに戻ると新しく「stand」が追加されていると思います。
追加されていない場合、アニメーションをAnimationControllerにドラッグ＆ドロップすると追加することができます。
そして、standを何も動作していない状態にするために、standを右クリックして、「set as layer default state」を押してください。これでゲームを起動すると何もしていない状態ではただ立っている状態になると思います。
しかし、移動していても走るアニメーションを行わないと思います。次はこれを設定していきます。
#br
移動部分を作っていきます。standアニメーションを右クリックし、「Make transition」を押し、runに矢印を伸ばしてください。こうすることでアニメーションをstand→runと移行します。
また、操作が終わった時runからstandに移行させておきたいので、runからstandへも→を設定しておきましょう。
次はこの移行の詳細な設定をしていきましょう。矢印を左クリックしてください。左クリックすると、新たにアニメーションの設定画面がインスペクターに現れます。
#ref(スクリーンショット (1158).png,,768x432)
#br
がぞ
AnimationControler では&color(,#FBB){アニメーションをフローチャートのように組み立てることができます};。
ちなみに、今の状態でゲームを起動すると何もしていない状態が走っている状態になります。
移動しているときだけ走っている状態にしたいので、もう一つ立っている状態のアニメーションを作りましょう。
**デフォルトアニメーション [#g79fa047]
羊を選択した状態にして Animation タブを開いてください。
そして、「create new crip」を押すと、新しくアニメーションを作ることができます。
#br
まず、この画面で「has exit time」というチェックボックスを外してください。また、Settingの隣の▷を押し、出てきた項目のTransition Duration の値を0にしておいてください。
#ref(スクリーンショット (1161).png,,768x432)
#br
がぞ
このアニメーションの名前を「stand」という名前にして保存しておきます。
この stand には hitsuji_dot という画像一つを付けておきましょう。これで立ち絵の完成です。
そしてまた AnimationController に戻ると新しく「stand」が追加されていると思います。
追加されていない場合、アニメーションを AnimationController にドラッグ＆ドロップすると追加することができます。
さて、stand を右クリックして、「set as layer default state」を押してください。
#br
has exit time はそのアニメーションが終わってから移行するという設定なので、ボタンを押してすぐ反応させたい場合はこのチェックを外す必要があります。
そしてsettingはアニメーションとアニメーションを合成する設定です。今回は合成させても意味ないので値は0にしておきます。
そして下のほうにはconditionsというものがあります。
#ref(スクリーンショット (1162).png,,768x432)
#br
がぞ
これでゲームを起動すると何もしていない状態ではただ立っている状態になると思います。
次は、移動を行ったときに run にアニメーションが移動するように設定します。
#br
この画面にあるconditionsはどのタイミングでアニメーションを移行させるかを設定できるものです。この設定はAnimatorの中のParametersという場所で作ることができます。
*Parameters [#d1e56031]
Parametersで設定を作っていきましょう。「＋」を押すと、どの条件（Float、Int、Bool、Triger）かを選べると思います。今回はボタンを押している間だけ移行するという設定にしたいので「Bool」を選んでください。
名前は何でもいいですが、わかりやすいようにrunという名前にしておきます。
**アニメーションの移行 [#e9007aff]
#br
がぞ
移動部分を作っていきます。
stand アニメーションを右クリックし、「Make transition」を押し、run に矢印を伸ばしてください。
こうすることでアニメーションを stand → run と移行します。
また、&color(,#FBB){操作が終わった時 run から stand に移行させておきたい};ので、run から stand へも→を設定しておきましょう。
#br
そしてこれを矢印に設定します。先ほどと同じように、矢印を左クリックし、インスペクターに現れた画面からconditionsのところの＋を押してください。
そうすると左側にparametersの名前、右側に値が何だと動作するというものを設定するものが現れます。
#ref(スクリーンショット (1165).png,,768x432)
#br
がぞ
次はこの移行の詳細な設定をしていきましょう。
矢印を左クリックしてください。左クリックすると、新たにアニメーションの設定画面が Inspector に現れます。
#br
今回はparmetersをひとつしか作っていないので勝手にrunが追加されています。
このparametersの値はスクリプトから制御していきます。
#ref(スクリーンショット (1166).png,,768x432)
#br
まず、この画面で ''has exit time'' というチェックボックスを外してください。
また、Setting の隣の▷を押し、出てきた項目の ''Transition Duration'' の値を0にしておいてください。
#br
#ref(スクリーンショット (1167).png,,768x432)
#br
''has exit time'' は&color(,#FBB){そのアニメーションが終わってから移行する};という設定なので、
&color(,#FBB){ボタンを押してすぐ反応させたい場合はこのチェックを外す必要があります};。
そして ''Transition Duration'' は&color(,#FBB){アニメーションとアニメーションを合成する設定};です。
今回は合成させても意味ないので値は0にしておきます。
この設定を run から stand への矢印にも設定しておいてください。
そして下のほうには conditions というものがあります。
#br
#ref(スクリーンショット (1168).png,,768x432)
#br
この画面にある conditions は&color(,#FBB){どのタイミングでアニメーションを移行させるかを設定できるものです};。
この設定は Animator の中の ''Parameters'' という場所で作ることができます。
**Parameters [#d1e56031]
''Parameters'' で設定を作っていきましょう。「＋」を押すと、どの条件（Float、Int、Bool、Triger）かを選べると思います。
今回は&color(,#FBB){ボタンを押している間だけ移行する};という設定にしたいので「Bool」を選んでください。
名前は何でもいいですが、わかりやすいように run という名前にしておきます。
#br
#ref(スクリーンショット (1169).png,,768x432)
#br
そしてこれを矢印に設定します。
先ほどと同じように、矢印を左クリックし、Inspector に現れた画面から conditions のところの＋を押してください。
そうすると左側に parameters の名前、右側にそのパラメータがいつ起こるかというものを設定するものが現れます。
#br
#ref(スクリーンショット (1170).png,,768x432)
#br
今回は parmeters をひとつしか作っていないので勝手に run が追加されています。
このパラメータを run から stand への矢印にも設定します。
そして、stand から run への矢印の bool 値を true 、run から stand への矢印の bool 値を false に設定しておいてください。
#br
#ref(スクリーンショット (1172).png,,768x432)
#br
この parameters の値はスクリプトから制御していきます。
* スクリプトから制御[#ge32a386]
これからアニメーションをスクリプトからせ
移動に関するアニメーションなので、MoveSheap に書いていこうと思います。
#br
#geshi(csharp,number){{
public class MoveSheep : MonoBehaviour
{
private Rigidbody2D rigidBody = null;
private GroundCheck groundCheck = null;
private SpriteRenderer spriteRenderer = null;
private Animator anim = null;
public float speed;
public float jump;
// Start is called before the first frame update
void Start()
{
rigidBody = this.GetComponent<Rigidbody2D>();
groundCheck = this.GetComponentInChildren<GroundCheck>();
spriteRenderer = this.GetComponent<SpriteRenderer>();
anim = this.GetComponent<Animator>();
}
// Update is called once per frame
void Update()
{
Vector2 pos = rigidBody.position;
if (Input.GetKey (KeyCode.A)) {
anim.SetBool("Run", true);
spriteRenderer.flipX = false;
pos += new Vector2(-speed * Time.deltaTime, 0.0f);
}
if (Input.GetKey (KeyCode.D)) {
anim.SetBool("Run", true);
spriteRenderer.flipX = true;
pos += new Vector2(speed * Time.deltaTime, 0.0f);
}
//AもDも入力していない時
if(!Input.GetKey (KeyCode.A) && !Input.GetKey (KeyCode.D)) {
anim.SetBool("Run", false);
}
～略～
}}
スクリプト載せます
#br
コンポーネントを取得するので、いつも通り変数を定義して GetComponent で取得します。
そして Bool 値を True に変更するには&color(,#FBB){SetBool("parametersの名前", true)} と書きます。
また、操作していないときは stand の状態にしたいので、A と D を押していない時、Run というパラメータを false にするという条件を追加しました。
これで移動中は走り、移動していないときは立った状態のアニメーションが作れましたね。
}}
SEAP22マニュアル
