ドット絵をベクター形式に変換するやり方と、その比較
はじめに
この投稿はドット絵 Advent Calendar 2017の第5日目への参加記事です。
またSVG Advent Calendar 2017の第5日目も空いていたので、クロスポストしています。
ドット絵は名前の通り、少ないドット（ピクセル）で描くイラストのことで、画面の表示解像度が大きくなかった古いゲームや媒体などで発達した表現です。
| 等倍表示 | 3倍に拡大 |
|---|---|
 |  |
こうした技法はディスプレイの能力が向上した現在でも残っており、むしろ敢えてドット絵風のテイストを採用したゲームが制作されるなどよく使われている技法です。
またそうしたゲームでは、公式サイトも当然ドット絵が多用されたデザインで構成されていることが多いです。
ただ昨今は様々な画面解像度の環境で見られていますから、パソコンの画面でもスマートフォンの画面でもどちらにもドット絵風のデザインを綺麗に見せるにはどうすれば良いのか？は、なかなか難しい問題です。そんなときに便利な、ドット絵をベクター形式へ変換する方法をこの記事では紹介していきます。
簡易目次
- ラスター形式（ビットマップ形式）とベクター形式
- ドット絵とベクター形式
- Adobe Illustratorでドット絵を変換する
- ドット絵svg化スクリプトver2でドット絵を変換する
- pixel2svgでドット絵を変換する
- ここまでのまとめ
- 隙間ができてしまう問題とその解決方法
- まとめ
ラスター形式（ビットマップ形式）とベクター形式
ドット絵を含め、よく使われる画像形式のJPEG, GIF, PNGそしてWebPはドット（ピクセル）の集まりです。
写真であればドット絵に比べて数多くのドット（ピクセル）で構成されているわけですが、量の多寡はあるもののその原理的にはドット絵と写真とで大きく変わるわけではありません。そのため、拡大すると様々な色のドット（ピクセル）が並んでいるのが分かります。
こうしたものを、ラスター形式またはビットマップ形式と呼びます。
それに対して、ベクター形式は線や図形の集まりで構成されています。
ドット（ピクセル）の集まりであるラスター形式に比べて、座標上に並べられた線や図形で描かれているため、拡大しても綺麗に表示できるのが特徴です。
ドット絵とベクター形式
以上を踏まえて、ドット絵をベクター形式にしてみました。
これにより、ドット絵を自由に拡大・縮小できるようになりました。
そのためパソコン向け・スマートフォン向けに異なる倍率で何個も画像ファイルを用意する必要なく、一つのファイルで済みますし、拡大しても一つ一つの四角がきちんと表現されています。
個人的にはドット絵こそベクター形式に向いている表現形態だと常々思っているので、お勧めの手法ですね。
しかし、実際にベクター形式にするには課題が
利点の多いドット絵のベクター形式変換なのですが、ネックになるのがその変換方法。いくつかの手段があるもののそれぞれに利点・問題点があるので、比較していきます。
Adobe Illustratorでドット絵を変換する
ベクター系のソフトウェアと言えば代表格のAdobe Illustratorには、ドット絵をベクター形式に変換する機能も当然あります。
「オブジェクト」から「モザイクオブジェクトを作成」を選択します。
モザイクオブジェクトを作成ダイアログが表示されるので、
変換元のピクセルサイズをタイル数に入力します。
そうすると無事変換されました。
ただ、ドット絵をモザイクオブジェクトで変換するのはいくつかの問題点があります。
問題点
- タイル数の入力が手間
- 透過・アルファチャンネルが維持できない
タイル数は変換のたびにいちいち自分で入力しなくてはならないのが面倒な点です。1個や2個なら良いのですが、多数のドット絵を変換するのは地味に手間ですね。
そして、なにより大きな問題点は、透過・アルファチャンネルが維持できないということ。
変換元の画像では、透明になっている部分が真っ白なオブジェクトに変換されてしまうだけでなく、アルファチャンネルで半透明の部分も同様に透過設定無しのオブジェクトに変えられてしまうため、とても困ってしまいます。
こうして紹介しておいてなんですが、はっきり言ってAdobe Illustratorのモザイクオブジェクトはドット絵の変換には向いていません。
じゃあ、他にどういう方法があるか？というと、ドット絵に特化した変換スクリプトがありますので、それらを紹介していきます。
ドット絵svg化スクリプトver2でドット絵を変換する
ドット絵svg化スクリプトver2は@DEFGHI1977さんが制作され、名前の通りドット絵をSVGに変換するWebサービスです。
使い方はシンプルで、まずは「参照」ボタンをクリックして、変換したい画像を選択します。
そのあとは、オプションを設定。
様々な機能がありますが、ドット絵をそのまま変換するのであれば特に変更せず「変換」をクリックします。
これで変換されるので、「右クリックで保存」かもしくはSVGのソースコードをコピーすれば完了です。
Adobe Illustratorでのモザイクオブジェクトとは違い、透過・アルファチャンネルは維持されるだけでなく、同じ色のドット（ピクセル）は結合されて一つの図形になって変換されているが大きな特徴です。
問題点
ドット絵のベクター化をするならドット絵svg化スクリプトver2は個人的には最もお勧めなのですが、問題があるとすればたくさん処理するのは面倒……という点でしょうか。数個程度ならともかく、数十、数百個のドット絵を変換する場合にはあまり向きません。
またちなみに、ドット絵SVG化スクリプトにはver3もありますが、こちらはmix-blend-modeを利用しているため、IE11や現在のMS Edgeでは適切に表示できず、それに加えてAdobe Illustratorなどのオーサリングツールでも利用できない……など使い勝手が悪いのでお勧めできません。
pixel2svgでドット絵を変換する
pixel2svgはPython製のドット絵変換ツールです。fork版もあります。
なにより大きな特徴としては、自動変換しやすいこと。
他の方法に比べて一括で適用しやすいので、大量のドット絵を変換する必要がある状況では向いています。
問題点としては、pixel2svgはドット（ピクセル）一つ一つを四角の要素に置き換えてしまう点が挙げられます。
SVGでは要素が多いほどファイルサイズが大きくなってしまうので、pixel2svgのような変換方式は効率がよくありません。
「ドット絵svg化スクリプトver2」と「pixel2svg」の比較
| 元画像 .gif（ファイルサイズ） | ドット絵svg化スクリプト | pixel2svg |
|---|---|---|
| (644バイト) |  (3,172バイト) |  (19,515バイト) |
 (206バイト) |  (1,880バイト) |  (19,515バイト) |
 (168バイト) |  (1,418バイト) |  (13,967バイト) |
 (217バイト) |  (2,064バイト) |  (26,876バイト) |
 (203バイト) |  (1,956バイト) |  (23,774バイト) |
 (170バイト) |  (1,405バイト) |  (20,147バイト) |
 (197バイト) |  (1,913バイト) |  (21,817バイト) |
