【Unity / WebGL】マップ制作ツール『キャンバスワールド』をHTMLではなくUnityで作る理由

どうも、まる。です！

みんなで『ネイト育成計画』の広大な世界を創り上げるプロジェクト、
『キャンバス・ワールド』のベース機能が、ついに完成しました！！！🎨

▼動画はこちら！

細かい仕様の解説は一旦置いておいて……実は今回の開発にあたり、「ある壁」にぶつかって深く悩む場面がありました。

そこで今回は、その開発の裏側（Unityで作るか？HTMLで作るか？）を、
ネイトたちの白熱した会議の様子とともにお届けします😎

▼みんなでネイト育成計画の世界を作るキャンバスワールドはこちら！

▼今回登場するキャラクターたちはこちら！

💡 ゲームのアイデア募集中！

本ゲーム『ネイト育成計画』は、
いつも応援してくださるみなさんのアイデアを元に、日々進化・開発を進めさせていただいています！

• 「こんな面白いアイデアはどうだろう？」

• 「こんなシステムがあったら絶対楽しい！」

• 「あんなスキルで無双してみたい！」

……などなど、ゲームを面白くするアイデアやリクエストは、
質問箱にてどしどしご応募ください！📝✨

いただいたアイデアは、どんな小さなものでもすべて目を通させていただきます！
一緒に『ネイト育成計画』の世界を創り上げていきましょう。
皆さんの自由で素敵なアイデアをお待ちしております！🙌

■質問箱

■ネイト育成計画についての情報はこちら！

🎨キャンバスワールド、何で作る？

世界を創造するためのアトリエ。

ネイトは真っ白なキャンバスの前に立ち深く悩んでいた。

「…悩ましいわね」

「なんだ、また悩んでるのか？
ネイトさんよ」

「…うん。これから『キャンバスワールド』を作るにあたって、何で作ろうか迷っていて…」

「何でって…いつもみたいにUnity（ゲームエンジン）で作ればいいじゃねぇか」

「もちろん私もそう考えていたわ。

でも、機能面や開発ボリュームを考えたら、
HTML（Webサイト）の方が楽で早く作れそうな気もしていて…」

「バーロー。
そんなの決まってるじゃないかしら」

「そうね。もはや義務教育と言ってもいいのではないかしら？」

ダブル【黒】 「そんなの、HTMLに決まってるでしょう？」
ダブル【白】 「そんなの、Unityに決まってるでしょう？」

「…は？」

「…え？」

🔥HTML vs Unity

「…私たちの聞き間違いかしら？
今、はっきりと『Unity』と聞こえた気がしたのだけど」

「初歩的な質問だよ、ダブル。
ええ、はっきりと『Unity』と言ったわ」

・・・

「ダブル。

今回ばかりは直感ではなく、ロジカルに考えるべきなのだよ。
常識的に考えて、今回の事件（プロジェクト）はHTMLの方が確実に優れているわ」

「ダブル、相手は画面の向こうの“うすらトンカチな傍観者たち”であることを忘れていない？
つまり、慣れ親しんだUnityで公開するのが一番に決まっているのだよ」

「バーカ、バーカ！」

「アーホ、アーホ！」

「おいおい、なんなんだこいつら。
いきなり現れたかと思ったら急に喧嘩を始めたぞ」

「銀河の探偵姉妹、『ダブル・ダブルスター』ね。

上手く連携できればかなり心強い子たちなのだけど……あんな感じで価値観が真逆だから、よく喧嘩してしまうのよ」

「はいはい、二人とも！
喧嘩はもうやめて、一人ずつ意見を聞かせてちょうだい！」

「は？ 何言ってるの？ 私たちは『一人』なのだよ？」

「ユニットの枠が『１枠』になってるんだから、
ちょっと考えれば普通気付くでしょ？ 常識的に考えて」

「…」

（うわ…ネイトが心底めんどくさそうな顔してるぜ）

💻HTML派の意見：黒のダブル

「ごめんなさい、ダブルスターの言うとおりね。

それじゃあ、HTMLが良い理由を聞かせてもらえるかな？」

