14
2015/04/04 MASA_T_O 絵を動かす技術 Live2DE-mote

絵を動かす技術

  • Upload
    masato

  • View
    379

  • Download
    3

Embed Size (px)

Citation preview

Page 1: 絵を動かす技術

2 0 1 5 / 0 4 / 0 4 M A S A _ T _ O

絵を動かす技術Live2DとE-mote

Page 2: 絵を動かす技術

まずはサンプル

http://library.live2d.com/libraries/view/000003/Live2D

Live2Dの公式サンプル

http://emote.mtwo.co.jp/index.php

E-moteの公式サンプル

Page 3: 絵を動かす技術

Live2D E-mote

Live2D社が開発

アプリやコンシューマゲームでの導入実績が多い

(申請が必要だが)個人なら無料でSDK使用可能

汎用性が高い

エディタがMac対応

M2社が開発

(何故か)PCの成人向けゲームでの導入実績が多い

5000円のアカデミック版を買えば自由にSDK使用可能

調整しなくてもそれなりの動きになる

ソフトの紹介

Page 4: 絵を動かす技術

どちらでもできること

フリーでひと通りのアニメーション制作

フリーで連番画像/アニメーションgif/動画ファイル出力

対応SDK : iOS, Android, Unity, DirectX, Cocos2d-x

Page 5: 絵を動かす技術

仕組み

Page 6: 絵を動かす技術

仕組み:ワークフロー

2Dの絵を描いて

ソフトが指定する形式に合わせてレイヤー分割して

ソフトに取り込んで

モデルを調整して

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

Page 7: 絵を動かす技術

仕組み:パーツ分け

絵をパーツごとに分割して配置

以下の画像はE-moteエディタでテンプレートを開いたもの

Page 8: 絵を動かす技術

仕組み:パーツごとの動き

パーツごとに移動・回転・変形を行う

目を閉じる動きの例

Page 9: 絵を動かす技術

仕組み:パラメタ

「頭の向き」や「目の表情」「口の開き」などのパラメタ

各パラメタのキーフレームごとにパーツの変形を設定

パラメタの連続的変化に合わせてキーフレーム間を補間する

「頭の左右向き」パラメタに対する右目の変形設定

Page 10: 絵を動かす技術

仕組み:アニメーション

パラメタ変化の組み合わせにより表現

Page 11: 絵を動かす技術

この技術のメリット

(3Dアニメや手描きアニメと比べて)手間が少ない

(3Dアニメと比べて)元の絵のイメージのまま動かせる

(Flashアニメに比べて)動きの自由度が高い

(3Dアニメや手描きアニメと比べて)動作に使うリソースが少ない

(静止画に比べて)表現力が高い

Page 12: 絵を動かす技術

考えられる使い道

アドベンチャーゲームなどの立ち絵

(頑張れば)一枚絵を動かす

マスコットアプリケーション

動画編集の素材

適当に描いた絵を動かしてニヨニヨする

Page 13: 絵を動かす技術

資料

http://qiita.com/shimacpyon/items/05435a60433ddada77a0

『 2D モーフィングが出来るソフトのまとめ』

Page 14: 絵を動かす技術

おしまい