虎の穴開発室ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

UnityでWebGL出力してみよう

技術エントリ Unity

こんにちは。虎の穴ラボのMです。

本記事は虎の穴ラボ Advent Calendar 2022 - Qiita 2日目の記事です。
1日目はY.Fさんの「虎の穴ラボブログの3年間の歴史と実施してきた改善を紹介します！」でした。

今回は、UnityでWebGL出力に挑戦してみたので、その手順や感想を述べたいと思います。

目次

WebGL とは

WebGLとは、Webブラウザで3次元グラフィックス（3DCG）を高速に描画する技術仕様の一つ。OpenGLの派生にあたる。

WebGLのプログラムは、JavaScriptで書かれた制御コードと、CやC++に似た構文の OpenGL ES Shading Language（GLSL ES）で書かれたシェーダーのコードから作られ、コンピューターのGPUで実行される。

引用 :
・WebGLとは - 意味をわかりやすく - IT用語辞典 e-Words
・WebGL - Wikipedia

かつてのFlashのようにブラウザでCGやゲームなどを動かす事ができる技術になります。

Unity とは

IDEを内蔵するゲームエンジン。

主にC#を用いたプログラミングでコンテンツの開発が可能。

  • PC（Windows、macOS）
  • モバイル（iOS、Android）
  • ウェブブラウザ（WebGL）
  • 家庭用ゲーム機（PlayStation 4、Xbox One、Nintendo Switch等）

といったクロスプラットフォームに対応。

引用 :
・ Unity (ゲームエンジン) - Wikipedia

ブラウザゲームとしての出力でWebGL出力が可能なため、今回はこちらを使いC言語で作った簡単なゲームをWebGLとしてブラウザで動かしてみようと思います。

簡単な横スクロールゲームを作る

まずはUnityで簡単な横スクロールゲームを作ってみます。

今回、ゲーム作成がメインではないので解説も簡単なものになります。

実行環境

Unity : version 2021.3.4f1

公式サイトからインストールして下さい。

unity.com

プロジェクト設定

最初に、Unityのプロジェクトを作成します。ここにゲーム内容を追記していきます。

Unity Hubから、新しいプロジェクト -> すべてのテンプレート -> 3D でプロジェクトを作成します。

プロジェクトができたら、起動します。

次に、プロジェクト設定をWebGLに変更しておきます。後から変更するとファイルの変換処理が入ってしまうので、最初にやっておいた方が良いです。

FIle -> Build Settings -> WebGL を選択し、 Switch Platform でプラットフォームを変更しておきましょう。

WebGLの右側にUnityのアイコンがでていれば切り替え完了です。

フォルダ構成

以下のような構成で作成していきます。

Assets
├── Scenes
├── Texture
├── Tilemap
└── Script

ゲーム部分の作成

以下の2つだけの簡単な構成にします。

  • マップの作成
  • キャラクターの移動

マップの作成

Tilemap のインストール

Unity公式ツールのTilemapを使います。

Window -> Package Manager に遷移し、 表示範囲を Packages: Unity Registery に変更します。

2D Tileap Editor が表示されるので、 インストールします。

チェックマークが表示されればOKです。

マップをデザインする

Hierarchy -> 右クリック -> 2D Object -> Tilemap -> Rectangular でグリッド線を作成します。

Window -> 2D -> Tile Palette -> Create New Palette でタイルパレットを作成します。

Assets -> Tilemap に保存し、適当なマップ画像をSpriteとしてマップチップにドラッグ&ドロップで登録します。

ここまででマップの作成は完成です。

キャラクターの作成

適当な画像を、Assets -> Texture に読み込みます。Textureタイプを Sprite に変更しておきます。

Hierarchy に配置します。

当たり判定をつける

マップの上を歩けるように、キャラクターとマップにColliderを設定します。Colliderは当たり判定の事です。

  • Tilemap -> Add Component -> Tilemap Collider 2D
  • Character -> Add Component -> Circle Collider 2D

をアタッチします。

Circle Collider 2D はそのままだと回転してしまうので、 Freeze Rotation にチェックを入れます。

キャラクターに物理演算(重力)をつける

現状キャラクターが浮いているので、物理演算をつけて地面に立てるようにします。

Character -> Add Component -> Rigidbody 2D

をアタッチします。

ここまでで、キャラクターが地面に着地できるようになりました。

