Calleigh’s blog

幸せは毎日の食卓から

絵や文字を点滅させるアニメーションを作る

[anim]タグ

章が変わるときやストーリーが終わったとき、タップ待ちを示す画像や文字を表示させることがあります。目に付きやすいように点滅させたいな〜と思ったらアニメーション用のタグ[anim]が用意されています。
対象となるのは、[image] [ptext] [button]の3種類です。そのため、以下の[image]タグの箇所は好きなものに置き換えて読んでください。
[image]のstorageは /data/fgimage/ 以下、
[button]のgraphicは /data/image/ 以下になります。

[image layer="" name="tap" storage="tap.png"]
    // 画像を表示させる。画像に tap という名前を付ける
[anim name="tap" opacity="0" time="600" effect=""]
    // tapと名前が付いている要素を不透明度ゼロにするアニメーション
[anim name="tap" opacity="255" time="600" effect=""]
    // tapを不透明度マックスにするアニメーション

実行してみると、「tap」と描かれている絵が表示され、段々と消え、段々と表示される、という感じになります。
イメージとしては合っていますが、これだと一度しか点滅しません。[anim]タグをコピペした回数だけ、点滅を繰り返すことができますが、それだとコピペ回数を上回ると点滅しなくなりますし、間抜けな記述になりますね。(ギュウギュウなのに間抜けとは)

アニメーションを繰り返させたいときは[keyframe]タグを利用する。

[keyframe]タグで繰り返すアニメーションの内容を定義して、

[keyframe name="blink"]   // blinkという名前のキーフレームアニメーションを定義
    [frame p="45%" opacity="0"]
        // 0-45%の時間を掛けて、不透明度をゼロにする
    [frame p="90%" opacity="255"]
        // 46-90%の時間を掛けて、不透明度をマックスにする
[endkeyframe] // ここまでがキーフレームアニメーションblinkの内容

[kanim]タグで実行します。

[image layer="" name="tap" storage="tap.png"]
[kanim name="tap" keyframe="blink" count="infinite" time="1300" delay="200" easing=""]  // キーフレームアニメーションblinkの実行

p="45%"というのは、実行時に指定したtime="1300"のうちの45%の時間、つまり585ミリ秒間を、不透明度ゼロにするアニメーションに割り当てるという意味になります。
p="90%"というのは、実行時に指定したtime="1300"とうちの46%〜90%の時間、つまり次の586ミリ秒間を、不透明度マックスにするアニメーションに割り当てるという意味になります。
p="90%"でアニメーションを終わらせることで、90-100%の時間、つまり最後の130ミリ秒間はtap画像が表示されたままの状態を維持できます。常に動きっぱなしにならないようにすることで過度にうるさい画面にならず、見やすくなります。好みです。

pの値 経過時間
(ミリ秒)
tapの状態
0 0 [image]タグにより画像が表示されている状態
1 1 消え始める
22 286 半透明な状態
45 585 完全に透明になって見えなくなる
46 586 表示され始める
67 871 半透明な状態
90 1170 完全に見える状態になる
100 1170〜1300 tapが完全に表示されたままの状態
(何もしない)

count="infinite"とすることで、100%までいくとまた0%に戻ってアニメーションが始まるのを繰り返します。
[kanim]タグの方で時間を指定するので、easingを指定することでいつもの演出でtapが表示されたと見せかけてバビュンと消えて待ったを掛ける演出などもできそうです。directionを指定すれば巻き戻し演出もできます。
delayを指定することで、tap画像が現れた途端に消え始めたりせず、プレイヤーに画像を見る時間を十分に与えてから消え始めるようにできます。

画像/文字の表示及びキーフレームアニメーションの実行を内容としたマクロを定義することもできますが、私は章の終わりに決まった演出を表示させるマクロを組んでいるので、その中に組み込んでいます。
[stop_kanim]タグは、シナリオファイルをジャンプする際にレイヤー解放するようにしているため、私は使用していません。

[chara_hide]タグとキャラクターパーツ

