【ゲーム制作】『セシル変身アプリ』のキャラをUnityに入れて走らせる

どうも音無サノトです(^^)

 先週はセシル変身アプリを使用してモデリングを行いました！

otonasisanoto.hatenablog.com

今日は、このめんま似モデルをUnityに導入してみます。

進捗報告

• セシル変身アプリで作成したモデルをUnityにインポートできた
• Animetor Contorollerについて学習することができた 

作業内容

Unityにインポートする

前回、書きだしたVRM形式のモデルデータをUnityにインポートします。

VRM形式のモデルのインポートには「UniVRM」を使用します。

詳しくはこちらの記事に記載した

• UnityでVRM形式を扱うための「UniVRM」のインポート
• VRM形式のキャラをUnityにインポート

を参考にしてください。

ということで、UnityのAssetsフォルダに「Model2_Menma」というフォルダを作って、VRM形式のモデルをドラッグ＆ドロップします。

できたプレハブをゲームシーンにドラッグ＆ドロップします。

前回のキャラと同じように導入できました(≧▽≦)

モーションの準備

前回、ユニティちゃんのモーションをつけることはできたので、今度は別のモーションをつけてみようと思います。

Asset Storeで「Raw Mocap Data for Mecanim」というアセットをダウンロードします。

インポートが完了したら、AssetsのCreateからAnimator Contorollerをクリックします。

名前を「Menma_anime」にして、モデルと同じフォルダに入れておきます。

このMenma_animeをMenma2に適用しておきます。

ではAnimetor Contorollerの中身を見ていきましょう。

Menma_animeをクリックすると下の様な画面が出ます。

ここにアニメーションのデータを配置していきます。

まず先に後から使用するパラメータを追加しておきます。

左側のウィンドウからParametersタブを選択します。

そして検索欄の隣にあるプラスアイコンを押してください。

Float、Int、Bool、Triggerを選択できるのでFloatを選びます。

そのパラメータの名前を「speed」にします。

次にインポートした「Ran Mocap Data」のフォルダから

Animations ＞Idle ＞ Idle_Netural_1

をMenma_animeのところにドラッグ＆ドロップします。

Enteryからの矢印がIdle_Netural_1に繋がりました。

これでゲーム再生時にはこのモーションが適用されます。

次に走るモーションです。

Running ＞ RunForward_NtrlFaceFwd を選択して編集します。

Loop TimeとLoop Poseにチェックを入れてアニメーションが再生されている間はループするようにします。

それから上のタイムラインのアイコンを狭めてちょうどいいところのアニメーションだけが実行するようにサイズを変更します。

ループと合うかどうかはloop matchをそれぞれ確認してください。

緑 ＞ 黄 ＞赤 の順でループが合っているかを示しています。

緑になるべく近くなるようにします。ここら辺はアニメーションを再生しながら調整しました。

本当はループを前提に作られているモーションを使うべきなんでしょうが、まあここらへんは割愛。

恐らく、このアセットは何種類かのモーションを合わせて使うことが前提になっているのでこういうことになっているんだと思います。

こういう風にしたらいい、というリストがありましたが面倒くさそうです。

モーションの勉強にはいいアセットかもしれませんが今回は飛ばします。

面倒なので飛ばしま～す

ということで誤魔化しでループするアニメーションをドラッグ＆ドロップします。

そしてIdle_Netural_1を右クリックしてMake Transitionを選択します。

すると矢印が出るのでRunForward_NtrlFaceFwdにくっつけます。

これで遷移を設定することができます。

RunForward_NtrlFaceFwd側からも同じ要領で遷移の矢印を出します。

遷移の条件を変更していきます。

まずIdle_Netural_1からRunForward_NtrlFaceFwdに伸びている矢印を編集します。

Has Exit Timeのチェックを外します。これを外さないとアニメーションが終わるまで次のアニメーションに遷移しません。

そして、下のConditionsのプラスを押してリストを追加。

speedの変数を選択し、Greaterにして、値を0.1にします。

これでspeedのパラメータが0.1以上になったら次のアニメーションに遷移するようになります。

次にRunForward_NtrlFaceFwdからIdle_Netural_1に伸びている矢印の変更です。

同じようにHas Exit Timeのチェックを外し、Conditionsのリストを追加。

今後はGreaterじゃなくてLessを選択します。値は0.1。

これで0.1以下になったら遷移するようになります。

これでモーションの準備は完了です。

メインキャラに追尾させる 

