今回の入力と期待する結果

キャンバスは16×16px、コマは4枚、各コマの長さは140msです。中央の明るい部分を保ち、周囲の光点を小・中・大・中と変える架空のループを使います。

検証用JSONをダウンロード
16×16ピクセルのきらめき4コマ 透明背景を示す市松模様の上に、中央の光と周囲の光点が小・中・大・中と変化する4枚のフレームを横に並べた模式図。
サンプルJSONの光点配置を示す模式図。1マスが1ピクセルで、背景の市松部分は透明を表します。

ツールで試す手順

  1. 上のJSONサンプルを端末に保存し、こまどりピクセル工房を開きます。
  2. 「JSONを再読込」を押し、保存した sparkle-16-4.json を選びます。読み込み後、16px・4コマのタイムラインが表示されます。
  3. 「再生」を押して、小・中・大・中の光点の変化を確認します。各コマは140msです。
  4. 「PNGシートを書き出す」を押します。4枚は横一列に並び、出力寸法は幅64px、高さ16pxです。

期待結果をどう確かめるか

サンプルJSONには16×16×4=1,024個のRGBA値が各フレーム分あり、フレームが4つ、計4,096値です。各フレームの待ち時間は140ms。PNGの寸法は16×4=64px幅、縦は16pxです。ダウンロードされるPNGは透過を保つ一行シートです。

作業例の範囲

サンプルのJSON構造・フレーム数・寸法はツールの計算コアで確認できます。ここで示すのはブラウザツールの出力例で、特定のゲームエンジンでの読込み・再生・実機表示は検証していません。

制約と次の調整

シートの寸法と順序を確認する · 記事一覧へ