UE5&Web OverlayでコスパよくUIをつくる
15.4K Views
June 15, 24
スライド概要
Unreal Engine5のUI開発において、Web Browser Plugin(公式)を背景透過して被せることで効率的にUIを開発する基礎検証をしました。
アニメーションや状態管理・画面遷移なども含めてOverlayで描画することが可能です。
React / Tailwind / Storybook / TanStack QueryなどモダンWebの開発フローを適用することで、ラクにUIが開発できたらよいなと思っています。
Web側のコード: https://github.com/kaiinui/ue5-webui
関連スライド
各ページのテキスト
UE5&Web Overlayで コスパよくUIを作る 乾 夏衣 合同会社六花 @_kaiinui
成果物 例: アイドルを育てるゲー 制作時間: 2〜3時 機 テキスト送 HUDを隠す機 選択肢機 会話ログ機 その他アニメーション等 https://share.cleanshot.com/7yc0Qgcw
しくみ 背景が透明なWeb BrowserをGameの上にのせる。 Webでタップ可能でない要素のタップは、Game側にイベントを伝播。 Touch Event WebView Game Event (via JS) Game
なぜWebか？ モダンWebのワークフローに乗ったUI開発 Live Reloa Storyboo 任意の状態を指定して開 状態管理がカンタン API連携がカンタ 既存のUIライブラ Figmaとの連 etc... のちのページで詳しく見せます
実装: UE5 Web Browser Plugin(公式)を追 「透過性をサポート」にチェッ OnConsoleMessage eventからconsole.logを取 → 連携イベント名 が入っていたら Set Input Mode Game Only
実装: Web React + Tailwindで実 最も下のレイヤ要素にclickハンドラを設 console.log( 連携イベント名 )
なぜWebか Live Reload ★5 コードを保存したら、すぐ に反映 https://share.cleanshot.com/MN7GfFFF
なぜWebか Storybook ★5 任意のシーンをすぐ開ける (デバッグモードに頼らない) 任意の状態を再現 すぐ動作テスト = UIはUIとして開発する フローの実現 https://share.cleanshot.com/cLwwxHsw
なぜWebか 状態管理がカンタン ★4 単純なReactなので、状態の扱い がシンプル。 会話シーンのようなUIはカンタ ンに実装できる。
なぜWebか API連携がカンタン ★4 fetchや、TanStack Queryが動く。 API連携が重要なアウトゲームが(比較的)カンタンに実装可能 https://tanstack.com/query/latest/docs/framework/react/overview
なぜWebか 既存のUIライブラリ ★3 例: テキスト送り https://share.cleanshot.com/6fbc0Dxc 例: UIのトランジション / アニ メーショ GSAP, framer-motionなど のライブラリでシンプルに実 装可能 https://share.cleanshot.com/37GtyYgb
Future Work パフォーマン 今回、ミドルレンジPCやモバイルでのFPSは検証していません 仮に戦闘シーンなどインゲームは難しいとしても、アウトゲーム / メニュー / 会話シーン / お知らせ機能などは検討余地があるかと 思います アウトゲームの例: APEX Legendsのロビー画面
よければ フォローお願いします @_kaiinui