次に前回のメインキャラに今回のキャラを追尾させるようにします。

今回のキャラ(Menma2)を前回のキャラ(girl)の子オブジェクトします。

そして、Menma2のパラメータを以下のように変更。

これでgirlの少し後ろに小さくしたMenma2が配置されました。

スクリプトを作成して、Menma2のモデルに適用しましょう。

スクリプトの中身は以下のようにします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MenmaAnime : MonoBehaviour
{

    private Animator anim;

    void Start()
    {
        anim = GetComponent<Animator>();
    }

    void Update()
    {
        anim.SetFloat("speed", Input.GetAxis("Vertical"));
    }
}

オブジェクトのAnimetor Contorollerを取得し、動作中にspeedという変数にキーボード入力時の値を設定しているだけです。

これでMenma2をgirlの動きに合わせてアニメーションが再生されます。

ちょっとモーションがおかしいけどご愛敬。

次回予告

これで一通りキャラを入れることはできそうな気配です。

モーションの作成が課題でしょうがそこはいったんおいておきます。

次回は建物などをBlenderを使ってモデリングしようかなと思います。 

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto

【セシル変身アプリ】あの花のめんま似3Dキャラを作る【モデリング】

どうも音無サノトです(^^)

前回、VRoid Studioを使って作成したオリジナル3DキャラをUnityに導入することができました。

otonasisanoto.hatenablog.com

今回は、『セシル変身アプリ』というモデリングソフトを使ってキャラを作って Unityに導入していこうと思います。使い方や作業手順の参考にしていただければと思います。

(セシル変身アプリについてはこちらの記事に記載しています)

進捗報告

• 『セシル変身アプリ』を使用しめんま似の3Dキャラを作成
• 『セシル変身アプリ』の使用方法を学習

下の様なものが完成しましたが…まあ、めんまでは無いね。

めんまを参考にした別キャラということにします。

似てないけどカワイイからいいのだよ！！

作業内容

イメージを固める

まずどういうキャラにするかのイメージです。

今回は『あの日見た花の名前を僕たちは知らない』というアニメ作品からヒロインのめんま似のキャラにしたいと思います。

理由は聖地の秩父に行ったときに見つけたポスターのめんまが可愛いなと思ったからです。

このめんまがカワイイ(*´ω｀)

着ぐるみは制作時間がかかりそうなので、とりあえずそれは無しにしてめんま似のキャラを作ってみます。

灰色のロングヘアに青い瞳と子供っぽい印象が表現できればなと思います。

アバターセレクト

まず、アバターセレクトで元になるアバターを選択します。

アバターセレクトというボタンをクリックするとアバターのウィンドウが表示されます。

左クリックを押しながらスマホの様にスライドさせると下に流れます。

赤矢印の様に上にスライドさせると下にいきます。文章だとややこしい説明になりますが触ってみると直観的でわかりやすいです。

ホイールボタンではモデルの拡大がされるだけで下にいかないので注意。

自分は一瞬、これで迷いました。。。

アバターセレクトの中から下のピンクの子がイメージに近いかなと思い選択しました。

開いたウィンドウを閉じる

作業をしているとウィンドウが邪魔になってきます。

その場合は左右にある空白のボタンを押すとそれぞれ出現したウィンドウを閉じることができます。

空白ボタンで開いたウィンドウを閉じる

セーブ/ロードについて

左下のセーブ/ロード欄の「S」ボタンを押すと保存できます。

作業中は小まめに保存しましょう。

今回は１番を使います

保存するとボタンが「L」に変わります。これを押すと保存したデータをロードできます。

「S」が「L」に変わる

上の「×」を押すと保存したデータを消せます。

同じ番号のところに保存したい場合は一回「×」を押して、次に「S」を押します。

間違って「L」を押すと作業前のデータがロードされるので注意です。

逆に操作を間違って戻したい場合はロードをすれば作業前まで戻れます。

まあ間違ってソフトを落としても前回の状態が保持されているので大丈夫かと思います。実際に自分も作業中に間違ってソフトを閉じてしまったのですが、作業後の状態のままでした。

髪型の編集

次に髪型を変更していこうと思います。

画面右側にある「髪型」ボタンを選択して編集ウィンドウを表示します。

髪型の編集ウィンドウではデフォルトの髪型を変えたり、色を変えたり、アクセント(アホ毛とか遅れ毛とか)をつけることができます。

今回は髪の色を灰色に選択しました。

