こんにちは。 今回の記事は小さなディスプレイに、オリジナルのキャラクターを表示させた 事について書こうと思います。 ゴールとしては、画面にキャラクターを表示させ、パラパラ漫画のように画像を切り替えることで ちょっとした動きが表現できるようになる事です。


　1. ESP32 Devkit
　2. OLEDディスプレイ (SSD1306 128x64)
使用した開発環境&ライブラリーは以下になります。
　1. ESP-IDF (ESP32の開発環境)
　2. LovyanGFX (OLEDへ文字や画像を表示させるためのライブラリー)
大まかにやる事としては以下になります。
　1. キャラクターの画像をBitmapへ変換する
　2. BitmapをOLEDディスプレイへ描画する
　3. 表示させるBitmapを切り替えてちょっとしたアニメーションをする

｜　キャラクターの画像をBitmapへ変換する　｜

まずは、ESP32上で画像を扱うためJPG画像をBitmapへ変換します。 Bitmapへ変換することで白黒にはなってしまいますが、ESP32の容量を節約する事ができます。 今回Bitmapへ変換する際に、以下のサイトを使用しました。
" https://javl.github.io/image2cpp/ " こちらのサイトで画像を取り込みBitmapへの変換処理を行う事ができます。 設定が色々あるのですが、今回は以下の設定で変換を行いました。
Code output format -> Arduino Code
Draw mode -> Horizontal - 1bit per pixel
変換処理を実行すると以下のような配列が生成されるかと思います。 

 
                        const unsigned char robo1 [] PROGMEM = {
                          0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xf0, 0x3f, 0xfc, 0x7f, 0xfe, 0x73, 0xce, 0x3f, 0xfc,
                          0x1f, 0xf8, 0x01, 0x80, 0x01, 0x80, 0x0f, 0xf0, 0x17, 0xe8, 0x17, 0xe8, 0x17, 0xe8, 0x13, 0xc8,
                          0x13, 0xc8, 0x13, 0xc8, 0x13, 0xc8, 0x3a, 0x5c, 0x2a, 0x54, 0x06, 0x60
                        };

｜　BitmapをOLEDディスプレイへ描画する　｜

次に、ヘッダファイルに置いてあるBitmapを描画していきます。 描画にはLovyanGFXというライブラリーを使用します。LovyanGFXは色々なディスプレイに対応しており、 非常に便利なものとなっています。描画は以下のようなソースコードで行いました。 


                        // 描画用の関数
                  void ShowImage(const unsigned char img[]) {
                  // 描画を180度回転
                  lcd.setRotation(2);
                  // spriteを作成
                  sprite.createSprite(lcd.width(), lcd.height());
                  // spriteを黒で塗りつぶし
                  sprite.fillScreen(0x000000u);
                  // (55,25)の座標にBitmapを描画
                  // Bitmapはimg変数に格納されている
                  sprite.drawBitmap(55, 25, img, 16, 22, TFT_WHITE, TFT_BLACK);
                  // spriteをOLEDへ描画する
                  sprite.pushSprite(&lcd, 0, 0);
              }

｜　表示させるBitmapを切り替えて
ちょっとしたアニメーションをする　｜

上記の関数でBitmapを画面へ表示させる事ができたので、次にパラパラ漫画のように表示するプログラムを 作成します。今回は、２コマの画像を用意しているので、この2枚を交互に表示させる処理を書きます。

                            
                    // 3回ループするfor分
                    for (int i = 0; i < 3; i++){
                    // ShowImage関数でrobo1を表示
                    oled.ShowImage(robo1);
                    // 0.8秒Sleep
                    vTaskDelay(800 / portTICK_PERIOD_MS);
                        
                        
                    // ShowImage関数でrobo2を表示
                    oled.ShowImage(robo2);
                    // 0.8秒Sleep
                    vTaskDelay(800 / portTICK_PERIOD_MS);
                    }

これで以下のようなキャラクターの動きが表示されます。

｜　まとめ　｜

今回は、OLEDディスプレイにキャラクターを表示させるという事をやってみました。 文字以外にもキャラクターやイラストが表示出来ると小さい画面でも表現の幅が広がって中々楽しめそうです。 これからキャラクターやアニメーションを増やしていき、Mobusの中を賑やかにしていこうと思います。