2013/10/06(日) [n年前の日記]
#3 [unity][cg_tools] ゲーム制作用画像編集ツール ShoeBox が凄かった
_etc:ShoeBoxでビットマップフォントを作る - devlog [naru design]
という記事で、
_ShoeBox
という、ゲーム制作用に特化した画像編集ツールの存在を知ったのだけど。試用してみたところ、機能は充実してるわ、簡単に使えるわで、感動してしまったり。
とりあえず把握できたところでは、以下の機能がイイ感じ。
それぞれについて、少し解説が必要かも。
とりあえず把握できたところでは、以下の機能がイイ感じ。
- 複数の画像をまとめて、スプライトシート/Texture Atlas 用画像を生成できる。
- Bitmap Font 画像が作れる。(BMFont互換)
- 1枚の画像から、タイル上のマップファイルを作れる。
それぞれについて、少し解説が必要かも。
◎ スプライトシート/Texture Atlas用画像について。 :
スプライトシート/Texture Atlas用画像の作成には、
_TexturePacker
というソフトが使われることが多いのだけど。これは本来有償ソフトなので、無料版として使う場合は制限があるそうで。
その点 ShoeBox は、無料で使っても trim をしてくれるし、詰め方も賢い。さすがに TexturePacker ほど対応ライブラリは多くないけれど、それでも cocos2D等のメジャーどころは対応してるので、これで充分という場面も多そうだなと。
- 画像の詰め込みアルゴリズムは Basic のみ。MaxRects を選ぶと、ウォーターマークが入る。
- 画像の不要な部分を trim する機能は使えない。使おうとすると、これもウォーターマークが入る。
その点 ShoeBox は、無料で使っても trim をしてくれるし、詰め方も賢い。さすがに TexturePacker ほど対応ライブラリは多くないけれど、それでも cocos2D等のメジャーどころは対応してるので、これで充分という場面も多そうだなと。
◎ Bitmap Font画像について。 :
Bitmap Font 画像は、
_BMFont (Bitmap Font Generator)
を使って作れるのだけど。このツールは文字をべた書きするだけなので、グラデで塗ったり、Outline(縁)をつけたり、Shadow(影)をつけたりはできなくて。
一応、 _Hiero という、Java製の Bitmap Font画像生成ツールも見つけて、試用してみたのだけど…。
その点 ShoeBox は、「フォント画像の作成作業は Photoshop や GIMP でやってくれ」と完全に割り切っていて。その代わり、「他の画像編集ソフトで作ったフォント画像を、上手に切り出して配置してみせますよ」てなツールになっていて。
考えてみれば、どんな見た目のフォント画像を欲しているかは、制作者や企画によって全く違ってくるなと。だから、そこをこの手のツールがサポートしようとしても、絶対に限界が見えてくる。であれば、そこは Photoshop 等で自由にデザインしてもらって、その後の処理に特化しよう…と考えたあたりが賢いなと。
作業手順としては…。
ただ、注意点が。
一応、 _Hiero という、Java製の Bitmap Font画像生成ツールも見つけて、試用してみたのだけど…。
- グラデ塗り、Outline、Shadow をサポートしてる点はグッド。
- しかし、各文字のサイズについて自動計算してくれないので、人間様が目視で確認しながら padding を増やしてサイズ確保しないといけない。とても面倒臭い。
- Outline の描画処理がなんだかバグってるようで、あちこちにゴミドットが入る。
その点 ShoeBox は、「フォント画像の作成作業は Photoshop や GIMP でやってくれ」と完全に割り切っていて。その代わり、「他の画像編集ソフトで作ったフォント画像を、上手に切り出して配置してみせますよ」てなツールになっていて。
考えてみれば、どんな見た目のフォント画像を欲しているかは、制作者や企画によって全く違ってくるなと。だから、そこをこの手のツールがサポートしようとしても、絶対に限界が見えてくる。であれば、そこは Photoshop 等で自由にデザインしてもらって、その後の処理に特化しよう…と考えたあたりが賢いなと。
作業手順としては…。
- アイコンをクリック。 → クリップボードに文字列がコピーされる。
- Photoshop 等の文字ツールで、文字列を貼り付け。横一列にずらりと並んだフォント群の見た目をデザインして、png画像で保存。
- png画像をアイコンにD&D。 → 文字と文字の間の隙間を見つけ出して、切り出して、配置し直して、画像と配置情報ファイルを出力してくれる。
ただ、注意点が。
- 各文字の間にちゃんと隙間が無いと分割してくれないので、そこは注意。どうせ ShoeBox が切り出してくれるので、たっぷり隙間を入れたほうがヨサゲ。
- 出力する際にTAB文字 ―― ASCIIコードの9番も含めて出力するので、Unity の Customo Font の Ascii Start Offset には 9 を入れておかないと正常表示できなかったり。
◎ 1枚絵からタイル上のマップを作る機能について。 :
一般的な2Dマップ作成ソフトは、タイルを並べてBGマップを作っていくわけですけど。時には、1枚絵を先に描いてしまって、それをタイル状に分割してマップを作る ―― 作業の順番を反対にしたいときがあるわけですよ。
例えばですけど。
ただ、PC用ソフトの世界では、そういう機能を持ったツールが全く存在しないのです…。それはまあ、当たり前で。ゲーム専用機は、背景(BG)をタイルの並びで表示するハードウェアだったけど、PCはそうじゃないので、ゲーム制作以外の場ではそんなツールの需要はゼロなわけで。
てなわけで、自分も以前そういうツールを自作しちゃったこともあるんですが…。ようやく見つけた、とうとうこの機能を持ったツールに巡り会えた、てな印象だったりするのでした。
しかも、デモ動画を見た感じでは、Tiled Map Editor に持っていってマップの再編集ができるようで。完璧じゃないですか…。素晴らしい。
ちなみに、昔、某社が社内で作ってたCGツールにも、そういう機能が実装されてました。コンシューマは最初にタイル描いて並べて作っていかないとROMに収まらないけど、アーケードはROMに余裕あるから最初に背景画をグイグイ描いちゃってツールでタイルに分割し直すんだ、と絵描きさんが言ってた記憶があります。
例えばですけど。
- ガラケーみたいな容量の少ない機器向けのゲームを作ろうとしていたり。
- スマホのような非力なハード上ではテクスチャ領域をこの範囲に収めないとパフォーマンスが確保できない、てな事情があったり。
ただ、PC用ソフトの世界では、そういう機能を持ったツールが全く存在しないのです…。それはまあ、当たり前で。ゲーム専用機は、背景(BG)をタイルの並びで表示するハードウェアだったけど、PCはそうじゃないので、ゲーム制作以外の場ではそんなツールの需要はゼロなわけで。
てなわけで、自分も以前そういうツールを自作しちゃったこともあるんですが…。ようやく見つけた、とうとうこの機能を持ったツールに巡り会えた、てな印象だったりするのでした。
しかも、デモ動画を見た感じでは、Tiled Map Editor に持っていってマップの再編集ができるようで。完璧じゃないですか…。素晴らしい。
ちなみに、昔、某社が社内で作ってたCGツールにも、そういう機能が実装されてました。コンシューマは最初にタイル描いて並べて作っていかないとROMに収まらないけど、アーケードはROMに余裕あるから最初に背景画をグイグイ描いちゃってツールでタイルに分割し直すんだ、と絵描きさんが言ってた記憶があります。
*1: 詰め方は2種類のアルゴリズムから選択できるけど、Basic は Next-Fit法で、MaxRects はBLF法に近い処理じゃないかと想像。
この記事へのツッコミ
[ ツッコミを読む(2) | ツッコむ ]
以上です。
このツールにはスプライトシートとフレームシートの2種類がありますが、両者の違いはなんでしょうか?
あと、フレームシートはデフォルトだとたて並びになりますが、カラムのようにしたいのですが、どこから設定できるのでしょうか(´・ω・`)
> 両者の違いはなんでしょうか?
おそらくですが、
スプライトシート : 各画像の透明部分をできるだけ削って、一枚の画像にミッチリと隙間無く詰めたもの。
フレームシート : フレーム全体をそのまま、フレーム数分、ずらずらと並べたもの。
じゃないかと思います。
> フレームシートはデフォルトだとたて並びになりますが、
> カラムのようにしたいのですが、どこから設定できるのでしょうか
画像をD&Dして開いたウインドウの、右下の「Settings」ボタンを押して、
width(横幅)を大きい値にすればいいのではないかと思います。
(アイコンを事前に右クリックすることでも、setting ダイアログが出てきます)