次に「髪」ボタンを選択します。

ここでは毛先やボリュームを整えることができるので、画像の様に毛先をシャープに変更しています。

髪型はここまでが限界でした。

もっと前髪を短くして、横と後ろ髪を長くしたかったです。。。

目の編集

髪型の次は目の編集を行います。

まず「目」ボタンを選択します。

ここでは目の位置や大きさなどを変更できます。

目を大きくして、下に位置をずらし、より子供っぽくしました。

次に「瞳」ボタンを選択します。

ここでは瞳の位置や大きさを変更できます。

瞳の横幅を大きくして、位置を少し下げました。

これでぱっちりとした印象になるかと思います。

次に「瞳」ボタンの横にある「色」ボタンを選択します。

ここでは瞳の色を変更することができます。

原色となる瞳を選択してRGB値を調整しました。

先ほどよりも黒目が大きく、青いグラデーションがかかった様になりました。

次に「目/眉」ボタンを選択します。

ここでは目のハイライトを下げたり、眉の位置や太さを変えられます。

今回は書き出しするので特にいじりませんが、シェイプチェックでキャラの表情を変えられます。モデルを作って撮影するだけなら便利かもです。

ハイライトを少し下げ、眉を太くしました。

次に「眉」ボタンを選択します。

ここではデフォルトの眉の形や色、位置や回転などを調整できます。

眉を小さくし、灰色に変更。位置を少し上に上げました。

次に「まつ毛」ボタンを選択します。

ここではまつ毛の形や色、太さなどを変更できます。

まつ毛のチークをなくして色を黒に変更し、太さを細くしました。

それから二重の線をいれています。

目はこんな感じですかね～。

下まつ毛が入れられないのは痛いです。めんまの特徴なので。。。

髪の装飾を編集

次に頭にあるリボンを外そうと思います。

右下にある「リボン メガネ 編集ページ」ボタンを選択。

そこから「リボン/帽子」ボタンを選択し、空白ボタンを押します。

これでリボンを外せました。

肌の色を編集

次に「肌/影」ボタンを選択し、肌の色を変えます。

ここでは肌の色のデフォルトや影などのRGB値を変えられます。

デフォルトの色を変えて、少し白色に近づく感じにしました。

服の編集

次に服装を変えようと思います。

「服」ボタンを選択。ここではデフォルトで用意されている服装に変更できたり、色を変えられたりできます。素体にするとえっちぃです。。。

「色上」ボタンではシャツやネクタイの色を変更。

「色下」ボタンではスカート、パンツ、靴下の色を変更。

「靴色」ボタンでは靴の色を変更できます。

今回は服装を白いワンピースに変更しただけです。

めんまって裸足だから靴下と靴を脱がせたかったのですができなかったですorz

靴下の色を肌色に合わせれば裸足に見えないかとやってみたのですが、肌の色に調節するのが難しかったので断念して、白色の靴下と靴を履いていることにしました。

Twitterで裸足にする方法を教えてもらったので追記します。

出来ました～(≧▽≦)
ありがとうございますm(_ _)m pic.twitter.com/yRe88BcxG9

— 音無サノト (@otonasisanoto) 2019年7月14日

ということで「服」ボタンから「ワンピース クラスター用」を選択し、色を白に変えます。

するとこんな感じ。

 裸足に出来ましたー(≧▽≦)

袖の部分を縮めて調整。教えていただいた方ありがとうございますm(_ _)m

体形の編集

「体形」ボタンを選択します。

ここでは体全体や上半身、胸、胴、ウエストの値を変更できます。

ここでは胸を小さくしました。

他はデフォルトのままにしていますが、「手」、「頭」、「足」ボタンで各パーツを細かく調整することもできます。

ということで完成。

めんまに似ているかと聞かれたら微妙ですが…

これはこれでカワイイからいいか(｀・ω・´) ＜ 開き直り！！

VRM形式に書き出し

最後に作成したキャラをVRM形式で書き出します。

「File」ボタンを選択し、「VRM 書き出し」をクリック。

任意のフォルダを選択し、名前を付けて完了です。

無事に書き出しに成功しました。

下記のサイトでVRMを確認することができます。

VRM Viewer

実際に見てみましょう。

一応、見れているけど下のエラーが怪しいです。どっかでつまづきそう。。。

まあ今回は見なかったことにします。

次回予告

次回は作成しためんま似のキャラをUnityにインポートしてモーションをつけてみようと思います。 

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto

