【ティラノスクリプト】よく使うものメモ

今回、久しぶりにティラノスクリプトでゲームを作ってみて、使ったプラグインやよく使うものについてまとめました。
といっても基本的なことが多いので、ティラノスクリプトの公式サイトを見ればわかる内容のものがほとんどです。
これはあくまで自分がいちいち調べ直すのが面倒なので、自分用の見直すメモとして書いたものです。
私はそこまでティラノスクリプトには詳しくないので、もっと綺麗でまとまった書き方があるかもしれません。
それを理解したうえでご覧ください。
詳しいことを調べたいときは参考サイトのほうをご覧ください。

※このメモは、今回制作したホラーゲーム、SEE YOU FRIDAY- Before Monday Comes-で使われた演出などのメモなので、ちょっとネタバレを含みます。まだプレイしていない人や、実際どんな動きなのかな？と気になる方はこちらから遊んでみてくださいね。

エンブレム（バッジ）（実績）機能

ゲームをクリアしたときや特定のエンディング（トゥルーエンド）を見た時なんかに取得できる実績、トロフィーみたいなものです。バッジを用意するときは、ゲームを投稿するページを先に作っておく必要があります。

参考：https://novelgame.jp/help/page/emb
①参考サイトからバッジ機能プラグインをダウンロードする。
②解凍したフォルダにある【novecole.ks】を/data/scenario/に入れる。
③first.ksに[call storage="novecole.ks"]と追加しておく。

次にバッジ（画像）を用意します。
④240×120pxの透過pngの画像を用意する。
⑤ノベルゲームコレクションの【作品管理】から【編集】⇒【バッジ】のタブからバッジを登録。
⑥画像を設定したら【コード】からティラノスクリプトコードをコピーする。
⑦コピーしたティラノスクリプトコードをエンディングの前(タイトルに戻る前)くらいに貼り付ける。

ちなみに今回用意したティラノスクリプトコードはこれです。
[give_emblem id="7890" pid="00cfe677584dce2c29c4aebc3dcc8f48" ]

画像を表示/非表示

ゲーム中にリンゴとか同僚の写真など、アイテムをゲットしたときなどに使った画像を表示する方法です。

参考：https://tyrano.jp/sample2/code/kiso/5

基本はレイヤーを表示して、image layerで画像を表示するだけです。あとはｘやyの価、weightやheightで画像の大きさをちょうどいい感じに調節すればOK。

[layopt layer="2" visible="true"]

[image layer="2" x="550" y="180" storage="../image/apple.png" weight="200" height="200" time="800" wait="false"]

画像を消すときはそのレイヤーの数字をfreeimageで指定。あとは時間とか、表示されるまで松尾かどうかも。この場合、500ミリ時間を掛けて画像を消すけど、消えるまでは待たないって感じですね。
[freeimage layer="2" time="500" wait="false"]

カメラ機能、カメラ演出

水で帰れなくなった時や同僚がウィークリーズ化したときに使ったカメラワークです。
正直いまだに使い方がよくわかってないですが、一枚絵とかかっこいい感じで見せたいときに使うといいっぽいですね。

参考：https://tyrano.jp/sample2/code/tech/1

今回、同僚がウィークリーズ化したときはこんな感じで書いてました。

#
ただならぬ空気に早くここから離れた方がいいと思った俺は[r]一条の腕を掴んでエントランスに連れて行こうとした。[p]
[freeimage layer="1" time="0" wait="false"]
[chara_hide name="tomoya" wait="false" time="500"]
[layermode time="1000" color="0x000000" mode="darken" opacity="255"]

[bg storage="Black.png" time="1000"]
[free_layermode time="0"]
[playse storage="niku.wav"]
しかし、掴んだ腕は人間とは思えないほどぐにゃりと曲がった。[p]何だこれは・・・[l]俺は今、[wait time="1000"][delay speed="130"]
[ruby text="・"]何[ruby text="・"]を掴んだ・・・？[p]

[delay speed="30"]
俺は恐る恐る掴んだ腕の先に視線を向けた・・・[p]

[layopt layer="fix" visible="false"]
[anim layer="message0" time="500" opacity="0"]

[layermode time="1000" color="0xff2100" mode="color-burn" opacity="150"]
[bg storage="eventhall.jpg" time="2000" wait="false"]


;先にカメラを動かしておく
[camera layer="2" time="1" zoom="5" y="-50" x="-30"]
[layopt layer="2" visible="true"]
[image layer="2" time="1000" storage="../image/douryou.png" width="400" height="534" top="80" left="430"][wait time="3000"]

[layopt layer="fix" visible="true"]
[anim layer="message0" time="500" opacity="255" wait="false"]

#&f.family_name + '　' +f.player_name
う、[wait time="1000"]

;カメラをリセットする
[reset_camera layer="2" wait="false" time="800"]
[freeimage layer="2" time="1000" wait="false"]

;ここでウィークリーズになった同僚の絵をレイヤー1で出す。
[image layer="1" visible="true" top="80" left="430" storage="../image/douryou.png" width="400" height="534" time="0" wait="true"]

[quake count="7" time="500" hmax="20" wait="false"][font size="48"]うわあああああ！？[p]

[resetfont]
#
俺は思わず掴んでいた手を離して後ずさる。[p]

キーフレームアニメーション（kanim）

タイトル画面でタイトルロゴを下から上に移動させたり、キャラクターをジャンプさせたりするときに使ったアニメーションです。私はanime.ksという別のシナリオを作り、その中にいくつかkeyframeを書いて、callで読み込んでいます。

例えばanime.ksにはこんな感じに書いてます。キーフレームのパラメーターは公式のタグリファレンスをご覧ください。
公式タグリファレンス：https://tyrano.jp/tag#keyframe

anime.ksの内容------------------------------------------------
*start

;ジャンプ
[keyframe name="jump"]
[frame p=0%  y=0]
[frame p=50%  y=-60]
[frame p=100% y=0]
[endkeyframe]

[return]
------------------------------------------------------------------------------------------------
それで、Scene1.ksとかでanime.ksを読み込んでからkanimでアニメーションをつけます。
たとえば登場させているキャラクターをジャンプさせたときはこう書いてます。

[call storage="anime.ks" target="*start"]

;キャラクター登場
[chara_new name="tubukuma" storage="chara/tubukuma/default.png" jname="つぶくま"]
[call storage="character.ks" target="*tubukuma"]
[chara_show name="tubukuma" top="90" left="200" face="default" time="2000"]

 #つぶくま
