Ebitengine + Wailsで配信者向けツールを作ろうとしてる話

Ebitengine + Wailsで配信者向け ツールを作ろうとしている話 Asakusa.go #3 (2024/9/13) @syumai

syumai ● ● ● ● ● ● ECMAScript 仕様輪読会 主催 Xコミュニティ「浅草界隈プログラマー」をやってます 株式会社ベースマキナで管理画面のSaaSを開発中 ○ GoでGraphQLサーバー (gqlgen) や TypeScriptでフロン トエンドを書いています Software Design 12月号からCloudflare Workersの連載をし てます 𝕏: @__syumai Website: https://syum.ai

• https://syum.ai

Ebitengine + Wailsで作る配信者向 け ツール

EbifLive (仮) ● ● 現在開発中のEbitengine + Wailsベースの配信者向 けツール ○ Ebitengineで作った「ウィジェット」をOBSのブラ ウザ経由で配信画面に配置できる ○ 「ウィジェット」はローカルにインストールした EbifLiveを起動すると配置できるようになる ○ 操作はWailsで構築されたUI経由で行う 読みは「えびふらいぶ」

The Go gopher was designed by Renee French. (http://reneefrench.blogspot.com/) The design is licensed under the Creative Commons 4.0 Attributions license. Read this article for more details: https://go.dev/blog/gopher

動機 (後付け) ● Ebitengineで作ったUIを背景透過して配信画面に載せられたら便利そう ● OBSのブラウザに操作UIを表示すると、画面に映り込んでしまう → 外部から操作しよう！

アーキテクチャ図 (雑) ● ● 設計を引いた時に雑に描 いたもの Wailsアプリケーション ○ ○ ○ ● ● コントロール用 UI WebSocket Server Widget Server (OBS用に WasmとHTMLを配信) を内包 UI ↔ BackendはWailsで Browser (OBS) ↔ Wailsは WebSocketで通信する

最初に作ったプロトタイプ ターミナルからSpaceキー入 力で操作していた これだと誰でもは使えない

Ebitengineとは

Ebitengine ● ● ● ● ● ebitengine.org Go製の2Dゲームエンジン ○ APIがシンプル Wasmにコンパイルすることでブラウ ザ上でも動作可能 本来ゲーム用途だが、2Dの背景透 過UIを作るのにちょうどよさそうだっ たので選定 サンプルで使っているFlappy GopherはEbitengine公式で提供され ているものです (ありがとうございま す)

• https://ebitengine.org/

Wailsとは

Wails ● ● ● wails.io GoのアプリケーションにHTML + CSS + JSのフロントエンドを付けら れるフレームワーク Electronみたいなものを想像して もらうとわかりやすい ○ ● 基本的にブラウザエンジンを同梱し ないので、最近のものでは Tauriの 方が近い Go側から公開した関数をJS側か ら呼べる

• https://wails.io

EbifLiveのJS側でJump()関数を呼ぶと、 Go側の(*Controller).Jump()メソッドが呼ばれる

EbifLiveのGo側の(*Controller).Jump()メソッドによって WebSocket経由でPublishされたメッセージを OBS内蔵ブラウザで受け取り、実際にジャンプする

Go側のコード 普通にGoの メソッドを書く

JS側のコード これだけでOK！ Jump関数は、Wailsによって自 動生成される

デモ

EbifLive (仮) の今後の展望 ● UIを整えた上で、配信でよく使うと思われる「カウンター」のウィジェッ トを実装できたら公開しようと思います ● Ebitengineを活用したウィジェットのいいアイデアがあれば、ぜひ GitHub IssueやXなどでフィードバックください！

ご清聴 ありがとうございました！

補足資料 発表内で紹介し切れなかったものを載せておきます ● Goでマルチプレイのゲームを作る(powered by Ebitengine) by ponyo877さん ○ ○ ● WebSocket周りを参考にしました https://zenn.dev/ponyo877/articles/e850a7c43ed337 スコラボ (β) ○ ○ ○ 配信者向けのカウンターを作ろうと思った時に見付けた Webサービス YouTube Liveのチャット欄などもカスタマイズできてかなり自由度が高いです https://www.sucolab.jp/

• https://zenn.dev/ponyo877/articles/e850a7c43ed337
• https://www.sucolab.jp/