【ゲーム制作】『VRoid Studio』で作成したキャラをUnityで走らせる

どうも音無サノトです(^^)

今日は『VRoid Studio』で作成したキャラをUnityに入れてみようと思います。

進捗報告

VRoid Studioで作成したオリジナルキャラをUnityで動かすことができました。 

オリジナルキャラをUnityにインポートしたときの画面

作業内容

VRoid Studioでキャラをエクスポート 

前回まで制作していたキャラクターをエクスポートしようと思います。

otonasisanoto.hatenablog.com

まず、VRoid Studioを起動し、ツールバーにある「撮影・エクスポート」からエクスポートを選択します。

するとVRM設定のウィンドウが出ますので必要な情報を入れていきます。

自分はとりあえず「タイトル」・「作者」・「連絡先」のみ入力して、後はデフォルトのままでOKをクリックしました。

任意のフォルダに名前をつけたファイルをエクスポートします。

VRM形式という見慣れない拡張子だったので調べました。

株式会社ドワンゴさんが提唱している「プラットフォーム非依存の３Dアバターファイルフォーマット」だそうです(参考：「VRM」って何？どんなことができる？ - VRM)

３Dモデルは制作したソフトなどで扱える拡張子とかがバラバラだとかは割とあって、これのせいでプラットフォーム間のデータのやり取りでファイルが壊れるなんてことも起きます。それを解決するために作った共通のファイル形式みたいです。

UnityでVRM形式を扱うための「UniVRM」のインポート

VRM形式のモデルをUnityで扱うためには公式で配布されいてるUniVRMのパッケージをインポートする必要があります(参考：UniVRMのインストール - VRM)

まずオープンソースで配布されているUniVRMをダウンロードします。

配布先(Releases · vrm-c/UniVRM · GitHub)にアクセス。

最新のUniVRMを選択します。

2019年7月7日の時点

UniVRMのパッケージをダウンロードします。

ダウンロードしたらUnityを起動して、パッケージをインストールします。

ツールバーからAssets ＞ Import Package ＞ Custom Package を選択。

ダウンロードしたUniVRMのパッケージを選択します。

するとインポート画面がでますので右下のImportを選択します。

Assetsに以下のフォルダが生成されインポートできました。

なんかめちゃくちゃ警告でてきたけどスルーして大丈夫なのか…？

VRM形式のキャラをUnityにインポート

さて、UniVRMの準備はできたのでVRM形式のキャラをインポートしてみましょう。

Assets内に「Model」という名前のフォルダを作ってVRM形式のファイルをドラッグ＆ドロップします。

するとUniVRMが自動でプレハブを作ってくれます。

そのプレハブをゲームシーンにドラッグ＆ドロップ。

おおー、ちゃんと表示されました。

テクスチャが貼られていないとか問題起きるかなと思ったのですが大丈夫そうです。

オリジナルキャラを走らせる

ユニティちゃんというUnity用のモデルを走らせたときのプロジェクトをそのまま使用して、キャラクターをオリジナルキャラに変更してみようと思います。

ユニティちゃんを走らせたときの記事はこちらから。

otonasisanoto.hatenablog.com

今回はこの記事で書いたプロジェクトの続きからやります。

otonasisanoto.hatenablog.com

まずHierarchyウィンドウにあるユニティちゃんのモデルを非アクティブにします。 

追加したオリジナルキャラに変更を加えていきます。

まずPositionの変更。

その次にAnimatorのControllerをUnityChanLocomotionsに変更します。

このアニメーターコントローラとはUnityに用意されているアニメーションの描画の遷移を保存しているデータです。

UnityChanLocomotionだとこの様に遷移があらわされています。

UnityChanLocomotionのAnimator

これでユニティちゃんと同じアニメーションを再生させるというわけです。

次にRigidbodyを追加します。

オリジナルキャラのInspectorウィンドウの下にあるAdd ComponetからPhysics ＞ Rigidbodyを選択します。

Rigidbodyを以下のように変更。

質量とローカル座標の回転固定をします。

固定しないとモデルがくるくると明後日の方向に回ります。

Rigidodyが何なのかはこちら → Rigidbody - Unity マニュアル

次に衝突判定用のCapsule Colliderを追加します。

Rigidbodyと同じようにAdd Componet ＞ Physics ＞ Capsule Collider を選択。

Y軸とHeightをキャラの大きさに合わせるように変更します。

次にスクリプトを適用します。

