Select to view content in your preferred language

打ち上げ花火を Unreal Engine で見るならどこから見るか

173
0
3 weeks ago

打ち上げ花火を Unreal Engine で見るならどこから見るか

こちらは、ArcGISアドベントカレンダー2024の 24 日目の記事です。他の記事もぜひご覧ください。

はじめに

突然ですが、あなたが最後に花火を見たのはいつのことでしょうか?

そしてその花火はベストといえる場所から見ることができましたでしょうか?

打ち上げ花火をよりきれいに見るための場所探しというのは、なかなか難しいものです。例えば、毎年行われている地域ごとの花火大会であれば、慣れ親しんだ地域住民なら知っているかもしれませんが、観光客や住んで日が浅い住民は、花火の打ち上げ場所がどこなのかなど事前情報なしには探すこともできません。また、事前に情報を持っていたとしても実際どのように見えるのかというのは当日になってみないとわかりません。

そこで今回は、次に花火を見る機会に備えるために Unreal Engine で花火はどこから見るといいのかを探るための以下の動画のようなサンプル アプリを作ってみました。

下から.gif

 

本記事では、上記のアプリを作成するまでに行った内容を共有していきたいと思います。

なお、今回のアプリは横浜スパークリングトワイライトの大さん橋での花火を参考に作成していきます。

事前準備

 今回は、ArcGIS Developers 開発リソース集の ArcGIS Maps SDK for Unreal Engine アプリ開発のページを参考にして、地図の表示と WASD キーを使った移動ができるようになっている状態からはじめます。

花火のエフェクトについては、Niagara システムを使って、Unreal Engine 公式のチュートリアルを参考に作成しています。ちなみに著者は、本記事執筆時に初めてエフェクトを作成しましたが、簡単に作ることができたのでぜひチャレンジしてみてください。

ArcGIS プラグインの設定を横浜市仕様に変更する

  上記したように ArcGIS Developers 開発リソース集で作成したプロジェクトに手を加える形でアプリ開発を行っていきます。

 まずは、初期位置を変えていきます。今回変更するのは、ArcGIS Map Component の中心点とカメラとなる DefaultPawn0 に紐づけられている ArcGIS Location Component  Position プロパティをそれぞれ下記の座標に変更します。

Longitude: 139.6443

Latitude: 35.45251

ArcGISMapActor0 の Extent の Geographic Center を変更ArcGISMapActor0 の Extent の Geographic Center を変更

 

DefaultPawn0 は下図のように高さも 5m の位置に調節します。

 

DefaultPawn0 の初期位置設定DefaultPawn0 の初期位置設定

上記の座標に変更すると、ちょうど海沿いから赤レンガ倉庫の方向を見るような視点になります。建物が何もないのも寂しいので東京都の PLATEAU データを下記の横浜市の PLATEAU データに変更しておきましょう。変更する箇所は ArcGISMapActor0 Layers プロパティです。

 URL:https://tiles.arcgis.com/tiles/wlVTGRSYTzAbjjiC/arcgis/rest/services/14100_Yokohama_shi_Building/Sce...

 Layers の Source を東京都のデータから横浜市のデータに変更Layers の Source を東京都のデータから横浜市のデータに変更

 

ここから視点を打ち上げ場所である「大さん橋」の方に向けるために Heading 90 に設定します。

 

初期位置の視点の向きを変更初期位置の視点の向きを変更

 

ここまで、ArcGIS Developers 開発リソース集のマップの設定部分を変更してみました。

次に夜のシーンに変更してみましょう。

夜の風景に変更する

  昼間の花火は見づらいので、夜のシーンに変更していきます。設定されていた Directional Light のトランスフォーム プロパティから回転の Y 軸の値を 70 に変更します。

Directional Light の回転を変更して、光源の位置を変更Directional Light の回転を変更して、光源の位置を変更

 

光源の位置を変更した後の表示されているシーン光源の位置を変更した後の表示されているシーン

 

夜のシーンに変更することができました。ただ、このままだと地図と建物のデータが見えないので Directional Light をもう一つ追加し、チャンネル機能を駆使して地図を表示しつつ夜のシーンにしましょう。

 

地図に対して Directional Light を配置するような形でドラッグ アンド ドロップ地図に対して Directional Light を配置するような形でドラッグ アンド ドロップ

 

Directional Light がバッティングしないようアイテムごとにチャンネルを設定Directional Light がバッティングしないようアイテムごとにチャンネルを設定

 

ここまで、夜の横浜港のシーンを作成することができましたが、白い光だとあまり夜のような雰囲気がないので少し青みを帯びたような光に変更します。

 

カラー ピッカーで好みの色に変更カラー ピッカーで好みの色に変更

 

なお、Directional Light のチャンネル機能については、Unreal Engine の公式チュートリアルを参考にしていただければと思います。

花火が打ちあがる位置を調節する

 最後に花火が打ちあがる位置を調整します。まず、Unreal Engine のサンプルで作成した花火をコンテンツ ドロワーからドラッグ アンド ドロップでレベルに追加します。

次に実際に打ち上げられる位置に配置するために ArcGIS Location Component を花火のアイテム(ここでは Firework )に追加します。

 花火のアイテムに ArcGIS Location Component を追加花火のアイテムに ArcGIS Location Component を追加

 

そして打ち上げられる位置ですが、今回は大さん橋なので下記の位置から始まるように設定します。

Longitude: 139.649827

Latitude: 35.453592

 花火の打ち上げ位置を大さん橋に設定、高さは 50 m に設定花火の打ち上げ位置を大さん橋に設定、高さは 50 m に設定

 

 レベルのプレイを始めると WASD キーで上下前後左右に移動しながら花火をあらゆる方向からみることができるようになります。

 

さいごに

 本記事では ArcGIS Maps SDK for Unreal Engine で打ち上げ花火をどこから見ればよいのか探るアプリを作成してみました。GIS においては可視領域などの判定で絶景ポイントを割り出すことができますが、実際に見ているような雰囲気や、現実ではなかなか難しい場所から花火を楽しめるのはゲームエンジンならではの表現かもしれません。

また、ArcGIS では PLATEAU をはじめ、3D の建物モデルが用意されています。それらを使って、今回のように ArcGIS Developers 開発リソース集のアプリ開発ページをベースに Unreal Engine で簡単なアプリを作成できますので、ぜひ一度お試しいただけると幸いです。

参考情報

 ArcGIS Maps SDK for Unreal Engine

  Esri Developer (英語)

  ArcGIS Developers 開発リソース集 Unreal Engineアプリ開発

 Epic Games Community - Unreal Engine

  基本チュートリアル:Niagara で花火を作成する

 

Version history
Last update:
3 weeks ago
Updated by:
Contributors