本記事はヒストリア・エンタープライズチームにより制作された
インタラクティブデモ「Cutting-Edge Test Drive」についての連載記事です。
全5回にわたって記事を公開していきます。

関連記事
第1弾 UE4とMegascansを使用したインタラクティブデモ “Cutting-Edge Test Drive” 公開！-操作説明-
第2弾 [UE4] ”Cutting-Edge Test Drive” バーチャル展示場 -初心者に向けたUE4シーン作成-
第3弾[UE4]”Cutting-Edge Test Drive” 荒野パート -画像からフォグを作成する方法-
第4弾 coming soon
第5弾 coming soon

エンタープライズチームCETD連載ブログ第3弾
「荒野パート -画像からフォグを作成する方法-」

荒野パートではMegascansによる背景に目を奪われますが、全体の雰囲気を作るうえで欠かせない要素がフォグです。今回の記事では雲の画像1枚から自然に流れ続ける煙を作成したいと思います。

↑荒野パート全般で使用されているフォグ表現

1.基本部分

＜マテリアルを作成＞

Emissive Colorに雲の写真を加工したテクスチャをつなぎます。

CheapConstractノード はIn（S）につないだものに対してConsrast（S）の数値を上げるとコントラストが上がるノードです。
これでEmissive Colorの雲の暗いグレー部分を黒にして透明化して見えないように調整します。

＜作成したパラメーターの説明＞

2.Opacity

雲のテクスチャ画像の端を透明にするのと地面から近い位置がどんどん透明になっていくようにしていきます。

DepthFadeノードを使用すれば、Fogマテリアルを割り当てた板が地面に刺さってある部分を透明にしてくれます。

＜作成したパラメーターの説明＞

3.煙のアニメーション

全体を動かすのは雲画像のUVにPannerノード
しかし、そのままだと左右上下に雲がスライドするだけなので、歪み用テクスチャを作りLinear InterpolateのBにつなぎます。

Aが元の形のTexCoordノード、BがUVから雲の画像の形を歪ませるためのもの、この２つをLerpのAlphaで動かしていきます。

UVの歪みのための画像は赤緑のTexCoord画像をPhotoshopで変形させたものです。

4.Linear InterpolateのAlphaでのアニメーション

ノイズテクスチャを用意してPannerノードでスライドさせ動かします。

Linear InterpolateのAlphaのはPhotoshopでのBにかかるマスクと同じなので
Alphaの黒い部分が元の形Lerp A、白い部分が歪ませた形Lerp Bになります。

SineノードはTimeノードをつなぐと-1から+1で動くので一定周期で黒と白くり返します。

これらをMultiplyで合わせるとノイズがPannerで移動しつつ、周期的に黒くなるAlphaをつくれます。

つまり、雲のテクスチャがオリジナルと歪めた形を
動くノイズで半々にした状態からたまにオリジナルの形に戻る動きになりました。
このマテリアルをPlaneの平面に割り当てると
Fogがつくれます。

本記事はヒストリア・エンタープライズチームにより制作された
インタラクティブデモ「Cutting-Edge Test Drive」についての連載記事です。
全5回にわたって記事を公開していきます。

関連記事
第1弾 UE4とMegascansを使用したインタラクティブデモ “Cutting-Edge Test Drive” 公開！-操作説明-
第2弾 [UE4] ”Cutting-Edge Test Drive” バーチャル展示場 -初心者に向けたUE4シーン作成-
第3弾 [UE4] “Cutting-Edge Test Drive” 荒野 -画像からフォグを作成する方法-
第4弾 [UE4] “Cutting-Edge Test Drive” 都市 -DistanceFieldを使ってお手軽にディティールアップ-
第5弾 coming soon

エンタープライズチームCETD連載ブログ第4弾
「都市 -DistanceFieldを使ってお手軽にディティールアップ-」

Cutting-Edge Test Driveの都市パートのアートを担当しました。
このパートではビル街の道路を車で走行します。

■Cutting-Edge Test Driveの都市パート制作プロセス

中々の広いパートでしたが大半のアセットはマーケットプレイスのものを調整して配置していきましたので、
おおよそのボリュームが並ぶまでは比較的短時間で制作できました。
とはいえ、並べただけだとやはり情報量が乏しいです。

まず、面積が広い割に情報量の少ない路面に手を加えようと思いました。
ブラッシュアップの方向性としては、コンテンツ内で雨天モードが存在することもあり以下のようなイメージでした。

・雨上がりの路面

・建物の隅やオブジェクトの周りにはまだ水気が残っている

・風に吹かれた落ち葉が水気のある部分に残っている

■プロシージャルにディティールアップしたい

路面に情報量を足す際はデカールや頂点カラーを使ってランダムにしていくのが常套手段かと思いますが、
この都市はレベル全体で片側2車線道路が2km以上あります。

広大なレベル全体に手作業で調整を加えるのは大変です。
レイアウトもまだ変わる可能性がありました。
そこで、DistanceFieldを使ってプロシージャルかつお手軽にディティールアップした方法をご紹介します。

スタティックメッシュを動かすとリアルタイムに雨の濡れと落ち葉がついてきます。
レイアウト変更に柔軟に対応できるのがよかったです。

DistanceFieldのドキュメント
https://docs.unrealengine.com/ja/Engine/Rendering/LightingAndShadows/MeshDistanceFields/index.html

■DistanceFieldを使ったマテリアルサンプル

上記のシーンとマテリアルは関係のない要素が多く含まれているので
シンプルなシーンとマテリアルでご説明していきます。

・Before

ベンチがある路地裏の路面のマテリアルです。アスファルトの質感のテクスチャ直結のシンプルなものですが、
UVの異なる色々なメッシュに使いまわしたいのでワールド座標からUVを生成しています。

・After

この画像を作成していきます。

■事前準備

プロジェクト設定のレンダリングタブでGenerateMeshDistanceFieldをオンにします。

路面のメッシュを選択して「AffectDistanceFieldLighting」はオフにします。
これを行わないと後の工程でマスクが真っ黒になってしまいます。

■マテリアル作成