UnityChan ＞ Scripts ＞UnityChanControlScriptWithRigidBody をオリジナルキャラのInspectorウィンドウにドラッグ＆ドロップします。

最後に必要なプレハブを子オブジェクトにします。

UnityChan ＞ Prefabs ＞ for Locomotion内にある「CamPos」、「LookAtPos」、「FrontPos」をオリジナルキャラの子オブジェクトにします。

これで準備完了です。

ゲームシーンを再生してみます。

【Unity】VRoid Studioで作成したキャラをユニティちゃんのように走らせる

無事再生できました。

次回予告

次回は以前やった３Dキャラ作成ソフト「セシル変身アプリ」というものも放置状態だったので、そのモデリングとUnityへの導入をやってみようと思います。

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto

【ゲーム制作】『VRoid Studio』で目のメイキングを頑張る

どうも音無サノトです(^^)

今月のゲーム制作はモデリングを課題としています。

今日は目のメイキングに力を入れます。

前回の振り返り

前回の制作した目がこんな感じ。

ジト目にしようと思っていたのですが変更。

ぱっちりした目で活発な印象の女の子にしようと思います。

目のメイキング作業

イメージを固める

前回もラフを描いてイメージを固めました。

目指すべき形を決めておくことは重要です。作業している途中で迷いが生じずらいので。

ということでこんなデザインで。

ぱっちりした感じで赤い瞳でいこうと思います。 

細かいところは作業しながら調整していきます。

目の形を作る

まず顔編集 にあるデザインの目や目元を選択して、パラメータを調整して目の形を作っていきます。

とりあえず色々と試してみた結果こんな感じ。

もっとぱっちり感を出したかったのですが、 パラメータを変えるだけだと目の形に限界がありました。。。

もっと細かく調整したい場合はモデリングソフトを使った方がいいかもしれません。

テクスチャの編集

今度は顔編集のテクスチャを選択して、目の色を調整していきます。

まずは瞳を赤くしていきます。

ブラシプロパティの横にあるアイコンがミラーリングのアイコンとなっています。

これをオンにしておけば片側の編集がもう片方に適用されるので便利です。

左側にあるモデリングを見ながら調整をしていきます。

自分はテクスチャの方を塗りましたがモデルの方に直接描くこともできます。

両方を試してやりやすい感じを試行錯誤していくといいですね。

自分が見つけたコツとしては、手の方向に合わせて左右の目を変えながら描き込んでいくとやりやすいです。

手によって曲線が描きやすい方向というのがあるので。

右利きの場合は赤矢印に沿って描くと全体を仕上げやすいです。

それと塗る際はレイヤーを分けながら目を塗っていきました。

瞳の色を重ねていけるので単調な手の動きで色を調整できます。

テクスチャのところにあるプラスアイコンでレイヤーを追加できます。

瞳はこんな感じに仕上げました。

ちなみにレイヤーのところを右クリックするとエクスポート・インポートを選択することができます。

慣れてきたらある程度の目安のところを塗って、さらに細かく塗りたいときはペイントソフトを使うようにするといいです。

このときの注意点として一つ一つのレイヤーしかエクスポートできないので、色を塗る際は一つのレイヤーだけにした方がいいです。

それと対応のファイル形式は透過PNGのみとなっています。

詳しくはこちら。

同じ要領で目のハイライトやアイライン、まつげ、肌などを描き込んで調整していきます。

モデルを360度回しながら不自然なところがないか確認しながら少しずつ進めていくのがいいです。

一気に修正して、変なところが出たら全部直さなければいけなくなるので。

モデルに描き込むのが難しいところはテクスチャをエクスポートしてペイントソフトでやってみましたが、2次元を3次元に変換するので線が長くなってり歪んだりとしました。

何度もインポートを繰り返して微調整を行うのが大変です。

ここら辺は慣れな気がします。

ガイドラインやデフォルト画像も一緒にエクスポートして、ペイントソフトでレイヤーとして取り込み、参考にすると直感的に掴みやすいな～と思いました。

そんなこんなで下のように目を変更しました。

最初と比べるとこんな感じ。

だいぶ良くなったのではないでしょうかね。

次回予告

次回はこのモデルを一回エクスポートしてUnityに導入してみようと思います。

オリジナルキャラがゲーム内で動くのを確認したら、さらにモデリングを極めていきます。 

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto

【ゲーム制作】『VRoid Studio』で髪型のモデリングを頑張る

