Unity6(Preview)のWebGL書き出しを試してみたよ

Unityのフリーランサーをやっている者です。
去年末にUnity6でWebGLのモバイルの正式対応が告知されましたね。

https://blog.unity.com/engine-platform/web-runtime-updates-enhance-browser-experience

そして奇しくも私が数年ぶりに追加仕事の無くなったの５月
求職かけつつ、次は何系の仕事探そうかなとsteamのゲームサーバー触ったり
OpenAIとかGoogleI/Oの発表見たりしていたら
5/2にUnity6のPreview版のリリースがされてました。

https://unity.com/ja/releases/unity-6

GW中ずっと飲み続けた酒をやめ、ちょっと腰据えてテストしてみるかと。
これはもうタイミング的にやるっきゃないぜ。


# 手っ取り早いUnity WebGL書き出しの始め方
まずGitHubに２つのリポジトリを作成します。

１つ目はUnityのProjectFileを入れるのに使って
２つ目はGitHub PagesにしてWeb上での確認用に使います。
なんで二個リポジトリ作るかというとPagesのページはPublicにする必要があるから。
うっかりソースコード露出するの嫌な人もいるだろうなって配慮です。
GitHub Pagesについてはこちら

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

![スクリーンショット 2024-05-23 074315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30562/575ca3d3-e6fb-1df1-aff7-958a907d27ea.png)
設定してちょっと待つとPagesの最上部にURLが発行されます。

それら２つのリポジトリをローカルにCloneして
１つ目のリポジトリにUnity6のProjectFileを突っ込みます。
![スクリーンショット 2024-05-22 221259.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30562/c63c3f2b-d637-997e-3522-c0f76cd8793c.png)
私は基本のUniversal 3Dで立てました。

左上のFileメニューにBuildSettingsの代わりにBuildProfilesってのが追加されてるので
そのパネルを開いてPlatformをWebGLにして
Buildボタンを押したときのファイル書き出し先を２つ目のリポジトリにします。

![スクリーンショット 2024-05-22 212023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30562/e1c835f1-e05b-41da-4cd7-ccec8c289fa2.png)

で、２つ目のリポジトリをCommit + Pushして
出力されたGitHub Pagesで確認できます。

# というわけでできたのがこちらのwebアプリです。
よくある障害物飛ぶランゲームです。
工数は無理やり実装盛り込む箇所考えながら７日くらい

Chromeのインターネット接続ない時の恐竜みたいなやつ

https://x.com/sagaraKUN/status/1793471744717820091

https://sagarakun.github.io/UnityWebGLTest/

 ***※できればスマホで見てくださいね。***
PCでも動くけどモバイルWebGLの確認用で作ってみたものなので。 

よく使いそうな実装無理やり盛りなのでちょっと重めです。
UniTaskとUniRXにPostEffect、VideoPlayerでのビデオストリーミング
外部API叩く(OpenAIの画像生成で背景SkyBox＋Chatに歴史クイズをつくってもらってJSON型で生成して表示)
VertexShaderでのMesh形状変化とか
トゥーン系、透過系のShaderつけてCanvasにスマホとPCのinteraction周り
物理演算にParticleSystem、AudioClipにScene遷移
FbxとAnimatorともろもろ基本的な実装入れましたが普通にUnityしてる。

Soundはいつものひろきにつくってもらったやつです。

https://x.com/anchor_suzuki

# やってみたらビックリするくらい簡単に書き出せた。
特に書くこともないくらい普通に書き出せました。
強いて言うなら
* Shader周りはちょっと修正しなきゃいけないやつある
* 省電力モードだとfps30に制限される
* リアルタイムだと影がちらつきすぎる
* UniTaskちょっと挙動変かも

などですね。
ネット上でUnity WebGLで調べるといろんな問題出てくるんですが
ほとんど引っかからずすっと書き出しまでいけました。
Unityの中の人がめっちゃ対応してくれたんですね。
**ありがとうUnityのWebGL書き出し部門の人たち。**
とはいえ問題がゼロってわけではないんで
今回は多少の(ビデオストリーミングが爆速になったりとか)
バグは気にしないスタイルです。

新しめのiPhone/Androidで確認済みですが
すでにバグ報告が来ている端末あります...
なんかアウトラインが最前面来てるっぽい
<img width="200" alt="qiita-square" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30562/13ab85c9-5568-e5b2-20f1-320617d90c86.jpeg">


# Unity6Preview WebGL書き出しを触ってみた感想

開発アカウント作って支払先とか税金の登録して
アプリを作ってアップロードして審査あって
審査落ちて修正してまた審査出してリリースする
のが定着してるアプリの界隈の人間としては
あり得ない速さで実機での確認に到達します。(開始して１時間で実機テストできる)
ちょっとした変更もGitにPushしてすぐに確認してもらえるので
**筆舌に尽くしがたい**楽さでした。

特に新規案件の入口作業やることが多い人
最近Unityを始めた初学者
ちょっと作ったものをすぐ公開したい人
フリーゲーム作る人とかにおススメ

でも今ゲーム作ってる人は市場があるSteam,AppStore,GooglePlayなどの
プラットフォームにのらないから見つけてもらえません。
まず見つけてもらうところ(広告)から
考えないといけないのはドでかいデメリットですね。

課金の仕組みもプラットフォームのテンプレに乗るだけなのが一番楽ですし。

でもWeb上ならプラットフォームに抜かれる15～30％もありません
今ってPayPayなんかの決済系のAPIとかもいっぱいあるし
フリーゲームならたくさんあるweb広告のテンプレのどれか載せるの結構楽なのでは？

新しく出てきた技術(最近だと生成AIとかクリプト系など)は
プラットフォーム側で規制されて
ある程度浸透してから規制緩和ってケースが多いんですが
それも規制ないので出てきてすぐいじれます

アプリにするとOSのバージョンアップごとに更新が中身の更新が必要だったり
開発スケジュールやの中長期化、今は基本的分業化進み切ってるので人数も必要ですし
外注にしてもちょっと作ってすぐ辞めるみたいなことが難しいです。

広告の案件などの公開期限付きのもの
一か月後にやるイベントで使いたいなどの開発スピードが求められるイベント系
なんかはアプリにするのに向いてないんですが
このスピード感だったら全然いけちゃう

なにより滞りなくストレートに書き出し、端末テストまでいけたので
昔のUnity WebGL書き出しと比べるとめちゃくちゃ将来性感じます。

# お仕事ください
こっち系の仕事ってどう探せばいいんですかね？
しばらくやってたのはアプリ系だったので
web系というかゲーミフィケーション的というかこっち系の仕事の探し方がわかりません。

プラットフォーム規制無いしAPI叩くのおもしろいから
ClosedAPIいっぱい抱えてる会社の仕事を狙うのがおもしろいのか
それともオープンな生成AIのAPIとか活用する企画が楽しいのか
時間制限付きの短納期案件バカバカ片づけるのが楽しいのか
イベント連動型の企画が楽しいのか
フリーゲーム作ってユーザー認証、決済API、web広告実装入れるのが楽しいのか

試してみたい実装が多すぎる。

誰か仕事の探し方とかおもしろい使い方知ってる人は教えてください。
こんなおもしろ実装あるよって話も聞きたい。

サイバーエージェントとかこっち系の案件やってんのかな？
こっち系がどっち系なのかもよくわかんないけど

私のアカウントはこちら。

https://x.com/sagaraKUN

続き

https://qiita.com/sagaraKUN/items/3fa6d277a3c680367ecf