【gifアニメ】目パチと口パクで工夫したら楽しかったこと【ティラノスクリプト】
ゲーム制作中、登場キャラクターのgifアニメをたくさん作りました。
その中でも特に目パチ（まばたき）と口パクで工夫をしたら楽しい仕上がりになったので、その方法をまとめます。
ティラノスクリプト以外のゲーム制作にも応用できると思います。
ティラノスクリプトで作ったゲーム「ストップウォッチタウン」はこちら
【目パチ】キャラごとにタイミングをずらす
画面内に複数のキャラがいる時、目パチのタイミングがそれぞれだと見ていて楽しいです。gifアニメはキャラごとに以下の3点を意図的にずらして作りました。
目パチ開始までの時間
目パチの回数
ループするgifアニメの再生時間
「どんな目パチがこのキャラのイメージに合うだろう」とgifアニメを個別に作っていると、それぞれのキャラの個性ができていくので面白いです。
ずっとパソコンに向かっていて、時々多めのまばたきをするヒショ（右）
【口パク】キャラ同士が無限に会話するアニメを作る
これはgifアニメとティラノスクリプトの[kanim]（キーフレームアニメーション）タグを組み合わせて工夫した部分です。
ティラノスクリプト以外でも、キーフレームアニメーションの機能があれば何にでも応用可能だと思います。
今回作ったゲーム「ストップウォッチタウン」にはクリア後のおまけがあるのですが、そこで登場するキャラに交互に口パクをさせて「会話してる感じ」にしました。
ここでまとめるのは、ボタンを押したりシナリオが進んでも関係なく交互の口パクを無限リピートする方法です。
使用したもの
キャラ画像（口は閉じている状態）
キャラの口パクのgif（無限ループ）
キーフレームアニメーションによる不透明度の調整
作り方
まずはキャラ画像の上に[image]で口パクgifを乗せます。
その口パクgifの表示/非表示の切り替えを[kanim]で無限に繰り返すため、[keyframe]と[frame]で「こんな演出にしますよ」という内容を定義します。
[frame]タグ内で使用するのは、アニメの進み具合を示す「p」と、画像の不透明度を変える「opacity」のみです。不透明度といっても、することは表示/非表示の切り替えだけなので「opacity="0"（非表示）」と「opacity="255"（表示）」の２種類しか使いません。
↓ 交互にしゃべるキャラ２体の、２種類のキーフレームの定義の例はこんな感じです。"255"の所で「何かしゃべってる」イメージです。
;--- 先にしゃべるキャラのキーフレーム
[keyframe name="talk1"]
[frame p=0% opacity="255" ]
[frame p=50% opacity="255" ]
[frame p=51% opacity="0" ]
[frame p=100% opacity="0" ]
[endkeyframe]
;--- 後でしゃべるキャラのキーフレーム
[keyframe name="talk2"]
[frame p=0% opacity="0" ]
[frame p=50% opacity="0" ]
[frame p=51% opacity="255" ]
[frame p=100% opacity="255" ]
[endkeyframe]この二つのキーフレームを、[kanim]でキャラ２体それぞれの口パクgif画像に適用させます。
口パクgif画像は２体のキャラの上にそれぞれ"gif1"、"gif2"という名前で表示していたとして、↓ こんな感じで定義します。
;--- 先にしゃべるキャラのkanim
[kanim name="gif1" keyframe="talk1" time="10000" count="infinite"]
;--- 後でしゃべるキャラのkanim
[kanim name="gif2" keyframe="talk2" time="10000" count="infinite"]time="10000"だとアニメーション全体で10秒です。この場合は10秒のうち片方のキャラが前半の５秒、もう片方のキャラが後半の５秒に口パクします。
count="infinite"でその10秒のアニメを無限繰り返しにすれば完成です。
さらに会話っぽくなるひと工夫１：相槌
キャラ同士が交互に口パクし続けるだけでも十分楽しいのですが、相槌を意識するとさらに会話っぽくなります。
具体的に言うと、片方の口パクが終わった後、もう片方が数%だけ口パクをするようにキーフレームを定義します。「うん」とか「へえ」とでも言ったような感じです。
;--- 先にしゃべるキャラのキーフレーム
[keyframe name="talk1"]
[frame p=0% opacity="255" ]
[frame p=50% opacity="255" ]
[frame p=51% opacity="0" ]
[frame p=100% opacity="0" ]
[endkeyframe]
;--- 後でしゃべるキャラのキーフレーム
[keyframe name="talk2"]
[frame p=0% opacity="0" ]
[frame p=50% opacity="0" ]
; ↓相槌
[frame p=51% opacity="255" ]
[frame p=54% opacity="255" ]
[frame p=55% opacity="0" ]
[frame p=60% opacity="0" ]
; ↓しゃべる
[frame p=61% opacity="255" ]
[frame p=100% opacity="255" ]
[endkeyframe]パーセンテージを細かく分けて記述していくのは少々面倒ではありますが、この相槌打ってる感じはかなり見た目の楽しさを上げてくれます。
どんな具合になったかな、とゲームを再生して確認した時、想像以上に「キャラ同士がなんかずっとおしゃべりしてる」ような雰囲気なっていてニヤニヤしました。（キャプチャ動画のgifを貼りたかったのですが、重すぎるのか無理でした）
さらに会話っぽくなるひと工夫２：ちょっとの「間」
相槌と合わせて、「間」も調整するともう最高です。
相槌を打った後にすぐ自分も話し始めると「その話題に食いついてる」感じがします。相槌の後に少しの間を置いて話し始めると、なんだか「相手が話した内容について少し考えてから、自分の意見を述べている」ように見えます。
こんな感じでキャラの会話のテンポを意識してキーフレームを定義していくのは、とっても楽しいのでおすすめです。
キャラの個性に合わせて「おしゃべりでずっとしゃべってる」とか「無口でたまに一言だけ何か言ってる」とか、色々な表現ができると思います。
以上、「目パチと口パクで工夫したら楽しかったこと」のまとめでした。
ゲーム作ってる間もかなり楽しいのに、楽しかったことを思い出してまとめるのも楽しいものですね。
読んでくださってありがとうございました。
この記事が気に入ったらサポートをしてみませんか？