auの日記

プログラミング初心者の日記。(auはハンドルネームです)

Unreal Engine4の本を半分読んだ初心者が100時間でゲームを完成させてみた

auです。

UE4の本を半分ちょっとやったので、「これは一本ゲームを作れるのでは・・・!?」と思ったので制作してみることにします。

制作期間はざっと100時間で完成させています。

半分ちょっとやった本はこちら

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

実際に完成したゲーム


Unreal Engine4でゲームを作ろうと思ったきっかけ

UE4Festに参加してみて、実際にどんなものがあるのかを見聞きしたり、インターン先でUE4の今後はこうなるんじゃないかという話を聞いたことが、UE4を始めるきっかけでした。インターン先で話たときに、ドットイートゲームを作る方針も決めていました。

その時の記事もあるので読んでみてください。

program-shoshinsya.hatenablog.com

program-shoshinsya.hatenablog.com

言い訳

最初は記事を書きながらやって行く予定でした・・・がしかし、途中から作る方に熱中してしまい、やり始めとやり終わった後だけ記事を書いているという状況になってしまったため、中が抜けているような状態になっています。

それでも、初心者なりに頑張って動くゲームを作ったので、ちょこちょこでも読んで頂けるとハッピーです。

今回作ったゲームはGithubで公開しています。Google Drive内にパッケージとして置いておくので是非プレイしてください。起動方法などはGithubのREADMEを読んでください。

github.com

drive.google.com

目次

環境

UE4バージョン: 4.20.3
OS: macOS High Sierra 10.13.6 問題発生後: macOS Mojave 10.14.3

この時の問題を解決するためにMojaveにアップデートしました。ちなみに関係ありませんでした。

program-shoshinsya.hatenablog.com

ゲームの流れの案

とりあえず、ゲームの流れを決めていこうと思います。

今回のテーマは「ドットイートゲーム」を作っていこうと思います。簡単にいうと、目標(ドット)を、プレイヤーキャラクターが通過して消していくというシンプルなゲームのことです。全てのドットを回収したらゲームクリアとします。

画面の遷移

スタート画面→ゲームプレイ画面→ゲームクリア画面→スタート画面...(以下ループ)
      (もし死亡したら)↘︎ゲームオーバー画面↗︎
            
f:id:program-shoshinsya:20190301114357j:plain

図にするとこんな感じ・・・?

画面の追加などは作成中に考えたいと思います!
(この後、ポーズ画面を追加するのであった...)

ゲームシステム案・実装手段案

  1. 使うものはスターターコンテンツとデフォルトである物を主に使用したいと考えています
  2. C言語は勉強はしましたが、UE4でのC++の扱い方がよくわかってないので今回はブループリントで実装する
  3. コインのようなものを配置し、何枚持っているかを画面に表示する
  4. 落ちると死亡
  5. スイッチを踏むと扉が開く
  6. コインを一定数集めるとゲームクリア

ゲームにはなると思うので、とりあえずこんな感じにします。

タイトル画面を作る

一番最初に出てくるのでタイトル画面を作ろうと思います(どこから作るのが正解なんだろう)

残念ながらタイトル画面の作り方は、参考にした本の読んだ範囲にはありませんでしたので、自力でググりながら作ってみようと思います。

いい感じの記事を見つけたので、UE4でタイトル画面の作成 - Qiitaを参考に作ってみようと思います。
スタートボタンは公式サイトを参考にしました。Unreal Engine | 3.メインメニューを作成する

タイトル画面を作るためにウィジェットを作成

コンテンツブラウザで右クリックをして、ユーザーインターフェースウィジェットブループリントを作成します。名前は「Start_Display」にしました。
f:id:program-shoshinsya:20190204115421p:plain:h320

画面左にある「パレット」から、一般→Imageを画面にドラッグ&ドロップして、点線の位置まで広げます。点線の位置が表示される範囲になるみたいですね。分かりやすい。
f:id:program-shoshinsya:20190204115711p:plain:h320

次に、アンカーと呼ばれるものを設定します。ゲームの画面のサイズを変更したときの基準となる位置を決めるものです。画面全体に固定したいので、右下の大きいやつを選びました。
f:id:program-shoshinsya:20190204115841p:plain:h320

タイトルウィジェットに配置していく

タイトルを作成していきます。

左の「パレット」から、一般→Textをドラッグ&ドロップします。

f:id:program-shoshinsya:20190204121054p:plain:h320

画面右の「詳細」パネルの一番上に"Title"と入力し、Contentの中ドットゴールと入力します。

あれ・・・何も表示されない・・・と思ったのですが、白の背景に白の文字のため見えていないだけでした。

タイトルの文字色を変更する

「詳細」パネルの下にある、Appearanceの"Color and Opacity"の左にある▶︎をクリックしてタブを開いたりして、好みの色に変更します。

