ティラノスクリプトで作ったゲームを、IBM Cloud Code Engineで動かすまで

# 概要
この記事は、ノベルゲームエンジンの「ティラノスクリプト」と開発ツールの「ティラノスタジオ」を使って作成したノベルゲームを、IBM Cloud Code Engineで動かすまでの手順をまとめたものです。「ティラノスタジオ」は、V6を使っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/0eed0cac-5c81-e973-fde1-b7392aa9aa8b.png)

キャラクターは、生成AIで作成しています。やっつけ感が半端ないですが、とりあえずうごけばいいやーマインドです！

# IBM Cloud Code Engineを使う理由
IBM Cloud Code Engineを使うことで、インターネットで公開するためのドメインやSSL/TLSサーバ証明書が自動で付与されるとともに、自動スケール機能があるため、ノベルゲームの公開に向いています。

# ティラノスクリプトとティラノスタジオ
ティラノスクリプトは、ノベルゲームエンジンで、作成したゲームは商用利用ができます。Webブラウザゲームのほかに、スマートフォン向けやWindows向け、Mac向けのゲームを作ることもできます。ティラノスタジオは、ティラノスクリプトを用いた開発における開発サポートを行います。

公式Webサイト
- ティラノスクリプト https://tyrano.jp/
- ティラノスタジオ https://tyrano.jp/studio/

# ティラノスクリプトを用いたゲーム作成

## ティラノスタジオのインストール
WindowsまたはMac環境が対象です。ティラノスタジオのサイトにアクセスします。お使いの環境に合わせたティラノスタジオをダウンロードし、ダウンロード後、解凍します。
「TyranoStudio」を起動します。Windows環境の場合は、ダブルクリックです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b28f167e-ead2-ed6a-f0aa-09dcb9cec474.png)

## プロジェクトの作成
起動したティラノスタジオで、「新規プロジェクト作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/47a13534-210d-1b21-e43e-381ade312d48.png)

「タイプ選択」でゲームタイプを選び、「次へ」をクリックします。ここでは、「ADV・ノベルゲーム」を選んでいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b07e519d-df35-4996-70c4-5ba18c454974.png)

「プロジェクト名」を入力します。「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b7634fab-e80f-b31c-0928-980adb480bb8.png)

画面サイズを指定し、「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3457a6dc-ff60-0b68-b0b2-bf29110ec9d8.png)

「作成する」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/8bf55f85-9e56-53c3-aa41-37cefadef363.png)

「新規プロジェクトを作成しました。」と表示されます。「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/507b05bd-7d84-d1e4-a8fa-edfdfe503a06.png)

「マイプロジェクト」の画面に、作成したプロジェクト名が表示されます。このプロジェクトがノベルゲームになります。
「開発する」ボタンをクリックすると、ゲームの開発対象になり、「フォルダ」ボタンをクリックすることで、作業フォルダが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f37cf8aa-e8ae-2dd2-f0d0-26aa14d1d127.png)

プロジェクトは、ひな形が入っているので、「プレビュー」内の「ゲーム再生」画面で、「ゲームを再生する」をクリックすることで、実際の動きを見ることができます。
このひな形をカスタマイズする形で、ノベルゲームを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/1cfb3f45-728b-c707-9555-23d0c63b607d.png)

## ノベルゲームの作成
作成したプロジェクトのフォルダには、ひな形が入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d9d8afb9-062a-e8d4-0fc8-12025d9778d4.png)

プロジェクトのフォルダ内の「data」>>「scenario」内の「ks」ファイルを編集します。ノベルゲームの最初のシーンを編集するには「scene1.ks」の中身を確認し、編集してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/41ea9599-604c-97c2-a7a1-cae6b8557bab.png)

キャラクターのデータは、プロジェクトのフォルダ内の「data」>>「fgimage」>>「chara」フォルダにあります。キャラクター名のフォルダを作成、フォルダ内に背景を透明化した画像ファイル（PNG形式）を配置します。
下図のキャラクターは、生成AIを使いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3a7dee82-66d5-fe69-f4de-633efdcdcab7.png)

今回は、下図のように表示される文章やキャラクターを変更しました。背景は変更していません。ティラノスタジオでプレビューを実行すれば、動作を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/0eed0cac-5c81-e973-fde1-b7392aa9aa8b.png)

## ゲームのエクスポート
ティラノスタジオの画面で、「エクスポート」>>「配布用パッケージング」にアクセスします。
配布形式に「ブラウザゲーム」を指定し、「エクスポート実行」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/9fbb8015-01e9-49c7-1b17-35deccd7ec79.png)

「出力成功しました。フォルダを確認しますか？」が表示されるので、「OK」をクリックします。
ブラウザゲーム向けにエクスポートされたファイルが格納されているフォルダが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/82ede1cd-b971-f086-04ba-4730a2fdbb27.png)

「tyranoproject」というフォルダです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/2e5d3e01-24ed-7dd4-f307-2741b74c3db6.png)

上記のフォルダの中身は、次のようなファイルとフォルダがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/dc5c4024-d931-57f9-fa68-3729cf8aa550.png)

