👾 キャラチップ・のりしお味

ゲームの概要

『キャラチップ・のりしお味』は、スプライトシートを扱うためのツールです。スプライトシートとは、キャラクターの少しずつ違うポーズを1枚の画像に格子状に並べたもので、これを順番に切りかえて表示することでアニメーションを作ります。本ツールは、その切り分け方の設定と、動きの確認、そして書き出しを一手に引き受けます。

扱えるのは2種類のアニメーションです。1つめが📍マップ移動用（歩行アニメ）で、マップ上を歩き回るときの絵にあたります。画像を読み込んで縦横の分割数を指定すると、下・左・右・上の4方向それぞれの歩行アニメーションが同時にプレビューされます。向きごとに切り分けが合っているかを、その場で目で確かめられます。

2つめが⚔️バトル用（戦闘アニメ）です。こちらも縦横の分割数を指定して切り分けますが、再生速度（FPS）をスライダーで調整できるのが特徴です。「現在: 10 fps」のように数値が表示され、速すぎる・遅すぎるといった調整をプレビューを見ながら詰められます。

書き出しはZIP形式で一括です。中身は、歩行用の画像（例: Player1.png）、戦闘用の画像（例: Player1_battle.png）、そして切り分けの設定を記録したJSONファイルの3点です。キャラクター名を入力しておくと、その名前をもとにファイル名がつけられます。書き出し形式はPNG（透過を保持するため推奨）とJPGから選べます。

JSONに分割数などの情報が含まれているため、自作のゲームプログラム側で「この画像は横4×縦4に分かれている」といった情報を読み取れます。画像とその使い方の説明がセットで手に入るので、あとから「この画像、何分割だったっけ」と悩む必要がありません。

📖 遊び方

1. ツールを開き、「キャラクター名」を入力します。ここで入れた名前が、書き出されるファイルの名前になります。
2. 書き出し拡張子を選びます。透過を保ちたい場合はPNG（推奨）を選んでください。
3. 📍マップ移動用の欄で「画像ファイルを選択」から歩行用の画像を読み込みます。
4. 横分割数・縦分割数を入力します。画像が正しく切り分けられると、下・左・右・上の4方向の歩行アニメーションがプレビューされます。
5. プレビューの動きがおかしい場合は、分割数を調整してください。多くの素材は横3〜4×縦4です。
6. ⚔️バトル用の欄で戦闘用の画像を読み込み、同じように横・縦の分割数を指定します。
7. 戦闘アニメはアニメ速度（FPS）のスライダーで再生速度を調整できます。プレビューを見ながらちょうどよい速さを探しましょう。
8. 最後に「ZIPでまとめて書き出し」を押すと、歩行用画像・戦闘用画像・JSON定義の3点がZIPファイルとしてダウンロードされます。

📐 スプライトシートの基礎知識

本ツールを使ううえで知っておくと迷いが減る、スプライトシートの基本をまとめます。

スプライトシートとは。キャラクターの少しずつ違うポーズを、1枚の画像に格子状に並べたものです。ゲームではこれを順番に切りかえて表示することでアニメーションさせます。画像を1枚ずつ別ファイルにするより読み込みが速く、管理も簡単になるため、2Dゲームでは標準的な手法です。

歩行用の並びかた。広く使われている形式では、横方向に「歩きの各コマ」、縦方向に「向き」が並びます。縦4行は上から順に「下向き・左向き・右向き・上向き」であることが多く、本ツールのプレビューもこの順で表示します。横は3コマまたは4コマが一般的です。プレビューで足の動きが不自然なときは、まず横の分割数を3と4で切りかえてみてください。

透過とPNG。キャラクターの背景を透明にしておかないと、マップの上に置いたときに四角い背景が見えてしまいます。透明の情報を保持できるのはPNG形式で、JPGでは失われます。特別な理由がなければPNGを選んでください。

FPSの目安。歩行アニメは1秒あたり6〜10コマ程度でなめらかに見えます。戦闘アニメは動きの激しさによりますが、10〜15コマ程度が扱いやすい範囲です。本ツールでは戦闘アニメの速度をスライダーで変えながらプレビューできるので、実際に目で見て決めるのが確実です。

🌱 このゲームで身につく力

アニメーションが少しずつ違う絵を高速で切りかえたものである、という原理は、パラパラ漫画と同じです。本ツールでは分割数を変えるとプレビューがその場で変わるため、「どこで区切ればなめらかに動くのか」を試行錯誤しながら体感できます。デジタルの動きが実は静止画の連続である、という理解は、映像やゲームの仕組みを考えるうえでの基礎になります。

FPS（1秒あたりのコマ数）を自分で調整できる点も重要です。数値を上げれば速く、下げればゆっくり動く——この対応関係を実際に操作して確かめることで、フレームレートという概念が具体的なものになります。動画やゲームの設定で見かける「60fps」といった数字の意味が、実感を伴って分かるようになります。

そして、画像とJSONをセットで書き出す設計は、データとその説明書は一緒に管理するという考え方を教えてくれます。画像だけ渡されても、それが何分割なのか分からなければプログラムからは使えません。素材と、その素材の使い方を記述したデータを組にして扱うという発想は、ファイル形式やデータ設計を考えるうえでの土台になります。

👨‍👩‍👧 保護者・先生の方へ

本ツールは子ども向けのゲームではなく、制作用のツールです。プログラミングクラブでオリジナルゲームを作る場面や、教材用のキャラクター素材を整える場面での利用を想定しています。

読み込んだ画像はすべてお使いのブラウザの中だけで処理されます。当サイトのサーバーへ送信されることはなく、アップロードも行われません。児童生徒が描いた絵を読み込ませても、外部に出ることはありません。

本ツールには素材そのものは含まれていません。ご自身で用意した画像、または利用条件を確認済みのフリー素材をお使いください。作られたデータの権利はすべてあなたのものであり、当サイトが権利を主張することはありません。

書き出したZIPファイルは自動的には保存されません。ダウンロードしたファイルは、なくさないよう手元で管理してください。マウス操作を前提としているため、PCでのご利用を推奨します。

❓ よくある質問

🔗 あわせて読みたい

• マップチップ・うすしお味／マップ背景を作るタイルマップエディタです。組み合わせて使えます。