ホーム  Tweet  [日本語 ]

---

M5StickC の液晶表示でちらつきをなくしたい

はじめに

M5StickC の LCD に何かの測定値や計算結果などを表示する場合，画面を背景色で塗りつぶしてから，新しい値を描画するということを繰り返し行います。 しかし，この方法だと画面がちらついて見えることがあります。 このような場合，一旦裏画面に描画してから表示画面に転送する方法（ダブルバッファリングなどとも呼びます）が常套手段です。 M5StickC では標準で用意されているスプライト表示ライブラリ（TFT_eSprite クラス）を使うことで，これを実現できます。

改善前のスケッチ

まず，スプライトを使わないスケッチを載せます。約 100 ms 毎に数値をカウントアップしながら LCD に表示するというものです。実行してみると，表示がちらつくのがわかると思います。

#include <M5StickC.h>

int count = 0;

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
}

void loop() {
  char buf[] = "9999";
  sprintf(buf, "%d", count);
  
  // 画面を黒く塗りつぶす
  M5.Lcd.fillScreen(BLACK);
  
  // 画面に数値を描画する
  M5.Lcd.drawString(buf, 0, 0, 7);

  if (++count == 10000) {
    count = 0;
  }

  delay(100);
}

スプライトを使ったスケッチ

次にスプライトを使った場合です。スプライトに数値を描画してから，表示画面に転送します。

#include <M5StickC.h>

int count = 0;
TFT_eSprite sprite(&M5.Lcd);

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);

  // スプライトの作成
  sprite.createSprite(M5.Lcd.width(), M5.Lcd.height());
}

void loop() {
  char buf[] = "9999";
  sprintf(buf, "%d", count);

  // スプライトを黒く塗りつぶす
  sprite.fillScreen(BLACK);
  
  // スプライトに数値を描画する
  sprite.drawString(buf, 0, 0, 7);

  // スプライトを表示画面に転送する
  sprite.pushSprite(0, 0);

  if (++count == 10000) {
    count = 0;
  }

  delay(100);
}

簡単ですね♪