【M5Stack】画面ちらつきのないデジタル時計を作ろう！

2022年3月24日2024年4月1日

M5Stackの画面に文字や図形を描画した際、画面がちらついて困っていませんか？

普通に画面描画するプログラムを組むとちらついてしまうんです。

本記事では、TFT_eSpriteクラスを使ったちらつき防止方法について、デジタル時計をプログラミングしながら解説します。

こんな人におすすめ！

M5Stack画面描画のちらつきに困っている人
TFT_eSpriteクラスの使い方について知りたい人
M5Stackを使って電子工作したい初心者

それでは始めていきましょう。

みんなのM5Stack入門 [ 下島健彦 ]

楽天ブックス

¥2,420 （2024/07/26 23:37時点 | 楽天市場調べ）

Amazon

楽天市場

ポチップ

画面ちらつき防止方法

画面ちらつきを防止するTFT_eSpriteクラス

そもそもSpriteって何？

スプライトとは、コンピュータ上で動く図形を表現する際に、動かす図形と固定された背景とを別に作成し、ハードウェア上で合成することによって表示を高速化する手法のことである。
IT用語辞典バイナリ

このようにSpriteを使うことによって画面ちらつきが防止出来るわけです。

TFT_eSpriteクラスは、TFT_eSPIというライブラリ内に含まれています。TFT_eSPIライブラリを使うにはM5Stackライブラリをインクルードするだけでよいです。

TFT_eSpriteクラスの使い方

TFT_eSpriteクラスのインスタンス化

まず、TFT_eSpriteクラスをインスタンス化する必要があります。

TFT_eSprite sprite = TFT_eSprite(&M5.Lcd);

ビット深度の指定

扱う色数を指定します。

sprite.setColorDepth(8);

引数は下表から選びます。

引数	定義
16	16ビット = 65536色
8	8ビット = 256色
1	1ビット = 2色

Spriteの作成

Spriteを作成します。

sprite.createSprite(M5.Lcd.width(), M5.Lcd.height());

第1引数にSpriteの横幅、第2引数にSpriteの高さを指定します。

図形や文字などをSpriteに描画

Spriteに表示させたい図形や文字を描画していきます。

sprite.printf("文字描画の例");

M5Stackの画面に表示するときはM5.Lcd.printf(“xxx”)でしたが、M5.Lcdをspriteに変更する形となります。

Spriteを画面に表示

spriteに描画した図形や文字をM5Stackの画面に表示させます。

sprite.pushSprite(0, 0);

第1引数は左端、第2引数は上端です。

サンプルプログラム

#include <M5Stack.h>
#include <WiFi.h>

#define JST (3600L * 9)

const char* ssid = "***************";
const char* password = "**************";

TFT_eSprite sprite = TFT_eSprite(&M5.Lcd);

void WiFiConnect();

void setup() {
  M5.begin();
  M5.Lcd.setTextSize(2);
  WiFiConnect();

  M5.Lcd.setTextSize(3);
  // NTPサーバと時刻を同期
  configTime(JST, 0, "ntp.nict.jp", "time.google.com", "ntp.jst.mfeed.ad.jp");

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

void loop() {
  struct tm tm;
  if(getLocalTime(&tm)){
    sprite.fillScreen(BLACK);
    sprite.setCursor(20,60);
    sprite.setTextSize(6);
    sprite.printf("%02d:%02d:%02d", tm.tm_hour, tm.tm_min, tm.tm_sec);
    sprite.setCursor(40,140);
    sprite.setTextSize(4);
    sprite.printf("%d/%2d/%2d", tm.tm_year + 1900, tm.tm_mon + 1, tm.tm_mday);
    
    // スプライトを画面表示する
    sprite.pushSprite(0, 0);  
  }
  delay(1000);

}

void WiFiConnect(){
  WiFi.begin(ssid,password);
  while(WiFi.status() != WL_CONNECTED){ 
    delay(500);
    M5.Lcd.print('.');
  }

  M5.Lcd.print("\r\nWiFi connected\r\nIP address: ");
  M5.Lcd.println(WiFi.localIP());
  delay(500);
}