プログレスバー

シートPNG（ui-bar-progress_sheet.png）とは？

すべてのアニメーションコマが1枚のPNG画像に横並び（または折り返し）で並んでいます。1コマ（1フレーム）の大きさは 32×32 ピクセルです。ゲームでは、この画像から必要な四角形だけ切り出して表示します。

シートJSON（ui-bar-progress_sheet.json）とは？

シートPNGの「どの位置にどのコマがあるか」「アニメーション名（Idle など）ごとに何コマ目を順番に再生するか」が書かれたテキストファイルです。Aseprite の JSON Array 形式なので、多くの2Dゲームツールが読み込めます。

2つをセットで使うイメージ

PNGだけでは「idle の1コマ目は画像のどこか」が分かりません。JSONがその地図役です。ゲーム側はJSONを読んでコマの位置と順序を把握し、PNGから該当部分を切り出してアニメーションとして表示します。

ゲームエンジンでの例

• Godot: AnimatedSprite2D や SpriteFrames に Aseprite 形式（JSON + PNG）として取り込めます。
• Unity: 2D Animation や Aseprite 向けインポーター（Asset Store 等）で JSON + PNG をスプライトアニメーションにできます。
• Phaser: load.aseprite() で JSON と PNG をセットで読み込み、this.add.sprite().play() で再生できます。

Asepriteファイル（ui-bar-progress.aseprite）とは？

この素材のネイティブな Aseprite プロジェクトです。レイヤー・パレット・アニメーションタグ（Idle）・フレームの間隔がそのまま入っているので、一から描き直さずにカスタマイズできます。

開いて編集する

Aseprite（aseprite.org）をインストールし、ファイル → 開く から読み込みます。タイムラインでコマを編集したり、レイヤーを追加したり、書き出し用タグを変えたりできます。変更はこのプロジェクト内に保存され、別途書き出すまでゲーム用ファイルは変わりません。

アニメーションタグ

このページのプレビュー GIF は、ファイル内のタグ（Idle）に対応しています。Aseprite でタグ名を変えたり追加したりすると、書き出すアニメーションの整理に使えます。

シートPNG・JSONとの関係

同梱のシート PNG と JSON は、このソースから書き出したものです。絵やタグ名を変えたら、スプライトシートの書き出し（ファイル → スプライトシートの書き出し）でゲーム用の PNG/JSON を作り直してください。