[kanim name="tubukuma"  keyframe="jump" time="500" ]
ぬいぐるみじゃありません！[p]

キャラクターを登場させる

これもノベルゲームの基本ですね。サンプルゲームで書かれていたものとほぼ同じですが
シナリオ内で初めてキャラクターを登場させるときはこう書いてました。

;キャラクター登場
[chara_new name="mio" storage="chara/mio/surprise.png" jname="澪"]
[call storage="character.ks" target="*mio"]
[chara_show name="mio" top="70" left="400" face="surprise" time="1000" wait="false"]

character.ksにはそれぞれキャラの表情を登録してます。中身はこんな感じで、澪（ヒロイン）を読み込むときは*mioでreturnで戻ってます。

※character.ksの中身
*mio
;キャラクターの表情登録
[chara_face name="mio" face="default" storage="chara/mio/normal1.png"]
[chara_face name="mio" face="normal2" storage="chara/mio/normal2.png"]
[chara_face name="mio" face="angry" storage="chara/mio/angry.png"]
[chara_face name="mio" face="surprise" storage="chara/mio/surprise.png"]
[chara_face name="mio" face="happy" storage="chara/mio/happy.png"]
[chara_face name="mio" face="sad" storage="chara/mio/sad.png"]
[return]

■表情を変えるときはchara_modで
faceのところをcharacter.ksで設定したものを指定します。defaultとかangryとか。この名前は自分で決めてます。
[chara_mod name="mio" face="normal2" time="0"]

■キャラクターを動かしたい、位置を変えたいときはmoveで。
[chara_move name="mio" left="680" anim="true" wait="false"]

■キャラクターを退場させるときはchara_hideで。
[chara_hide name="mio" wait="true" time="1000"]

クリッカブルマップ

背景をクリックして調べられるようにするやつですね。脱出ゲームや謎解きゲームとかに使えそうなやつ。

参考：https://tyrano.jp/sample2/code/kiso/13

今回私が作ったクリッカブルは、それぞれ調べたら変数が変わり、調べた回数によって調べられる箇所が増えたり、内容が変化するように作ってました。例えば、すべての場所を調べたら屋形船が選択できるようになり、屋形船を調べた後はつぶくまが登場するようにしてます。
opacityの値を255にすれば、クリッカブルの場所がぱっとわかるので、位置を調節してから値を0にしてます。あとは背景に合わせてwidthやx,yの値をいじるだけです。

*Explore_start
[clickable x="70" y="90" width="150" height="150" target="*tree1" opacity="0" mouseopacity="50" color="0xffffff"]
[clickable x="70" y="400" width="150" height="150" target="*tree2" opacity="0" mouseopacity="50" color="0xffffff"]
[clickable x="500" y="50" width="150" height="150" target="*sky" opacity="0" mouseopacity="50" color="0xffffff"]
[clickable x="230" y="550" width="150" height="150" target="*lakeside" opacity="0" mouseopacity="50" color="0xffffff"]

;すべての箇所を調べたら屋形船を調べられるようになる
[if exp="f.check_count==4"]

[clickable x="850" y="200" width="350" height="200" target="*houseboat" opacity="0" mouseopacity="50" color="0xffffff"]

[endif]


;屋形船を調べた後、つぶくまを登場させる
[if exp="f.check_count==5"]

[layopt layer="1" visible="true"]
[image layer="1" visible="true" top="380" left="450" storage="./chara/tubukuma/default.png" width="100" height="100"]
[clickable x="430" y="350" width="150" height="150" target="*tubukuma" opacity="0" mouseopacity="50" color="0xffffff"]

[endif]
[s]


例えば空（月）を調べた時、*Explore_startの前に
[eval exp="f.check_sky=false"]
と変数を宣言しておいて、これがfalseの時はまだ調べてない状態なので、チェックしたカウントを追加して、[eval exp="f.check_sky=true"]にします。
f.check_skyがtrueになったときはもうすでに調べ済み（2回目）なので、elseでセリフを変えてます。


*sky
[layopt layer="fix" visible="true"]
[anim layer="message0" time="500" opacity="255"]

;初回でまだ空を見てなかった場合
[if exp="f.check_sky==false"]

[eval exp="f.check_sky=true"]
[iscript]
f.check_count = f.check_count + 1;
[endscript]

#
この場所は星がよく見える隠れスポットとして有名らしいが[r]あいにく今日は天気が悪い。[p]

#&f.family_name + '　' +f.player_name
なんか妙に不気味な雰囲気だよなぁ。曇っているせいか？[p]
[else]
#
どんよりとした空に不気味な月が浮かんでいる。特に気になるところはない。[p]

[endif]

@jump target="*Explore_start"

好感度管理（フラグ管理）

ノベルゲームではほぼ必ずあるフラグ管理ですね。
今回のゲームでもヒロインの好感度が高ければルートAへ、低ければルートBへみたいな感じでフラグ管理をしています。
数字が〇〇以上なら、〇〇以下ならこの処理へというものなので、育成ゲームとか、戦闘ものにも使えますね。

まず一番最初に変数を宣言します。好感度が0の状態です。
[eval exp="f.love_point=0"]

そして、3つの選択肢があったとします。
[glink target="together" text="一緒に行く？" x="100" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]
[glink target="fight" text="仕事頑張ってね" x="500" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]
[glink target="sympathize" text="確かに気味が悪いね" x="900" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]

[s]

そして、一緒に行く？を選んだ時に好感度がプラスされる処理を追加します。

*together
[cm]
[iscript]
f.love_point = f.love_point + 5;
[endscript]

#相原　澪
[chara_mod name="mio" face="surprise" time="0"]
え？いいの？[p]

#&f.family_name + '　' +f.player_name
俺もちょうどSEE YOU FRIDAYに行くところだったし[r]行き先が同じなら一緒に行かない？[p]

そして好感度の数字が〇〇以上ならAルートへ、〇〇以下ならBルートへ、みたいな感じの処理を書くならこうなります。
この場合、好感度が10以上ならAルートへ、それ以外ならBルートへとなります。

[if exp=" f.love_point  >= 10"]

[jump storage="A_scenario.ks" target="*start"]

[else]

[jump storage="B_scenario.ks" target="*start"]

[endif]

もし途中で変数のチェックをしたかったり、点数として表示したい場合はこんな感じで書きます。

#
現在、ヒロインの好感度は[emb exp=f.love_point]です。[p]

