Live2D + Unity による格闘ゲームの実装例とSDKのススメ

Live2D + Unity による格闘ゲームの実装例とSDKのススメ

Live2D alive2019 ユーザーセッション2 栗坂こなべ 登壇資料
※緑字はセッション後の加筆修正です。
※あとで、何か思い付き次第加筆修正するかもです。

Ef69b2006fd035bc581ef66f30c30681?s=128

kurisaka_konabe

November 25, 2019
Tweet

Transcript

  1. Live2D + Unity による 格闘ゲームの実装例と SDKのススメ みんなSDKでアクションゲーム作ろうぜ! ってのと 格ゲーフォーマットの提案 栗坂こなべ(@kurisaka_konabe)

    ※緑字はセッション後の追記
  2. 撮影, SNS: だいたい OK (一部不可有り、後日公開予定) 注意事項! 顔はやめて!(ボディはOK) ※デ◦ノートネタのつもりだったけど、元絵の名残がなさすぎて誰も気付かず滑ったネタ

  3. あなたは誰? 自己紹介 野良のうさぎ (関西で非常勤講師 × 3校) 昔々、2.1の頃本を執筆したりもした (その後ヤムチャ化) 2.1時代の本! (内容古い)

  4. 1. Cubism SDK for Unityによる格ゲーの実装例と解説 ・(生徒のSDKゲーム作例) ・SDKの概要と入門(時間的都合で割愛) 2. ススメと理由、メリットとデメリット 3.

    作った! 苦労話など… 4. Live2D Editor で完結する格ゲーフォーマットの提案 5. 今後のビジョン、拡張アプリ契約(あくまで予定)など 今日話すこと:
  5. Cubism SDK for Unityによる 格ゲーの実装例と解説 Chapter 1/5

  6. Queen Of Unity-chan 01 (ゼロワンゼロワンゼロワン…) 動画 or 実行ファイル 実演(1分半くらい) Youtube:【Live2D_2019】Queen

    Of Unity-chan Zero One【格闘ゲーム】
  7. 様々な実装例(生徒作) コアラのデスマーチ こはる早撃ちガンマン こはる偽の侵攻(ゾンビSTG) STGボス戦 ↑youtubeで検索すると出てきます

  8. 様々な実装例(ボク作) VS KABEDON きゃっ!とふぁいと! ↑youtubeで検索すると出てきます 【Unityroomのゲーム】 タピオカぶふぉん ウサギトレタカ ↑unityroomで検索すると出てきます

  9. (SDKの概要と入門) 時間的に厳しいのでたぶん割愛…

  10. かんたんな使い方 ・パラメータの弄り方 ・モーションの再生方法 ・マウスの追従 (この3つさえわかればOK!) ・詳しくはアドカレの記事で! https://adventar.org/calendars/4268

  11. ススメと理由、メリットとデメリット Chapter 2/5

  12. ススメ、メリット でっかいよ! おっきいよ! 豊かな感情表現!

  13. ススメ、メリット でっかいよ! おっきいよ! 豊かな感情表現! 描いたイメージがそのまま思い通りに 動かせる手っ取り早さ (ゲームジャム向き)

  14. ススメ、メリット ノベルゲー、スマホアプリの指つつき用キャラもいいけど… アクションゲームつくろうぜ! リアルタイム性とインタラクティブ性こそがLive2Dの真骨頂!

  15. ススメ、メリット Live2Dのメリットって何だ? 描いたまま動く(受動的)→描いたものを動かす(能動的)! UIやタイトルメニューも思いのまま(UnityのuGUIとかよりも自由) ご褒美鑑賞キャラ(受動的)もいいけど、 やっぱり自分で操作して使いたい(能動的)!

  16. デメリット ・腕と足の動きが現状だと辛い ・パラメータによる縛り、パラメータにない動きはできない →パラメータとデフォーマの爆発! →IK的な制御方も試したが…(腕変えの嵐、回転デフォーマ不可→ワープだと斜めで縮小) →全部品全角度と位置という地獄モデル→(アニメ付けが地獄) →SDKにもフォームアニメーション(FA)がほしい(切実) ※スプライト系ツールだとLive2Dでいうモデリング(パラメータ付け)工程が無く、 そのままオブジェクトをタイムライン上で操作する。Live2Dの場合、セットア ップしたパラメータ越しでしかタイムライン上で動かせない…という縛りがあ

    って自由に動かせなかった…FAが出るまでは!
  17. 作った! 苦労話など Chapter 3/5

  18. 足ェ… ・元絵に足がない! (ノベルゲーム用だから当たり前)

  19. 流線で誤魔化せ! (誤魔化しきれていない)

  20. 届かない…その想いッ!! 単純な関節回転の動きだと… 後ろ側の手が相手に届かない

  21. 背中ェ… ・もちろん、色々頑張れば届く! ・でも…身体をひねるのが面倒くさい! (背中側描いたり、腕替えしたり…)

  22. だったら飛ばせばいいだろ!! 流線はすべてを解決する!

  23. だったら飛ばせばいいだろ!! 頂点を適当に引き伸ばす!

  24. しゃがみェ… しゃがませるの めっちゃたいへん! (股が裂ける、ガニ股) 無敵の流線でも 誤魔化しきれない…ッ!!

  25. じゃあ、思い切って無くそう! 膝下は映さない カメラワーク! システム的にもしゃがみを廃止! キャラもおっきくて 表情も出しやすい! 3種類の大きさ Zoom in:ゆっくり Zoom

    out:速く ※距離に完全比例する方法 も試したけど、距離感が掴 み難かったので3つの固定 距離に(◦ィルティは2つ くらいだったような…)。 ズームインをゆっくりにし たのは、急に変わると距離 感が掴み難いから。逆にズ ームアウトが速いのは、カ メラ範囲から出るのを防ぐ ため
  26. ランダムポーズェ… 荒ぶるランダムポーズ! (全体移動とか回転とか) ※ランダム機能は改善予定だとか…たのしみです! (gifアニメなので本当は動いていたけど、Speakerdeckはpdfなんで…)

  27. プログラミング… ・そもそも格ゲー自体のコーディングが難しい! ・どこの部分が…? っというよりも全体的にやることが多い ・それなりに格ゲーっぽい体裁を整えるだけで一苦労 ・細かいプレイ感触の調整はこれから… ・ようやくプログラムの体裁が整ったので、やっと仮モデルのブラッシュアップに入れます… 先ずは足と顔の改善を…

  28. Mecanim ステートマシン (状態遷移図) BaseMotionsはoverrideさ れる前提なので、各ステ ートにセットされている モーションは実質空っぽ

  29. Mecanim ステートマシン (状態遷移図) Override Controller無しだと、キャラの数だけ複製したス テートを修正することになり、非常にメンテナンス性が 悪くなる。ロジックの変更が発生したら人数分変更する 必要が生じてしまう。

  30. Mecanim シーン名=Unityのアニメーション名 半角キャラ名_半角モーション名だと Unity上でセットするとき助かる! ここではBaseMotionsの状態遷移ロジックを Overrideして該当アニメクリップだけを変更している

  31. Mecanim…そもそも要る? ・メカニムが便利なようで複雑になってくると色々と意図通り動かせなくて不便 ・例えば…ガチャガチャ操作すると技が暴発する(入力がプールされる?) →AnimatorのTrigger型変数をStateMachineBehaviour(SMB)でリセットして対策 ・そもそもSDKのこれ↓でアニメさせるべき?(最近存在に気付いた) 暴発:例えば、強攻撃ボタンを2回叩いてしまうと、強攻撃完了後も もう1回律儀に出てしまってイラッとくる

  32. StateMaschineBehaviourの例 連打による技の暴発を防ぐ! ここでは「Stand」ステートにこのResetTriggerSMBコンポーネントを

  33. その他、実装のポイント ・ダミーパラメータで物理入力→モーション付け→揺れモノ ・当たり判定用オブジェクトをD+Bキーで表示 ・モデルファイルの更新をする度にコンポーネントの参照とか諸々剥がれる →Cubismモデルに直接コンポーネントを付けないようにする ・なぜかCubism モデルをインポートできなくなることがある(Prefab化されない)…など →謎…最新版なら今のところ問題なし… ・モーション名 misaki_idle→Misaki_idle.motion3.json

    (Editor上でモーションファイルをセットするときキャラクタ名がある方がわかりやすい)
  34. その他、実装のポイント 2 ・(太い枠線の技術) Editorで実演、詳しくはTogetter #Live2D でアウトライン(1番外側の輪郭線)を太くする方法 #live2d_alive2019 ・(物理流線技術) 時間的に足りず実際には解説せず…オバケブラー物理のやつ https://twitter.com/kurisaka_konabe/status/1066701941726560256

    時間が余れば後で解説…
  35. Live2Dエディタ上で完結する 格ゲーフォーマットの提案 Chapter 4/5

  36. 設計思想 ・でっかい絵を表示して、でっかいリアクションを描きたい ・百合イチャぽかぽかバトル!(2次元的な絵の良さを最大限活かしたコミカルな感じで) ・ここから逆算される仕様、カメラ、ゲームシステム ・ガチな対戦ツールよりも、みてて面白いゲーム、実況のしがいのある感じ

  37. 仕様暫定案 ・攻撃判定用アートメッシュ、喰らい判定用アートメッシュをつくる (暫定指定ID:HitArea、HurtArea) →Animatorでモーション作成 ・モーション毎に指定タグ? Idle,Walk,WeakAttack,Guard… (↑Live2D社様から発表のあった「nizima仕様」に寄せるかもしれません)

  38. 暫定要求仕様 ・攻撃判定用アートメッシュ、喰らい判定用アートメッシュ(指定ID) 現状これだけが要求仕様です(色は無視、どんな形状でも角度0の矩形扱いになって判定されます) ・判定用のメッシュの表示、非表示、不透明度は無視 (Editor作業の都合で適宜見やすいように) ・横幅が一定以下だと無効として処理する仕様 ・攻撃判定を無効化後、再度有効にすれば多段ヒット技

  39. 暫定要求仕様(当たり判定生成方法) 指定IDアートメッシュの頂点座標を全て取得し、最左、最右、最底、最高座標を取得、 それを元に角度0の矩形当たり判定を生成(斜め矩形だと下図のようになる(描画タイミングの都合でややズレ)) ・判定用のメッシュの表示、非表示、不透明度は無視 (Editor作業の都合で適宜変えやすいように) ・横幅が一定以下だと無効として処理する仕様 ・攻撃判定を1度無効化後、再度有効にすれば多段ヒット技 無効な攻撃判定幅→

  40. 相殺! 攻撃判定同士が先に当たると相殺し、専用エフェクトが発生!

  41. 今後のビジョン、ロードマップ 拡張アプリ契約(予定)など Chapter 5/5

  42. あくまで予定 ・Live2Dモデルの外部ファイル化 (ユーザが自由に交換可能に) ・↑拡張アプリケーション契約 (結べたら) ・あれとかこれとか実装… ・現時点ではエクセルで作るアクションゲーム、絵画、 バイ◦ハザードのナイフクリア…まで言うと言い過ぎだが… ネタ50%、ガチ50%の域で実用性は半々といったところ… →実用性200%のロケットランチャーになりたい!

    (「Live2Dでも格ゲーは作れる」ではなく、 「Live2Dだと格ゲーを作りやすい!」の領域までいきたい!)
  43. 完成時期は? 完成予定日:

  44. 希望的観測、ドリーム、妄想 ・格ゲーの民主化、Editorでなるべく完結する フォーマットの確立!(プログラミング不要!)

  45. 希望的観測、ドリーム、妄想 ・格ゲーの民主化、Editorでなるべく完結するフォーマットの確立! ・VTuber等が格ゲーに参戦!? ・ボイス付きで誰でもしばき合える未来!(もちろん要許可)

  46. 希望的観測、ドリーム、妄想 ・格ゲーの民主化、Editorでなるべく完結するフォーマットの確立! ・VTuber等が格ゲーに参戦! ボイス付きで誰でもしばき合える未来! ・「アプリ案件」「動画案件」「VTuber案件」に加えて 「格ゲー案件」が爆誕! FaceRigという1本のソフトがVTuber案件を生み出したように このソフト「カクゲナベ(仮)」が「格ゲー案件」を生み出せるようにしたい!

  47. 希望的観測、ドリーム、妄想 想像してみてください… VTuber同士が彼女らのボイスを発する格ゲーで殴り合い、それを実況する姿! とてもたのしそうじゃありません? 強いLive2D使いが作る強くてエモい格ゲーキャラ… そんな未来を見てみたいし、実現したい!

  48. 希望的観測、ドリーム、妄想 ・格ゲーの民主化、Editorでなるべく完結するフォーマットの確立! ・VTuber等が格ゲーに参戦! ボイス付きで誰でもしばき合える未来! ・「アプリ案件」「動画案件」「VTuber案件」に加えて 「格ゲー案件」が爆誕! ・勝ちまくりモテまくり5000兆円稼ぐウハウハ!

  49. 希望的観測、ドリーム、妄想 ボクは具材を入れたくなる小さな鍋を用意するので、 あとは強い人が具材を入れるだけ! …みたいなことができるといいな…

  50. 希望的観測、ドリーム、妄想 キャラとか背景とかタイトル画面とかUIとかキャラセレとかエフェクト とか(全部Live2D)…具材を持ち寄ってぶち込む! 皆が具材をぶち込みたくなるような鍋を用意する(ストーンスープ的な)

  51. ・SDKはいいぞ! みんなも能動的アクションゲーム作ろう! ・格ゲーで百合イチャぽかぽかバトルしようぜ! ・SDKにこそFAがほしいです(切実)! 今日のまとめ

  52. unityroomさんに投稿してある開発版の url! 今日の聴講者特典! (個人撮影可)(拡散不可)

  53. 今日の聴講者特典! (個人撮影可)(拡散不可)