Calleigh’s blog

幸せは毎日の食卓から

新しい章の始まりに、タイトルを出す演出を楽に作りたい

新しい章が始まるとき、こういう背景画像に、
20201221130426
「第何章 章のタイトル」を示す文字と、物語進行度を表すこういうアイコン20201221130448を表示させたい。
でも、背景画像をそのまま表示すると明るすぎるので、半透明の黒い覆いを被せてこんな風にしたい。これらの画像自体はイメージであり、ティラノスクリプトとは関係ありません。

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

いきなりマクロ

[macro name="storyname"]
// message1レイヤーを見えるようにする
[layopt layer="message1" visible="true"]

// baseレイヤーにフィルター効果をかける
[filter layer="base" brightness="40"]

// message1レイヤーに、水平線の(おしゃれっぽい)画像を表示させる
[image layer="message1" storage="line.png" width="" y="" x="" opacity="255" wait="false"]

// 物語の進行度を表すハートのアイコンを表示
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="80" wait="false" cond="mp.heart >= 1"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="97" wait="false" cond="mp.heart >= 2"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="114" wait="false" cond="mp.heart >= 3"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="131" wait="false" cond="mp.heart >= 4"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="148" wait="false" cond="mp.heart >= 5"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="165" wait="false" cond="mp.heart >= 6"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="182" wait="false" cond="mp.heart >= 7"]
[image layer="message1" storage="icon_heart.png" width="17" y="133" x="199" wait="false" cond="mp.heart == 8"]

// 第何章かを表示させる
[ptext layer="message1" size="18" color="0xffffff" y="108" x="80" text="&mp.snum" time="0"]

// タイトルを表示させる
[ptext layer="message1" y="160" x="103" color="0xffffff" size="14" text="&mp.stitle" time="0"]

// クリック待ち
[l]

// レイヤーmessage1を解放
[freeimage layer="message1" time="400" wait="true"]

// フィルター効果を解除
[free_filter]
[endmacro]


// 実行するとき
[bg storage=""]
[storyname snum="第三章" stitle="章のタイトル" heart="3"]

[image]のstorageは /data/fgimage/ 以下、
[bg]のstorageは /data/bgimage/ 以下になります。

背景画像は、ストーリーで使用されるものを表示させたいので、普通に[bg]タグで指定します。
[filter]タグと似た[mask]タグがありますが、[mask]タグは画面全体に効果が反映されるため、ハートの画像なども暗く表示されてしまいます。
[image]wait="false"を入れておかないと、当該画像が完全に表示されるまで待ってから、次の画像が表示され始めるのでタイムラグが生じます。
ハートのアイコンを表示させる[image]タグに入っているcond="条件式"は、条件式が成立したときにだけ実行するよう指定するものです。mp.heartには&をつけません。進行度によってハートの色を黄→橙→赤、のように変更することも簡単にできるので[iscript]タグを使用してfor文を書いたりするより楽そう。
[ptext]タグ内の&mp.snumと&mp.stitleには&をつけます。
画像も文字も、同一レイヤーmessage1を指定することで[freeimage layer="message1"]で一度に全部消せます。wait="true"を指定することで、画像と文字より先にフィルターが消えるのを防ぎます。
フィルターはベースレイヤーに掛けているので別途[free_filter]タグが必要になります。


章の始まりに表示させるものなので、何もなければこのあと話が始まります。
クリック待ちの[l]の前に、message0レイヤーにメッセージウィンドウの設定と、名前欄の設定を入れます。あわせて、[free_filter]の後に[layopt layer="message0" visible="true"]を入れておくと、クリック後画面が明るくなってすぐメッセージウィンドウが表示されます。
message1レイヤーに入れてしまうとその後の[freeimage]タグの影響を受けるかもしれない(試していません)ので異なるレイヤーを指定しておきます。

画像:ぴぽや様 https://pipoya.net/