f:id:program-shoshinsya:20190204121504p:plain:h320

文字を大きくする

Appearanceの"Font"の▶︎をクリックしてタブを開き、好みの大きさに設定するだけです。
縁などを装飾して、とりあえずこんな感じになりました。(センスがこい)

f:id:program-shoshinsya:20190204122626p:plain:h320

スタートボタンを作成する

「パレット」の一般→Buttonをドラッグ&ドロップします。名前は「Start_button」にしました。
f:id:program-shoshinsya:20190204125435p:plain:h320

ボタンの位置や大きさの変更は、「詳細」パネルの"スロット"のxとyを変更して調節します。
f:id:program-shoshinsya:20190204131035p:plain:h320

次に、ボタンに文字列を挿入します。「パレット」の一般→テキストをドラッグ&ドロップして配置した後、左の「階層」のStart_buttonにドラッグ&ドロップをして、子階層にします。

f:id:program-shoshinsya:20190204130528p:plain:h320

ボタンの中にテキストが表示されました!タイトルと同じようにテキストの変更やフォントサイズや色を変更します(割愛)。

f:id:program-shoshinsya:20190204131717p:plain:h320

とりあえずこんな感じになりました!

タイトル画面の背景が白いままじゃ味気がないので、レベル1(ステージ1)に配置したオブジェクトを眺めているような画像に変更します。

タイトル画面の背景を設定する

上記でも記したように、レベル1を眺めるようにする関係で、レベル1はすでに完成済みです。(順番が入れ替わってしまってごめんなさい)

どのようにするかのイメージとしては、Secene Capture 2Dを使って、写真のように残します。その写真をそのまま背景に割り当てるイメージです!(伝わって)

それではやっていきましょう!

このような感じの構図をそのままタイトル画面の背景にしようと思います。

f:id:program-shoshinsya:20190301121105p:plain:h320

「モード」パネルから、Scene Capture 2Dをレベル内に配置。

f:id:program-shoshinsya:20190301121454p:plain:h480:h320

コンテンツブラウザに移動して、マテリアルテクスチャ→描画ターゲットを作成。名前は「DGTitlePicture」にしました。

f:id:program-shoshinsya:20190301121815p:plain:h320

DGTitlePictureを右クリック→マテリアルを作成を選択して作成。名前は「DGTitlePicture_Mat」にしました。

f:id:program-shoshinsya:20190301122111p:plain:h320

コンテンツブラウザの「DGTitlePicture_Mat」をダブルクリックして、ブループリントエディタを起動。"Texture Sample"ノードをクリックして、「詳細」パネルのMaterial Expression Texture BaseのTextureに、「DGTitlePicture」が適用されていることを確認してください。

適用すると、真っ暗な背景から、Scene Capture 2Dを通した写真が適用されると思います。実際に試したわけでもないのですが、Scene Capture 2Dを動くように設定してあげると、タイトルの背景も動くようにできるらしいです。

次に、「DGTitlePicture_Mat」ノードをクリックして、詳細パネルの"Material"のMaterial Domeinを「User Interface」に変更してください。これをしないとUIとして使うことができません。

f:id:program-shoshinsya:20190301124405p:plain:h320

いよいよ写真を適用していきます!

コンテンツブラウザに戻り、「Start_Display」ウィジェットを開きます。

「階層」パネルのImageをクリックして、「詳細」パネルのAppearanceのImageに「DGTitlePicture_Mat」を適用します。ついでに、Imageの名前を「Back_Ground」に変更しました。

解像度がとても低いですが、背景にすることができました。なんでこんなに荒いのかはよく分かりませんでした。

f:id:program-shoshinsya:20190301164810p:plain:h320

実際にプレイした時にタイトル画面を表示できるようにする

特に難しいことはありません。レベルを作成して、先ほど作ったウィジェットブループリントを適用するだけです。

まずは、土台になるレベル(ステージ)を作成します。

ファイル→新規レベル→空のレベルを選択して作成します。名前は「Title_map」にしました。

ツールバーブループリント→レベルブループリントを選択

f:id:program-shoshinsya:20190204123426p:plain:h320

"イベントBegin play"ノードから実行ピンを伸ばし、ユーザーインターフェースウィジェットの作成を選択します。検索機能を使うと楽です。
f:id:program-shoshinsya:20190204123603p:plain:h320

Classには、自分が作成したものを設定します。
f:id:program-shoshinsya:20190204123734p:plain:h320

"ウィジェットを作成"ノードの実行ピンを伸ばし、UI→ビューポート→Add to Viewportを選択します。"ウィジェットを作成"のReturn Valueを"Add to Viewport"に接続します。
f:id:program-shoshinsya:20190204123953p:plain:h320

