0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【非公式】某会社設立記念ゲリラAdvent Calendar 2016

Day 2

【ゲリラアドカレ】UE4ゲーム実装 進捗報告 2日目(素材配置~タイトル画面作り)

Last updated at Posted at 2016-12-07

【非公式】某会社設立記念ゲリラ Advent Calendar 2016 2日目です。

FlashゲームをUE4で再実装するゲリラアドカレです。

素材配置~タイトル画面作りまでをまとめました。
今回もUE4よちよち初心者レベルです。

・注意
許可を取ってないので通常業務の空いた時間を利用して作成するため、作成中のゲーム、及びアドカレは完成保証がなければ、ゲーム自体もリリースされる保証も皆無なので、あんまり期待しないでください。

#最低限作らないといけない画面

1日目の記事で書き忘れていたので、ここで書きます。
基本、既存ゲームの移植なので、最低限以下の画面を作り直します。

・タイトル画面
・クエスト選択部分
・クエスト画面
・エンカウント演出
・バトル画面
・リザルト画面
・ノベル画面
・収集したカードの図鑑画面

一から作るにしては実装する画面が多いです。
さすが無計画ゲリラでやったので、早速想定より実装画面が多いというミスをしました。

か、完成するのかな……。自信がなくなりました。

とりあえずプロトタイプをつくらないとなので、すぐ作成が終わる画面と最低限、ゲームに必要な画面だけ優先的に作ります。

#タイトル画面を作る
タイトルはサクッと終わりそうなので、タイトル画面を作ってしまいます。

現在行われているHunting100のトップはこの画面になります。

ゲームトップ.png

今から作るゲームはオフライン専用なのでソーシャル要素皆無ですし、何より時間もないので不要なものはバッサリ切ってシンプルにします。

現段階はこの部分に力を入れるべきではありません。
あればイメージしやすいな程度です。

エディタ.png

最終的にこんな感じになりました。

##フォルダ作成~画像素材インポート、レベル作成

まずはフォルダを作ってしまいます。右クリック→フォルダ作成で作れます。
この時点ではこういう風にフォルダを作りました。
コンテンツブラウザ.png

続いて画像素材を置きます。
フォルダを開いて、画像をコンテンツブラウザにドラッグ&ドロップで置きます。
コンテンツブラウザ1.png

最後にレベルを作成します。ここではTitleと名づけています。
コンテンツブラウザ2.png

##マウス操作を有効

マウス操作を有効にしましょう。
公式ドキュメントに書いてあることをそのままやります。

このゲームでは全てマウス操作なので、デフォルトで有効になるように設定してしまいます。

PlayerControllerブループリントを作成し、MouseInterfaceのShowMouseCursorとクリックイベントを有効にチェックを入れます。
マウス設定.png

GameModeブループリントを作成し、先ほど作成したOkayerControllerブループリントクラスをセットします。
マウス設定2.png

最後にプロジェクト設定を開き、Default ModesにGameModeブループリントクラスをセットします。
ついでにMapを作成したレベルをセットしました。
マウス設定3.png

##配置

カメラとSpriteを配置します。

まずSpriteを作成します。
テクスチャーを右クリックしてSprite ActionsからCreate Spriteを選択します。
配置.png

これでSpriteが生成されます。他のインポートした画像も同じ事をやります。
最終的にこのような感じで配置しました。

配置2.png

横から見た図です。Yの値で重なり順が変わります

配置3.png

最後にカメラの設定です。
2D表示にしたいので、配置したカメラのProjection ModeをOrthographic、Ortho Widthを960に設定します。あとはカメラの位置をいい感じに見えるように調整します。
カメラ.png

##タイトルUI作成~表示

単純にボタンだけ作ります。
ウィジェットブループリントクラスを作成し、デザイナー画面でボタンを作ります。
タイトルUI.png
ボタン画像のDraw AsはImageに設定します。

とりあえずUIを表示したいので、レベルブループリントからウィジェットを作ります。
UI配置.png

公式ドキュメントを見ながら、以下のように実装しました。
レベルBP.png

#タイトル完成

ひとまずタイトルが完成しました。
ue4Title.png

シンプルですがタイトル画面っぽくなったと思います。

次回に続くかもです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?