ユニティちゃんのRPGを作ってみよう32ータイトルシーンを作成するー | Unityを使った3Dゲームの作り方(かめくめ)

ユニティちゃんのRPGを作ってみよう32ータイトルシーンを作成するー

今回はユニティちゃんのRPGのタイトルシーンを作成していきたいと思います。

前回は村やワールドマップでカメラの視点を変更出来るようにしました。

ユニティちゃんのRPGで村やワールドマップにいる時のカメラをコントローラーの右スティックやマウス操作で視点変更出来るようにしていきます。

ユニティちゃんのRPGを作ってみようの他の記事は

から見ることが出来ます。

前回までで最初の村のVillageシーン、ワールドマップのWorldMapシーン、戦闘のBattleシーンを作成しました。

今回はゲームのタイトルシーンを作成し、スタートボタンを押したら最初の村であるVillageシーンに遷移するような機能を作成していきます。

スポンサーリンク

タイトルシーンの作成

ユニティちゃんRPGのタイトルシーンはゲームのタイトルとボタンだけ表示し、ボタンを押したらVillageシーンへと遷移させるだけでもいいんですが、タイトルシーン用にユニティちゃんを配置してみます。

ゲームタイトルはTextMeshProを使って作成します。

Assets/RPG/Scenesフォルダ内で右クリックしCreate→Sceneを選択し、名前をTitleとします。

Titleシーンをダブルクリックして開きます。

日本語のフォントをダウンロードする

タイトルシーンで使用するゲームタイトルにはTextMeshProを使用します。

日本語を使用したいので日本語のフリーフォントをダウンロードして使用させて頂きます。

以下から無料で使用できるフォントをダウンロードしてUnityに取り込みます。

個人でも商用でも無料利用できる、日本語のフリーフォント377種類を紹介します(公開時より11+8種類増えました)。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です! 去年は332

わたくしは りいてがき筆フォントを使わせて頂く事にします。

JIS第1水準および第2水準の漢字が使える日本語フリーフォント「りいてがき筆」の配布ページです。

ダウンロードしたら解凍し、Assets/TextMeshPro/Resources/Fonts&MaterialsフォルダにRiiT_F.otfファイルをドラッグ&ドロップします。

TextMeshPro用のフォントアセットの作成

Assets/TextMeshPro/Resources/Fonts&Materials/RiiT_F.otfを選択した状態で右クリックしてCreate→TextMeshPro→Font Assetを選択します。

するとRiiT_F SDFファイルが作成されます。

名前をTitleLogSDFに変更します。

ゲームタイトルロゴの作成

まず最初にゲームタイトルのロゴを作成します。

ゲームタイトルのロゴは以前ダメージポイントの表示の際に使ったTextMeshProを使って作成します。

ヒエラルキー上で右クリックからUI→Text – TextMeshProを選択します。

Canvasとその子要素にText(TMP)が作成されます。

CanvasのCanvas ScaleのUI Scale ModeをScale With Screen Sizeを設定し、Reference ResolutionのXを1024、Yを768とします。

ユニティちゃんRPGのタイトルシーンのCanvasの設定

Text(TMP)を選択します。

Text(TMP)のMain Settingsの設定

Text(TMP)のインスペクタのText Mesh Pro UGUIのMain Settingsを設定していきます。

Anchor Presetsでtop stretchにします。

Rect TransformのHeightを300にします。

Textにはゲームのタイトルを入力します。

今回は『ユニティちゃんの冒険』というタイトルにしました。「ユニティちゃんの」で改行を入れた後「冒険」を入力します。

Font Assetに先ほど作成したTitleLogSDFを設定します。

Font Sizeを100にします。

Alignmentは真ん中にします。

ユニティちゃんRPGのゲームタイトルのMain Settings

Text(TMP)のExtra Settings

Text(TMP)のインスペクタのText Mesh Pro UGUIのExtra Settingsの設定をします。

FaceのTextureにユニティちゃんのモデルに使用されている服のテクスチャを設定し、Thicknessを0.1にします。

Lightingにチェックを入れ、BevelのAmountを1にします。

ユニティちゃんRPGのタイトルロゴのExtra Settingsの設定

出来たタイトルロゴは以下のようになります。