コンパイルを実行し、「プレイ」してみると、作成した画面が出てきました。
f:id:program-shoshinsya:20190204124322p:plain:h320
(なんとなくずれてるしフォントのサイズが大きすぎた・・・)

細かい調整はあとで行いましょう!

スタートボタンを押すとゲームが始まるようにする

スタートボタンを実際に作って配置しましたが、このままではただ押せるだけのボタンです。ブループリントでスクリプトして、ゲームプレイ画面に遷移するようにしましょう!

今の段階では、遷移するレベルを用意してなかったので、この段階でもう1つレベルを作りました。今度は実際にキャラクターを動かしたりするので、「Default」で作成しました。名前は「First_map」にしました。

コンテンツブラウザの「Start_display」ウィジェットをダブルクリックして開きます。

右上にあるモード変更パネルで、デザイングラフからグラフに切り替えます。

f:id:program-shoshinsya:20190204143229p:plain:h320

「マイブループリント」パネルの変数で、"Start_button"をクリックし、「詳細」パネルの"On Clicked"のをクリックして、"On Clicked(Start_button)"がブループリントに配置されます。

f:id:program-shoshinsya:20190301173640p:plain:h320

"On Clicked(Start_button)"は、Start_buttonをクリックした際の処理を設定することができます。

"On Clicked(Start_button)"から実行ピンを伸ばし、"Open Level"を配置します。

f:id:program-shoshinsya:20190204145742p:plain:h320

コメントにも書いてあるのですが、Startボタンを押した際に、次に開くレベル名を、Classに指定して開きます。

これで、スタートボタンを押した際に、「First_map」に移動することができるようになりました。

(完成後)ゲーム終了ボタンの作成

ゲーム終了ボタンは、実際にゲームを完成させて、パッケージ化も終わってから設定しました。

実際にMacでプレイしてみたら、フルスクリーンで実行されて、自力で閉じるのに強制終了が必要になってしまったからです。

と言っても、やることはStart_buttonと変わりません。ただ、押した際の処理を変えただけです。

f:id:program-shoshinsya:20190301174427p:plain:h320

キャラクターの作成

最終的にキャラクターは、ThirdPersonで新しくプロジェクトを作り、ThirdPersonBPのファイルを直接持ってきて、それを使うという荒技に出たため、オレンジの男は消滅しました。

自分に対してのメモ程度に残しておきたいので、このまま書かせてください。

                                                                                                                                                                                                                  • -

キャラクターの素材探し

とりあえずキャラクターになる素材を探していこうと思います。そんなガッチガチの超絶リアル人間はいらないので、探していたら、どうやらデフォルトで用意されているみたいなのでそれを使おうと思います。

今回参考にしたサイトは
Unreal Engine | 1.キャラクターのセットアップ
です。

キャラクターのモデルを設定する

コンテンツブラウザで新しいフォルダ「Character」を作成します。作成したフォルダ内で右クリックをして、アニメーション→アニメーションBPを選択しましょう。

f:id:program-shoshinsya:20190204152053p:plain:h320

「アニメーションBPを作成」のウィンドウが出たら、一番下のTurorial_Skeletonを選択します。一番人間ぽかったというか、3択の中の唯一の人間でした。名前は「My_Animation」にしました。(他はただのブロックでした)

f:id:program-shoshinsya:20190204152102p:plain:h320

コンテンツブラウザに戻り、Characterフォルダで右クリックをして、ブループリント クラス→Characterを選択します。名前は「My_Character」にしました。

My_Characterをダブルクリックしてブループリントを開きます。

コンポーネント」パネルにある、"Mesh"を選択して、「詳細」パネルの"Skeletal Mesh"にTutorial PPPを設定します。

f:id:program-shoshinsya:20190204153744p:plain:h320

このままだと、カプセルコンポーネントから離れてしまっているので手動で直します。

「詳細」パネルの"トランスフォーム"の位置Zを-90、回転を-90に設定します。

f:id:program-shoshinsya:20190204154113p:plain:h320

こんな風にカプセルコンポーネントに収まって、右を向けば大丈夫です。

そのままアニメーションを設定してしまいます。

「詳細」パネルの"Animation"のAnim ClassをMy_Animationに設定します。

f:id:program-shoshinsya:20190204154457p:plain:h320

最後にコンパイルをしてキャラクターのモデル作成は終わりです。

一人称視点を三人称視点にする

今のままプレイしても、一人称視点になっているため、ドットイートゲームにはあまり適していません。なので、見下ろせる感じの三人称視点に変更したいと思います。(今の時点ではプレイヤーはオレンジの男ではないため、確認はできません)

コンテンツブラウザのCharacter→My_Characterをダブルクリックして、ブループリントエディタを開きます。

左上の「コンポーネントを追加」をクリックして、"Spring Arm"と"カメラ"を追加し、"Spring Arm"の子階層に"Camera"を設定します。