新規にマテリアルを作成していきます。
マスクから作成するのでEmissiveにつないで形状を確認しながら進めていきます。
画像のようにノードを組んだら路面のメッシュに設定します。

すると壁やベンチから「Wet_SpreadDistance」の距離だけ白くなったマスクができました。
ベンチを動かしてもちゃんとついてくるはずです。

DistanceFieldが有効になっていると
DistanceToNearestSurfaceノードが一番近いサーフェイスまでのマスクを取得してくれます。

ただし、これだけだと濡れた路面には見えないので
ノイズテクスチャを使って水たまりが乾きかけているようなマスク形状に整えていきます。
ランダム感がほしいので画像のようにノードを組むと雲模様ができました。

ちなみにノイズのテクスチャはエンジンに入っている
Engine/Content/MapTemplates/TilingNoise05.uasset　を使いました。

さきほど作ったDistanceFieldのマスクのグラデーション部分だけにランダム感が出るように雲模様を合成してみます。

先程より自然になりましたが、もう少しマスクのエッジを複雑にしたいので
同じテクスチャを少し小さくマッピングしてさらに合成を行います。

このマスクを使って乾いた地面と濡れた質感を合成します。
2つの質感はシンプルですが
配置に沿っているので簡単にそれっぽくなりました。

同様の方法で濡れた部分より一回り小さいマスクを作り
乾いた路面、濡れた路面の質感にさらに濡れた落ち葉の質感を合成しました。

一つのマテリアルに3つも質感が入ってきたので
見やすくするためにマテリアルアトリビュートを使いましたが
考え方は先程と同じです。

お手軽に路面の情報量を増やすことができました。

広大なパートのプロジェクトや動的ライティングのプロジェクトでは
既にDistanceFieldをオンにしていることも多いと思いますので相性がいいかもしれませんね。

是非おためしください。

本記事はヒストリア・エンタープライズチームにより制作された
インタラクティブデモ「Cutting-Edge Test Drive」についての連載記事です。
全5回にわたって記事を公開していきます。今回が最後の技術ブログです！

関連記事
第1弾 UE4とMegascansを使用したインタラクティブデモ “Cutting-Edge Test Drive” 公開！-操作説明-
第2弾 [UE4] ”Cutting-Edge Test Drive” バーチャル展示場 -初心者に向けたUE4シーン作成-
第3弾 [UE4] “Cutting-Edge Test Drive” 荒野 -画像からフォグを作成する方法-
第4弾 [UE4]”Cutting-Edge Test Drive” 都市 -DistanceFieldを使ってお手軽にディティールアップ-
第5弾 [UE4] “Cutting-Edge Test Drive” 都市パート 車の挙動の中身をプチ解説

エンタープライズチームCETD連載ブログ第5弾
「 都市パート 車の挙動の中身をプチ解説」

「Cutting-Edge Test Drive」の都市パートは走行シミュレーションのデモです。
このパートは車内からの視点のため、走行時の車体挙動がはっきりと見えます。
そのため、発進・停止・ギアチェンジ時の車体の傾きはある程度再現しないと、確実に違和感が目立ちます。
この記事では、エンジニアが車挙動全般をどのように制御したかを解説したいと思います。

↑この動画の0:46あたりからの車挙動です。

ベースクラスの選定

今回の目的は、開発コストをかけずに説得力のある車挙動を表現することでした。
実装の選択肢としては以下の3通りがありました。

A．自前で素のActorを継承して車挙動を実装する
B．UE4で最初から用意されているWheeled Vehicleクラスを継承して作成する
C．外部のシミュレーションソフトで挙動の計算を事前に行い、座標データを読み込む

自動車関連の業務では正確な挙動を再現するためにCarSimなどのシミュレーションソフトを使用して
C案の手法を取ることが多いのですが、今回は直進と停止のみしか行わない仕様だったこともあり、
目的（コスト面と正確性の重要度が低いこと）を考慮してB案を選択しました。

以上の選択から、都市パートで動いている車はすべて、
UE4側で用意されているWheeled Vehicleクラスを継承してその作りに則ってセットアップされています。
このWheeled VehicleクラスですがUE4の物理エンジンを利用していて非常にリアルな車体挙動を実現することができます。
実際にデモでも、ブレーキ時の沈み込みなどを見ていただくと説得力のある動きをしていることが確認できるかと思います。

しかし物理エンジンを利用することにより絵的な説得力が増すメリットがある反面、
思い通りに動かすことが難しくなるデメリットが存在します。
思い通りに動かすアプローチとしてはベストテイクをシーケンサーで録画したり、アニメーションとして記録するなどありますが、
開発期間が短いことから開発のイテレーションを重視したかったため、
今回はブループリントを使って（多少強引に）制御を試みました。

挙動の移動制御

都市における車は直進・停止のみを行うのがこのデモでの仕様です。

Wheeled Vehicleクラスは専用のMovementComponentにThrottleの値を入力することで
実際の車と同じように走ってくれるのですが、これだけだと少し問題があります。
街中を走るので他の車にぶつからないよう一定の速度で走らせたいのですが、
速度をコントロールする方法がアクセルとエンジンブレーキになるので直感的でなく、
しかも繊細な制御を行わなくてはならなくなってしまいます。

なので一定の速度で走る場面においては直接、物理のVelocityを設定してしまう方法をとりました。

直接物理の速度を設定するSet All Physics Linear Velocityノード

物理シミュレーションが有効なメッシュの速度を直に設定できるノードがあります。
図ではAutoCruiseSpeedに時速で設定された速度でX方向にひたすら直進するノードネットワークとなっています。
GetVelocityノードでは現在のVelocityが取れるので、Z方向（上下）の速度はここから再利用します。
しないと重力等によるZ方向の速度変化が行われなくなります。つまり浮いたりします。

逆にY方向には0.0を必ず設定しているので、横に滑ったりすることがなくなります。
（厳密には全くなくなるわけではありませんが……詳しくは後述）
これをTickで毎フレーム呼ぶことで直進する車となります。

後はTick内で目標の速度に達するまではThrottle入力、目標に達したらSet All Physics Linear Velocityと切り替えるようにすることで
物理による加速感もあるそれっぽい挙動を実現しています。

