AG02.ステージの環境作り①
このページで実装する内容
まずはこんな感じ↓にゲームの外観となる環境や操作キャラなどをひとまず実装していきます。
https://youtu.be/Mpmw6ewDhhU
😺実際のゲーム作りで一般的な流れとしては、作るゲームを決める→最低限遊べるプロトタイプのゲームを作る→色々調整したりゲームの構成を見直したりして、ゲームを本格的に作っていくというのが基本の流れになります。今回はプロトタイプの制作は省いて最初から本番用のゲームを作っていきます。
①最初のステージとなるレベルを用意する
では前回作成した「Jumper」(ゲーム名がJumper)のプロジェクトを開いておきます。
https://scrapbox.io/files/65ceed6c45613a0024b6405f.jpg
【Aルート】
最初にプロジェクトで使用するアセットをまとめておくフォルダを作成します。コンテンツフォルダで右クリック > 新規フォルダを作成 > 名前を「Jumper」にします。
https://scrapbox.io/files/65ceef2fa6055e0026346ca4.jpg
Jumperフォルダにレベルを管理するMapsフォルダを作成します。
https://scrapbox.io/files/65ceef4172c6490023dd3d03.jpg
Lerning Kit Games＞Mapsのフォルダの中にあるLerningKit Game ShowCaseを複製して、複製したレベルの名前をLEVEL1としてください。
https://scrapbox.io/files/65d5eadc13e55d0024cd798a.jpg
名前を変えたら、先ほど作成したJumper ⇒ Mapsフォルダの中にLEVEL1を移動させます。
https://scrapbox.io/files/65d612a25bf90c0025044640.jpg
複製して作成したLEVEL1のマップを開きます。
00_EnvLightingのフォルダ以外のすべてのフォルダとその中身を削除してください。
https://scrapbox.io/files/65d5eb39f985fd002440d510.jpg
設定 > プロジェクト設定を開きます。
https://scrapbox.io/files/65d5ec85f93bc20026f14956.jpg
エディタのスタートアップマップをLEVEL1に設定します。
https://scrapbox.io/files/65cef16418561400260be268.jpg
そのままプロジェクト設定は閉じます。
再生するとエラーが出ますので、レベルブループリントの中身をすべて削除してください。
https://scrapbox.io/files/65d5f7d64352790025cdf4aa.jpg
😺ではこの状態からゲームステージ環境を作っていきます!
【Bルート】
最初にプロジェクトで使用するアセットをまとめておくフォルダを作成します。コンテンツフォルダで右クリック > 新規フォルダを作成 > 名前を「Jumper」にします。
https://scrapbox.io/files/65ceef2fa6055e0026346ca4.jpg
Jumperフォルダにレベルを管理するMapsフォルダを作成します。
https://scrapbox.io/files/65ceef4172c6490023dd3d03.jpg
😸ではレベルを作成していくのですが、今回はライティングなどの設定が既に行ってあるサードパーソンのレベルを使用していきます。空のレベルを新規作成しても良いのですが、ライティングが最初から綺麗に表現されているのはサードパーソンのレベルになります。とりあえずゲーム開発を始める際には何かと既存のテンプレートプロジェクトが役に立つので活用していきましょう。
ThirdPersonのMapsフォルダにあるレベル「ThirdPersonMap」と「ThirdPersonMap_BuiltData」をJumperのMapsフォルダにドラッグで移動させます。
https://scrapbox.io/files/65cef0c45443a800268b035c.jpg
こんな感じにJumperのMapsフォルダに移動しました↓
https://scrapbox.io/files/65cef0dded206b0023f2f062.jpg
レベル「ThirdPersonMap」の名前をF2キーで「LEVEL1」にします。
https://scrapbox.io/files/65cef1045443a800268b0a5f.jpg
なお隣の「ThirdPersonMap_BuiltData」はレベルのライティングなどのサブ情報を含むアセットになります。これは無視で構いません。
🐱また今後色々と命名していくのですが、命名に関しては手順通りに同じように命名していってください。今後作るブループリント内でその名前で使用したりするので注意です。
「LEVEL1」のレベルを開きます。
https://scrapbox.io/files/65cef12cf7cc8f002d2084bb.jpg
🐱では、このレベルをこれから編集していく事になるのでエディタを開いた時のデフォルトのマップに設定しておきましょう。
設定 > プロジェクト設定を開きます。
https://scrapbox.io/files/65cef1502c0c22002567e3fe.jpg
エディタのスタートアップマップをLEVEL1に設定します。
https://scrapbox.io/files/65cef16418561400260be268.jpg
そのままプロジェクト設定は閉じます。
🐱ではライティングに関するアクタ以外はレベルに必要ないので削除していきます。
下のワールドアウトライナーのようにLightingフォルダ内のアクタ以外の全アクタを選択状態にします。
https://scrapbox.io/files/65cef17d5ceeb400237450c9.png
簡単な選択方法としてはLightingフォルダ以外のフォルダを開いてCtrl+Aで選択すると、Lightingフォルダ内のアクタ以外の全アクタを選択状態にできます↓
https://scrapbox.io/files/65cef193e9f5100024e01c98.gif
上記の様にLightingフォルダ内のアクタ以外の全アクタを選択状態にできたらDeleteで削除します。ワールドアウトライナーはこの状態になります↓World~アクタは残った状態で構いません。
https://scrapbox.io/files/65cef1a685da9a0024afd5a2.jpg
さらに空になったフォルダを削除します。Ctrl+クリックで追加選択してDeleteします。
https://scrapbox.io/files/65cef1bd19616a002785c1e1.png
「LEVEL1」のレベルの状態はこんな感じになりました↓
https://scrapbox.io/files/65cef1d13dd1f300247c8f1e.png
😺ではこの状態からゲームステージ環境を作っていきます!
②ステージの環境を作る
まずステージの土台を作っていきます。
引き続きLEVEL1のステージを開いておきます。
https://scrapbox.io/files/65cef21c40de8e0024e232f1.jpg
LearningKit_Games > Assets > Enviroment > IslandにあるSM_FlotingIsland_Sをドラッグでレベルに追加します。位置は次の値通りに入力してください。位置 → (X=-90,Y=-3670,Z=-90)
https://scrapbox.io/files/65cef2354c0667002675e3e9.png
トランスフォームのコピペ方法
上記で記載した位置の (X=-90,Y=-3670,Z=-90) はコピペする事ができます。括弧を含めてコピーしてもらって、トランスフォームの位置で右クリック > 貼り付けを選択します。またはShift+左クリックで貼り付けできます。今後のページでトランスフォームが記載されてある場合はこのようにコピペしていくと楽です。
https://scrapbox.io/files/65cef27083dbd900245881a0.gif
なお位置,回転,拡大縮小それぞれ一個ずつしかコピペはできないのでそこだけ注意です。必要なトランスフォームの値だけ記載していきます(今回のSM_Flotinglnad_Sは位置のみの変更です)。
アセットフィルタを使っていこう!
また今後アセットを探す際にはフィルタを使用すると簡単にアセットを見つけられるので活用していきましょう。作成したフィルタはクリックすると無効,有効を切り替えられます。
https://scrapbox.io/files/65cef29c832e620024c0ecbb.gif
🐱では次に一旦操作キャラを用意していきます。
③操作するキャラを用意する
今回は既存のサードパーソンのキャラクターのシステムを使用していきます。
基本からステージ上にPlayerStartを追加します。
位置 → (X=-400,Y=-3729,Z=2)
https://scrapbox.io/files/65d31cbdb76ea90024173d01.jpg
一旦プレイして確認します。とりあえず問題は無さそうです。
https://scrapbox.io/files/65d31cdebd479e002592dabf.gif
Jumperフォルダの中にBlueprintsフォルダを作成します。
https://scrapbox.io/files/65d31d807588db00245a9263.jpg
ThirdPersonのBlueprintsフォルダ内にあるBP_ThirdPersonCharacterをJumper > Blueprintsフォルダに移動させます。
https://scrapbox.io/files/65d31da67588db00245a971d.jpg
こんな感じになりました↓
https://scrapbox.io/files/65d31dc2fd60130025bbd514.jpg
BP_ThirdPersonCharacterの名前をBP_Playerに変更します。
https://scrapbox.io/files/65d31dea7fcd8000274e903c.png
😺「BP_Player」のようにブループリントクラスであれば名前の先頭に「BP_」とつけた方が後から何のアセットなのか区別が付きやすいのでお薦めです。
BP_Playerを開いてビューポートを開きます。
https://scrapbox.io/files/65d31e2a2a4e9f002499466b.png
Meshコンポーネントを選択した状態で「MESH_PC_01」にします。
https://scrapbox.io/files/65d31e53e89fa70024ee4166.jpg
https://scrapbox.io/files/65d5f707f985fd002441441a.jpg
https://scrapbox.io/files/65d5f72a7c42f90024472e87.jpg
🐱キャラはアニメーションが適用されていない硬直状態(TポーズまたはAポーズと言います)となっています。
AnimClassをThirdPerson_AnimBPに変更します。ThirdPerson_AnimBPは二つあるので選択してキャラが動く方(上のThirdPerson_AnimBP)を選択します。
https://scrapbox.io/files/65d31e837b9b76002465f087.jpg
gifでのやり方を見る↓
https://scrapbox.io/files/65d31ea0000cc8002555b889.gif
するとキャラのアニメーションが適用されます。
プレイするとキャラの見た目が変更されてアニメーションされるようになりました↓
https://scrapbox.io/files/65d31ec8592f7700268ca101.gif
【もしも影が変になってしまった場合】
プロジェクト設定を開いて、Rendering > VisualShadowMapsからShadowMapsに変更します。
https://scrapbox.io/files/65d31f384de5ef0025e7c873.jpg
再度プレイしてみましょう。影のバグが直りました。
https://scrapbox.io/files/65d31f52c09dc000261dfa06.gif
④BGMを追加する
では、次にBGMを追加していきます。
JumperフォルダにAudioフォルダを作成します。
https://scrapbox.io/files/65d31fd68cddc80025e6ae00.png
Audioフォルダで右クリック > サウンド > サウンドキューを作成して名前をA_BackgroundMusic_Cueにします。
「A_」はAudioのAで、CueはSoundCue(サウンドキュー)を示しています。
https://scrapbox.io/files/65d3200af845b50025277551.jpg
A_BackgroundMusic_Cueを開いて、アウトプットノードからこんな感じ↓に繋ぎます。WavePlayerを作成してCtrl+Dで複製し、二つ用意します。その後Mixerノードを作成して繋げます。
https://scrapbox.io/files/65d320434f415e002734162a.jpg
WavePlayerは再生する音楽の選択するノードで、Mixerは音を同時に再生させるためのノードです。
上側のWavePlayerにはStater_Music01を、下側にはStater_Wind05を選択します。
https://scrapbox.io/files/65d3207c27f38800252efd1b.jpg
さらに二つともLoopingにチェックをそれぞれ入れてループするようにします。
https://scrapbox.io/files/65d320a2d96684002565dc44.jpg
Mixerを選択してボリュームを変更しましょう。上が0.07,下を0.13にします。
https://scrapbox.io/files/65d320c24f415e0027341ae0.jpg
ここの音量はご自身の聞きやすさに合わせて適当に調整してもらって構いません。
そしたらA_BackgroundMusic_Cueを一旦レベルの適当な場所に追加しておきます。
https://scrapbox.io/files/65d320e9fd60130025bbf6a2.png
こんな感じに再生されます。YouTubeだと少し音量が小さいかもしれません。
https://youtu.be/L-2W6x_aVEM
BGMに関しては後からフェードかけて再生させていきます。
🐱ではライティングなどの見た目の部分を少し調整していきます。
⑤太陽光の調整
ライティングについては色々設定できる事はあるのですが、重要な太陽の設定だけ少し調整します。
Lightingフォルダの中にあるLight Source(DirectionalLight)を選択した状態で、トランスフォームの回転を(Pitch=295.000000,Yaw=309.000000,Roll=25.000000) にします。
https://scrapbox.io/files/65d322894266470024f958a4.jpg
😺ちなみにこのテキスト→ (Pitch=295.000000,Yaw=309.000000,Roll=25.000000) もコピーして回転の項目で右クリックからそのままペーストする事ができます。RollがXの事を指し、PitchがY、YawがZを指します。ロール(X)、ピッチ(Y)、ヨー(Z)という順番で覚えましょう。
手打ちの場合はこちら⇒ (X 25, Y 295 Z 300)
DirectionalLight > Intencity(光の強さ)を3.3にします。
https://scrapbox.io/files/65d322a298726200253c2f7b.jpg
見た目が若干変更されてこんな感じになりました↓
https://scrapbox.io/files/65d322e45d84470024d4c78f.jpg
🐱ではゴール地点のステージをひとまず配置していきます。
⑥ゴール地点のステージを配置する
コンテンツブラウザでLearningKit_Gamesフォルダを選択してフィルタにスタティックメッシュを追加します。
https://scrapbox.io/files/65d3232e4244b80026066af4.jpg
SM_FloatingIsland_Lを追加します。
https://scrapbox.io/files/65d3235fa2c1ce002443fc4a.png
位置は以下にします。
位置→ (X=8151.115377,Y=-1439.060391,Z=972.318205)
回転→ (Pitch=0.000000,Yaw=43.512304,Roll=0.000000)
拡大縮小→ (X=1.000000,Y=1.000000,Z=1.000000)
https://scrapbox.io/files/65d323967ff8ba002da3c66b.png
プレイしてみるとこんな感じになっています。
https://scrapbox.io/files/65d323c595bcf20025bfe2f6.gif
🐱次に追加したステージ二つに草を生やしていきます。
⑦草を生やす
フォリッジ(Foliage)という機能を使用して草を生やしていきます。フォリッジ(Foliage)とは草や木や石などのメッシュをレベルに大量に簡単に配置するのに便利な機能です。
選択からフォリッジモードを選択して、ペイントを選択しておきます。
https://scrapbox.io/files/65d3243879e3490024d88da7.png
次にLearningKit_Games > Assets > Environment > Foliage > FoliageTypesフォルダを開きましょう。(フィルタがかかっていればクリックして外しておきましょう)
grass(草)のみを使用したい方は、grassで検索を掛けましょう。
https://scrapbox.io/files/65d3245c95bcf20025bfe77d.png
そしたらこのフォルダ内で表示している草のスタティックメッシュフォリッジ全てをShift+クリックで選択してドラッグ＆ドロップでフォリッジウィンドウ一番下の所に追加します。
https://scrapbox.io/files/65d3248a27f38800252f301e.jpg
フォリッジウィンドウのドロップする場所は見にくい場合があるのでそんな時はコンテンツブラウザの位置を下げましょう。
スタティックメッシュフォリッジとはどんなアセット？
https://scrapbox.io/files/65d32500e1126b0026291d1d.png
今追加したスタティックメッシュフォリッジですが、フォリッジ機能対応版のスタティックメッシュといった感じのアセットです。ほぼスタティックメッシュと同じと思ってもらって構いません。このスタティックメッシュフォリッジが無い場合は、今行ったようにスタティックメッシュをフォリッジウィンドウ一番下の所に追加するとスタティックメッシュフォリッジのアセットを作成する事ができます。
次に草を塗っていきたいので、塗る草を選択します。今回は全部の草を使用して塗っていきたいのでShift+クリックで選択して全てにチェックを入れます。
https://scrapbox.io/files/65d32536a5f9b20024b090bb.gif
草だけでは寂しい方は、花や木もいれてみましょう！
https://scrapbox.io/files/65d5fd723f7a1d0025e2772d.jpg
次にブラシサイズを100,ペイントの密度を0.02にします。
https://scrapbox.io/files/65d3256749fe6e00249a7095.jpg
ブラシサイズとペイントとは？
ブラシサイズは塗る時の範囲の大きさで、ペイントの密度が草の密度になります。下記で試していきましょう。
これで左クリックを押したままPlayerStartがある方の最初のステージに塗ります。逆に生やした草を消す場合はShift+左クリックで塗ると消せます。
https://scrapbox.io/files/65d33120f80906002468b590.gif
草が生えました↓ざっくり塗ってもらって構いません。
https://scrapbox.io/files/65d33145a5f9b20024b13f4b.png
同じようにもう一つのステージも塗りましょう。塗る時に、ブラシサイズが100だと小さくて大変なので300ぐらいにしてから塗ると調整すると良いと思います。
https://scrapbox.io/files/65d331680ef294002c64c62b.png
次にフォリッジウィンドウに追加した全ての草を選択した状態で、下の設定項目を開きます。
https://scrapbox.io/files/65d331857b9b7600246693f8.gif
インスタンスセッティングにあるCastShadowのチェックを外します。
https://scrapbox.io/files/65d3319da5f9b20024b1420c.png
草のメッシュをShiftで全て選択した状態で下の詳細ウィンドウからCastShadowのチェックを外します。
https://scrapbox.io/files/65d331b95d84470024d5478f.jpg
CastShadowを外すとどうなる？
https://scrapbox.io/files/65d331e15d84470024d54994.jpg
影が無くなって草が自然に描画されています。また影の処理は基本的に重めの処理になります。必要のない影は描画しないようにするのがパフォーマンス向上のコツになります。
これで草を塗った二つのステージが用意できました。
https://scrapbox.io/files/65d3320cb5ebea00254d4b5f.png
フォリッジモードから選択モードに戻しておきます。
https://scrapbox.io/files/65d33227592f7700268d647c.png
これでこのページは以上になります。
ステージの大部分は完成!
ここまで実装した内容の確認動画です↓
https://youtu.be/Mpmw6ewDhhU
😸お疲れ様でした!次回は引き続きステージの環境を作っていきます!Shift+Ctrl+Sで保存もしておきましょう。