福岡県筑後市のホームページ制作会社

株式会社はねオンライン

Live2D超入門~移動編~           

Live2D超入門~移動編~           

2017年12月30日

単純な移動・回転・拡大縮小の範囲内でLive2Dアニメーションを作りたい、という方に向けた「超入門簡易版チュートリアル」、
初回は超単純!移動編です。
フレームイン→移動→フレームアウトするはねぷーのアニメーションを作ってみます。
Live2D入門

レイヤーを調整したPSDファイルを準備

下準備として、psdファイルを準備します。今回動きがあるのは1か所のみなので、レイヤーは背景とはねぷー(動く部分)の2枚だけです。

Live2D Modelerでの作業

次は本番です。Live2DModelerを起動、「FREE版として起動」を選択します。
「ファイル」→「psdファイルインポート」から先ほど準備したpsdファイルを選択(またはファイルをキャンバス部分にドラックアンドドロップ)
psdファイルが読み込まれこのような画面になります。
Live2D入門
なんだか色々設定値がありますね。
しかし初心者にはなんのことだか分からないので、「OK」で先行っちゃいましょう。

キャンバスにpsdファイルで保存した状態の画像が表示されます。

左上のパーツタブからもPSDがインポートされているのが分かります。
PSDを展開するとレイヤー単位で分けられたオブジェクトが格納されています。
Live2D入門

今回動かすのは「はねぷー」のみなので、さっそく「はねぷー」オブジェクトを選択しましょう。
Live2D入門

フレームイン→フレームアウトの流れを作りたいので、はねぷーをフレーム外へ移動させます。
十字キーが表示されている状態で、shiftを押しながらドラッグすると水平に移動します。
Live2D入門
これがアニメーションの最初の状態になります。

次にはねぷーオブジェクトにパラメータを設定します。
デフォルトのパラメータ名だと後から混乱しそうなので、パラメータ名を書き換えておきましょう
Live2D入門
「パラメータ設定」を選択

Live2D入門
「角度」を選択し「編集」

Live2D入門
任意のパラメータ名と数値を設定することができます。2点の動きの場合、0→1などの数値が分かりやすいと思います。

準備が出来たらオブジェクトにパラメータを付加しましょう。
パラメータが「0」の時に画面の右側から移動をはじめ、「1」の時に左側まで移動を終える、という風に設定します。

「はねぷー」を選択した状態でパラメータタブの[移動]ボタンをクリック
Live2D入門
今回は右から左という2点の動きなので、[2点挿入]をクリック。
Live2D入門
先ほど設定した0、1という数値が挿入されました。「OK」をクリック。

Live2D入門
2点を挿入したので、両端に二つの丸が表示されました。

左端の丸を選択すると0.00という値が、右端の丸を選択すると1.00という値が表示されます。

「1」の時点で、はねぷーを左端に移動させたいので、右端の丸を選択した状態(淵が赤くなります)キャンバスのオブジェクトを移動させます。
Live2D入門

移動パラメータの丸をドラッグで左右に動かしてみましょう。
キャンバスのオブジェクトがどのように移動するのか確認できます。
Live2D入門

これでLive2D Modelerの作業は終了です。
「ファイル」→「保存」で拡張子cmoxのファイルを保存します。

Live2D Animaterでの作業

Live2D Animatorを起動しましょう。こちらもFREE版として起動します。
「新規プロジェクトを作成」をクリックするとシーン設定画面が表示されます。
Live2D入門

任意のシーン名を設定し、サイズを「背景」画像と同じ大きさに設定します。

「ファイル」→「開く」で先ほどLive2D Modelerで制作したcmoxファイルを選択します。(またはcmoxファイルを中央にドラッグアンドドロップ)
Live2D Modelerで設定したアニメーションの最初の状態が表示されます。

Live2D入門

次にタイムラインの長さを調整します。
バーの右端にカーソルを当て、ドラッグして3秒0コマまで縮めましょう。
Live2D入門

長さが調節出来たら何コマ目の時点でどんな動きをするか、というキーフレームを打ち込んでいきます。
「Live2Dパラメータ」を展開すると先ほどModelerで設定した[移動]パラメータが入っています。
Live2D入門

Live2D入門
赤いバーのフレームを選択したあと、[移動]欄に数値を入力(もしくはドラッグ)すると青いキーフレームが打ち込まれます。
同じ要領で02:00のフレームにキーフレームを打ち込みます。こちらは移動後なので数値は「1」とします。
再生ボタンを押してプレビューすると無事右端から左端へ移動しています。

しかしこのままでは移動後ゆっくり後ずさるという謎現象がおきてしまうので、フレームアウトした後はただちに右端へ戻ってもらいましょう。
先ほど「1」の数値を入力したコマのすぐ隣にキーフレームを打ち「0」と入力、これでリピートが完了します。

あとは書き出すだけです!「ファイル」→「書き出し」→「GIFアニメ」
任意のサイズを入力し、ループにチェックをいれて「OK」でGIFアニメーションの完成です。

コメントを残す