# ゲームのファイルを含めたコンテナの作成（ビルド）
WindowsもしくはMacにおけるターミナルアプリを使い、先ほどの「tyranoproject」フォルダに移動します。
## Dockerfileの作成
「tyranoproject」フォルダ内に、Dockerfileというファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/6fd695ce-adff-47f6-e371-9f1058bb855f.png)

Dockerfileの中身は次のように書きます。
```
FROM nginx 
COPY . /usr/share/nginx/html
```
## コンテナをビルド
Dockerfileを使い、コンテナイメージとしてビルドします。ビルドの際に、ティラノスタジオでエクスポートした各種ファイルもコンテナイメージに複製されます。
次のコマンドを実行します。
```
docker build -t workuser1/1stnovelgame .
```
ビルドしたコンテナのイメージを確認するために、次のコマンドを実行します。
```
docker images
```
実行結果例 (IMAGE IDは、docker buildの実行毎に異なります。）
```
REPOSITORY               TAG       IMAGE ID       CREATED         SIZE
workuser1/1stnovelgame   latest    eb8533894944   5 seconds ago   199MB
```

# コンテナレジストリに、コンテナを登録
## コンテナレジストリのDocker Hubsに接続
Docker Hubに接続します。Docker Hubのユーザー名は、例として、workuser1 とします。
workuser1の部分を、各自のDocker Hubのユーザー名に読み替えて作業しましょう。
```
docker login --username workuser1
```
実行結果
```
Login Succeeded
```
## コンテナ(コンテナイメージ）の登録
次のコマンドを実行し、ビルドしたコンテナを、Docker Hubに登録します。
```
docker push workuser1/1stnovelgame:latest
```
完了すると、次のように表示されます。docker.ioで始まる部分を指定することで、Godotからエクスポートしたゲームを含むコンテナイメージを、IBM Cloud Code Engineをはじめ、コンテナ運用環境で動かすことができます。
```
The push refers to repository [docker.io/workuser1/1stnovelgame]
e05c76d4c9c4: Pushed
11de3d47036d: Mounted from library/nginx
16907864a2d0: Mounted from library/nginx
2bdf51597158: Mounted from library/nginx
0fc6bb94eec5: Mounted from library/nginx
eda13eb24d4c: Mounted from library/nginx
67796e30ff04: Mounted from library/nginx
8e2ab394fabf: Mounted from library/nginx
```

# IBM Cloud Code Engineでコンテナを動作
## IBM Cloudにアクセス
IBM Cloud Code Engine にアクセスします。>> https://cloud.ibm.com/codeengine/overview

## Projectの作成
IBM Cloud Code Engine 上で、「Projects」をクリックします。
「Create」をクリックし、Projectを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c6b0aaef-0d63-0e7e-9999-4e7902d187cf.png)

Projectは、アプリケーションを管理する場所です。次はProject内に、アプリケーションを作成します。

## アプリケーションの作成
workuser1の部分を、各自のDocker Hubのユーザー名に読み替えて作業しましょう。
Project画面で、「Applications」をクリックします。その後、「Create」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/84814c97-0e98-4ec5-5703-e3d5c260dab1.png)

「Image reference」に、コンテナイメージをプッシュした際に取得した、docker.ioから始まるURLを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c07d61d4-7057-0153-9c38-fd16d368d488.png)

画面下に移動し、「Min number of instances」を0インスタンスにします。「Max number of instances」を2インスタンスにします。
ノベルゲームは負荷が低いことが多いので、「CPU and memory」を「0.5 vCPU/1GB」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/4e5aeaa5-0b76-cb35-7fbe-a9813836a620.png)

「Optional settings」の「Image start options」を開き、「Listening port」に「80」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/14c06a48-dae1-04dd-3d13-bcbea8b13a57.png)

「Create」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/5ebab2bc-eca3-eff7-3680-1cce087c49e3.png)

アプリケーション名の右隣が、「Deploying」から「Ready」になるまで待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/98a6db11-2e77-70ab-e6ba-1247ee87ec1c.png)
「Ready」になった様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7600142f-55e5-90ea-0dec-b0b0c7b4c76e.png)

画面右上の「Test application」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/61e702ce-342f-168a-1f0d-ffcdb19d69c6.png)

「Application URL」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/5f95934b-80ad-8d14-5239-3f69e620e628.png)

新規タブで、ノベルゲームが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7f1501c1-f730-16ea-4039-15c4dd65bc01.png)

ゲームを進めると、生成AIで作成したキャラクターが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/81836e80-5f40-ba3d-eece-b347f21932f6.png)

このとおり、ドメインとSSL/TLSサーバ証明書が付与されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/4d396809-5c7f-c4f3-5ec1-51921345086e.png)

# まとめ
本記事では、ノベルゲームエンジンの「ティラノスクリプト」と開発支援ツールの「ティラノスタジオ」をつかって作成したノベルゲームをエクスポートし、コンテナとしてビルドし、IBM Cloud Code Engineで動かすまでの手順を確認しました。
ノベルゲームはゲームとして作りやすく、ビジネス向けのゲーム（シリアスゲーム）を作って公開する際に、実行環境として、IBM Cloud Code Engineが選択肢に入ればと思います。