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

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

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

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

こんな人におすすめ!

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

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

楽天ブックス
¥2,420 (2024/05/21 17:59時点 | 楽天市場調べ)
目次

画面ちらつき防止方法

画面ちらつきを防止する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);

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

引数定義
1616ビット = 65536色
88ビット = 256色
11ビット = 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);
}

画面ちらつき防止ありなしを比較

画面のちらつきが無くなったのが分かりますよね

まとめ

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

最後までお読み頂きありがとうございました。

私はスイッチサイエンスさん(Amazon)でM5Stackを買いましたので、M5Stackを持っていない方はどうぞ。

書籍もKindleストアで「みんなのM5 Stack入門」を購入し、読みながら勉強してまーす。

楽天ブックス
¥2,420 (2024/05/21 17:59時点 | 楽天市場調べ)
プログラミング言語の人気オンラインコース
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

大学で機械工学を学んだ後、製造業で働く40代の会社員です。
IT系、電気系を学んでこなかった機械系人間が、ゲーム制作、電子工作に奮闘してます。
極力低コストでものづくりを楽しむのがモットー。

目次