ピクセルアートアプリ 詳細ページ

紹介
ピクセルアートアプリはブラウザ上でピクセルアート(ドッド絵)を描くことができるWebアプリです。
簡易な機能しかないですが、画像の書き出し、ドットデータの保存と読み込み、背景画像の読み込み等ができます。
※以下サイト様のアイコンを使用しました。
SATO ICONS
スポンサーリンク
使い方
マス目(グリッド)
グリッドの数を選択します。変更するとすべてのドットデータと背景画像がリセットされます。
「最初から」を選択するとグリッド数はそのままでリセットされます。
目のマークは、グリッド線の表示/非表示の切り替えボタンです。
カラーピッカーでグリッド線の色を設定できます。
「描く」「消す」「戻す」「直す」
「描く」は、ドットを描画します。
「消す」は、ドットを削除します。
「戻す」は、アンドゥ機能です。ひとつ前のドットの状態に戻します。
「直す」は、リドゥ機能です。アンドゥで取り消したドットの状態をやり直します。
※これらの操作は、アクティブなレイヤーのみ機能します。
色パレット
ドットの色を選択するパレットです。下のカラーピッカーで色を登録して、上のボタンで選択します。
「変換」「削除」
「変換」は、左のカラーピッカーで選択した色と一致するドット色を、右のカラーピッカーで選択した色で一括変換します。
「削除」は、左のカラーピッカーで選択した色と一致するドット色を一括削除します。
※これらの操作は、アクティブなレイヤーのみ機能します。
背景色
背景の色を設定できます。ドットが見にくい時などで使用できます。
画像に書き出す場合背景は透明になりますが、「含める」にチェックを入れると画像に背景色が付きます。
レイヤーの操作
「1層」「2層」「3層」を選択するとそのレイヤーがアクティブになります。目のマークは、表示/非表示の切り替えボタンです。
左側の矢印のボタンで、アクティブなレイヤーを下に移動できます。
右側の矢印ボタンは、アクティブなレイヤーを直下のレイヤーと統合します。
※統合すると、アクティブなレイヤーのドットはクリアされます。
画像の書き出し、データの保存、データの読み込み
絵のマークは、画像の書き出しボタンです。640px × 640pxのPNG画像をダウンロードできます。
下矢印のマークは、ドットデータの保存ボタンです。JSONファイルで保存されます。
上矢印のマークは、ドットデータの読み込みボタンです。保存したJSONファイルを読み込んでドットを描画します。
※これらの操作は、アクティブなレイヤーのみ機能します。
※JSONファイルは、単なる配列データです。名前は自由に変更できますが、読み込む場合は現在のグリッド数と一致するデータを利用してください。
背景画像の読み込み
歯車のマークで、設定オプションが開きます。
背景画像は、画像ファイルを選択して読み込みます。背景画像は、背景色の前に置かれます。
画像の比率は1:1の正方形で、サイズは640px × 640pxに拡大/縮小されます。
「背景画像を表示」のチェックが入っていると背景画像が表示され、画像の書き出しの際にも含まれるようになります。
※ブラウザにより異なりますが、GIF/JPEG/PNG/SVG等が読み込めます。
はてなマーク
詳細ページ(このページ)へのリンクです。