それぞれ変換後そのままの状態で比較しています。
そのためSVGOなどの軽量化ツールを使用すればもう少し改善しますが、軽量化処理後もpixel2svgの方がファイルサイズが大きいのは変わりません。
ここまでのまとめ
以上、ここまでを簡潔にまとめると……
ドット絵をベクター化するなら最もお勧めなのはドット絵svg化スクリプトver2、ただ大量の画像を変換する場合ならpixel2svgも良い。Adobe Illustratorのモザイクオブジェクトは論外。
……という感じですね。
隙間ができてしまう問題とその解決方法
そうして作成したドット絵のSVGファイルなんですが、そのまま利用しようとすると隙間ができてしまうことがあります。
拡大するとよく分かるのですが
境界部分に隙間ができてしまっています。
SVGのデータ上は隙間なく並べられているはずなのに、ブラウザではレンダリングの関係かこのようになってしまいます。この問題は特定のブラウザだけに起きるのではなく、全てのブラウザ環境で同様に発生するので余計に厄介です。
ただ、これに対応する手法も実はあります。詳しい方法については以前記事でまとめたので、そちらを参考にしてください。
それを実際に適用した例がこちらです。
こちらは4倍に拡大したもの。
フィルタ無しは先程の例のままですが、フィルタを使用したものは色の境界部分も滑らかに描画されていますね。
| フィルタ有り | フィルタ無し |
|---|---|
 | |
ドット絵のSVGファイルをWebサイトなどで利用する際はこのフィルタを使用すると良いでしょう。
ドット絵とベクター形式
ドット絵とベクター形式はよく対立する概念として見られがちなのですが、むしろ実は親和性の高いものだと前々から考えています。
こうしてベクター形式に変換することで、印刷物に使用したり、加工したり、3DCGにしたりとさらに応用の幅が広がるでしょう。また冒頭にも書いた通り、昔に比べて端末の画面解像度や処理能力が上がった現在ですが、却って近年になってドット絵風のゲームが増えてきているように感じます。
そうしたドット絵風ゲームのWebサイトを制作する際にも、このベクター形式への変換手法が役立つ場面が多いのではないでしょうか。