固定ボタン（fix)、数字だけ入力するボタンについて

けいど様の前の扉の謎解きで使って6桁の数字を入力して謎を解くあれです。
ボタンはロールボタンと同じで固定ボタンと呼ばれるものを使ってます。選択肢のボタンでは1回押せば消えてしまいますが、ロールボタンと同じようにクリックしても画面に残るボタンのことを固定ボタン（Fixボタン）というらしいです。fixボタンはあらかじめ数字や文字が書かれた画像ボタンを用意する必要があります。

参考：https://tyrano.jp/sample2/code/kiso/16#demo

扉の前の謎解きは、謎を解く前なら問題と入力するボタンを表示し、すでに解いているなら先へ進むか戻るかの選択肢を出してます。

もしシドさんからヒントをもらっていた場合、文字が書かれていた方の問題画像を出します。

[if exp="f.shido_hint==true"]
[image layer="1" visible="true" top="110" left="-100" storage="../image/nazotoki3.png" width="1000" height="563" time="500" wait="false"]
[else]
[image layer="1" visible="true" top="110" left="-100" storage="../image/nazotoki2.png" width="1000" height="563" time="500" wait="false"]

[endif]

;こちらには数字入力の背景画像を表示します。
[image layer="1" visible="true" top="120" left="850" storage="../image/door_numberback.png" width="380" height="538" time="500" wait="false"]

; 白枠と入力された数字を表示する場所を作ります。
[image layer="1" x="940" y="180" width="200" height=" 55" storage="color/white.png" ]
[ptext layer="1" x="890" y="180" name="ptext" overwrite="true" text="" color="Black" size="42" width="215" align="right"]


;数字の変数。最初は空白にします。
[eval exp="f.input = '' "]

; 入力用のボタン12個。exp パラメータを利用して、それを押した瞬間一時変数 tf.num に特定の文字列が入る」ようなボタンになってます。
[button graphic="../fgimage/num/0.png" x="1000" y="500" exp=" tf.num = '0' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/back.png" x="900" y="500" name="fix_phone" fix="true" target="*Sub_Back" clickse="button_cancel.mp3" ]
[button graphic="../fgimage/num/ok.png" x="1100" y="500" name="fix_phone" fix="true" target="*OK"]

