スプライトシートを分割してScratchで使う方法
複数の動きを1枚に並べた画像から、必要なフレームを切り出してScratchへ読み込む手順です。
スプライトシート確認ツールを開く
ページの主要表示例。端末や画面幅によって配置は変わります。
行数と列数を確認する
横に4コマ、縦に2段並んでいる画像なら、行数は2、列数は4です。各コマの幅と高さが同じ画像を使用してください。
再生速度を決める
最初は6〜10FPS程度から確認し、動きが速すぎる場合はFPSを下げます。Scratchでは「次のコスチュームにする」と待ち時間を組み合わせて調整できます。
必要なフレームを保存する
スライダーまたは前後ボタンでコマを選び、「現在のコマをPNG保存」を押します。透過部分はPNGのまま維持されます。
Scratchへ読み込む
- 対象スプライトのコスチューム画面を開く
- 保存したPNGをアップロードする
- 回転中心と表示サイズを合わせる
- コスチューム番号を順番に切り替える
キャラクターを新しく描く場合は、ドット絵メーカーも利用できます。
確認できること
- 横・縦に並んだフレームの分割位置
- 歩行や待機アニメーションの順序
- Scratchへ読み込む前のフレーム数と余白
うまく分割できない場合
元画像の横幅・縦幅がフレーム数で割り切れるか確認してください。各コマの幅が異なる画像や余白を含む画像は、均等分割ではずれる場合があります。
よくある質問
画像自体を編集できますか。
このページは分割と再生確認を目的としています。画像の描き直しにはドット絵メーカーを使用してください。
確認項目：画像読込、行列設定、フレーム切替、再生速度。