ProtoPie Connect の堅牢な機能を発見しましょう。これはデザイナーと開発者の双方にとって欠かせないプロトタイピングツールです。このガイドでは、Unity WebGL のビルドファイルを ProtoPie Connect とシームレスに統合し、ユーザーインターフェースの改善やメニューフローの最適化を簡単に行う方法を詳しく説明します。
次の明確な手順に従って、Web-Embed レイヤーを使用し、Unity WebGL ビルドを ProtoPie Connect に埋め込みます。この変革的な旅に出発し、デザインワークフローを次のレベルへ引き上げましょう。
免責事項: このチュートリアルでは ProtoPie Connect Enterprise の使用が必要です。ProtoPie Connect の詳細については、ProtoPie の営業窓口にお問い合わせください。あわせて、こちらのProtoPie Connectについてのブログもご覧ください。
概要
ステップ 1. Unity で WebGL ファイルをビルドする
ステップ 2. GitHub にアップロードする
ステップ 3. Web ブラウザーでゲームを実行する
ステップ 4. ProtoPie Connect と統合する
ステップ 1. Unity で WebGL ファイルをビルドする。
1. プロジェクトを開く: まず、既存の Unity プロジェクトを開きます。
2. プラットフォームを WebGL に切り替える
ファイル > ビルド設定に移動します。プラットフォーム一覧から
WebGLを選択します。プラットフォームを切り替えをクリックして、ビルドターゲットを WebGL に変更します。
3. ビルド設定を構成する
編集 > プレイヤー設定に移動します。解像度と表示の下で、必要に応じて設定をカスタマイズします。このチュートリアルでは、全幅解像度のためにPWA設定を使用しています。
💡 ヒント: ホストサーバーからブラウザーで WebGL プロジェクトを実行する際、以下のような圧縮エラーが発生することがあります。
WebGL ファイルを実行しようとして上記のエラーが表示された場合、1 つの解決策は Unity で圧縮形式を変更することです。
編集 > プレイヤー設定 > Player > 公開設定 > 圧縮形式に移動します。プロジェクトの要件に合わせて設定を調整します。このチュートリアルでは、GitHub で Unity WebGL プロジェクトをホストして実行する際に実行エラーが発生しないように、「Brotli」圧縮設定を使用しています。
4. プロジェクトをビルドする。
ビルド設定ウィンドウでビルドをクリックします。ビルドファイルを保存する場所をコンピューター上で選び、Unity がプロジェクトをコンパイルするのを待ちます。
ステップ 2. GitHub にアップロードする。
1. アップロード用にビルドを準備する:
ゲームの実行に必要な
.jsファイルと.dataファイルに加えて、ビルドフォルダーにindex.htmlファイルが含まれていることを確認します。
2. 新しいリポジトリを作成する:
GitHub アカウントにログインします。
Repositories タブに移動し、
Newをクリックします。リポジトリに名前を付け、公開に設定します（誰でもアクセスできるようにする場合）。
リポジトリを作成します。
3. ファイルをアップロードする:
リポジトリのメインページに移動し、
既存のファイルをアップロードリンクをクリックします。
ビルドファイルをドラッグ＆ドロップするか、ファイルナビゲーターを使って WebGL ビルドフォルダーを選択します。
変更を main ブランチに直接コミットします。
ステップ 3. Web ブラウザーでゲームを実行する。
1. GitHub Pages を有効にする:
リポジトリの設定に移動します。
GitHub Pagesセクションまでスクロールします。ソースとして
mainブランチと/ (root)を選択します。設定を保存します。
GitHub が、プロジェクトが公開されている URL を提供します。ページが有効になるまで数分かかる場合があります。数分後にページを更新して URL を確認してください。
2. ゲームにアクセスする:
GitHub Pages が有効になって正常に動作したら、表示された URL にアクセスします。
Unity WebGL ゲームがブラウザーに直接読み込まれるはずです。
💡 ヒント: 表示された URL にアクセスしたときに 404 エラーが出ても、慌てないでください。これは、ファイルがルートフォルダーではなくサブフォルダーにある場合に発生します。
以下のように、ファイルはサブフォルダー** /.._GamePlay/PP_rpg/**にあり、ルートフォルダーは/.._GamePlayです
解決するには、URL にサブフォルダー名を追加するだけです。そうすれば Unity プロジェクトが実行されるはずです。このチュートリアルでは、URL に /PP_rpg/ を追加します。
ステップ 4. ProtoPie Connect と統合する。
1. ProtoPie Connect で Pie ファイルを開く
ProtoPie Connect を起動し、クラウドから選択する（Enterprise のみ）か、ローカルの Pie ファイルをアップロードしてプロトタイプをインポートします。クラウドからプロトタイプを読み込む際の接続問題を避けるため、ネットワーク設定と権限を確認してください。
2. グループを作成して Pie ファイルを表示する
Groupを作成し、ドラッグ＆ドロップで Pie ファイルをグループへ移動します。Web ブラウザーのアイコンをクリックして、ブラウザーで Pie を開きます。
3. グループを編集する
ページを右クリックして ProtoPie Connect の上部メニューバー UI を表示し、
Editを選択します
編集ビューで
+Addメニューをクリックし、Web Embedを選択します。レイヤーウィンドウ内では、ドラッグ＆ドロップでレイヤーを並べ替えて階層を設定できます。
必要に応じて、またはプロジェクト要件に合わせて Web ビューのウィンドウサイズを変更します。
ステップ 3 の GitHub リンクをコピーし、Source 入力欄に貼り付けます。Unity ファイルが読み込まれ、実行されます。
4. 統合されたプロトタイプを表示する
上部メニューで
Viewを選択して、View モードに戻りますマウスを右クリックすると、ProtoPie Connect の上部メニュー UI を非表示にできます。
Web-Embed レイヤーを使用することで、Unity WebGL ビルドを ProtoPie Connect に正常に統合できました。この統合により、より豊かなインタラクティブ体験が可能になり、Unity プロジェクトを ProtoPie プロトタイプ内にシームレスに組み込めます。その結果、Unity の強力な 3D およびゲームエンジン機能を UX/UI デザインに直接活用できるようになり、プロトタイプのリアリティと応答性が向上します。
今後は、さらなるカスタマイズと最適化の可能性を探り、プロトタイプがユーザーの期待を満たし、それを上回るようにしていきましょう。
