ホームホーム  更新日: 2021-02-28  [日本語 ]

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

はじめに

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

M5StickC

改善前のスケッチ

まず,スプライトを使わないスケッチを載せます。約 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);
}

簡単ですね♪