追記:新しい記事の方が、情報が正しいです。内容もほぼ重複しているので、今見ているページの記事は読まなくてもいいかと思います。 calleigh.hatenablog.com


キャラクター太郎を登場させる時に、笑顔メガネの差分画像も一緒に表示させたい。

[chara_new name="taro" ...]
[chara_layer name="taro" part="face" id="smile" ...]
[chara_layer name="taro" part="accesory" id="glasses" ...]

[chara_show name="taro" time="0"]
[chara_part name="taro" face="smile" accesory="glasses"]

キャラクター太郎を表示する際、[chara_layer]タグで定義したパーツを反映させるためには、続けて[chara_part]タグを記述する必要があります。

[chara_show name="taro" face="smile" accesory="glasses"]

と書いても[chara_layer]タグで定義したパーツを反映させることはできません。[chara_show]タグで反映できるのは[chara_face]タグで定義した表情のみです。
また、この書き方でパーツを反映させる場合、[chara_show]time="0"を付けないとキャラクターとパーツの表示タイミングがズレます。 [chara_show]タグにwait="false"と入れても表示タイミングはズレません。

差分パーツを表示したキャラクターを退場させた後、再び登場させる時の注意点

[chara_show name="taro" time="0"]
[chara_part name="taro" face="smile" accesory="glasses"]
[chara_hide name="taro"]
.
.
.
[chara_show name="taro"]

で出てくるのは、笑顔眼鏡のパーツも付けたキャラクターです。
これは、[jump]タグでシナリオファイルを移動した後でも同じです。そのため、同じパーツを使用したい時には便利かもしれません。

[chara_part_reset name="taro"]

をどこかで挟むか、

[chara_show name="taro" time="0"]
[chara_part face="default" accesory="default"]

と書く必要があります。再登場時にデフォルトパーツに戻すために[chara_part]タグを書くのは醜く、書き忘れると面倒なので、キャラ退場時に[chara_part_reset name="taro"]を忘れずに書くのがいいでしょう。
これらのことは、[chara_hide_all]タグにおいても同じになります。

ティラノスクリプトで名前欄に半角スペースを入れる

前提:メッセージウィンドウの名前欄に名前を表示させるタグは二通り

#山田太郎
[chara_ptext name="山田太郎"]

これはどちらも同じ表示結果山田太郎を得られます。 姓名の間に半角スペースまたは全角スペースを入れたいと考え、次のように記述すると、

#山田 太郎
[chara_ptext name="山田 太郎"]

#山田 太郎の方は山田 太郎と半角スペースありで表示されますが、 [chara_ptext name="山田 太郎"]の方は半角スペースが削除された状態山田太郎と表示されます。

キャラクターを定義する際、jnameを指定する

[chara_new name="taro" jname="山田太郎" ...]

のようにjnameを定義しておくと、#taroと記載するだけで、名前欄に山田太郎と表示されます。 しかしながら、ここでも

[chara_new name="taro" jname="山田 太郎" ...]

のように定義し、#taroと書いても半角スペースは削除され山田太郎との表示になります。

#山田 太郎と直打ちするしかない……

#山田 太郎
田中くん、おはよう。[p]
#田中 次郎
やあ、山田くん。おはよう。[p]

のように毎回名前と半角スペースを打たなくてはならないとなると、結構面倒な上に、一箇所だけ半角スペースが抜けていたという事が起きると探すのも面倒になります。

直打ちは面倒なので、マクロを作る

[iscript]
    sf={ // システム変数sf.をまとめて定義する。半角スペースを挟むと動作しなかったので詰めて書いた。
        taro    :   '山田 太郎',
            // 変数sf.taroを定義して、文字列「山田 太郎」を代入する。
        jiro    :   '田中 次郎',
        yuko    :   '鈴木 優子'
    };
[endscript]

[macro name="taro"][chara_ptext name="&sf.taro"][endmacro]
// taroという名前のマクロを定義する。マクロtaroは、名前欄に変数sf.taroを表示するマクロ。
[macro name="jiro"][chara_ptext name="&sf.jiro"][endmacro]
[macro name="yuko"][chara_ptext name="&sf.yuko"][endmacro]

