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

ピクセルアートアプリの画像

紹介

ピクセルアートアプリはブラウザ上でピクセルアート(ドッド絵)を描くことができるWebアプリです。
簡易な機能しかないですが、画像の書き出し、ドットデータの保存と読み込み、背景画像の読み込み等ができます。

※以下サイト様のアイコンを使用しました。
SATO ICONS

使い方

マス目(グリッド)

グリッドの数を選択します。変更するとすべてのドットデータと背景画像がリセットされます。
「最初から」を選択するとグリッド数はそのままでリセットされます。

目のマークは、グリッド線の表示/非表示の切り替えボタンです。
カラーピッカーでグリッド線の色を設定できます。

「描く」「消す」「戻す」「直す」

「描く」は、ドットを描画します。
「消す」は、ドットを削除します。

「戻す」は、アンドゥ機能です。ひとつ前のドットの状態に戻します。
「直す」は、リドゥ機能です。アンドゥで取り消したドットの状態をやり直します。

これらの操作は、アクティブなレイヤーのみ機能します。

色パレット

ドットの色を選択するパレットです。下のカラーピッカーで色を登録して、上のボタンで選択します。

「変換」「削除」

「変換」は、左のカラーピッカーで選択した色と一致するドット色を、右のカラーピッカーで選択した色で一括変換します。
「削除」は、左のカラーピッカーで選択した色と一致するドット色を一括削除します。

これらの操作は、アクティブなレイヤーのみ機能します。

背景色

背景の色を設定できます。ドットが見にくい時などで使用できます。
画像に書き出す場合背景は透明になりますが、「含める」にチェックを入れると画像に背景色が付きます。

レイヤーの操作

「1層」「2層」「3層」を選択するとそのレイヤーがアクティブになります。目のマークは、表示/非表示の切り替えボタンです。

左側の矢印のボタンで、アクティブなレイヤーを下に移動できます。
右側の矢印ボタンは、アクティブなレイヤーを直下のレイヤーと統合します。

統合すると、アクティブなレイヤーのドットはクリアされます。

画像の書き出し、データの保存、データの読み込み

絵のマークは、画像の書き出しボタンです。640px × 640pxのPNG画像をダウンロードできます。

下矢印のマークは、ドットデータの保存ボタンです。JSONファイルで保存されます。
上矢印のマークは、ドットデータの読み込みボタンです。保存したJSONファイルを読み込んでドットを描画します。

これらの操作は、アクティブなレイヤーのみ機能します。
JSONファイルは、単なる配列データです。名前は自由に変更できますが、読み込む場合は現在のグリッド数と一致するデータを利用してください。

背景画像の読み込み

歯車のマークで、設定オプションが開きます。

背景画像は、画像ファイルを選択して読み込みます。背景画像は、背景色の前に置かれます。
画像の比率は1:1の正方形で、サイズは640px × 640pxに拡大/縮小されます。
「背景画像を表示」のチェックが入っていると背景画像が表示され、画像の書き出しの際にも含まれるようになります。

ブラウザにより異なりますが、GIF/JPEG/PNG/SVG等が読み込めます。

はてなマーク

詳細ページ(このページ)へのリンクです。