メンバー
Yugi Tech Lab
@yugi_tech_lab
作品ページ
ブラウザだけで動くOLEDディスプレイ向けドット絵エディタです。
Arduino（Adafruit_SSD1306）用のCコードをそのまま出力できます。
---
# OLEDドット絵エディタ
## 🔗 使用手順
ドット絵を描く → コードを作る → コピーして自分のプログラムに貼り付けるだけで、イラストをOLEDに表示できます！
＜リンクはこちら＞
https://yugi-tech-lab.github.io/BM-GamePod/sw/tools/oled_dot_editor.html
活用事例
> ※画像のｽﾀｯｸﾁｬﾝは、ししかわ様が開発・公開している手乗りサイズのスーパーかわいいコミュニケーションロボットです。
---
# 🧪 絵を中央表示するだけのサンプルコード
```cpp
#include
#include
#include
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
const uint8_t PLAYER_BMP[] PROGMEM =
{
0x03, 0x83, 0x80, 0x06, 0x66, 0xc0, 0x0c, 0x3c, 0x40, 0xff, 0xff, 0xe0,
0x90, 0x00, 0x10, 0x97, 0xff, 0xd0, 0x94, 0x00, 0x50, 0x95, 0xff, 0x50,
0x95, 0xff, 0x50, 0x95, 0xbb, 0x50, 0x95, 0xff, 0x50, 0x95, 0xc7, 0x50,
0x95, 0xff, 0x50, 0x95, 0xff, 0x50, 0x94, 0x00, 0x50, 0xcf, 0xff, 0xd0,
0x78, 0x00, 0x20, 0x1f, 0xff, 0xc0, 0x02, 0x18, 0x80, 0x03, 0xff, 0x80
};
void setup()
{
Wire.begin();
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C))
{
while (1);
}
display.clearDisplay();
display.fillScreen(SSD1306_WHITE);
int x = (SCREEN_WIDTH - 20) / 2;
int y = (SCREEN_HEIGHT - 20) / 2;
display.drawBitmap(x, y, PLAYER_BMP, 20, 20, SSD1306_BLACK);
display.display();
}
void loop()
{
}
```
---
# 📜 使用条件について
クレジット表記などは特に不要です！
応援して頂ける方は、公開時に
- 「Yugi Tech Lab のソフトを参考にした」
- 「本ページを参考にした」
などを書いて頂けると、とても嬉しいです。
---
# 機能一覧
## 🖼️ キャンバス表示
### 3種類の表示モード
- キャンバス固定（小 / 中 / 大：400 / 600 / 800px）
- セル正方形（グリッドサイズに合わせて自動フィット）
- 固定セル＋スクロール（大きなドット絵もスクロール編集可能）
### その他
- グリッド線トグル（表示 / 非表示切替）
- 中心線ガイド（赤い破線で水平・垂直中心を表示）
---
## ✏️ 描画ツール
- **ペン**
1ドット単位でフリーハンド描画
- **塗りつぶし（フラッドフィル）**
同色の連続領域を一括塗り
- **直線（ブレゼンハム法）**
ドラッグで直線描画
- **四角形（枠線）**
ドラッグで矩形描画
- **楕円 / 円（枠線）**
ドラッグで楕円描画
- **右クリック描画**
選択中と逆色で描画
---
## 🔧 ドット絵編集
- 左右反転 / 上下反転
- 白黒反転
- 時計回り90°回転 / 反時計回り90°回転
- シフト移動（上下左右へ1ドット移動）
- 全消去
- スケール変更（÷2 / ×2 / 任意倍率）
- Undo / Redo （各30ステップ、Ctrl+Z / Ctrl+Y対応）
---
## 📐 グリッドサイズ変更
横・縦のマス数を入力して「サイズ反映」。
変更時には以下から処理方法を選択できます。
- 左上を起点に保持
- 中央寄せで保持
- 全て消去
- キャンセル
---
## 🖼️ 参考画像機能
### 画像読み込み
ローカル画像を参照表示可能。
### 表示モード
- 左隣表示（小：150px / 大：400px）
- 背景重ね表示
（透明度・拡大率・X/Yオフセット調整可能）
### その他
- 透明度スライダー（10〜100%）
- 拡大率 / 横移動 / 縦移動スライダー
- リセットボタン
- 画像消去
---
## 💾 OLEDコード出力
### Cコード生成
Adafruit_SSD1306 + `drawBitmap()` 形式のコードを生成。
- 12バイトごとに整形
- 変数名変更可能
### 背景色選択
- 白背景
- 黒背景
（黒背景時はビット反転して出力）
### コピー機能
- コメント込み全体コピー
- 配列部分のみコピー
### その他
- コードから復元
- HEXプレビュー
- バイト数 / 行あたりバイト数表示
---
## 🖼️ PNG書き出し
### 書き出しサイズ
- ドット絵サイズ（1ドット = 1px）
- キャンバス表示サイズ
背景色はOLEDコード出力設定と連動します。
---
## 📁 ドット絵管理（サンプルリスト）
- 複数ドット絵を名前付き保存
- JSON読み込み
- JSON書き出し
- リスト登録 / 削除
- リストから即時表示切替
---
## ⌨️ キーボードショートカット
| キー | 動作 |
|---|---|
| Ctrl + Z | Undo |
| Ctrl + Y / Ctrl + Shift + Z | Redo |