ユニティちゃんRPGのゲームタイトルロゴ

Text(TMP)の設定は任意なので色々試してみてください。

タイトルを少し見やすくする

タイトルロゴが背景と混じって見えづらくなるのでパネルを作成し、タイトルロゴの後ろ全体に白く薄い背景が写るようにします。

Canvasを選択した状態で右クリックからUI→Panelを選択します。

ColorのRGBを全て200にし、Aを100にします。

Canvasの階層は以下のようになりました。

ユニティちゃんのRPGのタイトルシーンのCanvasの階層

背景の作成

次にタイトルシーンの背景を作成します。

背景には通常のTerrainで作った地面と木を生やしてそれを映すような位置にカメラを移動させて作ります。

ヒエラルキー上で右クリックから3D Object→Terrainを選択します。

Assetsフォルダに作成されたTerrainファイルの名前をTitleSceneTerrainとし、Assets/RPG/FieldフォルダにTitleフォルダを作成しその中に移動させます。

Terrainでの地面の作成や草や木を生やすのは以前の記事でやっていますので、同じような感じでカメラに映る範囲だけを作成します。

ユニティちゃんのRPGでTerrainを使って村の作成をしていきます。

ここまで作成して以下のような感じにカメラに映るようにMain Cameraを移動させました。

ユニティちゃんのRPGのタイトルシーンの背景

ユニティちゃんの配置と設定

背景の地面と木だけでは少し寂しいのでユニティちゃんを配置します。

カメラに近い木の近くにUnityChan/Prefabs/unitychan_dynamicをヒエラルキー上にドラッグ&ドロップします。

ユニティちゃんをカメラの方向に向かせるようにTransformのRotationのYを変更します。

ユニティちゃんのRPGのタイトルシーンでユニティちゃんの向きを変える

ユニティちゃんのAnimatorControllerを作成する

ユニティちゃんのAnimatorに設定するAnimator Controllerを作成します。

Assets/RPG/Animators/Allyフォルダに新しくTitleUnityChanを作成します。

ユニティちゃんRPGのタイトルシーンのユニティちゃんに設定するアニメーターコントローラーの遷移

Pose状態を作成し、アニメーションクリップにUnityChan/AnimationsフォルダのPOSE12を設定します。

ユニティちゃんのRPGで移動キーを押した時にユニティちゃんが動くようにしていきます。

で作成したように顔用のレイヤーを作成し、unitychan_dynamicに取り付けられているIdle_Changerの横のチェックを外し無効にします。

これでアニメーターコントローラーが出来たのでヒエラルキーのunitychan_dynamicゲームオブジェクトのAnimatorにTitleUnityChanアニメーターコントローラーを設定します。

これで以下のようになりました。

ユニティちゃんRPGのタイトルシーンのユニティちゃん

大鳥ゆうじの配置と設定

次は大鳥ゆうじを配置します。

UnityChanTPK/Models/04_yuji/Prefabs/04_yujiをヒエラルキー上に配置します。

04_yujiの子要素のmodel_grp子要素のSwordを選択し、インスペクタで名前の横のチェックを外し見えないようにしておきます。

大鳥ゆうじは木に背をかけて座っているようなポーズにします。

そういったアニメーションクリップを持っている場合はユニティちゃんと同じようにアニメーターコントローラーを取り付けそのアニメーションクリップを設定するだけです。

今回は良さげなアニメーションクリップがなかったのでIKを使って大鳥ゆうじにポーズを取らせます。

ヒエラルキー上で右クリックしてCreate Emptyを5回選択し、名前をそれぞれ

YujiRightHandIK
YujiLeftHandIK
YujiRightFootIK
YujiLeftFootIK
YujiLeftElbowIKHint

とします。

大鳥ゆうじのアニメーターコントローラーの作成

次に大鳥ゆうじ用のアニメーターコントローラーを作成します。

Assets/RPG/Animators/Allyフォルダで右クリックからCreate→Animator Controllerを選択し、名前をTitleYujiとし、ヒエラルキー上に配置した04_yujiのAnimatorに設定します。

Animatorウインドウで右クリックからCreate State→Emptyを選択し、名前をPoseとしアニメーションクリップにはAssets/Standard Asset/Characters/ThirdPersonCharacter/Animation/HumanoidIdleを設定します。

