ドット絵ジェネレーター

マス単位でじっくり描くためのドット絵ツール

ドット絵は一マスずつ設計する表現です。このエディターは透明な空白グリッドから始まり、各論理ピクセルに一つの色、または透明状態を保存します。写真を平均化したブロックに変換する機能ではありません。その用途には画像ピクセル化ツールをご利用ください。AIプロンプトから絵を生成する機能もありません。

小さいグリッドほどシルエットを明快にする工夫が必要になり、大きいグリッドほど陰影や小物を描き込めます。次の目安は実用的な出発点であり、プラットフォームの規格ではありません。

拡大してもドットをくっきり保つ

PNGは整数倍率で書き出し、画像の平滑化を無効にします。そのため、16×16の元画像にある一つのピクセルは、ぼやけた輪郭ではなく正確な4×4、8×8、またはそれ以上の正方形になります。市松模様と任意表示のグリッド線は編集用のガイドにすぎず、ファイルには入りません。透明なマスは書き出し後も透明です。

SVGでは輪郭の鮮明な長方形を使い、透明なマスは省略します。プロジェクトJSONには編集可能な論理グリッドと作業用パレットが保持されます。これはHyperion独自のプロジェクト形式で、デスクトップのドット絵ソフトが扱うレイヤー形式の代わりにはなりません。

描画ツールとミラーの動作

• ペンはマスに色を付け、高速なポインター移動のサンプル間をつないで線切れを防ぎます。
• 消しゴムはマスを透明に戻します。
• 塗りつぶしは上下左右につながる領域を変更します。斜めに接するだけの領域は別のままです。
• スポイトは既存のマスから色を選びます。透明部分を取ると消しゴムに切り替わります。
• ミラー描画は操作を左右、上下、または両方向に反映します。中央の行や列は一度だけ処理されます。

マウス、ペン、タッチ、キーボードはいずれも同じ論理グリッドを操作します。キャンバスにフォーカスを当て、方向キーで選択中のマスを移動し、SpaceまたはEnterで選択中のツールを適用します。P、E、F、Iでツールを選び、Deleteで消去、Ctrl/Cmd+Zで元に戻せます。

ブラウザでの動作と技術資料

エディターはブラウザのCanvas API、Pointer Events、Canvasの画像スムージング制御を使用します。PNG生成にはCanvasのBlob書き出しAPIを使用しています。キーボードとポインターの操作は、WCAG 2.2の操作可能性に関する指針を踏まえて設計されています。

作品、名前、パレットはブラウザ内のローカルなプロジェクト状態に留まり、URLや当社のサーバーへの通信内容には追加されません。ファネルのステップを移動するときは通常のページリクエストが発生します。タブ用ストレージを利用できない場合でも、完全版の1ページエディターはメモリ上で動作を続けられますが、プロジェクトが気付かないうちに失われないよう、ファネルでは次へ進めません。