f:id:program-shoshinsya:20190204155726p:plain:h320

まずは、"Spring Arm"コンポーネントをクリックして、「詳細」パネルを編集します。

トランスフォームの位置Zを50.0にして、CameraのSocketのZを30.0に設定し、Use Pawn Control RotationをONに設定しました。

f:id:program-shoshinsya:20190204163344p:plain:h320

"Character Movement"コンポーネントをクリックして、「詳細」パネルを編集します。

Orient Rotation to Movement、Use Controller Desired Rotation、Ignore Base RotationをそれぞれONにします。

それぞれバラバラの場所にあるので、検索を活用します。

ここで、Walk Speedと検索することで、移動速度を調整することができます。実際にプレイしてから決めていこうと思うので、この段階では無視しようかなと思います。

使うか分からないけど、マイブループリントの左下にある変数の+をクリックして、JumpSpeedとCrouchSpeedを追加します。ジャンプとしゃがみの時のスピードを設定できるようにする設定です。

最後に、コンパイルして保存しましょう。

このままスタートしても、三人称視点にはなりません。それは次の項目で設定していきます。(若干のタイトル詐欺な気がする)

入力マッピングを設定する

オレンジ色の男を使えるようにするために、入力マッピングを設定していきたいと思います!

入力マッピング

コンテンツブラウザのCharacterフォルダで、ブループリントを新規作成します。親クラスはGame Mode Baseを選択します。名前は「My_Gamemode」にしました。

f:id:program-shoshinsya:20190204170323p:plain:h320

ダブルクリックしてブループリントエディタを開きます。

「詳細」パネルの"Classes"の中にある、"Default Pawn Class"をMy_Characterに設定します。

f:id:program-shoshinsya:20190204170544p:plain:h320

次に、キャラクターを動かすためのキー入力を設定します。

一番上のメニューバーから、編集→プロジェクト設定を選択します。

f:id:program-shoshinsya:20190204171155p:plain:h320

エンジン→インプットの中の、Action Mapping、Axis Mappngにはそれぞれこのように設定しました。

f:id:program-shoshinsya:20190204190932p:plain:h320

前後左右移動、ジャンプ、そして使うかわからないしゃがみを入れました。

先ほど設定した、"My_Gamemode"のゲーム設定を適応します。

同じくプロジェクト設定のプロジェクト→マップ&モードを選択します。

f:id:program-shoshinsya:20190204172717p:plain:h320

これでプレイしてみると、まだプレイヤーを動かすことはできないですが、後ろを取ることはできました。

f:id:program-shoshinsya:20190204172956p:plain:h320

入力マッピングを使ってキャラクターを動かす

前の項目で、入力マッピングを実装しました。今度はそれを使ってオレンジ色の男を実際に動かして見ます。

コンテンツブラウザのCharacterフォルダを開き、My_Characterのブループリントエディタを起動します。

前回の項目で設定した"MoveForward"と"MoveRight"を呼び出し、"Add Movement Input"に対応したピンに接続します。そして、"インプットアクションJump"を呼び出して、Pressedの実行ピンを"Jump"に繋げます。

f:id:program-shoshinsya:20190204184439p:plain:h320

プレイしてみます。WASDキーを入力すると、それぞれ前後左右に動いて、Spaceキーでジャンプしました!

しかし、このままではカメラが回転できないので、カメラの設定をしていきます。カメラは、マウスかコントローラーの右スティックで移動できるようにします。

やり方は移動の時とほぼ同じです。

f:id:program-shoshinsya:20190204190840p:plain:h320

これでも、今のままだとカメラが回転しても移動する方向は変わりません。ものすごく操作性が悪いのでカメラを基準にして移動方向も変わるように設定していきます。

移動する方向は"Add Movement Input"の"World Direction"の値で決めているので、そこの値をカメラ基準にするように変更します。

"World Direction"からピンを伸ばして、前後方向なら"Get Forward Vector"、横方向なら"Get Right Vector"を使用します。

呼び出す際に(Camera)を選択します。

f:id:program-shoshinsya:20190204192513p:plain:h320

あとは"Camera"から横移動の方にも繋げてあげます。

f:id:program-shoshinsya:20190204192206p:plain:h320

これでキャラクターに必要な動きの実装はできました!











ステージ1(First_map)の作成

最初に書いていた時期に書いていたものもあるため、最終的にはちょこちょこ変化させています!!作り方メモみたいな感じで残しておくだけなので、最終的なものとは変わります。

ステージ1(First_map)を作成しようと思います。

タイトルから遷移するために作った「First_map」を編集して作ります。

回る棒みたいなのを作る

スーパーマ○オサンシャ○ンのアスレチックに出てくる、くるくる回る長い棒みたいなのを再現してみます。(好きだった人には伝わるはず)