何もなければこれだけでも十分直進はするのですが、何かあったりするのが世の常、
特に回転はきちんと制限しないとちょっとした小石で横向きになってそのまま直進するシュールな図が生まれることがありえます。

挙動の回転制御

直接物理の回転を設定するSet All Physics Angular Velocity in Degrees

先に説明したSet All Physics Linear Velocityは移動速度に対するノードでしたが、
回転速度に関してはこちらのSet All Physics Angular Velocity in Degreesノードを使います。

使い方はSet All Physics Linear Velocityと特に変わらず、入力した値で直接物理速度が設定されます

今回の制御ではX（ピッチ）やY（ロール）に関しては通常の物理通りに動いてほしいため、
Get All Physics Angular Velocity in Degreesで取得した値を入れています。
Z（ヨー）方向のみ0.0を設定しているので、仮にハンドルの入力があっても曲がることがなくなります。

この処理をTickで常に呼ぶだけでほとんど曲がることはなくなるのですが、実はとても細かい数字で曲がっちゃっていたりします。
この辺りは物理の処理順の影響で、通常なにも設定しなければ
Tick処理は物理処理の「前」（＝TickGroup：PrePhysics）に行われるため設定された後に物理処理が走るためです。

おそらくこの辺りの処理の正道はTick処理を物理処理の後（＝TickGroup：PostPhysics）に設定することです。（未検証）
が、Wheeled VehicleクラスのMovementComponent処理がどのタイミングで走っているか検証する時間的余裕がなく、
タイミング違いによる余計な不具合を作るかもしれなかったのでSetActorRotationで強制的にZ軸の回転を0.0に書き換え続けています。

UE4では物理のパラメータをいじれるノードもちゃんと存在するので、
この辺を抑えて作れば物理が生きてても直進だけする車を作ることができます。

トリガーボックスの配置

都市レベルのエディタでの様子

後はいい感じに車を配置して、制御用のトリガを配置してあげることで今回の都市シーンは作られています。

以上、簡単ではありますがCutting-Edge Test Driveの都市パートの車に関する記事でした。

以前の記事でMatineeを使ったカットシーン制作を紹介していましたが、UE4.23 からMatineeは サポートされておらず、近い将来エンジンから除外される予定です。

現在はSequencerに置き換わっているため、Sequencerを使った方法を紹介します。

１．Level Sequenceを作成する

まず、Cinematicsから「Add Level Sequence」を選択します。

Level Sequenceを保存します

２．カットシーンの時間を設定する

まずは、カットシーン全体の時間を設定します。

タイムスライダの赤い三角をマウスで左ドラッグし、範囲を延ばしていきます。

キレイな数値に収めるには、スナップを有効にしましょう。

「Playback Options」(再生マークのボタン)のStartとEndからも設定できます。

３．Actorを登録する

次に、カットシーンにActorを登録します。

今回は、空のシーンに最初から配置されている椅子を動かしてみたいと思います。

登録したいActorをツリービューにドラッグまたは、

TrackからActor To Sequencerを開きActorを選択でActorを登録できます。

４．キーフレームを追加してActorを動かす

「Add a new key at the current time」 をクリック or トラックを選択しEnterキーでキーフレームを追加

続けて、10秒目にキーフレームを打ってみます。

1.まずは、タイムスライダをマウスで左ドラッグして、目的の時間に合わせます。
2.目的のActorを移動させます。
3.Transformトラックを選択して「Add a new key at the current time」ボタンを押します。
4.赤丸が、追加されたキーフレームです。

これで、0秒と10秒のタイミングにキーフレームが打たれた状態になりました。

「Play」ボタンを押して再生すると、椅子が移動する様子が確認できるハズです。

５．キーフレームを編集する方法。

キーフレームを右クリックして「Set KeyTime」を選択すると、直接数値でタイミングを移動することが出来ます。

もっと詳細に編集したい場合は、カーブエディタにアニメーションカーブを表示して、直接編集することも出来ます。

「Show the animation keys in a curve editor」をクリックするとSequencer Curvesエディタが開きます。

キーフレームだけでなく、曲線のタイプや減衰率などを調整することができます。

以前の記事でMatineeを使ったカットシーン制作を紹介していましたが、UE4.23 からMatineeは サポートされておらず、近い将来エンジンから除外される予定です。

現在はSequencerに置き換わっているため、Sequencerを使った方法を紹介します。

今回は、カメラの操作についてです。前回作成したプロジェクトの続きから操作を行います。

１．Sequencerエディタを起動する

コンテンツブラウザから前回作成したLevel Sequenceを起動します

２．Cameraを追加する

Cine Camera Actorを追加します。

Modesパネルから「Cine Camera Actor」をドラッグし、前回と同様にツリービューにドラッグしActorを登録または、

「Create a new camera and set it as the current camera cut」(ビデオアイコンのボタン)をクリックで追加することができます。

↓の画像のような状態になればOKです。

今回はカメラを切り替えるためにカメラを二つ追加します。

Cine Camera Actorをツリービューに追加するとCamera Cutsも自動で追加されます。

追加されていない場合はTrackボタンから「Camera Cut Track」を追加できます。

３．カメラカットの切り替え

Camera Cutsの「+Camera」からカメラを選択することによってカメラを切り替えることができます。

「Lock Viewport to Camera Cuts」(Camera Cutsにあるビデオアイコン)をクリックすることによってビューポートの視点をカメラ視点に切り替えることができます。

タイムスライダからカメラを切り替えるタイミングを調整できます。

４．ゲーム上での再生確認

前回同様シーケンサーエディタの再生ボタンを押すと、カメラが切り替わる様子が確認できるかと思います。

次回は、SkeltalMeshActorを登録して、アニメーションを再生する方法をご紹介する予定です。

青いおっさんを歩かせてみたいと思います。

以前の記事でMatineeを使ったカットシーン制作を紹介していましたが、UE4.23 からMatineeは サポートされておらず、近い将来エンジンから除外される予定です。

現在はSequencerに置き換わっているため、Sequencerを使った撮影を紹介します。

Sequencerでのカットシーン制作、第３回です。

