これまで、ドット絵をPh○t○sh○pで描いていたが、
残念ながら好き好んで使っていたわけではない。
むしろ、ドット絵を描くのに使うには、機能過多だし、処理も重い。
そして何よりも問題なのは高過ぎること。
そんな不満だらけのPh○t○sh○pとさっさとお別れするために
自分でドット絵エディタ（ドット絵作成用のツール）を作ることにした。
きっかけは、偶然見つけたとあるWeb上で公開されているツール。
とても良くできていたし、軽くて無料。
はじめはこのツールを使わせてもらおうかと思っていたが、
何気なくソースコードを見てみると、
Javascriptで制御されてることを知り、驚愕。
そして、頭を過ぎる悪魔の囁き…
「自分でも作れるのでは？」
欲しい機能
さて、「作る」こと自体は決意したものの
きっかけになったツールと全く同じものを作れるわけがないので、
自分で作れる程度に要件を絞ることにした。
最低限欲しい機能
これが無いなら使う意味が無いというレベルの機能。
鉛筆ツール
マウスクリックで任意の箇所に色を塗る。
カラーパレット
鉛筆ツール使用時の色を選べる。
消しゴムツール
マウスクリックでクリックした箇所の色を消す。鉛筆ツールの逆。
Undo（アンドゥ）
直前の操作を取り消す。
Redo（リドゥ）
Undoで取り消した操作をやり直す。
保存
ドット絵を画像化したり、作業途中のデータを保存したりする。
読み込み
作業途中のデータを読み込む。
できれば欲しい機能
お次は必須ではないけど、あったら嬉しい機能。
プレビュー
ドット絵を描くときはズームしている状態で描くが、引いた状態での確認がいつでもできる機能。
レイヤー
頭や目、身体といったパーツごとにレイヤーをわけて扱えるようにしたい。
複数のワークスペース
ドット絵を描くエリアを分割したり、タブで切り替えたりして、同時に複数のドット絵を編集できるようにしたい。
コピー＆ペースト
選択範囲やレイヤーをコピー＆ペーストできる機能。
あって当たり前のようにも思えるけど、実装するとなると考えることが多そう…。
画面イメージ
上で挙げた機能を盛り込んだ完成形のイメージ図。
改めて絵にしてみると、Ph○t○sh○pに引っ張られてる…。
データの保存形式
既存のドット絵用のデータ保存形式をいくつか調べたが
しっくりこなかったので、保存形式も自作する。
保存したい情報
レイヤー
エディタで編集する際に、頭や目、身体といったパーツごとに
レイヤーをわけて扱えるようにしたいので、
当然、レイヤーごとの情報を保存できるようにしたい。
各ドットごとの色情報
１ドットごとの色情報を配列にする。
HEX形式（例：#FF0000）で記載する。
名前
エディタでレイヤーを扱えるようになったときに表示される。
それまでは使うところなさそう。
大きさ
レイヤーごとの幅・高さ。
各ドットごとの色情報を格納した配列データを
主に２次元のドット絵にする際に利用する。
座標
レイヤーの位置情報
データフォーマット
エディタをJavascriptで作るので、扱いやすいJSON形式をベースにし、
上の内容を踏まえて考えたフォーマットが↓こんな感じ。
レイヤーごとに各種データを持たせることで、レイヤー単体でも扱いやすくしてみた。
こうしておくことで、将来、レイヤーを複製したり他のドット絵にコピペしたりする際に、
処理しやすくなるはず。
ひとこと
考え出すと色々妄想が膨らんだ。