完成品はこちらです。

f:id:program-shoshinsya:20190301180532p:plain:h320

テストマップを作って、そっちで作業をします。

テストマップじゃなくてもいいじゃん!って思うかもしれませんが、今後のことを考えてちゃんとテストマップでやろうと思います。記事にもしたのでよかったら読んでください。

program-shoshinsya.hatenablog.com

新規レベル「Default」で、レベル名「Test_Roring」を作成しました。

「モード」パネルの基本→キューブを選択して、レベル内に配置します。

f:id:program-shoshinsya:20190301181407p:plain:h320

右下にある「詳細」パネルのブループリントを編集をクリックして、Blueprintsフォルダに、名前「DGRoringBox」で保存しました。

ビューポートが表示されていると思うので、こちらから設定していきましょう。

「詳細」パネルのトランスフォームを、X40, Y5, Z5でそれぞれ設定します。可動性も「ムーバブル」に設定します。これをしないと、動くアクタを作ることができないので絶対に設定してください!

スーパーマ○オサンシャ○ンに出てくる棒は、お邪魔用のトゲトゲみたいのが付いてたと思うのでつけます。

左上のコンポーネントを追加から、キューブ2つと球1つを追加して、くっつけるようにします。大きさなどはいい感じにしましょう。

このままの見た目だとあまりかっこよくないので派手にいきましょう!

「詳細」パネルのMaterialsを「BoneWeightMaterial」に変更しました。虹色になった!

次に、ブループリントで回転するように設定します。

f:id:program-shoshinsya:20190301183409p:plain

タイムラインは、10秒で360進む(1回転分)ように設定しました!ループをするように設定しているので、ずっと回り続けます。

f:id:program-shoshinsya:20190301183441p:plain

これでブループリントの設定は終わりです。

実際にテストレベルに配置してみて、どう動くかを確認しましょう!

Gifがずっと「アップロード中」になってしまって貼れないのですが、ちゃんとそれっぽく回ってくれました!

コイン的なものを作る

マ○オブラザーズに出てくるコインのような、取得すると枚数が増えていくような機能を実装しようと思います。

コンテンツブラウザの、コンテンツ→StarterContents→PropsにあるMaterialSphereが、「パックマンに出てくるお米みたいでいいな!」(小さい粒みたいなやつ)と思ったのでこれにします。StarterContents内のMaterialSphereをダブルクリックして、スタティックメッシュエディタを開きます。

f:id:program-shoshinsya:20190205151837p:plain:h320

黄色のスタティックメッシュを適用しました。より一層パックマンのお米みたいになりました。(スタティックメッシュで合ってるのかな?)

レベルエディタに戻って、レベル内に配置します。その後、「詳細」パネルの"ブループリントを編集"をクリックして、Blueprintsフォルダの中に入れます(作っていなかったので作っておきました)。名前は「DGPickupCoinActor」にしました。

f:id:program-shoshinsya:20190205152035p:plain:h320

先ほど作った、DGPickupCoinActorをダブルクリックして、ブループリントエディタを開きます。

このままだと大きすぎるので、トランスフォームの"拡大・縮小"のxとyをそれぞれ0.5に縮小しました。

そして、左上の「コンポーネントを追加」をクリックして"Box Collision"を追加します。そのままだと小さすぎてしまったので、「詳細」パネルの"Shape"でそれぞれ50.0に変更しました。

f:id:program-shoshinsya:20190205152633p:plain:h320

コインは1度触れたら消えるように設定します。ブループリントに"On Component Begin Overlap"を追加し、実行ピンを"Destroy Actor"に繋げます。

f:id:program-shoshinsya:20190205153608p:plain:h320

これで、コインに触れると消えるようになりました!

コイン取得した場合に所持枚数を増えるようにする

コインに触れたら、コインの所持枚数を増やさなくてはゴールすることができません。

操作キャラがコインに触れた場合に、枚数が増えるようにします。

"My_Character"のブループリントエディタを開いて、変数の追加を行います。その際、コインは1, 2, 3と数えるので、Integer型で「NumOfCoin」定義します。この際に、ゴールに必要なアイテムをBoolean型で「EndItem」もついでに宣言しておきました。

f:id:program-shoshinsya:20190205154514p:plain:h320

コインを取得したら、コインを表示する関数を追加します。

「マイブループリント」パネルの関数の+を押して、新しい関数「Add Coin」を追加します。

Add Coin関数の「詳細」パネルの"インプット"に、Integer型で追加します。ここで定義したint型は、DGPickupCoinActor側の関数で使用します。

f:id:program-shoshinsya:20190205160047p:plain:h320

DGPickupCoinActorのブループリントエディタを開き、コインにオーバーラップ(触れた時)した際の処理を変更します。

