人は私をクレイジーと呼ぶ

3DCGデザイナー絵描きプログラマー氷音の備忘録

今度こそ!Live2DとUnityPlaygroundを組み合わせてゲームを作ってみた【前編】

前回までのあらすじ

  1. Unity PlaygroundとLive2Dを組み合わせればプログラミングをしなくてもゲームが作れるのでは?
  2. 凝ったらプログラミングばりばり書いてしまった
  3. ちゃんとプログラミングを回避して紹介しよう
  4. せっかくだからLive2D Advent Calendar 2019にも参加してみる ←いまここ

 

Live2D Advent Calendar 2019 4日目担当の氷音(ひょうね)さんです

Live2Dの技法とか表現はおプロの皆様に任せるとして、

私からはLive2DとUnityで自分のかわいいキャラをゲームにしてみよう

(あわよくばSDK沼に引きずり込む計画)というUnity入門記事です♪

 

宣伝ですが、Creativ Awards 2019にこんな作品を出しまして

フシギでフシギな惑星探索 | フリーゲーム投稿サイト unityroom

これも今回紹介するUnityPlaygroundで作ったので参考に遊んでみてください!

 

めちゃんこ長いので2記事に分けました こちらは前編です

 

Unity Playgroundとは


How to Start Making Games - Unity Playground (Beginner Friendly)

Unityが今年発表した「プログラムを書かなくてもゲームが作れるフレームワーク」です

ドラッグ&ドロップでマジに簡単にゲームが作れてしまう!

…っていうのをなんと前回も描いたんです

前回は「フシギでフシギな惑星探索」について書いたんで興味のある方は読んでみてください

でも、これを使えばだれでもドラッグ&ドロップで簡単にゲームができてしまいます

最近は小学生向けゲーム作り体験ワークショップとかでも使われているみたいです

それならプログラミング分からなくてもゲーム作れそうじゃないですか?

やってみましょー!

この記事ではプログラミングをしないでゲームが作る方法を紹介します

 

Unity Playground と Live2Dを組み合わせてみよう

用意するもの 

  • お手頃なLive2Dモデル(今回はマーク君を使用)
  • Live2D Cubism
  • Unity
  • Live2D SDK for Unity
  • BGM(ループ可だと良い)

 

UnityとLive2DSDKをDLする

ダウンロードの手順はバッサリ省きますが、ダウンロードサイト貼っときます

 

unity

フリーで高性能なゲームエンジンです

ゲームを作るためのソフトと思ってくれればOKです

ポケモンGOマリオカートツアーなどスマホゲームからいけにえと雪のセツナといったコンシューマーまで幅広く作れる万能ソフトウェア!

unity3d.com

それとUnityのアカウントが必要なんで頑張って作ってください

 

Live2D Cubism SDK for Unity

UnityでLive2Dを使うためにはSDKという開発キッドをぶち込む必要があります

D&Dで簡単にぶち込めるので恐れずDLしちゃってください

色々ありますが「Cubism SDK for Unity」ってヤツです!

www.live2d.com

 

あとついでに今回サンプルで使うLive2DモデルもDLしておきます

今回は古いほうのマーク君をお借りします

www.live2d.com

 

自分のモデルを書き出す方法

自作モデルをUnity用に書き出す方法を書き留めておきます

私はマーク君を使いますねー

 

Live2D Cubism Editorで書き出すモデルを表示してから

ファイル> 組み込み用ファイル書き出し>moc3ファイル書き出し

f:id:hyone-achochochocho:20191130140824p:plain

※書き出しが押せない場合はテクスチャアトラスが作られていない場合が多いです

テクスチャアトラス編集 | Live2D Manuals & Tutorials

 

書き出し設定はこんな感じ バージョンは3.3でも4.0でも〇(たぶん)

テクスチャサイズも大きくてもいいですがまあ小さくしときましょう

f:id:hyone-achochochocho:20191130141019p:plain

保存場所と名前を聞かれるのでフォルダ(名前は半角英数字がベスト)を作って保存

f:id:hyone-achochochocho:20191130141403p:plain

5つほどファイルができると思います

同じフォルダの中に「motion」というフォルダを作っておいてください

 

次はモーションデータの書き出し

モーションデータはターゲット設定が「SDK(Unity)」になっていることを確認してください

ゲーム用途で使う場合はここを設定をしてからモーション作業に入りましょう

f:id:hyone-achochochocho:20191130142100p:plain

マーク君のデータには背景が付いているので非表示にして書き出さないようにします

f:id:hyone-achochochocho:20191130141939p:plain

書き出したいシーンを選んでから

ファイル>組み込み用ファイル書き出し>モーションファイル書き出し をクリック

f:id:hyone-achochochocho:20191130142352p:plain

確認とか出てきたらOKを押しましょう

f:id:hyone-achochochocho:20191130142558p:plain

今回は簡単にこんな感じの設定

SDKには自動でまばたきしてくれる機能もありますが、今回は使いません

f:id:hyone-achochochocho:20191130142821p:plain

(めっちゃ最近使ったフォルダ表示されてる 恥ずかしい…)

先ほど作った書き出しフォルダ内のmotionフォルダの中に保存

 