今回は、カットシーンには欠かせない、キャラクターのアニメーション制御の方法をご紹介します。

UE4使いにはお馴染みのグレイマンを、Sequencerを使って歩かせてみたいと思います。

グレイマンのアセットを使用したいので、「Third Person」テンプレートをプロジェクトに追加します。

１．SkeltalMeshActorを用意する

第１回で椅子を動かした際と同じように、動かしたいActorは予めレベル上に配置しておきます。

「Content Browser」から「Content / Mannequin / Character/Mesh/SK_Mannequin」を選択して、ビューポート上にドラッグ＆ドロップします。

「SK_Mannequin」という名前のSkeltalMeshActorが作成されます。

２．Sequencerエディタを開き、Skeltalグループを追加する

前々回の椅子と同様に、「SK_Mannequin」アクターをツリービューに登録します。

「SK_Mannequin」を登録するとサブトラックに「Animation」トラックと「Transform」トラックが自動で追加されます。

もし追加されていない場合は「+Track」から手動で追加してください。

「Transform」トラックの使い方は、前回，前々回と同様です。

３．アニメーションキーを打つ

タイムスライダを最初のフレームに合わせて、「Animation」トラックを選択し、「+Animation」ボタンを押します。

すると、↑のように、このSkeltalMeshActorに適用可能な Animation Sequenceアセットの一覧が表示されます。

ここから、このタイミングで再生したいアニメーションを選択します。今回は「ThirdPersonIdle」を選択します。

これでSequencerエディタの「Play」を押して確認してみましょう。

さっきまでTスタンスだったグレイマンが、待機アニメーションを行います。

４．アニメーションのループ再生

アニメーションの再生時間を延ばすと自動でループ再生がされます。

赤丸で示した縦線がアニメーションのloop間隔になります。

５．アニメーションの切り替え

シーンの途中でアニメーションを切り替えるには、単にそのフレームで「Animation」トラックにAnimationを追加するだけです。

↓のようにキーを打つと、待機->歩き->走り という順にアニメーションが切り替わっていきます。

「Transform」トラックと合わせて移動させれば、立っているおっさんが歩き出し、走って行くカットシーンが出来上がります。

Sequencerの基本操作についてはココまでです。

他にも色々な機能がありますが、基本的には、

1.Actorを選択してグループを追加
2.グループにトラックを追加
3.トラックにキーフレームを打つ

という流れになります。

グループやトラックの種類は様々なので、色々触って確かめてみて下さい。

次回、Sequencer最終回では、今回までで作ったSequencerをゲームに組み込むための、Blueprintからの制御方法をご紹介したいと思います。

以前の記事でMatineeを使ったカットシーン制作を紹介していましたが、UE4.23 からMatineeは サポートされておらず、近い将来エンジンから除外される予定です。

現在はSequencerに置き換わっているため、Sequencerを使った方法を紹介します。

Sequencerの最終回です。

今回は、カットシーン制作ではなく、作ったカットシーンをゲームに組み込むための方法をご紹介します。

１．SequencerActorのプロパティ

まずは、Blueprintすら使わずに出来ることから。

SequencerActorのプロパティで、再生制御に関わる部分を見ていきたいと思います。

よく使う便利な機能を抜粋して紹介していきます。

Auto Play

Onにすると、ゲームが開始された時（正確にはレベルがロードされた時）に、自動的に再生が始まります。

オープニングのカットシーンや、カメラを用いずにループ再生させておく場合はこれを利用しましょう。

Loop

Don’t Loopにするとループなし

Loop Indefinitelyにすると無制限にループ

Loop Exactlyにするとループする回数を指定できます。

Play Rate

再生速度の倍率です。

Disable Movement Input / Disable Look at Input

それぞれ、プレイヤーキャラクターとカメラを操作するための入力を無効化します。

カットシーン再生中、プレイヤーキャラクターに動いて欲しくない場合に利用します。

あくまで入力を受け付けないだけで、重力や物理挙動による移動は通常通り行われますので、注意して下さい。

Hide Player

Onにすると、Sequencerの再生中、プレイヤーキャラクターを非表示にします。

入力の無効化と合わせて、イベントシーンなどで利用します。

２．BlueprintからのSequencer操作

BlueprintからSequencerActorを参照する方法は、他のActorと全く同様です。

基本的な再生制御のBlueprint関数は以下の通りです。

Pキーで再生，Rキーで逆再生，Sキーで停止，Qキーでリセット、スペースで一時停止です。

３．BlueprintでSequencerから受け取れるイベント

Sequencerを再生後、BlueprintでSequencerからイベントを受け取ることが出来ます。

「Event」トラックを追加してキーフレームを追加すると、そのタイミングでBlueprintに処理を流すことが出来ます。

追加したキーフレームを右クリックしProperties->Event->Create New Endpointを選択します

Director Blueprintを開くとカスタムイベントが追加されています。

キーフレームのタイミングでこのカスタムイベントが呼び出されます。

また、シーケンサーに追加したアクターのイベントもキーフレームのタイミングで呼び出すことができます。

今回はSK_Mannequin_Blueprintに追加したカスタムイベント「CustomEvent_Print」を呼び出してみます。

Properties->Event->Quick Bindから「CustomEvent_Print」を選択します。

すると、↓のようなノードがDirector Blueprintに作成されます。

以上で、全４回でのSequencerについての説明を終わりにしたいと思います。

基本的な機能のご紹介でしたが、カットシーンや映像作品の制作の足がかりになれば幸いです。

以前の記事でMatineeのMovie機能を使った撮影を紹介していましたが、UE4.23 からMatineeは サポートされておらず、近い将来エンジンから除外される予定です。

現在はSequencerに置き換わっているため、Sequencerを使った撮影を紹介します。

１．Sequencerを使った撮影

以前の記事を参考に、カットシーン全体の撮影時間を設定します

Sequencerエディタの「Render Movie Settings」を開きます。(カチンコのアイコンのボタンです。)

以下のような「Render Movie Settings」ウィンドウが開きます。

「Image Output Format」で出力形式を選択します。

「AVI 」の他、bmp, png, jpg での連番画像での出力に対応しています。

