Unity:クリッカーゲームを作ってみたい/01-茜ちゃんをクリックしてアニメーションさせる - 節電鯖民の遊び場

目次

できたもの

素材集め

詳細を開く

• 権利を確認しながら素材を集める。
• とりあえず茜ちゃんをクリックすることにする。
  • デフォルメ茜ちゃん https://seiga.nicovideo.jp/seiga/im8387101
    • キャラクター使用ガイドライン: https://aivoice.jp/character/kotonoha/

キャラクターを配置する

詳細を開く

• projectのassetに適当にディレクトリを切って画像をドロップで放り込む

• クリックしたい茜ちゃんを選んでProjectからHierarchyにドロップする

• 管理しやすいよう名前は適当に変えておく。ここでは"茜"にしておく。

クリックしたらアニメーションさせる

アニメーションを作成する

詳細を開く

• Animationウインドウを開く(Window→Panels→Animation→Animation)

• ヒエラルキーかシーンウインドウで茜ちゃんを選択

• Createボタンを押すとファイルの保存ダイアログが表示されるので、Assetに適当に保存する。ここではAsset → Animation に click を作成した。

• 今回クリックしたら画像(スプライト)のサイズをアニメーションさせようと思うので、Add Property → Transform → Scale を＋ボタンで追加する。

• 追加されたScale
  • 左端の三角をクリックで内訳(x,y,z)の値がそれぞれ表示される。
  • デフォルトで開始点(0秒地点)と終了点(1秒地点、animation内での最後)のキーが打たれている。
  • 終了点の位置をまるごと移動すればアニメーションの長さは変更可能

• クリック時のアニメーションは変化後、元の状態に戻って欲しいので開始点と終了点の数値は弄らないように編集していく。
• クリックしたら縦に伸びて、少し縮んで横に伸びて、最後に元に戻るアニメーションにする
• まずは仮で10フレーム時点での画像の状態を編集するため、時間の表示されているタイムラインのバー上で0.10地点をクリックして編集点を変更する。

• この状態でSceneウインドウで直接サイズ変更して縦に伸びた状態に編集する。
  • インスペクターでTransformの数値を弄っても良い
  • スプライトを直接つかむ場合、Altキーを押しながら編集すると中心座標をずらさずにサイズ変更できる。
  • 他にもShiftを押しながらだと縦横比率を維持しながらサイズ変更など一般的なフォトレタッチソフトと操作感は同じ。
  • 変更しようとしている箇所は色がついて強調表示されるほか、マウスオーバーするとタイムライン左端の各種数値も最新の値が反映されているのがわかる。

• 10フレーム時点での内容を編集し終わったらタイムライン上で右クリックをしてAddKeyでキーを打つ(状態を保存する)
  • このとき、どこを右クリックするかで全てにキーを打つか、xのみ、yのみ等キーを打つ箇所を絞るあるいは全体に広げることが可能。ここではScale全体にキーを打っている。

• これでタイムライン上で編集点を変更してみると中間が補完されアニメーションして居ることがわかる

• 続けて20フレーム時点に潰れた状態…などアニメーションのキーを追加していき、アニメーションを作成する。
  • 打ったキーは単体あるいは範囲で選択してドラッグで移動可能
  • 画面下部のCurvesを開くと変更度合いを曲線で編集も可能
    • Curvesの画面はCtrl+ホイールころころで幅、Shift+ホイールころころで高さの縮尺を変更可能
  • 再生ボタンでアニメーションを再生して確認できる

アニメーションの振る舞いを設定する

詳細を開く

• 作成したアニメーションを選択して、インスペクターから loop time のチェックを外しておく。

• 一緒に作成されたコントローラーをダブルクリックで開く

• 初期状態では、Entry(ゲーム開始時)にclickアニメーションを再生するよう設定されている。
  • そのためエディタ上部のシーン再生ボタンを押すとアニメーションが開始+ループしている。

• クリック時にアニメーションさせたいので、初期状態は何もしない空の状態にする。
  • 空のstateを作成して、このレイヤーのデフォルト状態に設定する。

• 何もしていない状態からクリックでアニメーション再生し、再生後に元に戻したい。
• そのため空のstateを右クリックで Make transition で click を選択して線を引く。
• また同様にclick を右クリックし、Make transition で New State を選択して反対向きの線を引く。

• クリックのときにStateを変化させるため、プログラムから与えるトリガーを設定する。
• 左上部の Parameters タブから ＋ ボタンを押して Trigger を追加する。

• 今回クリックで遷移するが、クリック時に前のアニメーションをキャンセルさせるためキャンセル用のトリガーも用意しておく。（ここらへんは他の方法があるかもしれない）

• 用意したTriggerを state の遷移（矢印）に設定する。
  • click ステートに向かう矢印をクリックし、インスペクターの conditions で ＋ ボタンを押してトリガーを追加する。
  • またクリック連打時に次のアニメーションが割り込めるよう Has Exit Time のチェックは外しておく

• 反対向きの矢印も同様に設定し、こちらは click_cancel のTriggerを設定し、Has Exit Time のチェックを外しておく。

• クリック割り込み時の設定をしておく。
  • Click に向かう矢印は Settings を展開し、 Fixed Duration のチェックを外して TransitionDuration を 0% にしておく。

• クリックキャンセル割り込み時の設定をしておく。
  • Click から New State に向かう矢印は Settings を展開し、 Fixed Duration のチェックを外して TransitionDuration を 1%(これは表示されているタイムラインの click のバーがすべて含まれる長さ) にしておく。
  • また、Interruption Source として Next State を設定しておく。

クリック時のスクリプトをつける

詳細を開く

• Assetに適当にディレクトリ作成しクリック時に動作するスクリプトを作成する。ここではAssets/Script/Click.cs

• 今回は以下のような内容のスクリプトとし、茜ちゃんにアタッチする。

public class Click : MonoBehaviour
{
    Animator anime;
    void Start() {
        anime = GetComponent<Animator>();
    }
    void Update() {
        if (Input.GetMouseButtonDown(0)) {
            anime.SetTrigger("click_cancel");
            anime.SetTrigger("click");
        }
    }
}