【ツクールMV】APNGピクチャプラグインの使い方

本記事は動画とサンプルを貼るために、私の本家ブログと同内容のものを掲載しています。

APNGピクチャプラグインの導入、APNGファイルの作り方を整理しました。
わからないことは、自分で調べることができる方向けに書いてます。

APNGピクチャプラグイン

APNGとは
https://ics.media/entry/2441/

・複数のPNGファイルから成るアニメーションするPNGファイル
・軽量であることが利点
・対応ブラウザも増え、利用しやすい

ツクールMVでは次のプラグインとライブラリを使うことで実装できる。
アニメーションの差し替えというより、タイトル画面やメニュー画面で演出強化に使うものとかんがえる。

プラグインダウンロード先：
https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/ApngPicture.js
制作者：トリアコンタン様
※右クリック名前を付けて保存

ライブラリダウンロード先：
https://github.com/sbfkcel/pixi-apngAndGif/blob/master/dist/PixiApngAndGif.js
※RAW→右クリック名前を付けて保存

使用したソフト

・APNG Assembler-使い方
https://qiita.com/umi_kappa/items/2c0dea70f98994968dc8

・Honeyview -使い方
https://freesoft-100.com/review/honeyview.html

APNG作り方

1.PNGファイルを複数用意する

2.APNG Assemblerで1を統合する

3.出力されたanimated.pngがAPNGとなる（拡張子はpng）
　右クリックでHoneyviewを選択するとプレビューで閲覧できる

APNGピクチャプラグインの使い方

準備：
作成したAPNGファイルをRPGツクールMVプロジェクトのpicturesとsystemフォルダに保存する

1.ApngPicture.jsとPixiApngAndGif.jsをダウンロードする

2.プラグイン管理に
ApngPicture
PixiApngAndGif
の順で登録する

3.ApngPictureのプラグインメニューにAPNGを登録する
・「APNGのピクチャリスト」にpicturesフォルダに保存したAPNGを指定
・「シーンのAPNGのリスト」にsystemフォルダに保存したAPNGを指定

シーンはタイトルを指定すると検証しやすい

検証

・816×624の4枚の元ファイルサイズ：2.41MB
・APNG Assembleで4枚のPNGをAPNGとしてひとまとめ：1.33MB

素材サンプル

動画

参考

・クリスタのAPNG変換方法
https://www.celsys.co.jp/topic/2016102703

・GIMPのAPNG変換方法
http://freesoftbangai.blog50.fc2.com/blog-entry-137.html

APNG Assemblerが便利です。