どうも音無サノトです(^^)/

今月のゲーム制作はモデリングを課題としています。 

前回、挫折したVRoid Studioでのモデリングに再挑戦しようと思います。

otonasisanoto.hatenablog.com

今回は課題を絞って髪型に力を入れます。 

前回の振り返り

前回はイマイチ髪型のモデリングがうまくいきませんでした。

前回の髪型

うまく髪が描けないというか直観的に掴むことができませんでした。

なので今回は試行錯誤してツールに慣れていこうと思います。 

髪型のモデリング作業

イメージを固める

前髪は均等じゃなくて流す感じに変更。

イメージとしては赤毛のポニーテールの女の子にしたいです。

ザッとラフを描いた感じは下の様に。

イメージのラフ

髪の毛の流れを意識してモデリングしてみます。

髪型のモデリング

まずは髪型編集から前回の髪の毛を削除。

削除方法は右クリックから削除を選択すればできます。

「手書きガイドを追加」を押してガイドを追加します。

名前を「前髪」に変更しブラシツールと修正ツールを使って髪を描いていきます。

各パーツはのちのちボーンを設定したり微調整をしたりするときに分からなくならないように適宜、名前をつけていきます。

モデリングを回転させながら何回も修正を試してみて、流れるように描ける部分を見つけながら作業をするとコツがつかめた感じがします。

だんだんイラストを描く感覚で髪を描けるようになってきました。

前髪はこんな感じ

同じ要領で「手書きガイド追加」をして横髪を描いていきます。

ブラシツールのヘアーパラメータでブラシを太くします。

ガイド線を少し前に出して、横髪を描きます。

横髪を描いたら、この手書きグループを右クリックで複製し、複製したものを反転させて反対側の横髪も作成します。

このやり方の詳しい方法はこちら↓

ツインテールの作り方 – VRoid ヘルプ

横髪はこんな感じ

後ろ髪はプロシージャルグループで束ねて作成していきます。

本数、横幅、流れ(まとめ)などのパラメータを調整していきます。

後ろ髪の束に合わせて前髪や横髪もパラメータを調整、ことのき生え際からの流れを意識するといい感じになりました。

途中経過

髪を追加していき、大きさやガイドラインを調整して理想の形にしていきます。

ここがかなり大変でした。。。

後ろ髪完成

後ろ髪の試行錯誤で慣れてきたのかポニーテールはすぐできました。

ポニーテールを生やして髪型完成

ボーンの設定

ボーンというのはモデルに組み込むことで動きを付けられるものです。

これを設定して髪が揺れるようにします。

髪型編集の「揺れもの」を選択します。

ボーン未設定の欄でポニーテールのパーツを選択し、「ボーングループを作成」を選択。

ボーンの数や固定場所のパラメータを調節します。

「撮影・エクスポート」から「ポーズ＆アニメーション」を選択して揺れ具合を確認します。

同じ要領で髪の各パーツにボーンを設定して違和感のない動きになるように調節しました。

次回は目のメイキングを課題にモデリングしていこうと思います。

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto

【ゲーム制作】ユニティちゃんを走らせてみる ③自作したステージで走らせる

どうも音無サノトです(^^)

週末のゲーム制作記事になります。

前回は大地(ステージ)を作成しました。今回もその続きをやり、ユニティちゃんを走らせてみようと思います。

進捗報告

• 背景の描画方法を学んだ
• 自作したステージでユニティちゃんを走らせることができた 

作業内容 

空を描画する

Unityではスカイボックスという機能を使うことにより背景の景色を描画することができます。

デフォルトで空っぽい感じになっていますが、今回はその機能を使って別の空を描画してみます。 

まずUnity Asset Storeにて「Toony Skies」をインポートします。

次にツールバーのWindowからRendering > Light Settingsを選択します。

Lighting Settingsを選択

Lightingのウィンドウが開くのでSkybox Materialのところにインポートしたマテリアルをドラッグ＆ドロップします。今回は「BlueSky01」を選択しました。

これで空の描画が変わります。

快晴になりました

スカイボックスは、その６面それぞれに対応する6つのテクスチャから生成されています。

Unity内でテクスチャからスカイボックスのマテリアルを生成することもできるので、自作の背景描画もできます。

いつか挑戦してみたいですね～。

ユニティちゃんを走らせる

それでは作成したステージでユニティちゃんを走らせてみようと思います。

