株式会社シベスピ 従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます!

そうだ、目パチGIFを作ろう!

こんにちは。
社員旅行2日目はソフトクリーム4個食べました。鈴木3世です。

趣味はイラストを描くことと言いつつ、全然イラスト描いてないなぁ…
目パチ動画も1度も作ったことないなぁ…

『そうだ、目パチGIFを作ろう!』

ということで、今回は目パチGIFを作っていきたいと思います。

そもそも、目パチとは?

キャラクターに瞬きをさせるアニメーションのことです。
今回は、この子に瞬きをさせていきたいと思います。

【用意するもの】
 ・お絵描きツール(今回は、CLIP STUDIO PAINTを使用しました。)
 ・GIF作成用サイトを使用するためのネット環境
 ・やる気

目パチに必要なイラストは計3枚です。
①目を開けている絵

②目を閉じている絵

③目を少しだけ閉じている絵

②・③の差分は、①の開いた目をコピーして、目の下のラインがずれないように描けばよいのでそんなに大変じゃないです。
(それより、なんでこんな作画コスト高い髪型にしたんですかね。ウェーブ苦手なのに。)

①と③の違いがわかりにくいのですが、
上まつ毛を線一本分くらい下げることと、目尻の位置が変わらないように気を付けました。
さりげないくらいが丁度いいです。

では、①~③のイラストを組み合わせて、GIFにしていきます。
今回はこちらのWebサイトを使用させていただきました。
CLIP STUDIO PAINTでもGIF作成できるのですが、Webサイトのほうが楽そう&誰でも使えるので…)
【使用WEBサイト】
 https://www.bannerkoubou.com/anime/

いざ!組み合わせ!!

点滅間隔を0.1秒に設定することで、0.1秒おきに画像が切り替わります。
【全体設定】
 重ね合わせる枚数:10枚以内(デフォルト)
 ループの有無:ループする(デフォルト)
 点滅間隔:0.1秒

1枚目から10枚目を①→②→③→①→②→③…→①と順番に画像選択していきます。
②・③を選択した枚数の点滅間隔はそのまま「全体設定に従う(=0.1秒)」にします。
①の目を開けている時間は長いので待機時間を設けます。

待機時間は、ランダムに秒数を設定してお好みの目パチにするとよいと思います。
今回は①を選択した枚数の秒数を、以下のように設定しました。
【点滅間隔の設定】
 1枚目:1.2秒
 4枚目:0.5秒
 7枚目:2.1秒
 10枚目:0.9秒

「GIFアニメを作る」ボタンを押して完成です。

イラストに命が宿った感じがしますね!

今回分かったこと

・目パチは、お手軽にリッチなイラストを作成することができる。
・目の差分より髪の毛描くほうが大変。
・アニメーション作成をしたことがない人間(=私)でも、簡単に作成できるので目パチはアニメ初心者の課題に最適。

今回はGIFで作成しましたが、やっていることはとてもシンプルなので、プログラムで待機時間の設定や画像の切替は実装できそうだなと思いました。
ゲームを作成する機会があれば、ぜひ活用してみたいですね。