top_image_02
top_image_01

プログラミング知識0ではじめられる、UE4で簡単タイトル画面作り!

2018年9月20日  カテゴリ:IT用語解説, インターン

こんにちは!インターン生の西井遥と申します。

今回は、前回予告していた通り「タイトル画面で[ゲームスタート]ボタンを押すとゲームが始まる」を簡単に作っていこうと思います!

仕上がりイメージはこんな感じです!(SideScrollerプロジェクトですが多分他のも大体同じだと思います。)
ではやっていきましょう!

まず、タイトル画面に表示したいイラストを準備します。

コンテンツブラウザの「インポート」から準備したイラストをインポートします。
(気になる人はインポートフォルダを「新規追加」で作って、そこにいれてください。)

次に、タイトル画面を作っていきます。

コンテンツブラウザの「新規追加」から「ユーザーインターフェイス」→「ウィジェットブループリント」を選択するとブループリントが作成できます。
(ここでは、分かりやすいよう名前は「Gamestart」にしました。)
つくられたブループリントをダブルクリックし、開いたウィンドウが「デザイナー」になっているか確認してください。
階層(ヒエラルキー)タブの「Canvas Panel」に、パレットタブの「一般」から「Image」を先程の「Canvas Panel」にドラッグアンドドロップします。
「Image」が「Canvas Panel」の中に入っているのを確認出来たら、「Image」をクリックし、右の詳細タブに移ります。
詳細タブで、「Brush」を広げ、画像の参照をしましょう。
画像サイズが小さいので、真ん中のデザイナウィンドウで拡大するか、「Image Size」で大きさを調整してください。
調整出来たら、詳細タブの「スロット」の「アンカー」を右下の全体にしてください。
これで、機種による画面サイズの違いがあっても調整してくれます。

その次に、ボタンを作ります。
パレットの「一般」に「Button」があるので、これを「Canvas Panel」にドラッグアンドドロップしましょう。
中に入っているのを確認できたら、先ほどと同じように位置にボタンを移動させてください。
移動出来たら、詳細タブの「パレット」の「SizeToContent」にチェックを入れます。

そして、ボタンに文字を入れたいので、一般から「Text」をボタンの階層の中にドラッグアンドドロップしてください。
「Content」の「Text」でボタンに文字を入れましょう。(ここではGamestartと入れました。)
すると、先程「SizetoContent」にチェックを入れていたので、テキストの文字の大きさに合わせてボタンの大きさも変わるようになります。
文字の色やフォントを変えたい場合は「Apperrance」で変えてください。
そして、ボタンのアンカーの位置
を選びます。(どこが一番近いか、でいいと思います。)

最後に適用させるため「コンバイル」を押して画面作りは終了です。(ウィンドウは出したままで大丈夫です。)

それではいよいよ「ボタンを押すとゲームがスタートする」をブループリントで作っていきましょう。

まず、「レベル」と呼ばれるいわゆるステージを作っておきます。タイトル画面なのにステージ?と思われるかもしれませんが、
「ゲームスタートボタンを押すと、ステージクリアになって、新しいステージ(ゲーム)が始まる。」と言った感じでやってもらえばと思います。(※詳しくは違います)

コンテンツブラウザの「新規追加」から「レベル」を選択、作成します。
一応、コンテンツブラウザのMapフォルダに移動させましょう。そして、「~ExampleMap」があると思うので、このレベルの名前をコピーしておいてください。

先程の続きで、Gamestartウィジェットの画面に戻り、詳細タブの「イベント」の「OnClicked」の横「+」を押してください。
これは、「このボタンを押すとどうなるの?」を決めるためのもので、開いたイベントグラフで今から設定していきます。

既に「OnClicked」のイベントノードが作られているので、「このイベント(クリック)が起きたらレベルを開いてね」という意味がある「OpenLebel」ノードを作ります。
(ノードは右クリック、もしくは接続を伸ばすとノードを検索が出てくるので、それで出してきてください。)
開いてほしいレベルは「~ExampleMap」なので、先ほどコピーした名前をLevelNameに貼り付けます。

コンバイルしてコチラの作業は完了です。ウィンドウは閉じてもらってかまいません。

次に、つくったタイトル画面を新しいレベルにしていきましょう。
先程作った新しいレベルのブループリントを開きます。レベル選択して上のブループリントから「レベルブループリントを開く」を選択してください。

ここにある、BeginPlay(このステージが始まったらどうする?という意味)のイベントノードに、作ったタイトル画面を出してきてね!と指示するために
「CreateWidget」と検索し、ウィジェットを作成ノードを呼び出します。
先程のイベントノードと接続し、呼び出すウィジェットのClassを「Gamestart(作ったウィジェット名)」とします。

そして、右の白い接続を引っ張ってきて「変数に昇格」を選びます。セットノードが出てくればOKです。
(ん?と思うかもしれませんが、私もうまく説明できるほどわかってないので割愛します。)

そしてこのタイトル画面を画面に映すよう指示する「Add to Viewport」に先程のセットノードの右側2つとそれぞれを接続します。

コンバイルし、これですべて完成です!
お疲れ様です!

起動後最初のレベルをタイトル画面にするための設定の変更や、ボタンをイラストに変えたり、タイトル画面でアニメーションを再生する方法は検索するとできるので、応用してもらえればと思います!

ここまで読んでくださり、ありがとうございました。
次回は「UE4上だけでキャラクターモーション」を作っていこうと思います!

では!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4
・湊和久、2015、『Unreal Engine 4で極めるゲーム開発』、ボーンデジタル

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

toiawase-(1) (1)

メールでのお問い合わせは、下記フォームに入力して送信してください。

お名前 (必須)

メールアドレス (必須)

電話番号 (必須)

題名

メッセージ本文