UnityChanフォルダのPrefabs > for Locomotion > unitychan_dynamic_locomotion というプレハブをシーンに追加します。

Inspectorウィンドウで追加したプレハブのポジションを(500, 0, 500)にしてステージの真ん中に持っていきます。

次にカメラの設定です。
ユニティちゃんを(0, 0, 0)の位置に配置したときのカメラのポジションは

Position (-0.1, 1.3, -2)

Rotation(14.5, 0, 0)

となります(デフォルトのLocomotionシーンを参考)

そこから計算してMain Cameraの位置を以下のように変更します。

するとユニティちゃんをいい位置でとらえることができました。

最後にカメラにスクリプトをアタッチします。

UnityChan > Scripts > ThirdPersonCamera スクリプトをMain Cameraにドラッグ＆ドロップで持っていきます。

これでユニティちゃんを自作したステージで走らせることができました。

【Unity】自作したステージでユニティちゃんを走らせる

動画キャプチャのソフトがイマイチで動画がカクカクしてしまいます。。。

まあフリーソフトを使っているので、あまり文句は言うまい。

次回予告

• VRoidで自作したキャラクターを同じ様に走らせる 

ユニティちゃんを走らせることができたので、今度は別のソフトで制作したキャラクターをインポートしてみようと思います。

この前、VRoid Studioで挫折していたキャラがいるので改めてもう一回挑戦してみます。

本日は以上となります。最後まで読んでいただきありがとうございました！

© Unity Technologies Japan/UCL

Follow @otonasisanoto

【ゲーム制作】ユニティちゃんを走らせてみる ②Terrain を使って大地を創る

どうも音無サノトです(^^)

週末のゲーム制作記事になります。

前回まではユニティちゃんを走らせたので、今度は地形を制作してその上を走らせてみようと思います。

otonasisanoto.hatenablog.com

進捗報告

• Terrain機能を学習し地形を制作した 

作業内容

Unityには地形を生成できるTerrainという機能がついています。

それを使って簡単にステージを作ってみようと思います。

Terrainの追加

まず前回、ユニティちゃんをインポートしたプロジェクトに新しいシーンを作成します。

名前を「Unitychan_Terrain」にします。

シーンの作成

HierarchyのCreateから3D Object ＞ Terrain を選択します。

Terrain の追加

するとTerrainが追加されます。

Terrain が追加される

Terrainの設定を見てみます。

Inspectorウィンドウにある歯車のマークのところで基本的な情報を見てみます。

Terrain の設定

赤枠で囲んだところが基本的な情報です。それぞれ次のようになります。

設定	内容
Terrain Width	地形の幅
Terrain Length	地形の長さ
Terrain Height	地形の最大の高さ

デフォルトでは1000平方メートルの地形ということになっています。

Terrainの名前を「Field」に変更しておきます。

Terrainの編集

次にこの地形に高低差をつけていきたいと思います。

ブラシのアイコンをクリックします。すると以下のようにいくつかのブラシが選択できます。

Terrain のブラシツール

それぞれのブラシの概要は次のような感じです。

ブラシ名	内容
Raise or Lower Terrain	地形の高低差をつける。クリックで隆起させ、Shift を押しながらで沈降させる。
Paint Texture	地面にテクスチャを塗ることができる。
Set Height	指定した高さに一定に高低差をつけることができる。
Smooth Height	高さを滑らかにする。
Stamp Terrain	指定した高さに、そのブラシの形をクリックでスタンプの様に隆起させる。

これらのブラシを使って地形を作成していきます。

Raise or Lower Terrain

クリックをしながらマウスを動かすことでブラシで山を描くように隆起させることができます。マウスをゆっくり動かすと高めの山を作れます。

クリックで隆起

Shift キーを押しながらで、沈降させることができます。

Shift キー ＋ クリックで沈降

下の様に大まかに山の形を作りました。

向こう側に高い山があるイメージです。

大まかな山の形を作る

Paint Texture

作成した地形にテクスチャを貼って質感を出していきます。

まず Asset Store で「Terrain Textures Pack Free」をダウンロードし、テクスチャを用意します。Asset Store を利用するため Unity のアカウントでログインする必要があります。

