ゲームの絵を作っていると、本題でないところで手が止まります。シートからコマを切り出す、書き出した PNG の余白を落とす、参考画像から色を拾う。どれも5分の作業ですが、そのたびにソフトを立ち上げるのが億劫で、気づくと一日の何割かがそれに消えています。
そこで、ブラウザを開けばすぐ使える小さな道具を5本作りました。どれもインストール不要、無料、そして画像はサーバーに送らず端末の中だけで処理します。未公開の素材を扱うときに、外に出ないことは大事だと思っています。
コマドリ — スプライトシートの分割・結合
スプライトシートを読み込むと、透明な隙間からコマ数を推測して区切り線を出します。コマごとの PNG を ZIP で保存でき、逆に複数の PNG を1枚のシートに束ねることもできます。walk_2 → walk_10 のような番号も正しい順に並び、下揃えにすればキャラの足元がずれません。Phaser / PixiJS で読める JSON も書き出せます。アニメの再生確認もその場でできます。コマドリを開く
ヌキマ — 透過PNGの余白トリムと一括リサイズ
書き出した PNG の透明な余白を自動で切り落とし、まとめてリサイズします。倍率、枠に収める、幅を揃えるの3通り。ドット絵は補間なしの整数倍でくっきり拡大できます。何枚でも一度に処理して ZIP で保存。ヌキマを開く
イロトリ — 画像からカラーパレットを抽出
写真やイラストから主な色を 2〜16 色で取り出します。面積の割合つきで、多い順・色相順・明るい順に並べ替え。HEX の一覧、CSS 変数、Tailwind の設定、JSON、そして GIMP・Aseprite・Krita が読める GPL で書き出せます。見本は PNG で保存。イロトリを開く
シキツメ — シームレスタイルの継ぎ目チェック
繰り返しタイルを 3×3 以上に敷き詰めて、継ぎ目が目立たないか確かめます。半分ずらすと境界が画面の真ん中に来るので、ずれが一目で分かります。ゆっくりスクロールさせて眺めることも、敷き詰めた1枚を 1024 / 2048 の PNG で保存することもできます。シキツメを開く
キリカエ — 画像の形式変換（PNG / JPG / WebP）
PNG・JPG・WebP・GIF・BMP・SVG を読み込んで、PNG / JPG / WebP にまとめて変換します。画質と長辺の上限を決めれば、Web 用に軽くするのも一度で済みます。変換前後の容量が一覧で見え、Exif（位置情報など）は取り除かれます。キリカエを開く
作り方について
5本とも1枚の HTML と小さな JavaScript だけでできています。画像の処理はブラウザの canvas、ZIP の作成も自前の数十行です。だから軽く、ページを開いてすぐ使えます。これから先も、同じ型で道具を増やしていくつもりです。「こういうのが欲しい」があれば、相談から教えてください。
5本の一覧は「使う」のツールの段にあります。ヒトガタ・コマワリ・ウツシという、絵の資料と漫画のページ作りの道具も同じ場所に並んでいます。