[button graphic="../fgimage/num/1.png" x="900" y="420" exp=" tf.num = '1' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/2.png" x="1000" y="420" exp=" tf.num = '2' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/3.png" x="1100" y="420" exp=" tf.num = '3' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]

[button graphic="../fgimage/num/4.png" x="900" y="340" exp=" tf.num = '4' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/5.png" x="1000" y="340" exp=" tf.num = '5' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/6.png" x="1100" y="340" exp=" tf.num = '6' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]

[button graphic="../fgimage/num/7.png" x="900" y="260" exp=" tf.num = '7' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/8.png" x="1000" y="260" exp=" tf.num = '8' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../fgimage/num/9.png" x="1100" y="260" exp=" tf.num = '9' " name="fix_phone" fix="true" target="*Sub_Input" clickse="button_ok.mp3"]
[button graphic="../image/button/button2/return_button.png" x="50" y="30" size="20" name="fix_phone" fix="true" target="*return" clickse="button_ok.mp3"]

[s]

; ------------------------------------------------------
*Sub_Input

; [iscript]～[endscript] もし入力済みの数字が6文字未満であれば、いま押した数字を末尾に追加。サブルーチンラベル。
[iscript]
if (f.input.length < 6) {
f.input = f.input + tf.num
}
[endscript]

; 変数 f.input に入っているのは文字列。 [ptext] 文字オブジェクトの内容を f.input で上書き。
[ptext layer="0" x="0" y="0" name="ptext" overwrite="true" text="&f.input"]

[return]

; ------------------------------------------------------
*Sub_Back

; 1文字削除するラベル。これもサブルーチンラベル。[iscript] f.input の末尾1文字を削除。
[iscript]
f.input = f.input.substr(0, f.input.length - 1)
[endscript]

[ptext layer="0" x="0" y="0" name="ptext" overwrite="true" text="&f.input"]
[return]

; ------------------------------------------------------
*OK
[cm]

; [cm][freeimage][clearfix] フリーレイヤーの解放、前景レイヤー1番の解放、およびfixレイヤーにあるname=fix_phoneオブジェクトの解放。
[iscript]
if (f.input == "ここに正解の6桁の数字を書く") {
f.clear = true
} else {
f.clear = false
}
[endscript]
[jump target="*CLEAR" cond="f.clear"]
[jump target="*FAILURE"]

; ----------------------
; 失敗したらブーって音を出す
*FAILURE
[cm]

[playse storage="clock_error.mp3" volume="100"]

;ミスした回数を記録
[iscript]
f.nazotoki_miss_count = f.nazotoki_miss_count + 1;
[endscript]

[return]

; 成功したら正解の音を鳴らし、謎解きの問題やボタンを消す。
*CLEAR
[playse storage="door_success.mp3" volume="100"]
[wait time="2000"]

[clearfix name="fix_phone"]
[freeimage layer="1" time="500" wait="false"]

[playse storage="door_rock.mp3" volume="100"]
[wait time="1000"]
[clearstack]

[layopt layer="fix" visible="true"]
[anim layer="message0" time="500" opacity="255"]
#
成功したらイベントが進む処理を書く。[p]

コンフィグ(Config)画面の変更

confg画面の変えたといっても背景やボタンの画像を差し替えるだけのものです。
内容やUIの位置など細かい設定のやり方はわかりません。空想曲線様のサイトではテーマ一括プラグインというものがあるので、ゲームの世界観に合うデザインがあればこちらのサイトから購入するのもいいと思いますよ。

空想曲線様：https://kopacurve.blog.fc2.com/blog-category-57.html

基本的にconfig画面の画像はdata/mage/configのフォルダの中に入ってます。
bg_imageをペイントソフトや画像編集ソフトで好きなものに差し替えたり、c_setボタンやc_skiponボタンなど全体のデザインに会うように画像を差し替えればOKです。

主人公の名前を入力する

主人公の名前をプレイヤーに入力してもらったり、プレイヤーに何か言葉を入力してもらって変数に入れるやつですね。
今回は苗字と名前の二つの変数を用意して、ヒロインには名前で、同僚には苗字で呼ばせてました。
最大文字数はどちらも6文字までで、デフォルト名は佐藤 航平としています。
参考サイトは機能デモのプレイヤー入力から

参考：https://tyrano.jp/sample2/code/kiso/15

*name_entry
[layopt layer="1" visible="true"]
[ptext text="主人公の名前を入力してください" x="0" y="100" size="50" width="1280" align="center" layer="1" color="white" ]

[ptext text="苗字：" x="300" y="300" size="30" width="1280" layer="1" color="white" ]
[ptext text="名前：" x="720" y="300" size="30" width="1280" layer="1" color="white" ]
[edit name="f.family_name" width="200" height="45" size="30" left="400" top="300" maxchars="6" initial="佐藤"]
[edit name="f.player_name" width="200" height="45" size="30" left="820" top="300" maxchars="6" initial="航平"]
[button graphic="title/button_ok.png" target="*commit" x="450" y="500"]
[s]

*commit
[freeimage layer="1" time="0"]
[commit name="f.player_name"]
[commit name="f.family_name"]
[cm]

; 入力チェック。苗字か名前が空欄だった場合に名前入力に戻る。
[if exp="f.player_name.length==0 || f.family_name.length==0" ]

[ptext text="名前が入力されていません。もう一度入力してください。" x="0" y="500" size="30" width="1280" align="center" layer="1"]
[wait time="1500"]
[freeimage layer="1" time="500"]
[cm]
[jump target="*name_entry"]

[endif]

;名前の確認をする
[ptext text="&'「'+ f.family_name + '　'+f.player_name + '」でよろしいですか？'" x="0" y="300" size="30" align="center" width="1280" layer="1"]

[button target="<em>gamestart" graphic="title/button_yes.png" clickse="button_ok.mp3" x="450" y="450" weight="200" height="41" ]
[button target="return" graphic="title/button_no.png" clickse="button_cancel.mp3" x="650" y="450" weight="200" height="41" ]
[s]

Yesを選べばそのままゲームへ進む処理を、Noを選べばまた*name_entryからやり直しって感じですね。主人公の名前を名前欄に表示するときはこう表示して、ヒロインや同僚から名前を呼ばれるときにはこう書いてます。

#&f.family_name + '　' +f.player_name
・・・少しだけこの辺りを探してみるか。誰かいるかもしれないし。[p]

#相原　澪
私は早速、イベント参加者に取材しに行ってくるね。[r]じゃあ[emb exp=f.player_name]君、またあとで。[p]

#一条　智也
お、[emb exp=f.family_name]じゃん。お前もこのイベントに来てたのか。[p]

CGモード

ゲームをクリアした後とかに一枚絵（スチル）などを見れるようにやつですね。
今回はエンド１～４（隠しエンドを除く）をクリアした後に解放されるおまけページにこのCGモードを追加しています。

参考：https://tyrano.jp/usage/tech/cg

まずはおまけページにCGモードへ飛ぶボタンを用意し、デフォルトで用意されている「cg.ks」のシナリオへ飛ぶ処理を書きます。

[glink target="*cg" text="CGモード" x="300" y="430" size="40" width="500" height="30" graphic="button/button2/door_button.png" enterimg="button/button2/door_button_hover.png" clickse="button_ok.mp3"]

[s]

*cg
[jump storage="cg.ks" target="*start"]


もともと設定されている内容は変えず、こんな感じで画像のサムネをボタンで表示してます。
おまけページがそもそもED1~4をクリアしないと解放されないので、上の3つはそのまま画像を表示し、下の3つは隠しエンドを見てからじゃないと画像（CG)が表示されないように設定しています。

*page_0
[button target="*keidosamanomae" graphic="../bgimage/keidosama_solo.png" x="20" y="70" width="400" height="230" layer="2"]
[button target="*truend_cg1" graphic="../bgimage/truend_cg1.png" x="440" y="70" width="400" height="230" layer="2"]
[button target="*truend_cg2" graphic="../bgimage/truend_cg2.png" x="860" y="70" width="400" height="230" layer="2"]


[if exp="sf.ed_mio=='true'"]
[button target="*Tomoya_family" graphic="../bgimage/Tomoya_family.png" x="20" y="370" width="400" height="230" layer="2"]
[button target="*mioend_cg" graphic="../bgimage/mioend_cg.png" x="440" y="370" width="400" height="230" layer="2"]
[button target="*mioend1" graphic="../bgimage/mioend.png" x="860" y="370" width="400" height="230" layer="2"]
[else]
[image layer="1" visible="true" storage="../../tyrano/images/system/noimage.png" x="20" y="370" width="400" height="230"]
[image layer="1" visible="true" storage="../../tyrano/images/system/noimage.png" x="440" y="370" width="400" height="230"]
[image layer="1" visible="true" storage="../../tyrano/images/system/noimage.png" x="860" y="370" width="400" height="230"]
[endif]
[s]

けいど様に会うシーンでは一人の時と二人の時があったので、一人の時の画像をサムネにして、隠しエンドを見ている場合のみ、クリックすると二人のCGも表示されるよう設定していました。隠しエンドの澪の表情差分も同じ感じで、クリックすると次のCGが表示されるって感じです。*startは暗転からのcg.ksの最初に戻る処理です。

*keidosamanomae
[freeimage layer="1" time="0"]
[cm]
[bg storage="../bgimage/keidosama_solo.png" time="1000"]
[p]

[if exp="sf.ed_mio=='true'"]
[bg storage="../bgimage/keidosama_pair.png" time="1000"][p]
[endif]
@jump target="*start"

スマホからの操作の無効化

ティラノスクリプトのゲームをスマホから遊ぶと、スワイプやフリックをしたときにバックログやメニュー画面が出てしまいますよね。
これが時計の宝石の謎解きの時にいちいち出ていてうざかったので、今回は無効化してます。
スマホに限らず、マウスのホイールでバックログが出てくるのを無効化するのも同じ場所だと思います。

data/system/KeyConfig.jsの中の// スマホ・タブレットのジェスチャー操作って書かれている場所を探します。
//はコメントアウトなので、私は今回このようにスワイプを無効化しました。長押しでスキップするのは残してます。
動作確認をするにはどこかのサーバーにアップロードしてスマホから確認する必要があります。
すでにアップロードしていて、新しく更新しても反映されていないな？と思ったらブラウザに過去の設定が残っている可能性があるので、別の端末、又はブラウザから確認するか、データを削除してから確認してみてください。

選択肢のボタン

ノベルゲームで絶対必要になってくる選択肢ボタン。
今回はglinkをメインに使ってます。画像の上に自分が入力したテキスト（変数も含む）で選択肢のボタンを作れるやつです。今回は画像を用意して、マウスを乗っけたときに画像が変わるのと、クリックしたときに音が鳴るようにしてます。
詳しくは参考（公式サイト）をご覧ください。パラメーターの詳細は[glink]　グラフィカルリンクで検索してください。

参考：https://tyrano.jp/sample2/code/siryou/1#demo
パラメーター詳細：https://tyrano.jp/tag/

[glink target="together" text="一緒に行く？" x="100" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]
[glink target="fight" text="仕事頑張ってね" x="500" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]
[glink target="sympathize" text="確かに気味が悪いね" x="900" y="250" size="20" width="180" height="15" graphic="button/button2/btn_select_normal.png" enterimg="button/button2/btn_select_hover.png" clickse="button_ok.mp3"]

[s]

セーブスロットの数を増やす。セーブ画面を変える。

セーブスロットの数を増やすにはdata/system/config.tjsの;configSaveSlotNumの数字を変えます。
ただし、コメントアウトに書かれている通り、数が多すぎると容量不足になるらしいので今回は10にしました。
そして、この数字を変えただけではセーブスロットの数は増えていません。
一回セーブデータを丸ごと削除（リセット？）する必要があるらしいので、config.tjsの;projectIDの名前を変えてください。するとセーブデータが全部なくなり、セーブスロットが増えているはずです。
なので長編の場合、はじめのうちにセーブスロットの数を増やしておくことをオススメします。

セーブやロード画面の色や画像を変えるには、/tyrano/images/system/の中にあるbg_baseやlabel_saveなどの画像を自分の好きな画像に変えるだけです。
流石にセーブ画面を自分好みにカスタマイズするやり方はわからなかったので、色や画像を差し替えただけですね。

セーブやロードのスクロールバーの色を変えたい場合は、tyrano/tyrano.cssのセーブデータリスト全体と書かれたこの部分の色を変えてみてください。

タイトルに戻るボタン、デザインの変更

デフォルトのタイトルに戻るデザインが世界観と違って違和感がありますよね。
私はロールボタンを表示したとき、タイトルのボタンだけこう書いてました。

[button name="role_button" role="sleepgame" storage="scene3.ks" graphic="button/button2/title.png" enterimg="button/button2/title2.png" x="1080" y="685"]

そして、scene3.ksというシナリオファイル作り、そこにタイトルに戻る画面の設定を作ります。
今回は画面を暗くしてタイトルに戻りますか？はい、いいえのボタンを出すだけのシンプルな作りです。
こんな感じで書いてました。


scene3.ksの中身。
;メッセージウィンドウを消して背景を暗くし、「タイトルへ戻りますか？」と文字を表示。
[layopt layer="fix" visible="false"]
[anim layer="message0"time="500"opacity="0"]
[image layer="1" visible="true" storage="../bgimage/Black2.png" left="0" top="0" width="1280" height="1000" page="fore" visible="true"]
[ptext layer="1" x="400" y="100" text="タイトルに戻りますか？" size="50" color="0xffffff" color="white"]

；はいといいえボタン
[button target="*yes" graphic="title/button_yes.png" clickse="button_ok.mp3" x="400" y="400" weight="200" height="41" ]
[button target="*no" graphic="title/button_no.png" clickse="button_cancel.mp3" x="650" y="400" weight="200" height="41" ]
[s]


;【「はい」ボタンが押された場合】
*yes
;休止中の状態を破棄
[breakgame]

;BGMの停止
[stopbgm]

;「タイトルへ戻りますか？」の選択肢削除
[cm]

;ロールボタンの削除
[layopt layer="fix" visible="false"]
[anim layer="message0" time="500" opacity="0"]

[iscript]
location.href="./index.html";
[endscript]


;【「いいえ」が押された場合 】
*no
[awakegame]

ドラッグ&ドロッププラグイン

SEE YOU FRIDAY- Before Monday Comes-の時計の謎解きに使ったようなアイテムをドラッグアンドドロップして、正しい順番に並べ替えたり、正しい位置にドラッグすると次に進めるようなゲームの作り方です。
もし途中からこのプラグイン追加した場合、セーブデータ（つづきから）やると正常に動作しないので
初めからゲームをプレイして動作確認をする必要があります。

BOOTH：https://booth.pm/ja/items/5854094
①上記のサイトからドラッグ&ドロッププラグインをダウンロードする。（プラグイン本体のみのほう）
②解凍したフォルダ【drag-and-drop】をまるごと/data/others/plugin/に入れる。
③first.ksに[plugin name="drag-and-drop"]と追加しておく。

詳しいやり方はこちらの解説ページを見ればわかりますが、今回私がやったのはこんな感じです。
解説ページ：https://harmless-drawer-b69.notion.site/e1e06ea15b004f018b3318f2acc43f90

④まず、黄色、緑、赤の宝石の画像を用意します。
[image name="yellow_jem"  layer="2" x="30" y="600" storage="../image/yellow_jem.png" weight="110" height="110"]
[image name="red_jem" layer="2" x="230" y="600" storage="../image/red_jem.png" weight="110" height="110"]
 [image name="black_jem" layer="2" x="330" y="600" storage="../image/black_jem.png" weight="110" height="110"]

⑤その用意した画像（宝石）をドラッグできるアイテムとして設定します。
ドロップしたときに「カチャリ」という音が鳴るようにdropseで設定してます。
あるエリアに置いたらピタッと位置が決まるようにfitで位置調整してます。
fit="true"でもいいのですが、うまく位置が合わなかったので、私は数字で位置を合わせました。

[dragitem name="yellow_jem" alpha="true" fit="-5,-5" dropse="../sound/chari.mp3"]
[dragitem name="green_jem" alpha="true" fit="-5,-5" dropse="../sound/chari.mp3"]
[dragitem name="red_jem" alpha="true" fit="-5,-5" dropse="../sound/chari.mp3"]

⑥ドロップエリアを設定します。colorはその宝石の色をはめる場所をわかりやすくするために同じ色で設定してますが、ゲームではopacityを0にすることで透明にしてます。
動作確認、位置調整の時だけopacity="255"にします。あとは[s]で止めておいて、チェックするボタンを用意します。

[droparea oneonly="true" name="hall_yellow" layer="0" left="895"  top="38" width="100" height="100" color="yellow" opacity="0"]

[droparea oneonly="true" name="hall_green"    layer="0" left="895" top="130" width="100" height="100" color="green" opacity="0"]

[droparea oneonly="true" name="hall_red" layer="0" left="897" top="217" width="100" height="100" color="red" opacity="0"]

[glink target="*return" text="戻る" x="50" y="30" size="20" width="150" height="15" graphic="button/button2/clock_button_return.png" enterimg="button/button2/clock_button_return_hover.png" clickse="button_ok.mp3"]

[glink target="*CHECK" text="決定" x="400" y="30" size="20" width="150" height="15" graphic="button/button2/clock_button.png" enterimg="button/button2/clock_button_hover.png" clickse="button_ok.mp3"]

[s]


⑦あっているかどうかの判定処理を書く
宝石を嵌めて、それぞれ正しい位置にあるかどうかを判断する処理を書きます。
黄色の宝石か黄色のエリアに、赤の宝石が赤のエリアに、緑の宝石が緑のエリアにあれば成功の処理へ飛ぶといった感じです。

;判定処理
*CHECK

[iscript]

if (f.dragitem.red_jem === "hall_red" &&

    f.dragitem.green_jem === "hall_green" &&

    f.dragitem.yellow_jem === "hall_yellow") {

  f.clear = true

} else {

  f.clear = false

}

[endscript]
;あっていればクリアの処理へ
[jump target="*CLEAR" cond="f.clear"]

;それ以外なら失敗の処理へ
[jump target="*FAILURE"]

; ----------------------

; 失敗
*FAILURE

[stop_draglayer]

[cm]
;不正解の音を鳴らす
[playse storage="clock_error.mp3" volume="100"]

[start_draglayer]

;戻るボタンと決定ボタンは今回fixではなかったので、もう一度ボタンを表示する。

[glink target="*return" text="戻る" x="50" y="30" size="20" width="150" height="15" graphic="button/button2/clock_button_return.png" enterimg="button/button2/clock_button_return_hover.png" clickse="button_ok.mp3"]

[glink target="*CHECK" text="決定" x="400" y="30" size="20" width="150" height="15" graphic="button/button2/clock_button.png" enterimg="button/button2/clock_button_hover.png" clickse="button_ok.mp3"]

[s]

; 成功----------------------

*CLEAR
[stop_draglayer]
[cm]
;正解の音を鳴らす
[playse storage="clock_success.mp3" volume="100"]

;ドラッグレイヤーや画像アイテムなどを消す（クリアする）
[free_draglayer time="0"]
[freeimage layer="0" time="0"]
[start_draglayer]
[freeimage layer="1" time="300"]
[freeimage layer="2" time="300"]

;あとは正解のシナリオへ飛ぶ処理を書けばOK。

フィルター効果

ヒロインがウィークリーズ化する前とかに使った、キャラクターの立ち絵を影っぽくしたり、ぼやけさせたり、全体を白黒や色が反転したような感じに見せるフィルターのかけ方です。
今回は使ってないですが、登場人物が二人以上いるときに、今喋っているほうだけ明るくして、喋ってない方は暗くする。みたいなやり方もこれみたいです。
ただ、公式で見る感じ時間を掛けて暗くするみたいなtimeの指定はできないみたいなので、ぱっとすぐに切り替わるみたいです。

参考：https://tyrano.jp/sample2/code/tech/4
資料編：https://tyrano.jp/sample2/code/siryou/9#demo

今回はヒロインにbrighnesとblurをかけてぼやっとした黒い影っぽくしてからウィークリーズ化するという演出にしたので、こんな感じで書いてました。

#相原　澪
[filter name="mio" blur="2" brightness="30"]
[chara_mod name="mio" face="surprise3" time="0"]
ここにいれば仕事の辛さも、人生の不安もなくなるのかな？[r]だってみんな幸せそうだもん。[p]

#&f.family_name + '　' +f.player_name
それは違う！みんな現実から目を背けて逃げているだけだ！[l]そんなの間違ってる！[p]


#相原　澪
間違ってる？[l]・・・私は、間違っているの？[p]
[filter name="mio" brightness="0" blur="10"]
[layermode time="3000" color="0x000000" mode="darken" opacity="180" time="500"]

じゃあ何が正しいの？[l][r]もう、わからない。辛い、苦しい・・・[l]

フォントを変更する

フォント、つまりゲーム内の文字をゲームの雰囲気に合わせたい時ですね。
今回はあそぼちゃんやつぶくまの狂気の時に一部使った怖い感じのフォントのやり方です。
使ったフリーフォントはこちら：https://fontfree.me/2111

①まずは自分が使いたいフォントをダウンロードします。
今回のコミックホラーフォントの形式はTTFで、フォントには色々な形式があるようです。
他の形式も用意しておいた方が色んな環境でちゃんとフォントが表示されるようなので、今回はこれを使ってWOFF形式も作りました。

WOFFコンバータ：https://opentype.jp/woffconv.htm

②変換したフォントをdata/othersにいれます。こんな感じ。

③font.cssを書き換える。
tyrano/css/font.cssを開き、私の場合は今回こんな感じで書きました。
/*で書かれている部分はコメントアウトのようです。「MyFont」というのは自分で決めたフォントの名前です。自分の分かりやすいものでOKです。

@font-face {
font-family: "MyFont";
src: url("../../data/others/g_comichorrorR_freeR.woff2") format("woff2"),
url("../../data/others/g_comichorrorR_freeR.woff") format("woff"),
url("../../data/others/g_comichorrorR_freeR.ttf") format("truetype"),
url("../../data/others/g_comichorrorR_freeR.eot") format("eot");
font-weight: normal;
font-style: normal;
}

そして一部だけ文字を変えたい場合はこう書いてました。font face=指定のフォントです。
この例は、あそぼちゃんのホラーシーンです。あそぼちゃんのセリフが終わったらreset fontで元に戻してます。

#あそぼちゃん
[playse storage="asovoice2.mp3" volume="100"]
あそぼ！　[wait time="1000"]
[freeimage layer="1" time="0" wait="false"]
[image layer="1" visible="true" top="50" left="430" storage="../image/asobo2.png" width="400" height="534" time="2000" wait="true"]
[layermode time="0" color="0x9c031d" mode="multiply" opacity="220" time="0"]
[font color="red"]
[font face="MyFont" size="50"]あ[wait time="300"]そ[wait time="300"]ぼ[wait time="3000"][er]


[resetfont]
[delay speed="30"]
#&f.family_name + '　' +f.player_name
・・・は？[wait time="1000"][er]

もし全体をそのフォントにしたい場合は、systemの中のConfig.tjsの//;userFace = のところに指定したフォントを書く必要があります。
ただし、フォントによっては漢字が対応してないものも多いので注意です。左側ほどフォントが優先されるようです。

変数について

ティラノスクリプトの基本でもある変数について。
真か偽か？数字が〇〇以上か以下か？入ってる文字は何か？今回使った変数はこんな感じです。
参考：https://tyrano.jp/sample2/code/kiso/19#demo

●変数に文字を入れる場合
たとえば探索中、アイテム欄を見たときにどの場所で見たかを覚えておくためにこんな感じで変数を入れてました。
エントランスでアイテム欄を見たときはこう。文字なのでシングルクォーテーションで囲ます。

[iscript]
f.return_place = 'entrance'
[endscript]

[jump storage="item.ks" target="*start"]

で、アイテム欄から探索画面に戻るとき、自分がどこにいたかを確認するためにこう書いてました。
エントランスでアイテム欄を開いたならエントランスの探索に戻る。キッチンで開いたのならキッチンへ戻るって感じですね。

[if exp="f.return_place == 'entrance'"]
[cm]
[freeimage layer="1" time="500"]

;エントランスへ
[bg time="2000" storage="entrance.jpg" method="fadeIn"]
[jump storage="exploration_entrance.ks" target="*Explore_start"]

[elsif exp="f.return_place == 'eventhall'"]
[cm]
[freeimage layer="1" time="500"]

;イベントホールへ
[bg time="2000" storage="eventhall.jpg" method="fadeIn"]
[jump storage="exploration_eventhall.ks" target="*Explore_start"]


[elsif exp="f.return_place == 'kitchen'"]
[cm]
[freeimage layer="1" time="500"]

;キッチンへ
[bg time="2000" storage="kitchen.jpg" method="fadeIn"]
[jump storage="exploration_kitchen.ks" target="*Explore_start"]
[endif]

もし今変数に何が入っているか確認したいときはどこかにこう書いてみましょう。
#
今、変数の中に入っている文字は[emb exp=f.return_place]です。[p]


●エンディングリスト、おまけページについて
全てのエンディングを見たらタイトルにおまけページが出現したあれです。
このエンディングを見たよ！という変数はsf.xxxとし、trueかまたは何か数字、文字を入れておきます。私は今回こんな感じで、各エンディングの最後にこう変数を宣言してました。

[eval exp="sf.ed1='true'"]

タイトル画面におまけページを表示させるのは、すべてのエンディング（１～４）を見ていたらという条件なので、こんな感じで&&で繋げてすべてのsf.edがtrueならおまけページへ飛ぶ画像ボタンを表示するとやってました。

[if exp="sf.ed1=='true' && sf.ed2=='true' && sf.ed3=='true'&& sf.ed4=='true'"]
[button storage="omake.ks" target="*start" clickse="button_ok.mp3" hint="クリア後のおまけページ" width="200" height="200" x="900" y="450" graphic="../image/omake_button.png"]
[endif]


●変数が2択の場合
真か偽か、YesかNoかみたいな変数ですね。クリッカブルでマップを調べたときにまだ調べてないならFalse、すでに調べてあるならTrueみたいな時によく使いました。
またはそのアイテムを持っているか、いないか？みたいなときもこの2択の変数を使ってます。

たとえばアイテムでまだドーナツを持ってなかった場合、最初にこう変数を宣言します。変数の名前は自分の分かりやすいものでOK。
[eval exp="f.get_donut=false"]

で、ドーナツを手に入れたときはこう書きます。
[eval exp="f.get_donut=true"]

そして、ドーナツを持っている状態でつぶくまに話しかけるとイベントが発生する。こんな感じで書いてます。

[if exp="f.get_donut==true"]

#&f.family_name + '　' +f.player_name
ドーナツあるけど、いるか？[p]

#つぶくま
[kanim name="tubukuma" keyframe="jump" time="500"]
[chara_mod name="tubukuma" face="happy" time="0"]
ドーナツ！！[p]

[endif]

右下のメニューボタンの表示/非表示

右下にあるメニューボタンを消したいときは
[hidemenubutton]

表示したいときは
[showmenubutton]

■メニューボタンの画像を変えたい
tyrano/images/system/にある【button_menu.png】の画像を差し替えればいいだけです。

■メニューボタンの位置を変えたい
data/system/Config.tjsのこの部分の数字を変えます。今は画面右下になってると思いますが、もし左上にしたいならLeftとTopを20くらいにすると個人的にはちょうどよかったです。

// ◆ コンフィグ（メニュー）機能表示
// セーブ・ロードやタイトルに戻るといった一連の機能を表示するかを指定します
;configVisible = true; //コンフィグアイコンを表示
;configLeft = -1; //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下
;configTop = -1; //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下

もしメニューボタンの位置を左上にするならこんな感じ。
;configLeft = 20; //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下
;configTop = 20; //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下

メッセージを全画面、アドベンチャー形式に切り替える

ティラノスクリプトのサンプルにもあった。アドベンチャー形式と全画面形式に切り替えるやつ。
文字の位置は全画面もアドベンチャー形式も画面の大きさやメッセージウィンドウの大きさで数値を調節する。
文字位置はmargint(上)、 marginl(左)、marginr(右)、marginb(下)

■全画面にするときはこう
[position layer="message0" frame="../bgimage//Black2.png" left="20" top="40" width="1200" height="720" page="fore" visible="true" margint="50" marginl="50" marginr="0"]
[layopt layer="message0" visible="true"]


■アドベンチャー形式にするときはこう
;キャラクターの名前が表示される文字領域
[ptext name="chara_name_area" layer="message0" color="white" size="28" bold="true" x="110" y="505"]

;上記で定義した領域がキャラクターの名前表示であることを宣言（これがないと#の部分でエラーになる）
[chara_config ptext="chara_name_area"]

;メッセージウィンドウの表示と設定
[position layer="message0" frame="frame_message.png" width="1280" height="720" top="440" left="0" margint="100" marginl="100" marginr="100" page="fore"]

■メッセージウィンドウを表示したり非表示にするのはこう。
fixはロールボタンです。下のほうにあったsaveとかloadとかの固定のボタン。

■表示
[layopt layer="fix" visible="true"]
[layopt layer="message0" visible="true"]

;アニメーションで表示する場合
[layopt layer="fix" visible="true"]
[anim layer="message0" time="500" opacity="255"]

■非表示
[layopt layer="fix" visible="false"]
[layopt layer="message0" visible="false"]

;アニメーションで非表示にする場合
[layopt layer="fix" visible="false"]
[anim layer="message0" time="500" opacity="0"]

文字、テキストを表示する。ptext、mtext

普通のメッセージウィンドウに表示される文字ではなく、最初の― ご注意 ―などで書かれていたptextやエンディングの最後に出てきたふわっと出てきて消える文字のようなmtextについてです。

参考：https://tyrano.jp/tag/

■ptext
たとえばレイヤー1にptextで文字を表示する場合は

[layopt layer="1" visible="true"]
[ptext layer="1" x="50" y="70" text="― ご注意 ―" size="60" color="0xffffff" face="Meiryo" color="red"]
[ptext layer="1" x="50" y="200" text="この作品はフィクションです。実在の人物・団体・事件とは一切関係ありません。" size="30" color="0xffffff" face="Meiryo"]
[ptext layer="1" x="50" y="250" text="本作には、恐怖を誘う演出や突然の音・映像効果が含まれます。" size="30" color="0xffffff" face="Meiryo"]
[ptext layer="1" x="50" y="300" text="心臓の弱い方、ホラーが苦手な方はご注意ください。" size="30" color="0xffffff" face="Meiryo"]

このように書いてました。それぞれのパラメーターの意味はティラノスクリプトの公式に書いてあります。

文字を消すときは、今はレイヤー1を指定してるのでこう書けば文字が消えます。
[freeimage layer="1" time="1000"]



■mtext
エンディングの時やゲームオーバーの時に使っていたアニメーションで動く文字です。
例えば今回の場合、背景を真っ黒にして右下に白い文字(エンディング文字）を表示させたときはこう書いてました。

演出テキスト(アニメーション）の一覧はティラノスクリプトの資料編で見られます。
https://tyrano.jp/sample2/code/siryou/2#demo

[bg storage="Black.png" time="2000" method="fadeIn"]
[layopt layer=0 visible=true]
[mtext text="BAD END：永遠の金曜日" layer="0" x="800" y="600" size="50" in_effect="fadeInUp" out_effect="fadeOut" time="2000" color="white"]

文字の表示速度を変える

メッセージをゆっくり表示したい時はdelay speedを使います。数字が大きければ大きいほどスピードが遅くなります。
デフォルトが30らしいので、元の速度に戻したいときは30を指定します。
ただ、普通にクリックすれば文字はすぐ表示されてしまうので、演出で文字を遅く表示したいときは私はwaitを挟んでました。こんな感じで。


#イベントスタッフ
はい、ではお写真撮りますよー[l][r]
[delay speed="100"]
３、[wait time="500"]２、[wait time="500"]１———[wait time="500"][er]

[playse storage="Camera2.mp3"]

#
これでもうイベントも終わりか・・・と思っていたその時[wait time="2000"][er]

[delay speed="30"]

#&f.family_name + '　' +f.player_name
！？[p]

レイヤー合成

同僚がウィークリーズがする前の赤いノイズやホラーっぽい演出をするときに
全体を暗くしたり、動画を使った演出をするときに使ったやつです。
映像(動画、wemb形式）のやつは雨や雪を降らせたり、私は暗転する時とかにもよく使ってます。
参考サイトのレイヤー合成(画像、または映像）、資料編もわかりやすいのでそちらをみてもいいかもしれません。
参考：https://tyrano.jp/sample2/code/tech/2#demo

私がよく使う演出は、まず暗転します。
[layermode time="1000" color="0x000000" mode="darken" opacity="255" time="3000"]

その暗転の間にキャラクターを退場させたり、背景を変えたり、音楽をフェードアウトします。
すべて終わったら暗転（暗闇）を消します。
[free_layermode time="1000"]

映像を使ったときは、webm形式でこう書いてました。形式はこのサイトで変換してます。
modeは資料編を見ながらmultiplyだったり、diferenceだったりいろいろ見てどうやったらホラーっぽく見えるかな？と色々試してました。

変換サイト：https://convertio.co/ja/
[layermode_movie time="1000" video="noise_red.webm" mode="multiply" opacity="180"]

ロールボタンの追加

今回は右下のメニューボタンをなくして、下にsaveとかloadのボタンを表示してました。
ボタンはデフォルトの物ではなく、空想曲線様から素材を借りてます。
場所は画面の大きさやメッセージウィンドウに合わせてxやyの値を調節します。

;ロールボタン配置
;クイックセーブボタン
[button name="role_button" role="quicksave" graphic="button/button2/qsave.png" enterimg="button/button2/qsave2.png" x="80" y="685"]
;クイックロードボタン
[button name="role_button" role="quickload" graphic="button/button2/qload.png" enterimg="button/button2/qload2.png" x="180" y="685"]
;セーブボタン
[button name="role_button" role="save" graphic="button/button2/save.png" enterimg="button/button2/save2.png" x="280" y="685"]
;ロードボタン
[button name="role_button" role="load" graphic="button/button2/load.png" enterimg="button/button2/load2.png" x="380" y="685"]
;オートボタン
[button name="role_button" role="auto" graphic="button/button2/auto.png" enterimg="button/button2/auto2.png" x="480" y="685"]
;スキップボタン
[button name="role_button" role="skip" graphic="button/button2/skip.png" enterimg="button/button2/skip2.png" x="580" y="685"]
;バックログボタン
[button name="role_button" role="backlog" graphic="button/button2/log.png" enterimg="button/button2/log2.png" x="680" y="685"]
;フルスクリーン切替ボタン
[button name="role_button" role="fullscreen" graphic="button/button2/screen.png" enterimg="button/button2/screen2.png" x="780" y="685"]
;コンフィグボタン（※sleepgame を使用して config.ks を呼び出しています）
[button name="role_button" role="sleepgame" graphic="button/button2/config.png" enterimg="button/button2/config2.png" storage="config.ks" x="880" y="685"]
;メッセージウィンドウ非表示ボタン
[button name="role_button" role="window" graphic="button/button2/close.png" enterimg="button/button2/close2.png" x="980" y="685"]
;タイトルに戻るボタン
[button name="role_button" role="sleepgame" storage="scene3.ks" graphic="button/button2/title.png" enterimg="button/button2/title2.png" x="1080" y="685"]

※タイトルに戻るボタンだけ、デザインを変えるためにstorageを指定してます。
詳しくは「タイトルに戻るボタン、デザインの変更」をご覧ください。