キャラクターを移動できるようにする

物理演算などを無視した、単純な十字キーの移動だけ実装します。

Assets -> Script -> 右クリック -> Create -> C# Script で作成します。

Character のAdd Componentにスクリプトをアタッチして編集します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class CharacterScript : MonoBehaviour
{
    private Rigidbody2D rigidbody2D;
    private int speed;
 
    void Start()
    {
        rigidbody2D = GetComponent<Rigidbody2D>();
    }
 
    void Update()
    {
        if (Input.GetKey("left"))
        {
            speed = -5;
        }
        else if (Input.GetKey("right"))
        {
            speed = 5;
        }
        else
        {
            speed = 0;
        }
 
        rigidbody2D.velocity = new Vector2(speed, rigidbody2D.velocity.y);
    }
}

これでキャラクターが移動できるようになりました。

カメラをキャラクターに追従させる

こちらも簡単なので設定しておきます。

Tilemapのインストール時と同じく、Window -> Package Manager に遷移し、 Cinemachine をインストールします。こちらもUnity製のパッケージになります。

インストール後、 GameObject -> Cinemachine -> 2D Camera で CM vcam1 を作成します。

Follow という欄に追従したい対象を選べるので、Character を選択します。

ここまでで、キャラクターにカメラが追従できるようになりました。

一旦ゲームとしての形にはなったと思うので、ゲーム開発はここまでにします。

WebGL出力してブラウザ上で動かす

作成したゲームをWebGLでビルドして、ブラウザで動かしたいと思います。

ビルド実行

ビルドすると実行ファイルが出来上がります。

File -> Build And Run で実行します。 簡単なゲームではあるものの、5分ほどかかります。

ビルドに成功すると、自動でブラウザが立ち上がり作成したゲームが localhost:***** で表示されます。

ローカル実行の注意点

ビルドすると、指定したディレクトリ先に以下のような形式で作成されます。

.
├── index.html
├── Build
├── StreamingAssets
└── TemplateData

index.html を直接起動してもエラーになります。

先ほど表示できたのは、UnityのSimpleWebServerの機能により表示できていました。

index.html からの直接の起動は考慮していないようです。

ローカルで確認したい場合、再度 Build and Run をしてあげるか、ローカルサーバーを立ち上げて確認するようにしましょう。

サーバーデプロイ

アクセスすると index.html を開いてくれる構成にすれば問題ありません。今回は Netlify サーバーへアップロードしました。

ただし、この状態でサーバーへアップロードすると、圧縮ファイルが展開できずエラーになります。

公式ドキュメントによると、ビルド設定のセットアップ方法が2つ存在します。

  • Compression Format: ビルド時に、Unityが圧縮方法を決定する
  • Decompression Fallback: ブラウザで表示時に、Unity がダウンロードしたファイルを処理する方法を決定する

docs.unity3d.com

Compression Format で対応する場合、適切なレスポンスヘッダーを指定しないとエラーとなるようです。

.htaccess を作成し、レスポンスヘッダを指定してあげる必要があります。

今回は Decompression Fallback を選択し、圧縮ファイルを展開できるようにします。

Edit -> Project Settings -> Player -> WebGL -> Publish Settings -> Decompression Fallback にチェックを入れます。

再ビルドし、作成されたファイルをサーバーにアップロードすると動作しました！

サンプルサイト

boisterous-donut-e9b81b.netlify.app

作ってみて

簡単にWebGLが作成できたので、なかなか面白いと思います。ブラウザ上で動かしているとは思えないくらいサクサク動くのも好印象です。

今回はゲームを作りましたが、動きを付けたWeb表示をしてみたい時などに検討してみても面白いかなと思いました。

最後までゲームをクリアしたら、特定のURLに飛ばしてクーポンをGET！のような使い方もできるかもしれません。色々検証してみたいです。

明日3日目はS.Aさんの「エクセルデータのマッピングにJavaの動的プロキシを使ってみる」です。

P.S.

採用情報
■募集職種
yumenosora.co.jp

カジュアル面談も随時開催中です
■お申し込みはこちら！
news.toranoana.jp

■ToraLab.fmスタートしました！
メンバーによるPodcastを配信中！
是非スキマ時間に聞いて頂けると嬉しいです。
anchor.fm
■Twitterもフォローしてくださいね！
ツイッターでも随時情報発信をしています
twitter.com