フォルダ内がこんな感じになってればOK

f:id:hyone-achochochocho:20191130142954p:plain

これでモデルの書き出しが出来ました!

Unityを起動して全部ぶち込む

いよいよUnityを起動してください

プロジェクトの横にある「新規作成」ボタンを押します

f:id:hyone-achochochocho:20191130143518p:plain

テンプレートは2Dを選択

プロジェクト名は半角英数字で保存先も全角が無いパスがいいと思います

私はデスクトップに設定して作成!

※ひょうねさんはアホなのでプロジェクト名がデフォルトのままですが

よいこのみんなは分かりやすい名前にしましょう

f:id:hyone-achochochocho:20191130143732p:plain

 

早速見慣れない画面が出てくると思いますが、慌てなくて大丈夫です

下のProjectタブ(人によっては場所が違うかもしれない)の

Assetsってフォルダが表示されていると思うんですが、

Live2D SDKを先にD&Dでぶち込みます

その後にLive2Dモデル一式をぶち込みます

f:id:hyone-achochochocho:20191130144523p:plain

SDKを入れるとこんなのが出てくると思いますが「Import」を押してください

f:id:hyone-achochochocho:20191130144605p:plain

 

次はメインとなるアセット「Unity Playground」を入れます

Window > Asset store を選択

f:id:hyone-achochochocho:20191130144847p:plain

こんな感じのUnity Asset Storeが出てくると思います

(記事書いているときはブラックフライデーのアセット大セール中ですね )

上の「Search for assets」って検索欄に「Unity Playground」って打ち込んでください

f:id:hyone-achochochocho:20191130145148p:plain

私のやつは白くなってますが、一番上に出てくる緑が生い茂っているアイコンのやつです

f:id:hyone-achochochocho:20191130145358p:plain

Import押すと「プロジェクトに上書きするけど大丈夫かい?」って聞かれますが

大丈夫です インポート!

f:id:hyone-achochochocho:20191130213424p:plain

こんなの出てきても「Install/Upgrade」でたぶん大丈夫

 

またImport Unity Packageっての出てくると思いますが「インポート」!!

f:id:hyone-achochochocho:20191130145718p:plain

今こんな感じにAssetsの中にいっぱい色々入っていれば大丈夫です

 

よく見るとエラーが出てる…

うわぁ… Consoleってタブありませんか?ちょっとクリックしてください

(見当たらない人は Window>General>Cnsole)

f:id:hyone-achochochocho:20191130215823p:plain

みてくださいこのエンジニアの敵 赤いエラー表記

 

そしたらですね、こちらのファイルを配布しますのでDLしてください

github.com

f:id:hyone-achochochocho:20191201231952p:plain再配布についての記述がみあたらないんですが大丈夫ですかね
ダメだったら誰か教えてください…

 

DLしたフォルダの中に「BaseClasses」と「Actions」
ってフォルダがまた入っていると思うのですが、それぞれ

Assets > _INTERNAL_ > Scripts > BaseClasses

Assets > Scripts > Conditions > Actions

に同じ名前のフォルダがあるので
そのフォルダを消してからDLしたファイルをD&Dで入れてみてください

f:id:hyone-achochochocho:20191201222740p:plain

f:id:hyone-achochochocho:20191201222858p:plain

どうですかね エラーは消え去りましたかね

プログラムって1行でも間違ってたら動かないんですよ…


(私がやったことはActionってのがUnityPlaygroundとLive2D SDKとで被ってたので
UnityPlaygroundのActionってお名前をちょっと変えただけです)

 

まずはサンプルゲームでも遊んでみましょう

ここまで長かったでしょ?ちょっと休憩してゲームでもしましょうよ

Assetの中に「Examples」ってフォルダがあると思います

f:id:hyone-achochochocho:20191130210620p:plain

なんと中にサンプルゲームが入ってるんですよ

なんとなんと5種類ものゲームが入ってる!

アドベンチャーゲーム」「防衛ゲーム」「二人用フットサルゲーム」

「迷路ゲーム」「すげえ微妙なローグライクゲーム

 

私、頑張れば無限に遊べるミニゲーム好きなんで「Defender」にしましょう 

 Assets > Example > Defender を開いてください

 Unityのアイコンの「Defender」ってファイルがあると思います

それをHierarchyタブにD&Dしてください

f:id:hyone-achochochocho:20191201223647p:plain

なんか絵とか出てきましたね

で!!上にある三角の再生アイコン押してみてください!

f:id:hyone-achochochocho:20191201223911p:plain

操作方法はAが左回転、Dが右回転でスペースキーで射撃です

すごい!なんか遊べる!

f:id:hyone-achochochocho:20191201224152p:plain

他のゲームを遊びたいときは同じように

フォルダを開いてUnityアイコンのシーンってファイルをヒエラルキーにぶち込み、

使わない邪魔なシーンを右クリックで「Unload Scene」を押せば読み込まなくなります

逆に読み込みたいときは「Load Scene」です

f:id:hyone-achochochocho:20191201224421p:plain

 

今回はここまで

後半へつづく

crazy-omamagoto.hatenablog.com