HumanoidIdleのアニメーションだと下半身が微妙に動いているので、新しいレイヤーを設定し、下半身だけを別のアニメーションクリップで上書きしてなるべく動かないようにします。

AnimatorウインドウのLayerタブで+を押して新しいレイヤーを作成しLower Layerという名前にします。

ユニティちゃんRPGのタイトルシーンの大鳥ゆうじのアニメーターコントローラーの新しいレイヤーの作成

次にAssets/RPG/Animators/Allyフォルダ内で右クリックからCreate→Avatar Maskを選択し、名前をLowerAvatarMaskとします。

LowerAvatarMaskのインスペクタでHumanoidの上半身部分をクリックし、下半身の緑の部分だけを適用します。

ユニティちゃんRPGのタイトルシーンの大鳥ゆうじのアバターマスク

AnimatorウインドウのLower Layerの右の歯車を押してWeightを1、Avatar Maskに先ほど作成したLowerAvatarMaskを設定します。

Lower Layerを選択し、右クリックからCreate State→Emptyを選択し、名前をLower Poseとします。

Lower Poseには以前インポートしたC&C_Pack/Goblin_rougeのidleを設定しました。

ユニティちゃんRPGのタイトルシーンの大鳥ゆうじの下半身部分だけを別クリップにする

これでBase LayerのPoseのアニメーションクリップの下半身部分だけがC&C_Pack/Goblin_rougeのidleのアニメーションになります。

Base Layerの右の歯車を押して、Ik Passにチェックを入れておきます。

IK Passにチェックを入れると左右の手と足のIKを操作する時のメソッドが呼ばれます。

ユニティちゃんRPGのタイトルシーンの大鳥ゆうじのBase Layer

これでアニメーターコントローラーの作成と設定が終わりました。

IKを操作するスクリプトの作成

アニメーターコントローラーのレイヤーのIK Passにチェックを入れたことでスクリプトでOnAnimatorIKメソッドが呼ばれるようになります。

このOnAnimatorIKメソッド内でIKのウエイトや位置と角度の設定等が行えます。

Assets/RPG/Scripts/Characterフォルダに新しくYujiIKScriptスクリプトを作成しヒエラルキー上の04_yujiに取り付けます。

ヒエラルキー上に作成したYujiRightHandIK等をインスペクタで設定出来るようにしています。

OnAnimatorIKメソッド内でIKのウエイト(1だと完全一致、0だとIKの効果なし)の設定をし、

右手のIKをどの位置や角度にするか?などを設定しています。

今回の場合はずっと同じポーズにするのでウエイトは全て1にして、各部位は先ほどヒエラルキー上に作成した空のゲームオブジェクトの位置や角度に合わせています。

左ひじはIKHintで肘の方向を位置で指定出来るだけです。

IKに関しては

UnityのIKを使ってキャラクターが物を運んでいるようなアニメーションを作成していきます。

等を参照してみてください。

IKはInverse Kinematicsの略で右手、左手、右足、左足の位置や角度によってそこに連結している他のボーンの位置が決定されることです。

大鳥ゆうじが座っているようにIK用のゲームオブジェクトを移動させる

大鳥ゆうじが座っているように見せる為、作成したYujiRightHandIK等のゲームオブジェクトを移動させたり回転させます。

シーンビュー上で動かしてもスクリプトでIKを設定しているので反映されません。

なのでUnityのプレイボタンを押した状態でYujiRightHandIKのゲームオブジェクト等を移動させます。

移動や回転をしたら、実行中にYujiRightHandIKのインスペクタのTransformの右の歯車を押してCopy Componentを選択します。

ユニティちゃんRPGのタイトルシーンでIKの決定した位置をコピー

再生ボタンを押して停止後にYujiRightHandIKのTransformの右の歯車からPaste Component Valuesを選択します。

ユニティちゃんRPGのタイトルシーンでIKの決定した位置をペースト

これを04_yuji自身の移動や回転と、IK用に作ったゲームオブジェクト5つを移動や回転させてポーズを完成させます。

わたくしの場合は以下のようなポーズにしました。