Unity は無料でも豊富な Assets があるのがいいところです(^^♪ 

Terrain Texture Pack Free のダウンロード

ダウンロードが完了しますと、Download のところが Import に変わるので、そこをクリックします。

インポートが完了すると Assets フォルダに TerrainTexturesPackFree が追加されます。

インポート完了

Terrainのブラシツールを「Paint Texture」に変更し、Terrain LayersにあるCreate Lyaerをクリックします。

Create Layer

Select Texture2Dというウィンドウが出てきますので、先ほどインポートしたテクスチャを選択します。「grass」を検索して「GrassUV01」を選択します。

すると下のようにTerrain全体にテクスチャを貼りつけることができます。

AssetsフォルダにTerrain Layerが追加されるので名前を「Grass01」に変更し、「Terrain Lyaer」というフォルダを作ってその中に入れておきます。

こんな感じに

今度はブラシで地面の色を変えてみましょう。

また先ほどと同じようにTerrain Layerを追加します。今度は「GroundCracked01」というテクスチャを選択します。

Terrain Layerの名前を「GroundCracked01」に変更してフォルダに入れておきます。

Terrain Layersで追加したレイヤーを選択。

お好みのブラシでTerrain上でクリックすれば、そのテクスチャを塗ることができます。

ここら辺を塗ってみた

Set Height

Set Heightのブラシを使うとHeightで指定した高さに均一に盛り上げることができます。

逆に盛り上げた部分を設定した高さまで低くすることもできます。

ちなみにHeightに数値を指定して、隣のFlattenボタンを押すとTerrain上をその高さにすることができます。

やり直したいときとかは0を指定してFlattenを押す方がUndoするより速いかもしれません。

なにもない地面を均一に隆起させました。

Heightを10に設定して隆起

Smooth Height

Smooth Heightブラシを使って高低差を滑らかにします。

Blur Directionの数値でぼかしの具合を変えられます。

実際に数値を変えて実験したところ、マイナス値の方がより滑らかになりました。

Blur Direction の値は0で滑らかにしたときの変化

Stamp Terrain

Stamp Terrainブラシはそのブラシの形をスタンプみたいにペタンと押せる機能です。

今回はStamp Heightを5にして星形の形を押してみました。

するとこんな感じ。

これで一通りのブラシの使い方は学んだかなと思います。

木や草などをいれる

今度は地形に木や草をいれていきます。

まずは木から。 

Unity Asset Storeから「Realistic Tree 9」をインポートします。

インポートが終わったらTerrainのProjectウィンドウで木のアイコンのところをクリックします。

そこのEdit Trees...を選択してAdd Treeをクリックします。

Add Treeのウィンドウが開くので、そこにインポートしたTree9の中にあるプレハブを選択してドラッグ＆ドロップします。

完了したら右下のAddを押しましょう。

これで選択したプレハブがTreesに追加されます。

Terrsに追加される

後はブラシで塗っていけば木が生成されます。

それぞれ以下の項目で設定を変更できます。

Brush Size：ブラシのサイズ

Tree Density：木が生成される密度

さらにTree Heightのランダムのチェックを外して自分で値を設定すれば大きさも変えられます。

下の様な感じで大きさが変わります。

試しに10とか大きい値を入れてみたのですが勝手に2に設定されてしまいました。

2倍の大きさまでが最大の値の様です。

Heightを2にしたときの大きさ

同じ要領で別の木も追加していきます。

色々と試しに入れてみました

今度は草を入れていこうと思います。

Unity Asset Storeで「Grass Flowers Pack Free」をインポートします。

インポートが完了したら今度はお花のアイコンを選択します。

下の方にあるEdit Detairs...からAdd Grass Textureをクリックします。

するとAdd Grass Textureウィンドウが開くので、そこにインポートしたGrassFlowersのテクスチャをドラッグ＆ドロップで設定し右下のAddをクリックします。

するとDetaisに「grass01」が追加されました。

後はお好みのブラシで画面に描画していきます。

このときの注意として、草が小さすぎて画面に描画されていないように見えますが、拡大されるとちゃんと描画されています。

何回も塗ると大量の草を発生させるので動作が重くなるので気を付けてください。

どうにかカメラアングルを調整してもこのぐらいしか映らない

ちゃんとみたいならMain Cameraを移動させて確認するか、キャラクターを設置してその場所まで歩いていくのがいいかと思います。

Main Cameraを移動

他に方法あるのかな・・・？

次回予告

• 地形制作の続き
• ユニティちゃんを走らせてみる 

今回までで大まかな地形の制作は学んだのですがもう少しだけ続きをやっていき、その後にユニティちゃんを召還してみようと思います。

本日は以上となります。最後まで読んでいただきありがとうございました！

Follow @otonasisanoto