立ち絵まばたき実装覚書
こんにちは。箪笥アドベントカレンダー21日担当のぜんらです。
前日はのぐちさんの「個人的に好きなゲーム」でした。
箪笥アドカレも今年で4回目ですね。もう4回か……と感慨深い気分になります。長いような短いような。ついでにこの時期はアドカレを開いて4回目とも12/21を頂いているのに毎年気付いて元気になります。21日を全裸記念日にしよう。
PCがまばたきをしているとなんか生きている感じがでる
去年はぬいの話をしたので今年は絵の話をしたいと思います。立ち絵の話題です。
TRPGのプレイスタイルは様々です（諸説あり）。私はTRPGを遊ぶ際にPCの立ち絵を描くことが多い人間です。そして8割くらいの割合で立ち絵に「まばたき」を実装させています。わぁ、生きてるみたい！
コレの実装方法を書いておこ！って感じのやつです。書いておかないと忘れるので（自分が）。しばしお付き合いください。
🌻必要なもの
お絵かきソフトとAPNG Assemblerがあればいいです。というか最悪クリスタさえあればクリスタで完結できるらしい。アニメーションセルでなんとかするやつ。多分調べれば私よりも詳しい人がいっぱいいると思うので、クリスタで完結したい人はそっちを参照してください。
お絵描きソフト
なんでもいいです。レイヤー機能があるソフトだと便利だね～くらいです。
APNG Assembler
ココにあります。左上のDownload APNG Assemblerをクリックだ。別のサイトが開いて数秒後にDLが開始されるようになっている（はず）。
私はAPNGという形式で動く絵を作成しています。アニメーションの形式としてはGIFもあるんだけど色数が少なかったり透過がめんどかったりするのでいつもAPNGくんを使用しています。エーピングって読むんだ。アピングっていつも言ってしまうな。
まばたきのしくみ
ところでまばたきを実装するにはどういう絵をつくればいいの？っていうのの簡易的なまとめです。
①→②→（③-a→）③の順番でアニメーションを作成すると、前述のように自然とパチパチしてくれます。
③-aの使いどころは……あまりないんだけど……なんか元気っぽそ～な子にしたいときに差し込んでいれると良いね……という感じになる。お好みで。
やり方
0.絵の準備
立ち絵です。虚無の顔の立ち絵を持ってきました。こいつにまばたきを実装していこうと思います。
1.レイヤー分け
まばたきをさせるために最低限あると嬉しいレイヤーたちです。目を描くときに既にレイヤー分けされている場合が多いと思いますが、あくまで瞬きのためにはこの3つが分かれていると楽です。なくてもええ。無理矢理上から描くなりなんなりすればええ。クリスタとかSAIなら選択して動かせるから……。
今回の絵はこうレイヤー分けしています。
2.差分作成
通常の目を開いている状態を①とするため、必要な差分は②閉じている目と③少し閉じている目の2つになります。
②はめんどいので先に簡単な③の少し閉じている目を作っていきます。
①開いている目のレイヤーフォルダを複製し、複製元のフォルダを非表示にしておきます。今回操作して動かすのは複製したフォルダの方。
こう。
次に②の閉じている目を描きます。
先に③のレイヤーフォルダを非表示にし、①のレイヤーフォルダの不透明度を40％くらいに下げておきます。閉じている目は下まぶたの辺りに作成すると自然に見える気がします。
こう。
3.完成したら差分を書き出す
これで①②③の3通りの目をしている立ち絵ができました。やったね！
PNG形式で出力しましょう。
わかりやすく①の開いている目の画像タイトルを「1」、②の閉じている目を「2」、③のちょっと閉じている目を「3」という風にしておくと次の工程が超楽になるのでオススメ。
4.APNG Assemblerにぶちこむ
APNG Assemblerを起動します。出力した画像をすべて選択し、ドラッグ＆ドロップでぶち込んでいきます。5,6回ぶちこめばOK。
何も弄っていない状態でのDeley,secの時間は1/10であることが望ましいです。もし別の時間だったら、右上の「Deleys - All Frames」から1/10にしておきましょう。
（※1秒間に10コマのフレームレートにしています。10fps！）
次に目を開いている時間（フレーム）を設定します。
②と③のフレームは1のままで良い。
1.PNGの上でダブルクリックをするとDeleys Settingが開きます。ここで左のDeleysの部分に1～35くらいまでの任意の数字を入力し、Setを押します。
（※1だと0.1秒、35だと3.5秒）
この数字は小さくすればするほどまばたきまでの間隔が早く、大きくすればするほどまばたきまでの間隔が遅くなります。
個人的な好みとしては25～35くらいの数字の後に10以下の小さい数字をいれると、長く目を開いた後に何度かパチパチまばたきをする動きが人間っぽくなる気がします。
全てのフレームをいじったらOutput fileの名前をいじり、Make Animated PNGを押して出力します。
APNGは立ち絵画像と同じフォルダ内に生成されるので、被らない名前にしておくといいです。拡張子がAPNGじゃなくてPNGだけどこれが正しいので大丈夫です。信じて。
5.完成～～～～！
適当にAPNGに対応しているchrome等にさっき出力された(A)PNGをドラッグ＆ドロップしてまばたきの様子を確認します。すげえ！まばたきしてる！！
気に入ったら完成！！！！！気に入らなかったらさっきのフレームの数字を気が済むまでいじくりまわします。
いかがでしたか？
簡単かそうじゃないかは個人の感想に寄る。しかしかわいいのでみんなもこれを読んで気になった人たちはぜひ立ち絵にまばたきを実装してみてください！！
あと世の中にはわたしの記事より全然わかりやすく解説をしている人たちがいます。すげえよ。その先人たちの知識を吸収してこの記事が生み出されました。先人たちへ感謝と敬意をこめて。ぜんらより。
明日はうさぎさんの「🐈🐈🐈」「Advent Calendar 怪異を皆で作ろうぜ！！！ - うさぎごや」です。
2024/1/3追記
お雑煮を食いながらこの記事を書いていたら全然明日とかじゃなくなってしまった。もう一度アドカレ再掲しておくのでみんなの記事を見ていってください。あけましておめでとうございました。今年もよろしくお願いいたします。