「Use Separate Process」をonにすると指定した解像度でウィンドウが開きます。

その他細かい設定項目についてはこちらを参照ください

ムービー出力の設定 (Render Movie Settings)
https://docs.unrealengine.com/ja/Engine/Sequencer/Workflow/RenderMovieSettings/index.html

ウィンドウを閉じると撮影が終了します。

撮影したファイルは、「Output Directory」で指定したファイルに保存されています。

デフォルトでは

[プロジェクトファイル]\Saved\VideoCaptures\

が指定されていされています。

こんにちは、エンジニアの小倉です。
今回は、任意のアクターをFoliage Typeとして使用することができる「Actor Foliage」という機能を使って、キー入力によってインタラクトできる草を大量に生やす方法を紹介します。

プロジェクトの準備

今回はThirdPersonテンプレートから始めます。
また、インタラクトできる草にはMegascansのアセットを使用します。

インタラクトできる草を作成する

インタラクトできる草のアクターを作成します。
ここではActorクラスを継承した新しいBlueprintとして、BP_PickableGrassを作成しました。
BP_PickableGrassはMegascansの草アセットを設定したStaticMeshComponentのみ持ち、プレイヤーが近づいているときにEnterキーを押すと自身を非表示にするというアクターにしました。※ 今回は説明用に設計を簡略化してます。本来であれば大量に配置されることを考慮する必要があります。

レベルにBP_PickableGrassを配置して動作を確認します。
プレイヤーを草に近づけてEnterキーを押すことで、Print Stringによる出力と、BP_PickableGrassが非表示になることを確認できました。

Actor Foliageを使用して草をペイントする

最後に、BP_PickableGrassをFoliage Toolで配置するためにActor Foliageを作成します。

作成したActor Foliageを開き、Actor Classに「BP_PickableGrass」を設定します。

Foliage Toolを起動し、Foliage Typeに作成したActor Foliageを追加してからペイントします。

これを実行して動作を確認します。
Foliage Toolで配置した草に近づいてEnterを押すと、草が非表示になることを確認できました。

Foliage Toolで草を配置すると狙った場所に草を出すことは難しいため、そのような場合はFoliage Toolで配置するよりもActorを一つ一つ手作業で配置する方が良いかもしれません（描画負荷を考慮しながら大量のActorを配置したい場合はInstanced Static Mesh Componentを使うといった方法もあります）。

今回は、背景が透過の画像をシーケンサーで書き出す方法を紹介いたします。

背景が置いていないプロジェクトを作成して、ProjectSettingsを開きます

     
ProjectSettings＞Rendering＞Postprocessing>Enable alpha channel support in post processing (expermental).
Allow through tonemapper 
を選択してプロジェクトを再起動します。

このときプロジェクトを開くまでの時間が長くなるので注意が必要です。
（2度目以降は普通のスピードで開けるようになります。）

Add Level Sequenceでシーケンサーを作成して、通常通りカメラ、長さなどを設定。
できたらMovie Render Queueを開き、そこに作成したLevelSequenceをドロップします。

Unsaved Configをダブルクリックしてウインドウを開き設定を変更します。

+Settingのタブからpng Sequenceを選択し追加、
元あったjepg Sequenceは選択してDeleteで削除

PNG＞Output Alpha のチェックをオンにします。
そしてAcceptを押して決定。

Movie Render Queueに戻るので右下のRender（Local）を押せば書き出しが開始されます。

レンダリング中の画面

保存された画像はMovie Render QueueのOutputのパスをクリックすればフォルダが開き確認できます。


Photoshopで開くとアルファがついて背景透過されているのが確認できます。

２、３日でサクッと作ってサクッと応募！

“第14回UE4ぷちコン”開催決定！

開催期間：　2020年7月18日（土）～8月31日（月）（9月1日（火）AM10:00）まで！

UE4ぷちコンとは、株式会社ヒストリアが主催する、
ゲームエンジン「Unreal Engine 4」の学習を目的とした
一般参加型ゲームコンテストです！

参加者は短期間（約1か月）でテーマに沿った作品を制作・投稿し、入賞を目指します。

「UE4の学習」を目的としたコンテストなのでプロもアマチュアも関係ありません。
ぜひ皆さんのUE4に触れるきっかけにして頂けると嬉しいです！

テーマ発表は7月18日(土)

今回はなんとUNREAL FEST EXTREME 2020 SUMMERでテーマを発表します！

テーマの発表と同時に開催概要を公開、コンテスト開始となります。
7月18日(土)イベント終了後に第14回UE4ぷちコン特設ページが公開されるので、チェックしてくださいね！

特設ページはこちらから

※UE4ぷちコンはご協賛いただける企業様を募集しております。
詳細は下記よりお問い合わせください。
株式会社ヒストリア (info@historia.co.jp)

【告知サイト】 https://historia.co.jp/ue4petitcon14　（7月18日に公開）
【主催】　株式会社ヒストリア
【共催】 エピック・ゲームズ・ジャパン

2020年6月27日(土)、28日(日)に、インディーゲームの祭典 BitSummit
初のオンラインイベント 「BitSummit Gaiden」が開催されます。

様々なチャンネルで同時に配信が行われるのですが、その内の1つ「BitSummit Online GameJam」にて
大阪・京都の専門学校、大学３校によるゲームジャムがオンライン上で開催されます。

GameJamチャンネルでは、ゲームの進捗発表以外にも複数のトークショーが展開され、
弊社代表の佐々木もトークセッションに参加いたします。

放送はTWITCHとYouTube上で行われ、Discordに参加するとより楽しめる形になっているそうです！

今週末、ぜひご視聴いただけたらと思います♪

＜概要＞

日程：2020年6月27日(土)

時間：13:00-14:00

トークテーマ：ゲームエンジンの進化とゲーム作りについて

公式ホームページ
http://bitsummit.org/

TWITCH
https://www.twitch.tv/bitsummitinterview

YouTube
https://www.youtube.com/channel/UCP8dWkav7wLMOFwgz57g2zQ

こんにちは。
今日はキラキラなマテリアルを作って、UMGに表示したいと思います。

