読者です 読者をやめる 読者になる 読者になる

Go our for Creation

UE4始め3DCGとか、プログラミングとか、カメラとかとか。

【開発】UE4ぷちコンデビュー奮闘記 振り返りPart1 ~制作手順~

初めまして、シントと申します。

細かい自己紹介はプロフ欄に任せるとして、

タイトルに有る通り今回は「UE4を知る」べく第7回ぷちコンに参加してみることにしました!

 

極め本はパラパラ眺めていたものの、実際に自分で何か作ってみたことがない!

・・・ということで、1つ作品を提出することを目標にして、

その”試行錯誤の過程”を記事でまとめてみることにしました。

 

historia.co.jp

  

なお、この記事を書いている時点で既に投稿は完了しているので、オチに使わずもうここで出す。

www.youtube.com

 技術的に難しいことはほとんどしていないのですが、OpenCVの導入のみ別途記事でまとめようと思います。

 

以下、備忘録的にざっくりと項目に分けて記述。

1.どんな作品を作ろうか

2.何をどんな順番で作ればいいんだ

3.やるか〜

 

1.どんな作品を作ろうか  

第7回ぷちコンのテーマはサプライズ。

元々写真を撮るのが好きなこともあって、美しいシーンの中をカメラを持って歩いてみたいなぁとUE4を見た当初から思っていました。

 

↓こんな感じでちょくちょく写真をアップしています。

廃墟巡りとか、星空撮りにニュージーランドいったりとか。

SHIN .T | Flickr

 

美しい景色を求めて電車に揺られたりレンタカー走らせたり、飛行機で飛んで行くのもそれはそれで良いのですが。仮想世界にそういうものを生成させて、同一シーン内でも少しずつ顔色を変化させるようなステージがあったら楽しいだろうなと思っていました。

 

ということで、ささやかながら「自然の様相の変化」をサプライズとする散歩型カメラ作品を作ろうと言う結論に至りました。

 

 

2.何をどんな順番で作ればいいんだ

今でこそ連番を振っていますが、最初はイベントの定義の仕方すら解らないところからのスタート。。

何がカンタン/複雑なのか、どの動作・処理が「ひとかたまり」なのか、どの構成要素を作れば目的のものが仕上がるのか。

 

(1)新規プロジェクト作成

(2)FPS/TPS視点を切り替えてみる

UIを作ってみる

(4)UI用のテクスチャを作ってみる

(5)UIとカメラのパラメータを紐づける設定パネルを作ってみる

(6)マップを作成してみる

(7)タイトル画面を作ってみる

(8)ステージ選択画面を作ってみる

(9)タイトル→ステージ選択→ステージと遷移させてみる

(10)シャッターを実装してみる

(11)ローカルの画像を動的に参照する関数をC++で書いてみる

(12)スクリーンショットを動的に見返せる仕組みを作る

 

Shutter Travelを作成するにあたって作成した機能をざっくりと分けると、上記12項目になるのかな、と。

 

自分がどの程度作りこめるかも解らなかったので、初期段階では7,8,9,11,12は「可能であれば作りたい機能」のカテゴリでした。

 

3.やるか~

具体的に何をやったか書いても需要はないと思う(非常に基本的な内容ばかり)ので、躓いたポイントを箇条書きに。

 

(1)新規プロジェクト作成

 -FirstPerson?ThirdPerson?UnrealC++???

  ⇒ThirdPersonTemplateを選定

 -Marketplaceのアセットを使いたいが作成の順番は?

  ⇒作成後に「プロジェクトに追加」

 

(2)FPS/TPS視点を切り替えてみる

 -カメラの切り替えってどうやるんだろう

 -GameMode?PlayerCharacter?何処を弄ればよいのか

  ⇒3rdPCに2個のカメラを置き、ボタン入力で切り替え式に

 -どのノードで切り替える?

  ⇒【Set Active】を利用

 -切り替わったけど戻らない…

  ⇒【Set Hidden in Game】+【Deactivate】を利用

f:id:shin_t_o:20170403223635p:plain

 

(3)UIを作ってみる

 -FPS視点に設定パネルを表示したい

  ⇒【Event Begin Play】後に【Create Widget】+【Set Parameter】+呼び出しイベント

  ⇒合わせて、ウィジェット側に呼び出しイベント詳細:【Add to Viewport】

 

(4)UI用のテクスチャを作ってみる

 -FPS視点にファインダーのグリッドを表示したい

  ⇒PNGファイルで作成したものをUE4で読み込み

f:id:shin_t_o:20170403231207p:plain

 

(5)UIとカメラのパラメータを紐づける設定パネルを作ってみる

 -何処をどう弄るんだ…?

 -動かすのはスライダーだが変わる値はどう取得するか

 -変わった値を3rdPCのカメラ値に紐づけ…られるのか?

 -変化したスライダー値は「テキストボックス」にも代入したい…

  ⇒スライダー値のBind

  ⇒スライダーからOnValueChangedにてイベント作成

   +取得値を変数に格納

    +格納した変数を戻り値にして、再度スライダーに代入(更新)

   +取得値を【Map Range Clamped】を用いて値幅調整

    +幅調整後の値を引数として、イベント呼び出し

  ⇒3rdPCにてカメラを【Activate】したのち、【Set Field Of View】に値を渡してみる

f:id:shin_t_o:20170403233641p:plain

f:id:shin_t_o:20170403233644p:plain

 

(6)マップを作成してみる

 -そういえば Procedural Nature Pack Vol.1 を持っていた

 -Youtubeの 解説動画 を見ながら作ってみる(今度もっとじっくりやってみようかなと)

f:id:shin_t_o:20170403234509j:plain

 

(7)タイトル画面を作ってみる

 -Levelを分けるのが良いらしい

 (参考:UE4:タイトル画面でのボタンの設置について - 僕の私のUnrealな日々

 

(8)ステージ選択画面を作ってみる

 -7と同一レベルにし、Widgetの表示のみ切り替えることに

 -ステージをクリックしたときにレベルを切り替えたい

 -レベル切り替え時に良い感じに画面をフェードアウトさせたい

  ⇒【OpenLevel】+UMG Animationで定義

 

(9)タイトル→ステージ選択→ステージと遷移させてみる

 -複数のウィジェットを呼び出したいときって、【Begin Event】→【Create Widget】で延々ノードをつないでいけばいいの…?

  ⇒解らなかったから今回はそうしてしまった(書く場所だけ分散)

f:id:shin_t_o:20170404000333p:plain

 

(10)シャッターを実装してみる

 -FPS視点に表示させた設定パネルのスライダーをカメラパラメータと連動させたい

FPS視点でのシャッター=カメラ撮影=スクショという構造を作りたい

  ⇒シャッターアニメーションをUMGで作成(黒いImageが下りてきて戻るだけ)

  ⇒キー入力でコマンド実行(HighResShot)しアニメーション再生

 

(11)ローカルの画像を動的に参照する関数をC++で書いてみる

(12)スクリーンショットを動的に見返せる仕組みを作る

 ⇒この辺だけ次のPart2で別にまとめてみます

 

 

・・・と、ざっくりと今回辿った道をなぞりなおしてみました。

全然書ききれていないので、

 ・LvBPとCLBPの違いってなんだ・・・

 ・画像の表示ってどうするんだろう(Blueprintじゃダメなの!?)

 ・Unreal C++ってどうやれば弄れるようになるの

 ・マイルストーンの引き直し(3,4回)だらけ…

  →段々とマイルストーンの置き方も精度上がっていったり

とかとか…本当に色々と勉強になった機会でした。