MENU
How to make games on Unity
  1. ホーム
  2. Unity
  3. Unityスタートガイド - UnityStartGuide
  4. 第10章 ビルドとプラットフォーム
  5. Webブラウザで遊べるゲームを作ろう（Web）【Unityスタートガイド10-3】

Webブラウザで遊べるゲームを作ろう（Web）【Unityスタートガイド10-3】

第10章 ビルドとプラットフォーム
Unityスタートガイド Web ビルド

作ったゲームをURLひとつで遊んでもらえたら最高ですよね。Unityでは、Webブラウザで動くゲームも作れます！アプリをインストールしなくても遊べるので、友だちに見てもらうのにもぴったり。今回はWeb向けのビルドと、itch.ioなどで公開するときの注意点をご紹介します。

目次

この記事で学べること

  • Webビルド（以前のWebGL）とは何か
  • Web向けビルドの手順
  • ブラウザで確認する正しい方法（Build And Run）
  • 公開するときの圧縮の設定（Decompression Fallback）
  • Webで動かすときの制限と注意点

前提知識

Webビルドとは？

Unityのゲームを、ChromeやEdge、Safariなどのブラウザで遊べる形にするビルドです。

  • Unity6でのプラットフォーム名はWeb（以前はWebGLと呼ばれていました。ネットの記事ではまだWebGLの名前もよく見かけます）
  • Unity6から、スマートフォンのブラウザも正式に対応しました
  • 新しい描画の仕組みのWebGPUも使えるようになってきていますが、まだ実験的な機能です。最初は初期設定のままでOKです

プロトタイプを人に見てもらったり、ゲームジャムの作品を公開したりするのにぴったりです。

Web向けにビルドしよう

ステップ1：Webに切り替える

  • File>Build Profilesを開く（Ctrl+Shift+B）
  • 左の一覧でWebを選び、Switch Platform
    • 「Web Build Support」のモジュールが入っていない場合は、Unity Hubから追加します

ステップ2：Web用の設定を確認

Player SettingsのPublishing Settingsに、Web用の設定があります。

  • Compression Format：ファイルの圧縮形式（Gzip / Brotli / Disabled）
  • Decompression Fallback：公開先のサーバーの設定に関係なく読み込めるようにする（後で説明します）
  • Name Files As Hashes：ファイル名を中身から作った名前にする（更新したときに古いファイルが使われにくくなる）
  • Data Caching：一度読み込んだデータをブラウザに保存しておく

ステップ3：ビルドする

  • Build And Runを押して、保存先のフォルダを選ぶ
  • ビルドが終わると、ブラウザが自動で開いてゲームが起動します

出来上がるファイル：

  • index.html：ゲームを表示するページ
  • Build/：ゲームのデータ
  • TemplateData/：ページの見た目やローディング画面

ブラウザで確認しよう

index.htmlをダブルクリックしても、ゲームは動きません。

ブラウザは安全のため、パソコンの中のファイルを直接開いたページ（file://で始まるアドレス）からは、ゲームのデータを読み込ませてくれないためです。

  • 確認するときは、Build And Runを使う
    • Unityが自分のパソコンの中に簡易的なサーバーを立てて、http://localhost:〇〇のアドレスで開いてくれます
  • 一度ビルドしたものをもう一度見たいときも、もう一度Build And Runすればすぐに開けます
スライム

index.htmlをダブルクリックしたら、読み込みが止まったまま動かない・・・

フェアリー

それはブラウザの安全の仕組みのせい！確認はBuild And Runでやろうね

ゲームを公開しよう

itch.ioで公開する

itch.ioは、個人のゲームを無料で公開できるサイトです。

  1. itch.ioでアカウントを作る
  2. 「Upload new project」を選ぶ
  3. Kind of projectでHTMLを選ぶ
  4. ビルドしたフォルダの中身（index.html・Build・TemplateData）をまとめてZIPにしてアップロード
  5. 「This file will be played in the browser」にチェックを入れて保存

GitHub Pagesで公開する

  1. GitHubでリポジトリを作る
  2. ビルドしたフォルダの中身をアップロード
  3. リポジトリのSettings>PagesでGitHub Pagesを有効にする
  4. 表示されたURLで遊べるようになる

公開したら読み込みが止まる：Decompression Fallback

Gzip・Brotliで圧縮したゲームを置くとき、置いた先のサーバーに「このファイルは圧縮されています」と伝える設定が必要です。その設定がされていないと、読み込みの途中で止まったり、エラーが出たりします。

GitHub Pagesのように、自分でサーバーの設定を変えられない場所に置く場合は、次のどちらかにしましょう。

  • Publishing SettingsのDecompression Fallbackにチェックを入れる（ゲームの中で展開するようになります）
  • または、Compression FormatをDisabledにする（ファイルは大きくなります）

itch.ioのように、Unityのゲームの公開に慣れているサイトもありますが、うまく動かない場合はまずこの設定を試してみてください。

Webで動かすときの注意点

  • 処理の重さ：パソコン向けのビルドより重くなりやすいので、重い処理は控えめに
  • メモリ：ブラウザが使えるメモリには限りがあります。特にスマートフォンのブラウザは少なめです
  • ファイルの読み書き：パソコンのファイルは読み書きできません。セーブにはPlayerPrefs（ブラウザの中に保存されます）を使います
  • 音：ブラウザの決まりで、プレイヤーが一度クリックやタップをするまで音が鳴らないことがあります

ファイルサイズを小さくしよう

Webのゲームは、遊ぶ前にデータを全部ダウンロードするので、ファイルが小さいほど早く始められます。

  • 画像の大きさ：テクスチャのInspectorで、Max Sizeを必要な大きさまで下げる
  • 使っていないものを入れない：Scene Listに入れていないシーンや、そこから使われていないアセットは、ビルドに入りません。Resourcesフォルダの中身は全部入るので、不要なものは置かないようにしましょう
  • 音声：BGMなど長い音声は、Inspectorの設定で圧縮しておく

スマートフォンのブラウザで遊んでもらうとき

  • マウスではなくタッチで操作できるようにする（ボタンを画面に置くなど）
  • UIのボタンは、指で押しやすい大きさにする
  • 画面の縦横に合わせて、Canvas Scalerを設定する（第9章で説明しています）

よくあるエラーと対処法

エラー：index.htmlを開いても動かない

  • 原因：ファイルを直接開いていて、ブラウザに読み込みを止められている
  • 対処法：Build And Runで開く

エラー：公開したページで読み込みが止まる・エラーが出る

  • 原因：圧縮したファイルを、サーバーの設定なしで置いている
  • 対処法：Decompression Fallbackにチェックを入れるか、Compression FormatをDisabledにしてビルドし直す

エラー：スマートフォンで途中で落ちる

  • 原因：メモリが足りない
  • 対処法：テクスチャのMax Sizeを下げる、一度に読み込むものを減らす

まとめ

  • Unity6ではWeb（以前のWebGL）。スマートフォンのブラウザにも正式対応
  • 確認はBuild And Run（index.htmlのダブルクリックでは動かない）
  • itch.ioやGitHub Pagesで公開できる
  • 読み込みが止まるときはDecompression FallbackかCompression Format：Disabled

次のステップ

第10章 ビルドとプラットフォーム
Unityスタートガイド Web ビルド
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次