「やれやれ、灰色の脳細胞を持たない凡人には一から説明しないと分からないようだね。
いいよ、特別に分かりやすく教えてあげるとも」

「…………」

（あ、ネイトの奴、今露骨にイライラしてきやがったぜ……）

「第一に、HTML（Web技術）の方が圧倒的に動作が軽く、拡張性が高い。

おまけに『Claude』のような優秀な生成AIにコードを丸投げするだけで、
すんなりとベースを作ってくれる。

さらに言えば、コードを保存してブラウザを更新するだけで一瞬で結果が確認できる（書きだし時間がゼロ）というのも大きなメリットなのだよ。

大きなプロジェクトを短期間で構築するなら、これほどタイムパフォーマンスが良いものはない」

「確かにそうね。

実際、私もゲームブックのサイトを作る時に、１日でシステムからページまで完成させることができたし……HTMLベースの方が開発スピードが早いのは否定しないわ」

「第二に、目的と手段の話だよ。

今回の要件は『マップの配置位置やテクスチャ情報をJSONファイルに変換して、Unityのプロジェクトで読み込む』だけだろう？

だったら、わざわざ重たいUnityを開いてツールを作る必要性が薄いのだよ」

「でも、Unityで作ってブラウザ上で動かせるようにすれば……」

「WebGL形式での書き出し（ビルド）を検討しているようだけど、キミはWebGLの実態を分かっているのかい？

WebGLというのは、ブラウザ上で2Dや3Dのグラフィックを動かす技術のことだ。

一見便利そうだが、UnityからWebGLへ変換するのはとにかくビルド時間がかかるし、
遊ぶ側のスマホやブラウザ環境によってはメモリ不足でクラッシュしたりと、動作が不安定になることが多いのだよ」

「なるほどな。わざわざ不安定になるかもしれない方法を選ぶこたぁねえってわけか」

「その通り。それに、ChatGPTのAPIを連携させたり、テキストデータを扱うような処理は、そもそもWeb技術（HTML/JavaScript）の十八番（おはこ）なのだよ。

作ってから環境依存のエラーに悩まされるくらいなら、
安全かつ確実に進められる方を選ぶのが『論理的（ロジカル）』に決まっているのだよ」

🎮Unity派の意見：白のダブル

「それじゃあ、Unity派の意見も聞かせてもらえる？」

「ふっ。
普段Unityで開発をしておきながら、その利点も分からないなんて草も生えないんだが？」

「…………」

(あ、これはネイトの奴かなり危険な状態だぜ)

「まず、初歩的なことを見落としていると思うのだけど。

『ネイト育成計画』には、すでにマップを制作して表示する基本的な機能が存在しているわけじゃあないですか。

つまり、ツール開発に必要なベースシステムは、
すでに殆ど組み上がっているようなものなのだよ」

「確かに、その通りね。
ゼロからHTMLで作るより、あるものを活かした方が早いわ」

「第二に、見た目とアセット（素材）の完全一致だよ。

HTMLで作った場合、どうしてもWebサイトとゲーム本編で画面の見た目や操作感に差異が生まれてしまう。

せっかくツール上で綺麗に作っても、
ゲームに読み込んだら『なんか想像と違う』なんて悲劇が起こり得るわけですよ」

「た、確かにそうね……。
HTML上で実際のゲーム画面の見た目に近づけようとすればするほど、
見た目（CSS）などの調整で無駄な労力がかかるわね」

「その点、Unity同士であればその心配は皆無。

画面上の見た目がそのまま本編に直結するし、
何より使い慣れたUIパーツやC#のプログラムをそのままコピペして使い回せる。

開発の手間を考えたら、これが一番スマートでしょう？」

「なるほど、素材もコードも直接使い回せるのはUnityならではの強みね」

「そして第三に。UnityでWebGL出力する最大のメリット……
『unityroom（ユニティルーム）』が使えることだよ。
知っているかい？」

「ゆにてぃるーむ？」

「Unityで作られたブラウザゲームを、無料で手軽に投稿・公開できる国内最大級のプラットフォームさ。

ファイルサイズに制限はあるものの、あそこには日常的にフリーゲームを遊んだり、
開発者を応援したりする熱心なゲーマーたちが集まっているのだよ」

