2013/10/06(日) [n年前の日記]
#1 [javascript] 長方形詰込み問題のテスト用ページが動かなくなってた
Dropboxに置いといたページが、気付いたら動かなくなっていた。Google内からjQueryというライブラリを呼び出して使っていたのだけど、どうもそれがブロックされているようで。前は動いてたんだけどな…。いつからこうなってたんだろ…。
仕方ないので、自宅サーバ上に置き直してみました。
_長方形詰め込み問題のテスト用ページ
ついでに、ページの使い方も追加しておきました。
件のページでは jQuery 1.7.2 を使ってるのだけど、バージョンを新しくしたら描画が怪しくなるようで。FirefoxのWebコンソールにも、「box-sizing なんてプロパティはねえよ」とエラーが出ていたり。なんでだろ…。とりあえず、古い jQuery では動いてるのだから、そのままにしておくか…。
仕方ないので、自宅サーバ上に置き直してみました。
_長方形詰め込み問題のテスト用ページ
ついでに、ページの使い方も追加しておきました。
件のページでは jQuery 1.7.2 を使ってるのだけど、バージョンを新しくしたら描画が怪しくなるようで。FirefoxのWebコンソールにも、「box-sizing なんてプロパティはねえよ」とエラーが出ていたり。なんでだろ…。とりあえず、古い jQuery では動いてるのだから、そのままにしておくか…。
[ ツッコむ ]
#2 [unity] Unity上でスプライト相当を表示する方法を調べてるところ
_Unity | BLuE AND PuRE
が参考になりました。ありがたや。
とりあえず、Orthello なるパッケージを使うと2Dゲームが作りやすくなると知り、試しに導入してテストしているところ。
import した Orthello 関係のファイルを眺めていたら、
昨日作った拡張は、やっぱり作る必要がなかったのかもしれない…。
とりあえず、Orthello なるパッケージを使うと2Dゲームが作りやすくなると知り、試しに導入してテストしているところ。
import した Orthello 関係のファイルを眺めていたら、
Assets -> Orthello -> Objects -> Sprites -> SpriteAtlas -> SpriteAtlas-BMFont-xml.prefabなるものを見かけたわけで。全然試してないけど、名前からするともしかして、BMFont で出力したビットマップフォント画像を表示出来ちゃったりする何かしらだったりするのかなと。
昨日作った拡張は、やっぱり作る必要がなかったのかもしれない…。
[ ツッコむ ]
#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) | ツッコむ ]
以上、1 日分です。
このツールにはスプライトシートとフレームシートの2種類がありますが、両者の違いはなんでしょうか?
あと、フレームシートはデフォルトだとたて並びになりますが、カラムのようにしたいのですが、どこから設定できるのでしょうか(´・ω・`)
> 両者の違いはなんでしょうか?
おそらくですが、
スプライトシート : 各画像の透明部分をできるだけ削って、一枚の画像にミッチリと隙間無く詰めたもの。
フレームシート : フレーム全体をそのまま、フレーム数分、ずらずらと並べたもの。
じゃないかと思います。
> フレームシートはデフォルトだとたて並びになりますが、
> カラムのようにしたいのですが、どこから設定できるのでしょうか
画像をD&Dして開いたウインドウの、右下の「Settings」ボタンを押して、
width(横幅)を大きい値にすればいいのではないかと思います。
(アイコンを事前に右クリックすることでも、setting ダイアログが出てきます)