詳解「StateGoの"ティラノスクリプト"サンプル動作と変更事例」

# はじめに

　[ティラノスクリプト](https://tyrano.jp/)は、ノベルゲーム用で主に***非プログラマ***（シナリオライター・グラフィッカー等）を対象としたスクリプト言語のことです。

この言語は近年急速に広まりつつあるようで、おかげでコンシューマ系プログラマである私でも存在に気づくことが出来ました。

ティラノスクリプトは、普通のプログラム言語とは大きくかけ離れています。

例えば…

* 表示テキストをママ書ける・・・ 出力命令とダブルクォーテーションで囲む必要なし。実行するとそのまま表示される。
* 表示テキストの間にタグで命令を書く・・・[button ]・[jump ]・[if ] …
* クラスの概念なし (注：Javascriptインラインで可)
* スコープ概念なし (注：Javascriptインラインで可)
* 変数はグローバルのみ (注：Javascriptインラインで可)
* ラベルジャンプでどこでも行ける
* クリックのイベントはラベルで受ける
* スタッククリアできる
* etc.

注釈で述べたとおり、仕様の足りない部分はJavaScriptをインラインで補完して利用します。

つまり、プログラマにとっては…

『構造化やオブジェクト指向といったプログラミング技法を使うことができない』

かつ

『インラインのJavaScriptを使う際はティラノスクリプトの仕様と同期させなくてはならない』

### もしもシナリオや演出等で複雑な要求があれば…

>延々と続く泥臭い作業…

>致命的なミスの発症率が上がる…

>デバッグで莫大な時間がかかる…


これで身震いしないプログラマはいないと思います。


### この危険な言語を如何にして楽に扱うか？

これこそが、[***StateGo***](https://statego.programanic.com/index-j.html)の出番なのです。

### 説明はサンプル動作＆簡単な変更事例

　動作の解説まで説明すべきなのですが、自分のペースを考えていくと少しずつでも公開していく方が良いと考えました。

本投稿では、『Githubの"ティラノスクリプト"サンプルが動作するまでの詳細』と『変更を追加した事例』を解説します。

## 環境準備

* Windows 7/8/10
* [StateGo](https://statego.programanic.com/index-j.html)

### C:\ts上にサンプルとTyranoscript環境を配置

説明における便宜のため、C:\ts上に以下の環境を作成します。

* [Github psgg-tyranoscript-sample](https://github.com/NNNIC/psgg-tyranoscript-sample)
* [Tyranoscript](https://tyrano.jp/dl/)
* [TyranoRider](https://tyrano.jp/dl/rider)

結果、フォルダは次のように構成されます。

<pre>
C:\ts\psgg-tyranoscript-sample-master   --- Github psgg-tyranoscript-sample
C:\ts\tyranoscript_v475                 --- Tyranoscript
C:\ts\TyranoRider_win_v220              --- TyranoRider
</pre>


### 環境変数 <img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/sysenv.png" width="200px"/>

　システム環境変数を以下の通りに設定する。

|変数|値|
|---|---|
|TYRANOSCRIPT|C:\ts\tyranoscript_v475\data\scenario|
|TYRANORIDEREXE|C:\ts\TyranoRider_win_v220\tyranorider.exe|

### 環境の確認

設定した環境変数を確認します。

#### 1) 環境変数 "TYRANOSCRIPT" の確認
C:\ts\psgg-tyranoscript-sample-master\sample にて
open_senaiofolder.bat を実行

結果：c:\ts\tyranoscript_v475\data\scenarioフォルダが開く
<img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/snrodir.png" width=300px />

#### 2) 環境変数 "TYRANORIDEREXE" の確認
C:\ts\psgg-tyranoscript-sample-master\sample にて
tyranorider.bat を実行

結果：TyranoRiderが起動 ※少々起動まで時間がかかる場合あり。
<img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/tr.png" width=300px />

## first.ksの修正

サンプルのStateGoは TestControl.ksファイルを生成します。
そのTestControl.ksを起動後に呼び出す修正を加える。

* オリジナル
![](https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/f0.png)

* 以下の様に修正
<pre>
;タイトル画面へ移動
@jump storage="TestControl.ks"
</pre>

## StateGoファイルのオープン

C:\ts\psgg-tyranoscript-sample-master\sample\doc　にて
TestControl.psgg をダブルクリック
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/o1.gif"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/o1.gif" width=300px/> </a>

### StateGoについての簡単な見方

<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/exp.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/exp.png" width="100%" /> </a>

### サンプルの内容について

Tyranoscriptのインストーラに付属するサンプルを StateGoにて書き直したものです。

STARTから矢印を追うことで、遷移状態を把握することが出来ます。

オレンジのグループ内へは、グループ上でのクリックメニューにてグループ内に入ることが出来ます。

各ステートはソースコードがテーブルにて指定されています。ステート上のクリックメニューの"アイテム編集"にて内容を確認できます。

Tyranoscript特有のボタン指定、エリア指定等々は、マクロ化されていて、データ指定するだけでコードおよびラベルが生成されます。

生成されたコードは、左パネルにて確認が出来ます。

## ティラノスクリプトへコンバート

"保存→変換"ボタンを押すとソース（TestControl.ks）に変換、ティラノスクリプト環境にコピーされる。

<a href="https://youtu.be/xMjgL6NMFbc">動画<br><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/o2.png" width="300px" /> </a>

## 実行

### TyranoRider起動

C:\ts\psgg-tyranoscript-sample-master\sampleの 
tyrabirider.batでTyranoRiderを起動

### プロジェクトを設定

TyranoRiderの[プロジェクトを選択]ボタンを押して、以下の内容を設定します。

<pre>
C:\ts\tyranoscript_v475\index.html
</pre>

### ゲーム開始

[ゲーム開始]ボタンを押下します。
(クリックでアニメーションGIF再生)
<a href="https://statego.programanic.com/images/demo.gif">
![](https://statego.programanic.com/images/tyranofull.png)
</a>


# ちょっと使ってみる…

イントロを少しだけ変えてみましょう。

## 1. Introductionグループへ入る

オレンジのIntroductionを選択しクリックして、"グループへ入る"を選択。
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/ig.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/ig.png" width=300px /></a>

結果: Introductionグループ内を表示
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/ig2.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/ig2.png" width=300px /></a>

## 2. SERIF01をコピーしたものをSERIF01の前に挿入
①　ステート上でクリックしてメニューを表示し、コピーを選択
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s1.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s1.png" width=300px /></a>
②　空き空間でクリックしてメニューを表示し、ペーストを選択
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s2.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s2.png" width=300px /></a>
③　ペースト結果
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s3.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s3.png" width=300px /></a>
④　SETUP_TAMATOステートの赤点をドラッグして、流れを変更
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s4.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s4.png" width=300px /></a>
⑤　挿入ステート(SERIF04)の赤点をドラッグして、SERIF01へ
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s5.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/s5.png" width=300px /></a>

## 3. 挿入ステート(SERIF04)のセリフ変更

①　ステート上でクリックしてメニューを表示し、アイテム編集を選択
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t1.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t1.png" width=300px /></a>

② initの項目を選択して、ダブルクリック
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t2.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t2.png" width=300px /></a>

③　セリフを変更
<a href="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t3.png"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/t3.png" width=300px /></a>
セリフ
<pre>
\#
キミハシラナイ・・・[p]
StateGoガアレバ、モットカンタンニナルコトヲ・・・[p]
・・・[p]
・・・[p]
</pre>

## コンバート＆ゲーム実行

(クリックでアニメーションGIF再生)
<a href="https://statego.programanic.com/images/u2.gif"><img src="https://raw.githubusercontent.com/NNNIC/psgg-tyranoscript-sample/master/wiki/u.png" width=100% /></a>


# 最後に

ティラノスクリプトを楽に扱うため、***[StateGoの評価付きテンプレート](https://qiita.com/tohmas/items/d14cb9c6cff441ef2d91#%E8%A9%95%E4%BE%A1%E4%BB%98%E3%81%8D%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)***と***[行マクロ](http://statego.programanic.com/tec2/tec_cts_macro_j.html#line-macro)***が総動員で使用されています。これらについては、機会を改めて説明できればと考えています。


…