「つまり、キャンバスワールドをただの『ツール』としてではなく、
『遊べるWebアプリ』としてunityroomに公開すれば、既存のファンだけでなく、サイトを愛用する新しいユーザー層も巻き込むことができるって寸法さ。

この宣伝効果、とても大きいのではなくて？」

✨ネイトの結論

「ふたりの意見、どちらも本当に参考になったわ。
……決めたわ、今回はUnityで作ることにする！」

「ほう……。理由を聞かせてもらおうか。
私たちの提示した『軽量さ』や『開発速度』を捨ててまで、Unityを選ぶ論理的根拠をね」

「一番の決め手は、やっぱりunityroomの存在ね！

ツール単体で終わらせず、多くのプレイヤーやクリエイターを巻き込みながら『ネイト育成計画』そのものの宣伝ができるのは、
何物にも代えがたいメリットよ」

「おいおい、unityroomの容量制限（1GB）の問題はどう解決するんだい？

それに、HTMLなら容易だったJSONデータのエクスポートだって、Unityでやるなら工夫が必要になるよ？」

「ええ、技術的なハードルがあるのは百も承知よ。

でもね、それを上回る価値があるの。

今回は単なるマップ配置だけでなく、将来的に『イベント』や『敵ユニット』の制作までみんなにお願いする予定でしょう？」

「だったら、実際のゲーム本編に一番近い環境（Unity）でツールを作った方が、作る側も完成形をイメージしやすいし、
本編へデータを組み込む際の互換性も一番安全なのよ！」

「……なるほど。ツール単体の効率だけでなく、
『将来的な拡張性』と『ユーザー体験の統一』まで計算に入れているというわけか。

JSON出力もUnityの標準機能（JsonUtility等）で十分カバーできるし、
アセットを工夫すれば容量制限もクリアできる……ふむ、筋は通っているね」

「ほら見なさい、私たちの言った通り最初からUnity一択だったじゃない？」

「ふん……まあ、君の直感もたまには役に立つということにしておこうか、ダブル」

「ダブルこそ、リスクを洗い出してくれたおかげで対策が明確になったわ。感謝するよ、ダブル」

ダブル【黒】＆【白】 「「……流石ね、私（たち）！」」

（うわ……さっきまでボロカスに煽り合ってたのに、急に息ピッタリになりやがったぜ……）

🤝 結びのことば

「（やれやれ、相変わらず騒がしい子たちね……）でも、二人のおかげで方針はバッチリ固まったわ！」

「おう！ んで、これからどうするんだ？
Unityでやるって決まったからには、さっそく手を動かすんだろ？」

「もちろん！ まずはベースとなる『マップ配置機能』から組んでいくわ。
最終的には皆が自由にイベントや敵を配置できる、最高のアトリエ（ツール）に仕上げてみせるから！」

「へっ、面白くなってきやがったぜ！
画面の向こうの奴らがどんなハチャメチャな世界を創り出すのか、今から楽しみだな！」

「ええ！ 皆の創造力を自由に描ける真っ白なキャンバス、私がしっかりと用意するわ。
それじゃあ次回の記事でお会いしましょう！」

「またな！」

最後までお読みいただきありがとうございます！まる。です。

冒頭で言及していましたが、
実はマップ制作のベースとなるシステムは、すでに記事執筆時に完成しています！✨

ここからは、そのシステムをどうやって「誰もが使いやすいアトリエ（ツール）」としてブラッシュアップしていくか、
そして、どう最適化して皆さんの元へ届けるか……という本格的な開発フェーズに入っていきます。

『キャンバスワールド』を通して、皆さんの手でどんなハチャメチャで面白い世界が生み出されるのか、私自身今からワクワクが止まりません。

皆さんに実際に触っていただける日を目指して、引き続き開発を頑張っていきます！
次回以降の進捗報告も、ぜひ楽しみにしていてくださいね🍀

それでは、また次回の記事でお会いしましょう！まる。でした！真実は、いつも一つ！！！👋

#ゲーム開発 #インディーゲーム #Unity #unityroom #開発日誌  #キャンバスワールド #ネイト育成計画