ホーム >
IT

「スプライトシートの動作確認ツール」を作りました

2022/8/17 - IT, お仕事お役立ち, お仕事関係, お仕事関係のお知らせ, ゲーム作り

自分しか使わないかもしれないニッチな作業用ツールを細々と作っては「これ、便利すぎる！天才！？」って自分を褒めることを生きがいにしておりますが、この度またニッチな作業用ツールを作って公開しましたのでお知らせします。

インストール不要で動く「スプライトシートの動作確認ツール」です。

https://tools.koneko-wakusei.com/sprite-checker/

スプライトシートとはアニメーションのコマを規則正しく並べて一つのファイルにまとめたもので、2Dゲームを作る時によく使われます。
わかりやすい画像がないかと検索しましたところ、「やさぐれひよこ素材置き場」さんのところに素敵なフリー素材があったのでお借りします。

こんな画像ファイルのことですね。
これを一コマずつ表示するとパラパラ漫画のようなアニメーションが実現できるのです。

Unityとかで自作ゲームを嗜む人が増えてきているので、スプライトシートの需要って以前よりも多くなっている気もしています。（個人の感覚）
そして、こういうスプライトシートを作るときに最近ではiPadとApple Pencilを使うという方も多いのではないでしょうか？
しかし、iPadとなると作ったスプライトシートを気軽に動かして動作を確認する方法がなかなか少ないのです。
今まで私はPC版のツールで確認するためにPCを立ち上げに行っていました…

そこで、「iPadからでも気軽に動作確認できるツールを作っちゃおう、ブラウザベースで作ろう、動作が重いのは嫌なのでデータをアップロードするとかそういうのはやめてローカルで動くようなのがいいな！」と思い立ちました。

思い立ってからいろんな作業と並行しながら2日くらい？
作業時間は４時間くらいかかったかも。

いにしえのjavascriptで取ってつけたようなコードを書いて作った動作確認ツールがこちらなのです。

https://tools.koneko-wakusei.com/sprite-checker/

使い方はとても簡単！
なので動画でご確認ください。

このツールはブラウザでhttps://tools.koneko-wakusei.com/sprite-checker/にアクセスするだけで使えるのでインストールなどは不要です。
画像ファイルを選択して、縦横コマ数と連続再生時のコマ間の待ち時間を設定して希望する方法の再生ボタンを押すだけです。
小さな画像だと見えにくいかもしれませんが、その場合はブラウザの拡大機能で大きくすればよく見えます。
画像をサーバーにアップロードなどはしていないのであなたの大切なデータが外に漏れることもありません。

まだ自分が使うために思いつきで作っただけなので、他の方が使われるときには「こういう機能が欲しい」とか「ここの動きおかしくない？」などあるかと思います。
ご意見ご要望をいただければできるだけ機能追加・改善してゆきたいと思いますので、「スプライトシートのお手軽なチェックツールが欲しいな」と思っている方はぜひぜひご意見などもください。

とりあえず、自分の作業がスムーズに進むようになったのでとても嬉しいです！
同じ悩みを抱えている人はぜひ使ってみてください！

スプライトシートの動作確認ツール
https://tools.koneko-wakusei.com/sprite-checker/