> For the complete documentation index, see [llms.txt](https://sinoa-dev.gitbook.io/rpgatsumaruapiforunity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sinoa-dev.gitbook.io/rpgatsumaruapiforunity/mobile-running/create-webgltemplate.md).

# 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;token=57ddf10b-6b77-49f3-8027-37a3d33901dc" alt="このようにプレビューされていれば成功です。"></div>
