【ツクール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変換前.zip (2.41MB)
DownloadAPNG変換後.zip (1.33MB)
Download動画
参考
・クリスタのAPNG変換方法
https://www.celsys.co.jp/topic/2016102703
・GIMPのAPNG変換方法
http://freesoftbangai.blog50.fc2.com/blog-entry-137.html
APNG Assemblerが便利です。