実際に喋らせる時は、

[taro]   // マクロtaroの実行
田中くん、おはよう。[p]
[jiro]
やあ、山田くん。優子さんを見たかい?[p]
[yuko]
呼んだ?[p]

のように打つだけで名前欄に山田 太郎田中 次郎鈴木 優子のように表示されます。 マクロに入れたchara_ptext name=の部分が、#と同じ機能を持っているので、実際に喋らせるときには#を書く必要はなくなります(#もマクロに含まれている状態になる)。

主人公の名前を変更できる(主人公の名前に変数を使用している)ゲームの場合

[eval exp="sf.sp = '\t'"]    // システム変数sf.spを定義して、タブ\tを代入する。
[macro name="sp"]  // マクロspを定義する。
    [emb exp="sf.sp"]  // マクロspは、変数sf.spを表示するマクロ。
[endmacro]

[eval exp="sf.family = '名字'"]  // システム変数sf.familyを定義して、初期値(デフォルト名)として名字を代入する。
    // システム変数sf.familyをマクロの中に入れてはならない。入れてしまうと、マクロを呼び出すたびに初期値「名字」が代入されることになり、ユーザーに入力してもらった名字が上書きされてしまい、表示できなくなる。
[macro name="family"]  // マクロfamilyを定義する。
    [emb exp="sf.family"]  // マクロfamilyは、変数sf.familyを表示するマクロ。
[endmacro]

[eval exp="sf.name = 'なまえ'"]
[macro name="name"]
    [emb exp="sf.name"]
[endmacro]
    // なまえの部分についても、名字と同じ。

[eval exp="sf.full = sf.family+sf.sp+sf.name"]
    // システム変数sf.fullを定義し、「名字+半角スペース+なまえ」をくっつけたものを代入する。
[chara_ptext name="&sf.full"]
    // 名前欄にシステム変数sf.fullを表示する。名前欄には「名字 なまえ」と表示される。

主人公のだけめんどくさい!と思ったら、最後の一行を

[macro name="you"][chara_ptext name="&sf.full"][endmacro]

に変えると[you]と打つだけで名前欄に名字 なまえが表示されます。 台詞の中で、主人公の名前を出したい時も、

[yuko]
[family]くん、宿題してきた?[p]
[you]
してきてないよ![p]

とすると名字くん、宿題してきた?と表示されます。そのために姓・名・半角スペース付きフルネームの三種類のマクロを作りました。マクロ名をもっと短くするとより、打つのが楽になり、コピペするより早くなります。 なお、[eval exp=...]の部分は上の[iscript]タグの中に入れられます。どちらもシステム変数の定義、値の代入と同じことをしてます。

メッセージウィンドウについて

ティラノスクリプトでは、登場人物によって名前欄に表示される名前の文字色を設定することができます。

[chara_new name="taro" color="0x19190" ...]

これは文字色だけで、名前欄の背景色は変更できません。 そのため、名前欄の背景色を変更したいと思った場合、以下の三択になります:

  1. 登場人物ごとにメッセージウィンドウの名前表示部分を設定し、都度呼び出す
  2. 登場人物ごとにメッセージウィンドウの名前表示部分の画像を用意し、都度呼び出す
  3. メッセージウィンドウ全体の画像を用意し、都度呼び出す

どれでも同じなので、好きな方法を選んでください。一度設定してしまったら、

[macro name="taro"]   // マクロtaroの定義
    [position layer="message0" frame="message_blue.png" width="" top="" opacity="" ...]
        // メッセージウィンドウの画像を呼び出す。taroは青
    [chara_ptext name="&sf.taro"]
        // 名前欄にシステム変数taroの値「山田 太郎」を表示する。
[endmacro]

[taro]    // マクロtaroの実行

のようにしておくと、登場人物ごとにメッセージウィンドウの見た目やらを変えることも簡単にできます。

マクロにまとめておく利点

