スクリプトファイルやアプリのプロジェクトを公開・非公開でアップロードできる GitHub では、WebGL で作成されたブラウザゲームや、 HTML, CSS, JavaScript などを用いたホームページ・ウェブサイトを無料で公開できる GitHub Pages というホスティングサービスも提供しています。
![GitHub 公式サイト 20240502](https://compota-soft.work/wp1/wp-content/uploads/2024/05/GitHub-公式サイト-20240502-1024x443.png)
今回は、無料で軽快な 2D / 3D ゲームエンジン GodotEngine4 を用いて簡易な WebGL(HTML5) アプリを作成して、無料でウェブサイトや WebGL アプリを公開できるホスティングサービス GitHub Pages を用いてブラウザ上でアプリを動作させるために、GitHub のリポジトリにアップロードする手順を紹介します。
※ GodotEngine のバージョンは 4.2.1 です。 .NET 版ではありません。
※画像の一部で M+ FONTS を使用しています。
※記事で紹介するスクリプト / プログラム / コードは自己責任で使用してください。
Godot4 でアプリの作成
GitHub Pages で公開する WebGL(HTML5) アプリを GodotEngine4 で作成します。
プロジェクトの作成
GodotEngine4 の exe ファイルを実行して、プロジェクトマネージャーアプリを起動します。
プロジェクトマネージャーウィンドウの左上の「+新規」ボタンを押します。
「新規プロジェクトを作成」ダイアログで、プロジェクト名とそのプロジェクトを作成するフォルダパスを設定します。
レンダラーは、ウェブブラウザでプレイできるように「互換性」レンダラーを選択します。
新規作成するプロジェクトの入力が済んだら「作成して編集」ボタンを押してエディターを起動します。
![JumpOrDie GodotEngine4.2.1 で互換性レンダラーでプロジェクトを新規作成します.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/JumpOrDie-GodotEngine4.2.1-で互換性レンダラーでプロジェクトを新規作成します-1024x603.png)
メインシーンの作成
ブラウザで表示するシーンを作成します。
例として、 GodotEngine のアイコン画像と「Hello, World!」というメッセージを表示します。
シーンの作成では、 Node クラスを選択してルートノードを作成して、名前を「HelloDiscordMember」にしました。
# Discord 埋め込みアプリを目指して作りはじめました。
ビューは、画面上部の 2D を選択します。
「ファイルシステム」ドックに最初からある Icon アセットを、 2D ビューの画面枠 (青・赤・緑の線) 内にドラッグ&ドロップで配置します。
これにより Icon ノード(ベースは Sprite2D クラス)が作成され、アイコンが WebGL アプリの画面で表示されます。
![Godot4 ファイルシステムドックの画像アセットを2DビューにD&Dすると画像を表示する Sprite2D クラスのノードが作成、配置されます.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-ファイルシステムドックの画像アセットを2DビューにD&Dすると画像を表示する-Sprite2D-クラスのノードが作成、配置されます.png)
次に、Label クラスのノードを追加して、 Text プロパティに「Hello, World!」と入力して、Theme Overrides セクションの Font プロパティに使用する M+ フォントの ttf アセットをドラッグ&ドロップで設定して、Font Size プロパティで表示する文字サイズを調整します。
※フォントファイルはあらかじめ用意した ttf ファイルを「ファイルシステム」ドックにドラッグ&ドロップでアセットとしてプロジェクトに追加します。
![Godot4 メッセージを表示する Label クラスのノードを作成、配置します.ブラウザ上での日本語対応のためM+フォントをプロジェクトに追加してFonts に設定しました.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-メッセージを表示する-Label-クラスのノードを作成、配置します.ブラウザ上での日本語対応のためMフォントをプロジェクトに追加してFonts-に設定しました.png)
作成したシーンをメインのシーンとして設定します。
メニュー「プロジェクト」→「プロジェクト設定」で「プロジェクト設定」ウィンドウを開き、「一般」タブの「アプリケーション」→「実行」を選択して表示されたページで「メインシーン」項目に先ほど作成・保存したシーンファイルを設定します。
![Godot4 メインシーンを設定してエクスポートします..](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-メインシーンを設定してエクスポートします.png)
WebGL アプリのエクスポート
作成してアプリをブラウザでプレイできる WebGL (HTML5) 形式でエクスポートします。
メニュー「プロジェクト」→「エクスポート」を選択して、「エクスポート」ウィンドウの左上の「追加」ボタンを押して表示されるリストから WebGL (HTML5) を選択してプリセットとして追加します。
![Godot4 エクスポートウィンドウでWebGLをプリセットに追加します.エクスポートテンプレートのエラーメッセージがある場合はその管理のリンクをクリックします.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-エクスポートウィンドウでWebGLをプリセットに追加します.エクスポートテンプレートのエラーメッセージがある場合はその管理のリンクをクリックします.png)
現在使用している Godot のバージョンで WebGL をエクスポートしたことがない場合は、ウィンドウの下側にエラーメッセージが表示されます。
「WebGL にエクスポートするためのエクスポートテンプレートが見つからない」というメッセージの場合は、「エクスポートテンプレートの管理」リンクをクリックします。
「エクスポートテンプレートマネージャー」ダイアログの「ダウンロードしてインストール」ボタンを押して、エクスポートテンプレートをインストールします。
![Godot4 エクスポートテンプレートマネージャーダイアログでダウンロードしてインストールボタンを押します.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-エクスポートテンプレートマネージャーダイアログでダウンロードしてインストールボタンを押します.png)
Godot 4.2.1 Stable 用のエクスポートテンプレートは約 850 MB でした。
![Godot4 エクスポートテンプレートマネージャーダイアログでエクスポートテンプレートをダウンロード中(850MB).](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-エクスポートテンプレートマネージャーダイアログでエクスポートテンプレートをダウンロード中(850MB).png)
エクスポートテンプレートのインストールが済んだら「閉じる」ボタンを押します。
![Godot4 エクスポートテンプレートマネージャーダイアログで現在のGodotのバージョンのエクスポートテンプレーがインストールされました..](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-エクスポートテンプレートマネージャーダイアログで現在のGodotのバージョンのエクスポートテンプレーがインストールされました.png)
再び「エクスポート」ウィンドウを開き、追加した WebGL プリセットを選択すると、先ほど下側に表示されていたエラーメッセージは消えています。
先ほどは押せなかった「プロジェクトのエクスポート」ボタンも押せるようになりました。
※「エクスポート」ウィンドウは、メニュー「プロジェクト」→「エクスポート」を選択します。
![Godot4 再びエクスポートウィンドウを開いてWebGLプリセットを選択するとエクスポートテンプレートのエラーメッセージが消えてプロジェクトのエクスポートが押せます..](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-再びエクスポートウィンドウを開いてWebGLプリセットを選択するとエクスポートテンプレートのエラーメッセージが消えてプロジェクトのエクスポートが押せます.png)
WebGL はフォルダに複数のファイルが入ったものがエクスポートされます。
その WebGL のフォルダを出力する先を選択して、その中に作成される .html などのいくつかのファイルで用いられるファイル名を設定します。
例では index をファイル名としました。
設定が済んだら「保存」ボタンを押します。
![Godot4 WebGL プリセットでプロジェクトをエクスポートします.出力フォルダを作成してhtmlのファイル名はindexに変更して保存しました...](https://compota-soft.work/wp1/wp-content/uploads/2024/05/Godot4-WebGL-プリセットでプロジェクトをエクスポートします.出力フォルダを作成してhtmlのファイル名はindexに変更して保存しました.png)
以上で、指定したフォルダに WebGL アプリがエクスポートされました。
GitHub Pages でアプリを公開するためのリポジトリ作成と設定
アプリが作成できたら GitHub のリポジトリにアップロードします。
ウェブサイトを無料で公開できる GitHub Pages で表示する内容をアップロードする新規リポジトリを GitHub で作成して GitHub Pages で公開する設定は、以下の記事を参照してください。
https://compota-soft.work/wp1/wp-admin/post.php?post=28364&action=edit
GitHub リポジトリへ WebGL フォルダのアップロード
作成した public なリポジトリに、エクスポートした WebGL のフォルダをまるごとアップロードします。
リポジトリのページの Code タブでアップロード先のフォルダ(例ではリポジトリのルートフォルダ)に WebGL のフォルダをドラッグ&ドロップします。
※後述する 25MB 以上の .wasm ファイルは、サイト経由でのアップロードはできないので、ドラッグ&ドロップするフォルダから一時的に取り除いておくと良いでしょう。
![GitHub Godot4で作成した WebGL フォルダをドラッグ&ドロップでリポジトリに追加します](https://compota-soft.work/wp1/wp-content/uploads/2024/05/GitHub-Godot4で作成した-WebGL-フォルダをドラッグ&ドロップでリポジトリに追加します-1024x690.png)
コミットする際のコメントを入力して「Commit chages」ボタンを押します。
![GitHub Godot4で作成した WebGL フォルダをドラッグ&ドロップでリポジトリに追加するフォルダのファイル群を確認してアップロードします.](https://compota-soft.work/wp1/wp-content/uploads/2024/05/GitHub-Godot4で作成した-WebGL-フォルダをドラッグ&ドロップでリポジトリに追加するフォルダのファイル群を確認してアップロードします-1024x576.png)
25MB 以上のファイルのアップロードについて
wasm ファイルだけは 25 MB 以上のサイズがあり、 GitHub のサイト経由ではアップロードできません。
![GitHub 25MB 以上のファイルをアップロードするとエラーメッセージ Yowza が表示されます](https://compota-soft.work/wp1/wp-content/uploads/2024/04/GitHub-25MB-以上のファイルをアップロードするとエラーメッセージ-Yowza-が表示されます-1024x807.png)
コマンドプロンプトで git コマンドを使えば 100 MB 以下のサイズのファイルのアップロードができます。
.wasm などの 25MB 以上のファイルのアップロードについては以下の記事を参照してください。
まとめ
今回は、無料で軽快な 2D / 3D ゲームエンジン GodotEngine4 を用いて簡易な WebGL(HTML5) アプリを作成して、無料でウェブサイトや WebGL アプリを公開できるホスティングサービス GitHub Pages を用いてブラウザ上でアプリを動作させるために、GitHub のリポジトリにアップロードする手順を紹介しました。
参照サイト Thank You!
- GitHub Japan | GitHub
- GitHub Pages について – GitHub Docs
- Godot Engine – Free and open source 2D and 3D game engine
- M+ FONTS
記事一覧 → Compota-Soft-Press
コメント