テクスチャ画像を使用してマテリアルを作成しても良いのですが、
今回はUE4だけで実装できる方法で
DiamondGradientノードを使用して作成してみたいと思います。

マテリアルを新規作成し、DiamondGradientノードを繋いでみると
このようなダイヤ型のグラデーションが表示されます。

なるほど。
せっかくなのでキラキラ光るアニメーションを設定してみました。

①SineのPeriodの値を変更すると明滅するスピードが変わります
②Flash…ScalarParameterで明滅する光の強さと光り方を調整しています（0.1～0.6あたりで調整するとそれっぽいみたいです）
③Color…VectorParameterで色の変更をしています
④Sineの値が-のときに光が消えて真っ暗になってしまうようなのでADDで補正値を入れています

こうなりました。

UMGでいっぱい配置してみました。
こちらの記事で紹介している方法でタイムライン上にFlashとColorを呼び出して
値を変更しています。

きらきらです。

UMG上で縦横に伸ばせば光線のような表現もできて面白いですね。
極座標と組み合わせてみたりしても面白いかもしれません。

今回の記事では、4.25の新機能であるCamera Cut ブレンドをご紹介します。

Camera Cutブレンドを使用すると、シーケンサーのCamera Cutsトラックで、カメラ同士を”ブレンド”することができます。

最初にこの機能の名前を見たとき、ついにオーバーラップやクロスフェードのような画像処理ができるようになったかと思ったのですが、残念ながら違いました。
ブレンドといっても[Set View Target with Blend]ノードと同じ、カメラ間のパラメーターのブレンドになります。

[Set View Target with Blend]がシーケンサー内できるようになっても…という方もいらっしゃるとは思いますが、タイムライン上で直接調整できるのは扱いやすく、便利な機能ですので試してみて下さい。

では、設定していきましょう。
シーケンサーを作成し、カメラを2台以上登録して、Camera Cutsトラックに割り当てます。
Camera Cutsトラックを右クリックすると、[Can Blend]というオプションが追加されていますので、を入れて有効にして下さい。

ここではA/Bという名前のカメラを設定しましたが、各カメラのセクション区切りを移動してみると、補完されるカーブがセクション間に表示されるようになりました。

シーケンサーを再生すると↓のようになります。

カメラ自体にアニメーションは設定していませんが、Camera Cutブレンドだけで簡単に動きが作れました。

ちなみに、カーブの部分を右クリックすると、メニューのOptionsから補間カーブを一覧で選ぶことができるようになっています。

マウスカーソルを乗せると補間アニメーションも再生されるので、非常に分かりやすいですね。

応用例として、短いブレンドでカット同士をつなぎ、スウィッシュパンやトランジションのような演出を作ってみました。

このような動きは、直接キーを打つよりもCamera Cutブレンドを使った方が簡単に作れます。個々のカメラにアニメーションがついていないため修正も容易です。

以上、簡単に使えるシンプルな機能ではありますが、Camera Cutブレンドの紹介でした。

株式会社 日本HPさんの取り組んでいる、
VRに関わるさまざまな企業の方が参加している「HP VRパートナー」に
ヒストリアも参加させていただきました！
詳しい内容については「VRソリューション」および、左記ページ内の「パートナーシップ」欄をご覧ください。

また、この夏行われる「第14回UE4ぷちコン」にて
初めて賞品でのスポンサーをしていただくことにもなっております。

弊社は今後も、様々な企業と協力しVRを盛りあげていきたいと思います。

以下、日本HP様よりいただいた文章を掲載。

■日本HPとは

株式会社 日本HPのワークステーションは3D CAD/CG/映像制作など高度なグラフィック性能を必要とする専門分野のお客様に選ばれて
12年連続国内シェアNo.1。近年ワークステーションユーザー様のワークフローにおいて、ニーズが高まるVRにおいて、
高いグラフィック性能のマシンや4K解像度のヘッドマウントディスプレイを提供しています。さらに、株式会社ヒストリア様もご参画いただいている
「HP VRパートナーシップ」を通じて、VR導入を検討されるお客様をハードウェアだけではなく全面的にサポートしています。

■「HP VRパートナー」とは

ゲームや法人領域など様々な分野で導入が急増するVR市場のニーズに
ワンストップでお応えするという日本HPの目的に賛同された企業様です。
日本HPは「HP VRパートナー」様の高い技術力・ソリューションとの強力なコラボレーションにより、
豊かな未来を創造してまいります。

こんにちは、エンジニアの山中です。
今回はエディタ起動時に関して、知っておくとお得な設定たちをご紹介します！

設定項目の場所は以下になります。

「Edit」→「Editor Preferences…」→「Loading & Saving」→「Startup」

内容は以下の通りになります。

私の場合は、比較的読み込み時間が短いテストレベルで作業することが多い為、
「Load Level at Startup」を「Last Opened」にして
エディタ起動する度に特定のレベルを開く、といったフローを省略するようにしています。

プロジェクト環境やエディタの利用目的によって有用性は人それぞれかと思いますが、
是非これらの設定を活用して、今後の開発に役立ててみてください！

2020年7月18日（土）～2020年8月31日（月）
「Unreal Engine 4」学習向けミニコンテスト
第14回UE4ぷちコン開催中！
今回のテーマは「なつやすみ」

「Unreal Engine 4」(以下、UE4)を使用した作品を制作して応募するUE4ぷちコンは
UE4学習用コンテストとして開催しております。

7月18日（土）より開催中の「第14回UE4ぷちコン」でも
たくさんのスポンサー企業様にご協賛いただき、作品制作に活かせるソフトウェアライセンスをご提供いただきました！

各ライセンス毎に申込方法が異なりますので
「ソフトウェア概要 / 申込方法」をよくお読みの上、お申込みください。

どれもぷちコンの作品制作に活かせるものとなっております。ぜひこの機会に試してみてください♪

（50音順・敬称略）

2020年7月18日(土)～2020年8月31日(月)
「Unreal Engine 4」学習向けミニコンテスト
第14回UE4ぷちコン 開催中！
今回のテーマは「なつやすみ」

「第14回UE4ぷちコン オンラインゲームジャム」開催決定！

