GitHubを使ってティラノビルダーの開発/テスト環境を構築する【ティラノビルダー】【Netlify】

初めに

インディーズゲームにいろいろ参加している中でADV系のゲームだとティラノビルダーやティラノスクリプトが多く使われているチームを見受けられます。
ティラノ系も触っておきたいと思い、少し触っていたのですが手元でPreviewはできますがWeb上でのテスト環境がないためぱっと見てもらうことはできません。
そこで今回はURLだけ共有すれば見れる環境を作ってみました。

環境

  • GitHub
  • Netlify
  • ティラノビルダー TyranoBuilder 2.0.3.0 standard ja

成果物/デモ

各種サービス関係図

以下のようにGitHubで管理しているティラノビルダーのプロジェクトがあります。 github.com

上記のプロジェクトを以下のURLで起動するようになっています。
639aa9c31983411e7aa6dc03--tyrano-builder-test.netlify.app

準備

GitHubアカウント作成

(すでに持っている人はスキップしてください)

GitHub を開くと以下のように `サインアップがあるので、こちらからアカウントを作成します)

情報を入れていくと、以下のような画面になると思います。

画面が出てきたらアカウントの作成は終了です

GitHub リポジトリの作成

プロジェクト用にGitHubリポジトリを作成します。以下の New を押します

  1. Repository name は任意の名前を入れてください。
  2. Public or Private は素材データなどは公開しないほうがいいので、Private を選びます
  3. その他のファイル設定は、GitやGitHubが分かっている人はチャックを入れても大丈夫ですが、初めは入れなくて大丈夫です

Create Repository を押すと作成されるので、以下のような画面になれば作成完了です

Netlifyアカウント作成

1 . Netlifyにアクセスすると以下のような画面になるので、Sign up を押します。

何でSing upをするか選択ができるため、先ほど作成した GitHubのアカウントを使用するため GitHubを選択します(ほかでSign upしたい場合は、任意のものを選択してください)

こんな感じの画面が出てくればアカウント作成は終了です

プロジェクトの作成とGitHubへの連携

  1. ティラノビルダーでプロジェクトを作成します

2 . フォルダーアイコンをクリックして、プロジェクトのフォルダーを開きます

3 .開いた後に index.html がある 一つ上の階層に移動します

このパスに Git環境を構築します (任意の方法で大丈夫です。また今後こちらのやり方を更新します)

pushまで行うと、作成したRepositoryが以下のような感じになると思います。

Netlifyへデプロイ

  1. Add new site を選択する

2 . Import an existing project を選択

3 . 連携サービスで GitHubを選択

4 . 作成したRepositoryを選択

5 . 必要な情報を記入して公開

通常時は入力するものはないので、そのまま Deploy site を押すだけで大丈夫です。

6 . 公開後、urlが表示されているのでURLを開きゲームが実行できるかどうかを確認する

デプロイ後の注意

www.netlify.com

2022/12/15時点で 帯域が100GM/monthのため、リリース後に多くのユーザーもしくは大きい画像ファイルや音声ファイルを使っている場合は超える可能性があるため注意してください。