# WebGLテンプレートを作ろう

## 背景

Unityにて、WebGL向けビルドをした場合、通常はUnityが提供している汎用起動画面が表示されます。

ゲームがだんだん完成に近づいてくると、起動時のアイコンなどを変えたくなるでしょう。

RPGアツマールAPI for Unityでは、その起動画面を簡単に作るためのエディタを搭載しています。

## 解説

UnityにてWebGLビルドをした際に、出力される"index.html"がありますが、このファイルはWebGLテンプレートと言われる機能を使えば、簡単に差し替えることが可能です。

そのWebGLテンプレート自体も、自作することが可能ですが少々のHTMLの知識が必要になります。

しかし、RPGアツマールAPI for Unityでは、RPGアツマール用のWebGLテンプレートを簡単に作れるように、エディタ化しました。

そのエディタを使う方法は次の手順を参照して下さい。

## 手順

### ロゴを選択してテンプレートを出力しよう

まずは、Unityエディタのメニューバーから操作し、ロゴを選択してテンプレートを作ってみましょう。

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8ipN_g_11jIRoYf8L%2F-MD8kRr9umCC7nEeh30P%2Fimage.png?alt=media&#x26;token=f4ff02bf-fa5d-40b9-a366-209620273bd0" alt="RPGアツマール / ウィンドウ / WebGLテンプレート作成"></div>

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8ipN_g_11jIRoYf8L%2F-MD8lftc-c4s2AR4Bs3V%2Fimage.png?alt=media&#x26;token=7889b197-dc90-4a47-bf68-7c170cb35381" alt="「ロゴをロード」ボタンをクリック（ロゴがない場合は１ｘ１透明画像をロードでも可）"></div>

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8ipN_g_11jIRoYf8L%2F-MD8lu-L73kRhAicED2s%2Fimage.png?alt=media&#x26;token=a9c15020-fbf7-41eb-9c73-bbc69117c12b" alt="ロードするロゴを選択して開く"></div>

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8ipN_g_11jIRoYf8L%2F-MD8lzxEF_kp_X7QIuj_%2Fimage.png?alt=media&#x26;token=098fa41f-7c5d-4a81-be6c-90ab3ba11159" alt="プレビューで画像とサイズが正しい物か確認して「テンプレートを作成」ボタンをクリック"></div>

画像サイズは、ゲーム画面全体の半分以下の解像度にすることをおすすめします。

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8ipN_g_11jIRoYf8L%2F-MD8mF95xLLai8eqm4M1%2Fimage.png?alt=media&#x26;token=a40f9259-1c6d-4c61-a4b7-a98119d7c05d" alt="Unityプロジェクトに「WebGLTemplates」フォルダとその配下が出来ているか確認"></div>

### ビルド設定を変更してビルドしよう

あとは、生成されたWebGLテンプレートを選択するだけです。非常にお手軽であることがわかります。

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8mxm5KK63UGHVt-0q%2F-MD8nEAqNtXdcte-ocR7%2Fimage.png?alt=media&#x26;token=6dedc128-7827-41f2-b9c1-f7d1107b1e05" alt="ビルド設定を開き「PlayerSettings...」をクリック"></div>

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8mxm5KK63UGHVt-0q%2F-MD8nO6G5CvM9e95KXLG%2Fimage.png?alt=media&#x26;token=ce03e8b1-999f-4387-90ad-b0ab836b67a2" alt="赤線の項目にある「WebGLTemplate」に新しく「RPGアツマール」が増えているので選択"></div>

### RPGアツマールにアップロードして確認しよう

<div align="left"><img src="https://259606588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD0af74sE-2O0ViGkcY%2F-MD8nS-6zI0BPDL7NTW4%2F-MD8o37yG-bVteqtxbXJ%2Fimage.png?alt=media&#x26;token=57ddf10b-6b77-49f3-8027-37a3d33901dc" alt="このようにプレビューされていれば成功です。"></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sinoa-dev.gitbook.io/rpgatsumaruapiforunity/mobile-running/create-webgltemplate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
