APNGって何？APEXですか？

この記事は、定期ゲ・乙 Advent Calendar 2021 - Adventar の15日目の記事です。

タイトルの通りなんですがまずは

皆さんこんにちは。はじめましての方ははじめまして。

Zis-ed41です。

皆さんは、定期ゲームを遊んでいて「カットイン」を設定したことは

ありますでしょうか？または、イラストの設定をゲーム内でしたことは……。

恐らく、大半の方が設定したりしたことがあると思います。

その中で、イラストの保存形式というものがあります。

jpg、png、gif ... ... 沢山の保存形式がありますが、用途やイラストサイズによって

この保存形式は多岐に分かれ、使われてきました。

例えば、この画像は保存形式はpngで行っています。

どこかの建物のイメージを内装を移すことで表現しているようなものですね。

さて、ここで本題といきましょう。

この保存形式の中に、「apng」というものが存在しているのはご存じでしょうか。

恐らくは聞いた事があったり、そうでなかったりすると思います。

他の保存形式とどう違うのか？と思うことでしょう。

……なんか絵が動いてないか？

それでいてGifよりもきれいな気がするぞ……？？？

そう、「apng」はgifと同じようにアニメーションを保存できる画像保存形式と

なっているのです。

正式名称は Animated Portable Network Graphics となっており、

元母体となる「png」を拡張して作られた保存形式となります。

詳しく話すとそれだけで1記事普通に書けてしまうので、詳しくその生い立ち等を

知りたい場合はWikipediaさんを見てみましょう。

ja.wikipedia.org

で、今回は別にAPNGの紹介がしたいだけなのではなく……ですね

タイトルではAPNGって何だ？とはしているのですが。

定期ゲのカットインでアニメーション、させたくない？

という思考の元、今回の記事を書いています。

つまり、お手軽に動くカットインを作る紹介記事となっています。

なお、筆者のソフト環境があるため、実際に作る際に差異がある場合もあります。

ご了承くださいませ。（そこは本当に申し訳ない）

作り方とか、あれこれ。の前に、必要なもの！

用意するソフト：クリップスタジオ（Clip Studio Paint）　※EXだと筆者と同環境です

用意する素材：動かしたいイラスト

用意するその他のもの：想像力

①まずはどこから作るのか？

ファイル→新規作成→画像のように、アニメーションのアイコンをクリックして「OK」

を押しましょう。

すると、白紙の紙とアニメーションフォルダが搭載されたキャンバスが用意されるので

そこに動かしたい素材を入れ込んでいきます。

（動かしたい素材はキャンバス内のアニメーションフォルダに入れましょう）

 

②素材の用意と、専用のウィンドウの展開や見方

動かす素材を用意します。これは背景が透過されている状態のものが望ましいです。

レイヤーを選択してコピーした後、アニメーションフォルダのあるキャンバスに

貼り付けて配置しましょう。

ただし、これだけではキャンバスは真っ白のままです。あれれ？

そこで、今度は「ウィンドウ」→「タイムライン」を選択して専用のウィンドウを

開いてみましょう。

デッッッッケ

適宜ウィンドウサイズは整えましょう。何も見えんねこれじゃあ……。

★見えた★

サイズを整えたら、いよいよ画像素材をキャンバスに映して動かしていきます。

画像内で赤く選択している部分で　右クリック→素材のあるレイヤーの名前を選択。

すると、1コマ目に素材が配置されました。　これでようやく見えるわけです。

ただし、このまま再生すれば一瞬だけ見えてすぐに消えてしまいます。

あくまでも、1コマ目に画像を配置しただけなのです。う～む。　あれ？じゃあ

どうやって画像を動かすのか？

答え：素材のレイヤーを複製して次のコマに配置していきます。ごり押し。

配置する際に、前のコマよりも少しずらすことで動くようになります。

また、そのコマではそのコマに配置した画像だけ見せてくれるので、重なったように

見せたい場合は同じコマに複数配置する必要があります。

（その場合は、アニメーションフォルダを複数用意する必要があります）

で、この作業を繰り返していきます。地道な作業ですが楽しい作業です。

③きれいに整えて、書き出す

こうして、画像のように各コマに画像を配置し終えて、背景に適当に色を載せたり。

上からキラキラしたエフェクトを任意で添えてあげて完成！

なんですが、これを書き出す必要があります。

ファイル→アニメーション書き出し→アニメーションスタンプ(APNG)... を選択。

ファイル名を決めて保存を押したら、設定が上記画像のように出てくるので

自分が再生したい部分を指定し、ループ設定等を調整してOKを押しましょう。

そうしたら、無事に完成となります！やった～！！

④完成品を見てみよう

今回作ったのはこんな感じに動きます。

シンプルなスライド移動ですが、勿論複雑な動きも可能です。

⑤さいごにだいじなこと！！！！！

APNGは上記の様に作るのが結構簡単なのですが（複雑だったらごめんなさい）、

綺麗に画像を出力することができます。

その代わり、同じアニメーションが可能なgif形式よりもサイズファイルが大きい

ので、大量に定期ゲのカットイン等で実装するとログデータそのものが重くなります。

（上記のイラストだけで300kb程度あります、連発するとヤバい！）

ただし、使い方さえ間違えなければ表現の幅はグッと上がります。

この記事を機に、是非制作にチャレンジしてみて下さい。

記事を読んでもわからない場合は、僕に相談してみて下さい。

多分教えられるので……（！）

という事で、定期ゲライフをよりよくするための記事でした。

かしこ。