🎨

ドット絵ツールを自作するわけ

2021/12/06に公開

HTML

まずはこれを見て欲しい

自作のドット絵ツールです。

以下は自作のドット絵ツールで自作したドット絵。

背景

ゲームの素材としてのドット絵

昔はゲームを作るとなると大体はドット絵を描く必要がありました。
ドット絵は日本のビデオゲームを通して進化してきたように思います。ドット絵をアートだと感じた作品は人それぞれだと思いますが、私の場合は以下の通りです。

スーパーファミコン時代のスクウェアの作品群
タクティクスオウガ
ドラキュラX 月下の夜想曲
メタルスラッグ

ドット絵を作れるゲームもあり、それでポチポチとドット絵を打つこともありました。

Wizardry#6(SFC)
デザエモンシリーズ
アーマードコア

私が本格的にドット絵を描き始めたのは、個人のゲーム制作を目的としてでした。当時の使用ツールはEDGEで、知る人ぞ知る「けまのホームページ」に入り浸っていました。もう２０年前近くの話で、当時はラグナロクオンラインも流行っており、ドット絵のホームページがたくさんありました。

身近なアートとしてのドット絵

今は作品公開や交流の場がSNSに集約されて、個人の作品公開の場としてのホームページはほとんど見なくなってしまいました。一方で、Twitter上ではDotPictによるドット絵作品がTLに流れてきたり、ゲーム素材ではなく、単純にアートとして楽しむ人口が非常に増えたと思います。

最近はドット絵がピクセルアートと名を変えて一気に市民権を得てきており、NHKのSDGsの広告ではピクセルアートのアニメーションが採用されています。20年くらい前は「ドット絵はアートだ」と言っても誰も賛同してくれませんでしたし、それが独特の表現技法である事も認識されていませんでした。

そもそもドット絵は、技術的に限界のあるビデオゲームにおける苦肉の表現手段であり、フル3DCGでリアルなグラフィックスに全てが置き換わるのだ、という言説すらあったように記憶しています。

やっと時代が追いついたのです。

既存のドット絵を描くツール

既存ツールを見渡してみると、EDGEが動く環境はWindowsのみです。MacユーザーやLinuxユーザーは簡単には使えません。(WINEやBootcampはありますが。)

Asepriteはライセンスが必要なのでゲームジャムで手軽に使えません。（他人に勧められません。）

世の中にはMSペイントやAdobe Photoshopでドット絵を描く人間もいるようですがこれらも玄人志向すぎてあまりお勧めできません。
その他Webアプリ系は、サービスとして提供されていてスタンドアロンで動かない、アカウント登録が必要、データのエクスポート機能がない、カラーパレットが不自由だったりキャンバスサイズが小さすぎる等、機能の制約が強い場合も多く、決定打と言えるアプリケーションが見当たりません。

そこで、HTMLファイル一つで動くドット絵ツールを作ることで、誰でもどこでもいつでもドット絵を描ける環境を用意したいと思い、ドット絵ツールを自作するに至りました。

ドット絵ツールを自作するという狂気

ドット絵は日本が世界に誇れる独自の表現技法だと思っています。国産で自由に使えるドット絵ツールがあっても良いじゃないか、という気持ちで作り始めました。

TypeScriptでDOMを直接操作するという技術構成もへったくれもない力技で作っています。そもそも私はC言語しか書けないおじさんなのでWebフロントエンドのことは全くわからないで作っています。フレームワーク？仮想DOM？TypeScriptはこのツールを作るためにはじめて触りました。

ソースコード一式はGitHubリポジトリで公開しています。

ページの構成要素を一つのHTMLファイルに全て結合しているので、WebブラウザさえあればHTMLファイル一つをダウンロードしてスタンドアロンで実行する事もできます。HTMLファイル一つに集約したいので、まだファビコンすら用意していません（Base64化して埋め込みたい）し、ましてやGUIツールのアイコン等も用意していません。一部アイコンらしきものはランタイムにcanvas描画で生成しています。

まだ開発途中ですが、最低限ドット絵を描くだけの機能は揃えました。

レイヤー機能
スプライトアニメーション機能
保存形式はJSONかWindowsBitmap（インデックスカラー）
ブラウザのローカルストレージ機能によるオートセーブ

JSONで保存しているのはバージョン管理ツールで差分をテキストで見れるのと、フォーマットを明らかにすることで、最悪他のツールでデータをサルベージできるようにするためですです。

まだまだ機能が足りなかったり、UIが不便だったりするので、本格的に利用できる段階ではありません。
また、レスポンシブデザインになっていないためスマートフォン上のブラウザでこのツールを使うのはまだ難しいです。（一応機能はする）

なるべくブラウザ依存機能を避け、Google Chrome、Mac OS Safari、 iPhone Safari、　Firefoxで動作するように心がけています。

今後の展望

まだまだ使いづらいと感じるので、地道に改善していきます。

ペンツールの拡充(太さ、形等)
図形描画ツールの追加(円形、矩形)
レスポンシブデザイン対応
見やすい配色
編集機能の拡充(カット＆ペーストのしやすさ、選択範囲の切り抜き移動等)
オニオンスキン
複数の画像ファイルの同時編集
キャンバスのクリア
対応キャンバスサイズの拡充（現状は最大512x512）
カラーパレット編集機能の拡充(コピー、グラデーション作成、配色支援等)
画像エフェクトの追加(減色、フィルタ、ウォーターマーク埋め込み等)
ゲーム素材作成向け特殊機能(透過色指定、マップタイルビュー等)
高速化

私自身もドット絵を描く身ですが、今は作品を作るより、まだこのツールを改善して行く作業に時間が取られそうです。

もしよければ、このツールを使ってみてフィードバックをいただけるとありがたいです。

以上

奥付

本記事は裏ドット絵 Advent Calendar 2021のために書いた記事です。