ユニティちゃんRPGのタイトルシーンの大鳥ゆうじのポーズ

大鳥ゆうじを配置した場所が草で見えなかったり、よりかかる木が配置されていなかったら

Terrainの草や木を選択した状態でシーンビューでShiftキーを押しながらその木や草をクリックすると消すことが出来、木はBrush Sizeを1にすると1本ずつ生やせます。

ここまでのタイトルシーンは以下のようになりました。

ユニティちゃんのRPGのタイトルシーンに大鳥ゆうじを追加したサンプル

はじめからボタンの作成

タイトルシーンのタイトルロゴと背景が出来たので後はゲーム開始ボタンを作成して最初の村であるVillageシーンを読み込むようにします。

ヒエラルキー上のCanvasを選択した状態で右クリックからUI→Button – TextMeshProを選択します。

Assets/TextMesh Pro/Resources/Fonts&Materials/TitleLogSDFを選択し、Ctrl+Dキーを押して複製し、名前をTitleButtonSDFとします。

先ほど作ったボタンの子要素のText(TMP)を選択し、Font AssetにTitleButtonSDFを設定します。

Buttonとその子要素のText(TMP)の設定はおまかせします。(´Д`)

わたくしは以下のような感じにしました。

ユニティちゃんのRPGのタイトルシーンのはじめからのボタン

大鳥ゆうじが地面に埋まっているのはIKが実行中しか反映されない為です。(^_^;)

LoadSceneManagerを配置とLoadSceneManagerスクリプトの追加

VillageシーンのSceneManagerゲームオブジェクトを選択した状態でCtrl+Cキーでコピーし、Titleシーンのヒエラルキー上でCtrl+Vキーで貼り付けます。

SceneManagerゲームオブジェクトに取り付けてあるLoadSceneManagerスクリプトに追加します。

新しくStartGameメソッドを追加します。

FadeAndLoadSceneメソッドにシーンタイプがStartGameだった時の処理を追加します。

今回は最初の村のシーンVillageを読み込むのでシーンタイプがFirstVillageの時と同じ処理をさせます。

本来であれば最初のシーンの前のゲーム導入部のシーン等に遷移させます。

これでスクリプトに追加が終わりました。

はじめからボタンを押した時に実行する処理を設定する

はじめからボタンを押した時にLoadSceneManagerスクリプトのStartGameメソッドを実行するようにします。

ボタンの設定なども確認してください。

ButtonのHighlighted Colorを赤色にします。

On ClickにLoadSceneManagerゲームオブジェクトのStartGameメソッドを設定します。

ユニティちゃんのRPGのタイトルシーンのはじめからボタンを押した時に実行するメソッドの設定

BGMを設定する

タイトルシーンのBGMの設定をします。

Main Cameraを選択し、Add ComponentからAudio→Audio Sourceを選択し取り付けます。

ユニティちゃんのRPGで村人の移動機能と会話機能をプレハブにしたり、村のBGMを流すようにしてみます。

の記事でインポートしたRPG Gameの音楽フォルダであるRPG Game Music/Intro of DragonsをAudio SourceのAudioClipに設定し、PlayOnAwakeとLoopにチェックを入れます。

これでBGMの設定は終了です。

これでタイトルシーンがとりあえず出来ました。

タイトルシーンをBuild Settingsに登録する

タイトルシーンが出来ましたのでFile→Build Settings…を選択して、Titleシーンをドラッグ&ドロップして登録します。

ユニティちゃんRPGのBuildSettingsにTitleシーンを追加する

ゲーム開始時はTitleシーンから始めたいのでTitleシーンを一番上にします。

実行して確認してみましょう。

上のようになりました。

終わりに

今回タイトルシーンを作成しましたが、常にはじめからしかゲームを開始出来ません。

次回ゲームデータのセーブとロード機能を作成した後に、タイトルシーンに『つづきから』ボタンを作成する事にします。

またUI要素を選択状態にしておく処理も次回の記事内で作成する事にします。

次回のゲームデータのセーブとロード機能を実装してこのユニティちゃんのRPGを作ってみようのコンテンツも終了です。

みなさんがんばりましょう!(^^)/

ユニティちゃんライセンス

この作品はユニティちゃんライセンス条項の元に提供されています

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます