グリッドと描画
本ツールの描画システムは，DOM上のCanvas要素を用いた直接的なピクセル操作ではなく，JavaScriptの内部メモリ上に確保された2次元配列に対する状態管理を中心として構築されています．初期化処理において，グリッドサイズは8x8，16x16，32x32，64x64の中から指定された解像度の正方形として定義され，各セルには透過を示すnull値，または16進数のカラーコード文字列が割り当てられます．
利用者がキャンバス上でマウスの左ボタンを押下，またはドラッグした際，ブラウザのクライアント座標系におけるマウスポインターの相対位置を取得し，現在のグリッドサイズとコンテナの表示領域幅を基準にしてセルのインデックス座標へと変換する計算が行われます．算出された配列のインデックスに対し，ペンツールであれば現在選択中の色を，消しゴムツールであればnull値を代入することで状態を更新します．
また，スポイトツールは指定座標の配列に格納されているカラーコードを読み取り，アクティブな描画色として再設定する役割を担います．パフォーマンス最適化のため，マウスポインターの移動間に生じる隙間を埋める線分補間処理は実装されておらず，イベントの発火タイミングに依存した単一セルの連続的な書き換えによる描画エンジンとなっています．
塗りつぶし・対称描画
塗りつぶしツールは，ピクセルアート制作における広範囲の色変更を高速化するため，4近傍の幅優先探索（BFS）アルゴリズムを採用しています．クリックされた起点となる座標の配列インデックスから色情報を取得し，それを置換対象色として保持します．その後，探索用のキュー配列を用意して起点座標をエンキューし，反復処理を開始します．
ループ内では座標をデキューし，上下左右に隣接する4方向のセルを参照します．参照先が置換対象色と一致する場合，新たに選択された色コードへと配列の値を上書きし，その座標をキューに追加して探索を継続します．この処理は，同一色の連続領域がすべて置換されるまで繰り返されます．
加えて，パターン作成を効率化する対称描画システムを備えており，利用者は水平方向（左右対称），垂直方向（上下対称），およびその両方を組み合わせた四方対称のいずれかのモードを選択できます．対称モードが有効な状態で描画イベントがトリガーされると，操作された元の座標に加えて，グリッドのサイズを基準とした反転座標が即座に算出され，内部配列の複数箇所に対して同時に色の代入処理が実行される仕組みです．
フレームとレイヤー
高度なアニメーション表現を実現するため，描画データはレイヤーおよびフレームという階層的なデータ構造によって管理されています．各フレームは独立した状態を持つ複数のレイヤーオブジェクトの配列として構成され，それぞれのレイヤーは自身の2次元グリッド配列，表示・非表示の論理フラグ，および0から1の範囲で指定される不透明度のプロパティを保持しています．
編集画面はセルごとに表示対象レイヤーを参照して色を示します．最上位の色とそのレイヤー不透明度を表示する簡易方式のため，編集画面の重なりが画像書き出し時のCanvas合成と完全には一致しない場合があります．PNG等の出力では表示対象レイヤーをCanvasへ順番に描画して合成します．
フレーム制御については，配列内に新しいフレームを挿入，または既存のフレームを複製・削除するリスト操作が提供されています．プレビュー実行時は，設定された1から24FPSの値に基づいてタイマー処理が稼働し，アクティブなフレームのインデックスを順番に切り替えることでアニメーションを再生します．
また，動きのつながりを確認しやすくするため，直前のフレームの合成結果を半透明の下敷きとして表示するオニオンスキン機能が組み込まれています．編集過程の保護としては，操作が発生するたびに全フレームのデータをディープコピーして履歴配列に保存するUndo/Redo機能が実装されており，最大30回前の状態まで遡って配列状態を復元することが可能です．
PNG・GIF・スプライトシート
作成したグラフィック作品のエクスポート機能は，用途に応じて3種類のアプローチが用意されています．静止画としての出力を行う場合，現在アクティブになっている単一のフレームを描画コンテキスト上にレンダリングし，メソッドを用いて透過情報を持ったPNG形式の画像データへ変換します．
一方，アニメーション全体を出力する場合は，GIF89a規格に基づくエンコード処理がクライアントサイドのJavaScript上で実行されます．すべてのフレームを走査し，それぞれのピクセル情報をRGBのインデックス配列として抽出しながらLZW圧縮アルゴリズムを用いてバイナリデータ化を行います．
さらに，ゲーム開発用の素材として扱いやすい形式として，全フレームを水平方向に等間隔で並べて一枚の画像に統合したスプライトシート出力機能も備えています．この処理では，フレーム数とグリッドサイズ，および指定された出力スケールに基づいてオフスクリーンキャンバスの幅を拡張し，各フレームをX軸方向に移動させながら順次レンダリングを行い，最終的に一枚のPNG画像としてエクスポートします．
これらの画像出力は公開や外部ソフトウェアでの利用を目的としており，書き出される画像データにレイヤー構造などの編集情報は保持されません．
JSONプロジェクト
本エディターには，ブラウザのローカルストレージやIndexedDB等を利用して利用者の作業状態を永続化する機能，ならびに自動保存の仕組みは実装されていません．したがって，ブラウザのタブを閉じてしまったり，ページを再読み込みしたりすると，メモリ上に保持されていたレイヤーやフレームの配列データは失われます．
この仕様の中で継続的な編集作業を可能にするため，プロジェクト全体の状態をJSON形式のテキストとして手動で入出力する機能が提供されています．エクスポート処理が実行されると，現在のグリッドサイズ，FPS設定，カスタムパレット，およびすべてのフレームとレイヤーに含まれる色情報の2次元配列が階層構造を保ったままシリアライズされ，文字列データとしてローカルファイルとしてダウンロードされます．
作業を再開する際は，保存したJSONファイルを読み込み，テキストをデシリアライズすることで配列データがメモリ上に再展開され，レイヤーの不透明度やフレーム構成など，保存した時点の作業状態が復元される仕組みとなっています．
制約と制作手順
既存の画像データをツール内に取り込んで編集を開始するインポート機能が備わっていますが，内部のデータ構造に適合させるための複数の制約が存在します．画像を読み込む際，指定されたキャンバスサイズの正方形グリッドへ強制的に変形され，RGB値とアルファ値が解析されます．
この過程で，アルファ値が一定未満のピクセルは透明として扱われ，それ以外は不透明なカラーコードに変換されるため，PNGファイルが元々持っていた半透明の中間階調やレイヤー情報は引き継がれません．アニメーションGIFを画像として読み込んでも，複数フレームの編集データとして展開する機能はありません．
読込結果は現在のレイヤーへ1枚の画像として配置されます．さらに，GIFエクスポート機能に関する重要な仕様として，1フレーム内に保持できる色数は最大256色に制限されています．色数が多い画像を読み込み，256色を超過した状態でGIFの書き出しを行った場合，本ツールの実装においては近似色を探して割り当てる減色処理は実行されず，256色目以降の超過した色はすべて強制的にインデックス番号255のパレット色へと割り当てられる挙動となります．
そのため，GIFアニメーションとして出力することを前提とする場合は，使用する色数をあらかじめ抑えながらピクセルを配置する制作手順が求められます．PNGとスプライトシートでは出力倍率を指定できますが，GIFは選択したグリッドの原寸で書き出されます．制作途中はJSONを保存し，用途別の画像は完成時に出力する運用が適しています．
また，描画操作はマウスイベントを中心にしているため，タッチ端末だけでの細かな制作は保証されません．画像を読み込む前に縦横比と透明度を整え，GIF用では色数も減らしておくと，意図しない変形や色置換を避けやすくなります．