「Unreal Engine 4」(以下、UE4)を使用したゲームや映像等の作品を作る、
学習向けミニコンテスト「UE4ぷちコン」に合わせて行っているぷちコン ゲームジャム

今回のぷちコン ゲームジャムは、オンライン開催！
ビデオ会議ツール“Zoom”を使用して参加者みんなが自宅等から集まって個人制作を行います♪
「2、3日でサクッと作ってサクッと応募」したい人必見！
2日間全力集中でゲームを作っちゃいましょう！

ゲームジャムには弊社スタッフも参加するので
困った事があればわかる範囲で答えてくれます☆

もしかしたらどこかのタイミングでUE4にちなんだゲストが遊びに来るかも・・・？
誰が来るかは当日のお楽しみ～！

そして更に！ 参加者全員に素敵なプレゼントも…♪
どんなものかはゲームジャム当日に発表します！

今までとは少し違ったぷちコン ゲームジャム、この機会にぜひ参加してみてくださいね！

参加費無料！
お申込みはコチラからどうぞ！ ※先着20名
8月1日(土)、8月2日(日)
第14回UE4ぷちコン オンラインゲームジャム

■ぷちコン ゲームジャムとは

ぷちコン開催期間中、複数人のチームを作り、2日間に渡ってぷちコンに応募するゲームを制作、
完成まで経験できるオフラインイベントです。

しかし今回は世の中の情勢を鑑みオンライン開催とし、チームを組まず、2日間で個人でゲームを制作し、
最後にそれぞれの作品発表を行います！

「１人で制作するのは不安だがUE4を覚えたい！ 」方、少しでもUE4を使用したゲーム制作にご興味のある方、
コンテストが初めてという方、常連の方、どなた様も大歓迎です！

ぜひご参加ください♪

■今回はオンラインで開催！

今回使用するのはビデオ会議ツール“Zoom”
ボイスチャットを繋げた状態で各自自宅等でゲーム制作を行います。(質問がある時以外は基本ミュートで大丈夫です。)
分からない事があればいつでも問いかけができて、画面共有をしながらのアドバイスも行えます☆

事前に“Zoom”のダウンロードをお願いします。
ダウンロードリンク　https://zoom.us/client/latest/ZoomInstaller.exe

■開催概要

8月1日(土)・8月2日(日)の2日間でUE4を使ったゲームを制作していただきます。(合計制作時間13h30m程)
初日の号令と共に、一斉にゲーム制作をスタートします。
2日目（8月2日）17:00～制作したゲームをみんなの前で発表し、後日 第14回 UE4ぷちコンに応募していただきます。

UE4を学ぶついでに参加賞のぷちコンオリジナルTシャツをゲットしちゃいましょう♪

■スケジュール

8月1日（土）11:00-19:00

8月2日（日）11:00-19:00

■場所

• 各自自宅等のUnreal Engine 4でゲーム制作が行える場所
• ビデオ会議ツール“Zoom”を使用　※詳細は参加者にお伝えします。

■事前に準備いただく物

• Unreal Engine 4が使用できるPC
• その他ゲーム制作に必要になりそうなもの
• ビデオ会議ツール“Zoom”のダウンロード
• ボイスチャットと画面共有が出来る環境
• ビデオカメラ(任意)

■注意事項

• 休憩・昼食による入退室は自由となっております。各自合間を見てお取りください。
• ゲームジャム参加による機材トラブル等の問題について、主催者及び当コンテスト関係者は一切の責任を負いません。
• ゲームジャム当日の開催風景や制作発表会の様子等は、本コンテストとUnreal EngineのPR/広報のため、主催者、及び主催者の認める第三者が、公開、展示、印刷等を無償かつ無制限に行えることをご了承ください。

■第14回 UE4ぷちコン 開催概要