f:id:program-shoshinsya:20190205160440p:plain:h320

コインを複数枚配置して拾ってみます。

f:id:program-shoshinsya:20190309111302p:plain:h320

コインが消えて、左上に所持枚数が表示されれば成功です。





コインの所持枚数・クリアに必要な枚数を画面に表示する

今のままだと、Print stringノードで左上に所持枚数が表示されているだけです。このままだとプレイしているときにやりにくいので、常時画面に表示させるようにしたいと思います。

f:id:program-shoshinsya:20190309112135p:plain

このように、右下に表示するように作っていきます。

こちらの記事を参考にさせていただきました。

api.unrealengine.com

コインの枚数を常に画面に表示するようにするために、UMGを設定します。

タイトル作成のように、ウィジェットブループリントを新しく作成します。名前は「Now_Coins」にしました。

1. "Horizontal Box"を配置して、その中に"Text"を4つ子階層としてつけ、左からそれぞれ"Text"に「Coins:、0、/、40」とつけました。真ん中左の「0」は、現在の所持枚数を表していて、一番右の「40」は、クリアに必要なコインの枚数にしました。
2. 位置とフォントを調節し、アンカーは右下を選択しました。
f:id:program-shoshinsya:20190309113111p:plain:h320
3. モードをデザイナーからグラフに変更し、新しい変数「My_Character」を宣言して以下のように記述する。
f:id:program-shoshinsya:20190205192046p:plain:h320
My_Characterの変数にアクセスするための処理を書きました。
(最終的にはThird_personのキャラクターアセットを設定しているため、"Cast to My_Character"ノードのところが"Cast to Thirdpersoncharacter"ノードになりました)
4. モードをデザイナーに戻して、所持枚数用のテキスト「0」を選択して、"バインディングを作成"を選択する。
f:id:program-shoshinsya:20190205192442p:plain:h320
5. コインの枚数をテキスト「0」に反映させるための処理を書く。
f:id:program-shoshinsya:20190205192306p:plain:h320
6. First_mapのレベルブループリントを開き、Now_Coinsウィジェットを表示するための処理を書く。
f:id:program-shoshinsya:20190205192813p:plain:h320

実際に動かしてみます。

f:id:program-shoshinsya:20190309124157p:plain

右下に現在所持しているコインの枚数、クリアに必要な枚数が表記されました!

ゲームシステム

最初に書いた「ゲームの流れ」に沿うように作っていきます。

f:id:program-shoshinsya:20190301114357j:plain

今回のゲームは、コインを40枚集めるとクリアというものにします。

落下したら死亡というシステムや、ポーズ機能も作成していきます。

クリア画面の作成

テストとしてコインを3枚以上所持したらクリアというシステムを作ってから、40枚取得したらクリアという流れにしたいと思います。

コインを3枚所持しても、クリア画面が出ないとクリアしているのかわかりにくいので、先にクリア画面を作成します。

参考サイト
api.unrealengine.com

タイトル画面の作成のように、ウィジェットブループリントを作成します。名前は「Clear_Display」にしました。

完成はこんな感じの画面です。
f:id:program-shoshinsya:20190309125804p:plain:h320
実際のゲームでの画面はこんな感じです。
f:id:program-shoshinsya:20190309130057p:plain:h320

それでは作っていきましょう!

1. 「パレット」パネルのパネルから"Border"を追加して、子階層に"Vertical Box"、"Button"を追加し、それぞれに"Text"を追加します。

f:id:program-shoshinsya:20190309130358p:plain:h320

2. 「階層」パネルの"Border"を選択して、画面いっぱいに広げます。この際に、アンカーを画面全体になるように設定しました。

f:id:program-shoshinsya:20190309131422p:plain:h320

驚きの白さになりました。このままだと表示した際に透明っぽくならないので変更していきます。

3. 「詳細」パネルのAppearanceの中にある、"Brush Color"オプションから色を変更していきます。

カラーピッカーのAを変更することで透明の度合いを変更できます。今回は0.5にしました。

f:id:program-shoshinsya:20190309132113p:plain:h320


4. タイトルのウィジェット作成と同じようにボタンやテキストを変更します。

f:id:program-shoshinsya:20190309132336p:plain

これでクリア画面は完成です!ついでにQuitボタンを押した時の動作もグラフに書いておきました。

f:id:program-shoshinsya:20190309132509p:plain

クリアシステムの実装

コインを一定枚数集めたらクリアができるようにします。

ステージごとにクリアに必要な枚数を変えられるのも面白いと思っているので、レベルブループリントでThirdPersonCharacterが持っているイベント"Game Clear"ノードを呼び出すように実装します。

ThirdPersonCharacter(旧My_Character)のブループリントを開きます。

f:id:program-shoshinsya:20190309135811p:plain

Game Clearのイベントが呼び出された際のブループリントです。

"Set Input Mode Game & UI"ノードを追加することで、UIモードに変更できる場合はUIモードになります。"Set Input Mode UI"というノードもあるのですが、操作の具合が変わってしまうという問題が発生してしまったため、今回は"Set Input Mode Game & UI"ノードを使用しています。

"Show Mouse Cursor"ノードにチェックを入れておかないと、クリア画面が表示された際に、マウスカーソルが出ないという問題が起きてしまいます。

First_mapに戻り、レベルブループリントを開いて、ブループリントを編集します。

f:id:program-shoshinsya:20190309133404p:plain:h320

設定しているコインの枚数以上のコインをキャラクターが所持した場合(Trueになった時)に、Game Clearが呼び出されるようにしています。

ゲームに戻って3枚以上のコインを取得してみて、ゲームクリアの画面が表示されれば成功です。

f:id:program-shoshinsya:20190309141017p:plain:h320

ついでにQuitボタンを押してみて、タイトルにも戻ってみます。

f:id:program-shoshinsya:20190309141524p:plain

ちゃんと戻れました。タイトル→ゲームスタート→クリア→タイトル...という遷移を実装することができました!

このゲームは、コインの枚数40枚以上でクリアとするので、40に戻しておきました。

死亡システムの実装

キャラクターが落ちたら死ぬように設定していきます。

クリア画面と同じで、死亡した際に表示される画面が欲しいので作っていきます。

死亡した際の画面の作成

作り方はクリア画面とほぼ一緒です。

新しいウィジェットブループリントを作成します。名前は「Dead_Display」にしました。

f:id:program-shoshinsya:20190309150324p:plain:h320

実際にプレイした時に死亡するとこんな画面になります。

f:id:program-shoshinsya:20190309150512p:plain

作り方はほぼクリア画面と一緒なので一部省略します。

まずは、ThirdPersonCharacterのブループリントに新しいイベント「Player Dead」を追加します。

このようにブループリントを組みました。

f:id:program-shoshinsya:20190309152436p:plain:h320

"イベント AnyDamage"ノードでもいいかなぁと思ったのですが、カスタムイベントにした方が拡張性があると思いこうしました

次にレベルブループリントを編集していきます。

First_mapのレベルブループリントを開き、以下のようにブループリントを組みます。

f:id:program-shoshinsya:20190309153628p:plain

めっちゃ小さくなってしまった・・・

キャラクターがZ軸に-50落下した際に、物理エンジンをONにすることで落下していくようにしました。

ThirdPersonCharacterのメッシュの詳細タブにある、"Simulate Physics"にチェックを入れるのを忘れないでください

f:id:program-shoshinsya:20190309154833p:plain:h320

クリアシステムと同じでTickで処理しています。そのため、Sequenceノードを追加して、両方常に処理するように組んでいます。絶対にもっと低コストな組み方あるよなーと思いながらやっていました。

ウィジェットの画面は"Border"を透明にするだけではなく、赤っぽくすることで死亡した感を出しました。

グラフにはこのようなブループリントを組みました。

f:id:program-shoshinsya:20190309154215p:plain:h320


モードをいじったり、マウスカーソルなどを追加した場合は、不必要になった際にはちゃんと取り除きましょう。痛い目をみました。

痛い目をみた際に書いた記事がこちらです。
program-shoshinsya.hatenablog.com

実際にプレイしてみて落下してみましょう。I can fly!!

f:id:program-shoshinsya:20190309155020p:plain:h320

ポーズ画面を実装する

作っている最中に「ポーズ画面見たいの作れたらいいなぁ」と思ったので作ってみました。

参考にしたサイトはこちらです。

https://api.unrealengine.com/INT/Engine/UMG/QuickStart/5/index.htmlapi.unrealengine.com


Pキーを押したらポーズになるようにしたいと思います。(PauseだしPキーでいいよね)

やることはクリア画面・死亡画面とそれほど変わりません。

新しいウィジェットブループリントを作成します。名前は「Pause_Display」にしました。

ウィジェットの完成形はこんな感じ

f:id:program-shoshinsya:20190309155922p:plain

実際にプレイした際にはこんな感じにしました。

f:id:program-shoshinsya:20190309155705p:plain

他の画面をコピペして色だけを変えたりしてだいぶ楽しました。いいのかなー?

ThirdPersonCharacterのブループリントを開いて編集します。

f:id:program-shoshinsya:20190309161225p:plain

"Set Game Pause"ノードにチェックをいれることで、一時停止のような動きを作ることができます。ポーズ画面を解除する際にちゃんとチェックを外すようにしましょう。

Pause Menu Refarenceノードの説明をみてもよくわかりませんでした。デフォルトで存在する「Pause Menu」というノードを呼び出しているみたい。

ウィジェットのデザインは、若干青っぽくしました。自分の中のポーズっぽい色。

グラフのブループリントはこんな感じです。
f:id:program-shoshinsya:20190309162258p:plain

ポーズ・マウスカーソルは最後にちゃんと解除しています。解除しなかったらこうなって大変でしたっていう記事をもう一度貼っておきます。(読んでね)

program-shoshinsya.hatenablog.com

実際にプレイしてPキーを押してポーズ画面が表示されれば成功です。f:id:program-shoshinsya:20190301114357j:plain

BGMを追加する

BGMとか追加したいなーと思ったので追加しました。

といっても、音源を確保したらマップにドラッグ&ドロップで配置するだけです。

wav形式じゃないと使えなかったので、ffmpegを使用してmp3からwavに変換して使いました。

こちらの記事を参考にさせていただきました。
www.xucker.jpn.org

UE4側でSoundsというフォルダを作り、そこにwav形式の音楽を入れて、マップに配置しました。

効果音の追加の仕方

効果音の追加の仕方もメモとして書いておこうと思います。

f:id:program-shoshinsya:20190309164821p:plain

f:id:program-shoshinsya:20190309164840p:plain

この2つのノードが効果音をだすノードになります。

今回はLocationを設定する必要はなかったので、だいたいを"Play Sound 2D"で実装しました。Soundオプションに、効果音を設定するだけです。

遠くにいる敵キャラが炎を吐くとかだと、Locationを設定する必要があるのかなと思います。

適所にPlay Sound 2Dを入れました。

効果音を追加している作業中に、Unreal Editorの画面が真っ赤になってMacが止まるとかいうデンジャラスなことがおきてしまったので、もし同じようなことになってしまった人のために対処法を貼っておきます。

program-shoshinsya.hatenablog.com

ジャンプに効果音をつけるときに気をつけること

「ジャンプキーを押したときに効果音をつける」としてしまうと、ジャンプ中にキーを押しても効果音が出てしまうという状況になってしまうためよくありません。

そこで、"Can Jump"ノードを使用して、「ジャンプできるときだけ効果音を出す」というようにしました。

f:id:program-shoshinsya:20190309164519p:plain

今まで作ったものを配置して実際に遊んでみる

とてもとても長い記事になってしまいましたが、必要なものは全て作成することができました。

First_mapに配置して実際に遊んでみましょう。

f:id:program-shoshinsya:20190309163618p:plain

もともとできているものを配置していく作業だったので省略します。

今回記事に書くのを省略してしまいましたが、他にも細長いブロックの周りを回るブロック、横に一定方向移動するだけのブロックなどを作成しました。

実際にプレイしてみます。


一通りゲームを作ってみての感想

1ヶ月かけて1から自分で作ってみましたが、目標の動くゲームを作ることができました。しかし、まだまだ配置の工夫が必要だったり、なんじゃこりゃという、初心者感満載のゲームになってしまいました。それでも、1つのゲームを作りきることができたという事実だけは変わらないので、ここからがスタートという気持ちで頑張って行こうと思います。





今回は、自分の力だけでゲームを完成させました。世に出ているものとは比べ物にならないくらいクオリティは低いのですが、ゲームシステムを自分なりに拘りを持って作ったのでとても楽しく制作することができました。納期ギリギリでしたけど。

普段のブログでは、PythonC言語の記事も書いています。素朴な疑問や単語、勉強した内容をブログに書き出しすことでどんな利益があるかなどをまとめていたりしているのでそちらも、是非読んでみてください。




1年生の春に、大学だけの勉強じゃだめだ・・・もっと実務的な経験をしたいと思い、インターンを始めました。UE4を学ぶきっかけをくれたのが、インターン先です。

「将来ゲームを作れるようになりたい」ということを伝えていましたので、先方の方々に相談する場があって、自分の考えをゲームを完成まで持っていくことができました。

後でインターンの方々に聞くと、最後まで完成させるための工夫として、

  • 本を自分で買わせたこと
  • 比較的簡単に制作できるゲームはドットイート、パズルゲーム、ランゲームと最初に提示されたこと
  • ざっくりとした〆日を開始前に決めるように促されたこと
  • 細かく進捗を確認されたこと
  • 何かの機能の実装や、ちゃんと動いた時にしっかりと褒めて、成功体験を与えていたこと

などなどの支援をしていただいて、完成させることができました。




就職活動をされている方、自分と同じく大学の勉強についていけず危機感を感じている方、インターン先を探している方、インターン先の会社が人材募集をしていますので、是非よろしくお願いします。
下記のリンクがインターン先の会社です。

【Web/ゲーム開発エンジニア】スタートアップで自由に開発

【企画職・マネージャー候補】あなたの「良いね」を形にする