マクロにまとめておく利点として、画像を差し替えたい・色を変更したい・表示位置を調整したい等思った時、マクロを弄るだけでゲーム全編を通して変更ができること、一箇所だけ記述ミス・コピペミスが発生してしまったということを防げることがあります。 したがって、時々変更するだけという場合にも、メッセージウィンドウを表示させるタグの部分だけでマクロを作っても便利です。

メッセージウィンドウ画像を設定する[position]タグのheightは画像下から画面下までの距離であって、上からの距離ではないことに注意。

追記

[iscript]タグ内の半角スペースが反映されない場合、半角スペースをエスケープシーケンスに置き換えると表示されます。

[iscript]
    sf={
        taro    :   '山田\t太郎',
        jiro    :   '田中\t次郎',
        yuko    :   '鈴木\t優子'
    };
[endscript]

sf={taro:'山田\s太郎'};の半角スペースは反映されるが、eval exp="sf.sp = '\s'"の半角スペースは反映されなかった。

追記2

後日、とあるキャラ名を足したら半角スペースが反映されないどころか、名前欄が空欄になることが起きました。
記述ミスがないか、[iscript]タグ内で順番を変えてみたらどうか、等は試してみましたが、相変わらず名前欄は空欄のままでした。

結論としては、[iscript]タグなぞ使わず、素直に

[eval exp="sf.taro = '山田\t太郎'"]
[eval exp="sf.jiro = '田中\t次郎'"]
[eval exp="sf.yuko = '鈴木\t優子'"]

と記述した方が楽で変な現象も起きません。
エディターで一括置き換えできますし、新しい登場人物の名前を足すにしても一人につき一行足すだけですし……。

2020年11月に見た映画

完全なる報復
TAXi NY ⭐️⭐️⭐️
アイ・アム・レジェンド
RED/レッド ⭐️⭐️⭐️
search/サーチ ⭐️⭐️⭐️
グッドフェローズ
ワイルド・バレット ⭐️⭐️
レッド・オクトーバーを追え
ミッション・ブレイブ 欧州警察特殊部隊
コレクター
インターセクション
パトリオット・デイ
ボーン・アイデンティティー
海底47m ⭐️⭐️⭐️
ホワイトハウス・ダウン ⭐️⭐️
THE WAVE/ザ・ウェイブ
ホール・イン・ザ・グラウンド
ハドソン川の奇跡
デスペラード
ダブル・ジョパディー ⭐️⭐️⭐️
オーシャンズ8 ⭐️⭐️⭐️
REDリターンズ ⭐️
デモリションマン ⭐️⭐️
デッドフォール ⭐️⭐️
TAXi ⭐️⭐️⭐️
TAXi2 ⭐️⭐️⭐️
TAXi3 ⭐️⭐️⭐️
TAXi4 ⭐️⭐️⭐️
TAXi ダイヤモンド・ミッション⭐️
フローズン ⭐️
キラーソファ
ブロークン・アロー ⭐️⭐️⭐️
12ラウンド
フルスロットル
ビリーブ 未来への大逆転 ⭐️⭐️
ピースメーカー
ダイ・ハード2 ⭐️⭐️⭐️
グレムリン ⭐️⭐️⭐️
グレムリン2 新・種・誕・生
映画 闇金ウシジマくん ⭐️⭐️
映画 闇金ウシジマくん Part2 ⭐️⭐️
映画 闇金ウシジマくん Part3 ⭐️⭐️
映画 闇金ウシジマくん ザ・ファイナル
閉ざされた森
ブライダル・ウォーズ ⭐️
ナイルの宝石
スピード2
フラッド ⭐️⭐️
ダイ・ハード3 ⭐️⭐️⭐️
テルマエ・ロマエ
テルマエ・ロマエII
127時間 ⭐️
トレイン・ミッション ⭐️⭐️
ねこあつめの家
エボリューション
サーフズ・アップ ⭐️⭐️⭐️
長ぐつをはいたネコ
ペット2 ⭐️⭐️⭐️