( https://historia.co.jp/ue4petitcon14 )

■運営

株式会社ヒストリア （ Twitter公式アカウント ）

みなさんこんにちは！
ヒストリア広報部です(๑˃ᴗ˂)و

先日、Unreal Engineの大型勉強会アンリアルフェスのオンライン版
『UNREAL FEST EXTREME 2020 SUMMER』が開催されました！

ヒストリアも企画当初から協力させていただいただけに
大盛況の結果で終わりとても嬉しいです♪

本編ではさまざまな方の講演を
録画パートとリアルライブでの2種類で行い、リアルライブでは質疑応答も行いました。

ヒストリアでは最近”Cutting-Edge Test Drive”を公開したこともあり
(と言ってもすでに1ヶ月半以上経ってます、月日が経つのは早い・・・)
こちらのコンテンツを題材にエンタープライズコンテンツ制作のワークフローの一例を紹介しました！

同じUnreal Engineを使用していても、作ってるコンテンツによって
制作過程はさまざまだと思いますが、
エンタープライズコンテンツの制作はあまり語られないため新鮮だったのではないでしょうか？

リアルライブでの質疑応答も、興味深い質問を沢山していただき、
時間が許すならもっと答えたい！ と感じる時間でした(答えるのは私じゃない)

そんな講演動画がYouTube Unreal Engine JPチャンネルに公開されています！

また、同講演で使用したスライドもSlideShareに公開いたしました！

UE4エンタープライズコンテンツを制作する際のワークフロー ～Cutting-Edge Test Driveを題材に～

■講演者
株式会社ヒストリア
代表取締役
プロデューサー/ディレクター
佐々木 瞬

■概要
アーティストとエンジニアの混合で挑む、ある一定規模以上のUnreal Engineを用いたプロジェクトでは、Unreal Engineが想定しているワークフローに沿って制作するとスムーズに進みます。 しかし、その知見はゲーム制作と紐づけて語られることが多く、ゲーム制作外でそれが語られることは稀です。 本公演では、ヒストリア・エンタープライズが制作したインタラクティブデモ”Cutting-Edge Test Drive”を題材に、開発フェイズについて、そして各フェイズで何を行うことが重要だったのかを語ります。 千差万別なエンタープライズのコンテンツではありますが、ひとつのサンプルを提示できたらと思います。

他にも講演された方のスライドがEpic Games Japan SlideShareにて公開、
フェス当日の講演動画が着々とアップされているようなので是非ご覧ください♪

そしてまだまだフェスレポートは続きます(๑˃ᴗ˂)و

講演の合間にUE4ぷちコンの宣伝と、「第13回UE4ぷちコン」の受賞作品の紹介を行わせていただきました！

普段のアンリアルフェスでは、受賞作品の展示を行っているので
何かしらみなさんの作品を紹介する場を作りたい！
という事でみなさんが応募時に投稿してくれた動画のショートカット版になりますが
ご紹介させていただきました♪

YouTube「historia Inc.チャンネル」にも公開いたしましたので
見逃した方はどうぞご覧ください！

(応募動画自体がとても素敵なものばかりでした。
ぜひ「第13回UE4ぷちコン　受賞者発表！」から動画を見に行ってみてくださいね！ )

そして生放送の最後に「第14回UE4ぷちコン」のテーマ発表と概要について公開させていただきました！

既に作品制作に取り組んでいただいてる方もお見掛けしており盛り上がりに大喜びです！

UE4ぷちコンに関するツイートはぜひ

ハッシュタグ　#UE4ぷちコン

でツイートして貰えると嬉しいです！！！！

最新情報や皆さんの進捗をRTしてます！
ヒストリア公式Twitterのフォローも是非お願いします♪

本編のあとは、普段行っている懇親会をオンラインで。
普段は直接交流できる形でしたが、全員が参加するとカオスになってしまうので、雑談を聞いてもらう形に。

さまざまなゲストをお呼びしてトークしていく形で
ヒストリアからもアーティストの黒澤がゲストでお話しさせていただきました(๑˃ᴗ˂)و

というわけで、
講演動画＆資料公開！のお知らせと『UNREAL FEST EXTREME 2020 SUMMER』レポートでした☆

春に開催予定だったアンリアルフェスをなんらかの形で行いたい！
という想いから開催が実現した生放送、

本当に素敵なものになり、少しでも協力できた事をとても嬉しく思います♪

それではまた！

Blueprint Editor で変数・関数の Node を Event Graph 上に配置したときなどに、
それらの名前を人が読みやすいように整形して表示してくれる仕組みがあります。

今回は、この名前の整形処理についてざっくりとお話します。

どこで整形処理が行われるのか

名前の整形には、FName のメンバ関数である NameToDisplayString() が使われています。

第一引数に渡した文字列を整形した結果を返すというものです。

どのような整形が行われるのか

下記のような整形が行われます。

■ 単語の間にスペースを挿入する
…… 名前がパスカルケースもしくはキャメルケースで書かれていることを想定した処理になっている
…… ただし、特定の単語 (一部の冠詞・前置詞など) はすべて小文字表記にする処理が入っている
…… この処理によって数字が不自然にスペースで区切られないように配慮されている
■ 先頭の文字を大文字にする
…… ただし、bool の名前について、先頭の文字が ‘b’ かつその次の文字が大文字の場合、先頭の ‘b’ を除外する
■ アンダースコアをスペースに置換する

なお、すべて小文字表記となる単語は下記の 15 語です (UE 4.25 時点)。
残念ながらコード内にベタ打ちで書かれているので、.ini を編集して追加・削除するようなことはできません。

In, As, To, Or, At, On, If, Be, By, The, For, And, With, When, From

また、先頭の ‘b’ が除外されるのは、それが bool の名前であるときに限定されています。
NameToDisplayString() は第 2 引数 bIsBool で「bool の名前かどうか」を取るようになっており、
これが false のときには先頭の ‘b’ を除外する処理は走りません。
試しに bool 型でない変数の先頭に ‘b’ を付けてみると、除外されずに残ることがわかります。

詳細な処理内容を知りたい方は、\Engine\Source\Runtime\Core\Private\UObject\UnrealNames.cpp 内の NameToDisplayString() の定義を読んでください。

整形が上手くいかない例

この整形処理ですが、大文字が連続した場合に単語がスペースで区切られないという問題があります。

エンジン側で用意されている関数の大部分は、UFUNCTION 内のメタデータ指定子 DisplayName に
意図通りにスペースが挿入された名前を設定することでこの問題を回避しているのですが、
下のような一部の関数は対応できていません。

“GetIDFromData” の場合は、 C++ 定義であれば DisplayName に “Get ID from Data” を設定するか、
アンダースコアがスペースに置換されることを利用して “GetID_FromData” とするか、
“Id” 表記にするなどで対応することになります。

試しに処理内容を変更してみる

最後に、NameToDisplayString() に下記のようなコードを追加して、
上記の大文字連続時の問題の解決を試みることにします (後述しますが、不完全なコードです)。

…
	
	    bool bWasUpperCase = false;
	
	    …
	
	    if( (bUpperCase || (bIsDigit && !bWasMinusSign)) && !bInARun && !bWasOpenParen && !bWasNumber)
	    {
	        if( !bWasSpace && OutDisplayName.Len() > 0 )
	        {
	            OutDisplayName += TEXT( ' ' );
	            bWasSpace = true;
	        }
	        bInARun = true;
	    }
	
	    // 追加はじめ
	    // 今着目している文字とその前の文字が大文字で、
	    // かつ、次の文字が存在していてそれが小文字の場合、
	    // 今着目している文字の前にスペースを挿入する
	    if (bWasUpperCase && bUpperCase && CharIndex + 1 < Chars.Num() && FChar::IsLower(Chars[CharIndex + 1]))
	    {
	        OutDisplayName += TEXT(' ');
	        bWasSpace = true;
	        bInARun = true;
	    }
	    // 追加おわり
	
	    // A lower case character will break a run of upper case letters and/or digits
	    if( bLowerCase )
	    {
	        bInARun = false;
	    }
	
	    …
	
	    bWasUpperCase = bUpperCase;

	    …

この変更により、一部の Node については意図通りに表示されるようになりました。

ただし、この簡素過ぎるコードでは “IDs” が “I” と “Ds” で区切られてしまうようになるなど、別の問題が発生します。

何より、ちょっとした表示上の問題のためにエンジンの根幹部分にある FName のコードを修正するというのは割に合わないため、
修正を加えることは基本的に推奨できません。あくまで一例として参考にしてください。