Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

kurisaka_konabe

November 25, 2019
Tweet

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. 1. Cubism SDK for Unityによる格ゲーの実装例と解説
    ・(生徒のSDKゲーム作例)
    ・SDKの概要と入門(時間的都合で割愛)
    2. ススメと理由、メリットとデメリット
    3. 作った! 苦労話など…
    4. Live2D Editor で完結する格ゲーフォーマットの提案
    5. 今後のビジョン、拡張アプリ契約(あくまで予定)など
    今日話すこと:

    View Slide

  5. Cubism SDK for Unityによる
    格ゲーの実装例と解説
    Chapter 1/5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. 作った! 苦労話など
    Chapter 3/5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. じゃあ、思い切って無くそう!
    膝下は映さない
    カメラワーク!
    システム的にもしゃがみを廃止!
    キャラもおっきくて
    表情も出しやすい!
    3種類の大きさ
    Zoom in:ゆっくり
    Zoom out:速く
    ※距離に完全比例する方法
    も試したけど、距離感が掴
    み難かったので3つの固定
    距離に(○ィルティは2つ
    くらいだったような…)。
    ズームインをゆっくりにし
    たのは、急に変わると距離
    感が掴み難いから。逆にズ
    ームアウトが速いのは、カ
    メラ範囲から出るのを防ぐ
    ため

    View Slide

  26. ランダムポーズェ…
    荒ぶるランダムポーズ!
    (全体移動とか回転とか)
    ※ランダム機能は改善予定だとか…たのしみです!
    (gifアニメなので本当は動いていたけど、Speakerdeckはpdfなんで…)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. その他、実装のポイント 2
    ・(太い枠線の技術) Editorで実演、詳しくはTogetter
    #Live2D でアウトライン(1番外側の輪郭線)を太くする方法 #live2d_alive2019
    ・(物理流線技術) 時間的に足りず実際には解説せず…オバケブラー物理のやつ
    https://twitter.com/kurisaka_konabe/status/1066701941726560256
    時間が余れば後で解説…

    View Slide

  35. Live2Dエディタ上で完結する
    格ゲーフォーマットの提案
    Chapter 4/5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. 完成時期は?
    完成予定日:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide