以下の内容はhttps://unlimited-games.hatenablog.com/entry/2025/12/13/234740より取得しました。


ゲームを作りながら覚える UnrealEngine5 ブループリント超入門①

こんにちわ、UNLIMITED GAMES の take です。
この記事はUnreal Engine (UE) Advent Calendar 2025の13日目の投稿記事です。

qiita.com



今回は「ゲームを作りながら覚える UnrealEngine5 ブループリント超入門①」
になります。 

 

UE5でゲームを作ってみたいけど どこから手を付けたらいいんだろう、
どこで情報探せばいいんだろう・・・的なことを最近何度か耳にしたので、
今回はこれからUE5を少しづつ触っていきたいという方向けに
記事を書いてみようと思います。

 

★UE5をインストールしてある前提で話を進めますので、
 未インストールの方は下記リンクを参照しインストールをお願い致します。

 ※EPICランチャーとUnrealEngine5をインストール
  https://yoshikawastudio.com/unrealengine-install/

 

 

-----------------------------------------------------------------------------------------
■「ゲームを作りながら覚える UnrealEngine5 ブループリント超入門①」


UnrealEngine5では、ブループリントを使って簡単にゲームが作成できます。
今回は、よく使う基本的な命令のみを使用して、簡単なゲームを作っていきます。

 

 ●もくじ

  お題① プロジェクトの下準備  (所要時間 15分)

  お題② タイトル画面を作る   (所要時間 30分~1時間)

  お題③ タイトル画面の拡張   (所要時間 30分~1時間 )



■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

●お題① プロジェクトの下準備  (所要時間 15分 )

 (UE5のプロジェクトやレベルの作成 が学習できます。)



★まずは、ゲームを作るための準備をしていきます。

①ランチャーからUE5.7を起動します(バージョンは5.6 や 5.5 でもOK)


②新規プロジェクトを選択  (バージョンによってはこの画面が無かったりします)


③三人称のボタンを選び、プロジェクト名を入力し、「作成」ボタンを押す


④プロジェクトが起動します。




⑤上部メニューから 新規レベルを選択し、「空のレベル」を作成します。





⑥上部メニューのファイルから「名前を付けて現行レベルを保存」を選択し、
 追加で開いたウィンドゥで、「Title」と名前を付けて保存してください。

Titleという名前のアイコンが表示されます。



⑦上部メニューの編集から「プロジェクト設定」を選び、ウィンドゥを表示させます。

 開いたウィンドウの「マップ&モード」の項目から、
「エディタのスタートマップ」と「ゲームのデフォルトマップ」を
 先ほど作成したレベルの「title」に変更します。

★これで、ゲームを作るための下準備が完了です。



休憩タイム・・・(5分程度)


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

●お題② タイトル画面を作る  (所要時間 30分~1時間 )

 (UIウィジェットの作成、表示、ボタン入力 が学習できます。)


-----------------------------------------------------------------------------------------

①「title」のアイコンがある横の空白あたりで、右クリックをしてメニューを出し
 「ウィジェットブループリント」を選択します。 

 ※タイトル画面を表示するための「ウィジェット(UIパーツ)」を作成します。

名前を「W_01」に変更してください。

「W_01」のアイコンをダブルクリックすると、UI作成用の画面が開きます。




②左のメニューの「パネル」から「キャンバスパネル」を選び
 右側のエリアにドラッグアンドドロップします。

 

③左のメニューの「一般」から「テキスト」を選び
 右側のエリアにドラッグアンドドロップします。(2個分やります)



④テキストの文字を、それぞれ「タイトル」と「- push space -」に変更し、
 文字サイズと位置などを画像のように調整し、ウィジェットを保存してください。


⑤アンカー設定をし下図のようにしてください「タイトル」と「- push space -」の両方




⑥アイコンメニューからレベルブループリントを開きます。

このような画面が表示されます。



⑦「Event BeginPlay」のアイコンの横にある△マークをクリックしてから
 横にドラックして離すと、命令を選ぶウィンドゥが出るので そこの空白に
 「create wi」と文字を入力します。
 文字に関連する命令が出るようになるので、「create widget」を選択します。


このような命令ノードが作成されます。

 

⑧ノードの「クラスを選択」の横の矢印をクリックして
 使用するウィジェット(W_01)を選択します。

 

⑨ノードの横の青い穴をクリックして、横にドラックして離すと
 命令選択ウィンドウが出るのでその中の「Promoto to variable」をクリックします。

このような状態になればOKです。

 

⑩「NewVer」ノードの横の青い穴をクリックして、横にドラックして離すと
 命令選択ウィンドウが出るので「View」と入力し、残った命令の中から
 「Add to ViewPort」を選択します。

このような状態になればOKです。


★これで、UIパーツの準備、UIを表示するための命令が作成できましたので
 画面上部にある「再生ボタン」を押してみましょう。
 (ESCボタンを押すとゲームが終了します)


休憩タイム・・・(5分程度)


-----------------------------------------------------------------------------------------

★さて、ここから後半戦、最後は、入力受付を作ってみましょう。


⑪空白部分で右クリックをしてメニューを出し、文字入力枠に「space」を入力
 命令一覧から「Space Bar」 を選択します。

「Space Bar」というノードが作られます。
(キーボードのスペースを押すと、ここから先の命令が実行されます)


⑫「Space Bar」のノードから、線を伸ばし、命令ウィンドゥを出します。
 文字入力枠に「quit」を入力し、命令一覧から「Quit Game」を選択します。

このような状態になればOKです。



★これで「space」を押すとゲームが終了するようになりました。
 エディタの「再生ボタン」を押して、実際にゲームをプレイしてみましょう。


アレ・・・? 何か変ですね。
キーボードの「space」を押しても何もおこりません。

実は、再生した直後はゲームが画面がアクティブになっておらず、
ゲーム画面を一度クリックする必要があります。


このままの状態は少し微妙ですので、解決するための命令を追加します。



⑬「Add to Viewport」の横に、下の図のようなノードをセットしてみてください。

  「Set Input Mode Game Only」と「Get Player Controller」
  この命令を実行すると、再生した直後からゲーム画面がアクティブになります。



★それでは、もう一度再生ボタンを押して、動作を確認してみましょう。


お疲れ様でした~。

これで、お題②は 完成です。



休憩タイム・・・(15分程度)


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

●お題③ タイトル画面の拡張  (所要時間 30分~1時間 )

 (画像、BGM、SE、FONT 等のデータの読み込み が学習できます。)

-----------------------------------------------------------------------------------------
①まず、素材を各リンクからダウンロードしてみてください。

 ●画像   :Pixabay   https://pixabay.com/ja/

         猫の画像  https://x.gd/T23K5

         お金画像  https://x.gd/KrZgJ


-----------------------------------------------------------------------------------------
 ●BGM、SE :魔王魂   https://maou.audio/

         BGM(ファンタジー15)https://x.gd/ZK4FH (mp3形式で)
         効果音(システム音49)https://x.gd/1XyFU (wav形式で)


※BGMはループ版をダウンロードしてください。
-----------------------------------------------------------------------------------------
 ●FONT    :GoogleFont https://fonts.google.com/


※どんなFONTでも構わないので、一つダウンロードしてみて下さい。
-----------------------------------------------------------------------------------------


②ダウンロードした各素材をエディタ下部の空白にドラッグアンドドロップします。
(ファイル名はそれぞれ変更しておいてください)

FONTをインポートした際に出る、下記のウィンドウは「はい」を選択してください。


全部インポートしますと、下記画像のような画面になっていると思います。



 

★それでは、インポートした素材を使って、ゲームを豪華にしていきます。


③UIウィジェットエディタを開き、左メニューの「一般」から「画像」を選択し
 右側にドラッグアンドドロップします。

 

④右側のオプション画面を、下記画像のように調整してみてください。
 (読み込んだ画像をセットし、サイズが正しくなるように調整します)



⑤左メニュー下の、パーツ一覧から文字のレイヤーを選択し、画面右側のオプションで
 「Z sort」を1にしてください。(猫の画像は0、その数値より大きいと上に表示) 
 あと、FONT を変更する場合は、下記画像の矢印の場所をクリックして
 変更するFONTを選びます。  



★次は、読み込んだBGMを再生する手順を説明していきます。



⑥レベルブループリントを開き、「Set Input Mode Game Only」の横の△をクリックし
 右側にドラッグして離して、命令選択ウィンドウを出します。
 「sound」と入力し、命令一覧から「Spawn Sound at Location」 を選択します。

 

⑦ノードが作られたら、soundのところの矢印を押し「BGMファイル」を選択します。
 (これで、ゲームを起動するとBGMが再生されるようになります)



⑧BGMのループ設定をするには、「BGMファイル」のアイコンをダブルクリックし、
 専用ウィンドゥを出し、「Looping」にチェックを入れます。



★次は、キーボードの「space」を押したら、SEを再生する手順を説明していきます。


⑨「Space Bar」の横に「play Sound at Loccation」ノードを作成し、
 「Sound」の横の矢印を押し「SEファイル」を選択します。

 その横に「Delay」ノードを作成し、ディレイ時間を2.0に設定します。
 「Delay」ノードの横に「Quit Game」を繋いで 設定完了です。

 



★それでは、ゲームを再生して動作を確認してみましょう。


これで、お題③ 「タイトル画面の拡張」 は完成です☆ お疲れ様でした!!

色んなデータを読み込んで使えるようになると、
一気にゲームクオリティが上がりますので、是非使いこなしてください。



-----------------------------------------------------------------------------------------
■おまけ  「ゲーム画面を専用ウィンドゥで表示する方法」


画面上部のアイコンメニューから「新規エディタウィンドゥ」を選択します。


ウィンドゥの解像度を変更するには「詳細設定」から「エディタメニュー」を出し
「新しいビューポート解像度」で解像度の変更が可能です。



■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回の記事は以上になります。
続きの入門も書く予定ですので、気になった方はまた見て頂けるとうれしいです★

それでは~


明日は @ofudagames さんの
「【UE5】ホラーゲーム『デテイケ -GetOut-』のホラー演出実装手順」
になります。




-----------------------------------------------------------------------------------------
↓ もっと詳しく勉強したい人はこちらが とてもおススメです。

zenn.dev


●おススメのUE書籍









以上の内容はhttps://unlimited-games.hatenablog.com/entry/2025/12/13/234740より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14