画像がチラチラしてみずらいのだ。
しておるのか？
この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や画像を表示する際のちらつきや、安定した描画を行うための仕組みについて画面制御の方法を確認していきます。
今回は、「lovyan03」さんが公開されているArduino IDE向けのライブラリ「Lovyan GFX」 Libraryを使用します。
「Lovyan GFX」は、Arduino IDE共通で使用でき、かつ様々なディスプレイコントローラに対応されているので、、Arduino対応機器間で同じソースを使いたい場合に有効です。
しかも、ディスプレイへの描画速度を安定化させるための仕組みをいくつか実装されています。
実際に動かして確認してみましょう！
ディスプレイに描画する際に悩むポイント
プログラムで、マイコンなどのディスプレイに文字や画像を描画する際によく悩むのが次のポイントです。
- 画像をつかったアニメーションが難しい。
- なんか画面がチラチラする
こういった、悩みポイントを解消するために使えるのが、「Sprite：スプライト」という仕組みです。
Sprite(スプライト）とは？
簡単に言うと、メモリ内に作成される仮想的な画面です。
ディスプレイに描画する際のdraw系やprint系などの処理もスプライトに対して行うことができます。
ディスプレイに対して直接描画すると、どのタイミングで描画されるのかをコントロールすることは難しく、前述のチラつきなどが発生する原因となります。
そこで、次のようにメモリ内の仮想的な画面であるスプライトに表示内容を描画してから、実際のディスプレイに描画することで、描画のタイミングをコントロールすることができます。
また、スプライトは、スプライトに描画することもできるので、複数のスプライトから1つのスプライトを作成することもできます。
Sprite（スプライト）の使用方法
スプライトをプログラム内で使用するためには、次の処理を記述する必要があります。
インスタンスの生成
lovyanGFXのインスタンス生成と同じようにスプライトもインスタンスを生成する必要があります。
static LGFX_Sprite sprite1(&lcd); // スプライト１を生成（描画先：lcd（ディスプレイ）） static LGFX_Sprite sprite2(&sprite1); // スプライト２を生成（描画先：スプライト１） static LGFX_Sprite sprite3(&sprite1); // スプライト３を生成（描画先：スプライト１）
スプライトの作成
実際に操作するスプライトを作成します。
Setup関数やloop関数内で記述するか、呼び出す関数に記述します。
sprite1.createSprite(100, 100); // スプライト１を（幅：100×高さ：100）で作成
スプライトの削除
sprite1.deleteSprite(); // スプライト１を開放
スプライトはメモリを確保してしまうので、使用しないスプライトは、削除してメモリを解放します。
次章から、悩みポイントの実例と解決方法を紹介していきます。
画像を使ったアニメーションが難しい
ディスプレイ上にセンサーなどの値をわかりやすく表示する場合、画像などを使ったアニメーションが有効ですよね。
画像は準備したけど、画像をどうやって動かしたらいいか。
難しそう。。。
ということはないでしょうか。
でも大丈夫です。
「LovyanGFX」のスプライト機能は、スプライトを自由に回転、拡大・縮小などを行うことができます。
例えば、アナログメーターを作りたい場合、次のように画像を準備し、スプライトを作成します。
ディスプレイ描画までの流れ
- スプライト２として、メーターの背景と、文字を描画します。
- スプライト３として、メーターの針を描画します。
- スプライト２をスプライト１に描画します。この時、スプライト２の縮尺と、描画位置を指定して描画します。
- スプライト３をスプライト１に描画します。この時、スプライト３の縮尺、描画位置に加えて「回転角度」を設定します。回転角度は、センサー値などから計算して求めます。
- スプライト１をディスプレイに描画します。
- 上記の①～⑤を繰り返します。
スプライトの描画関数
| 関数 | 説明 |
| setPivot(x, y); | スプライトの中心点(x, y)を指定します。 初期値は左上(0, 0)です。 例えば、幅：width、高さ：heightのスプライトを中心で回転させたい場合は次のように記載します。 setPivot(width/2, height/2); |
| pushRotateZoom(x, y, deg, width, height); | 描画先（スプライトまたはディスプレイ）上の（x, y）の座標にスプライトの中心点を合わせて表示します。 width、heightは、横、縦の比率（倍数）を指定します。 degには、スプライトを表示する際の角度を指定します。 |
| pushRotateZoomWithAA(x, y, deg, width, height); | 前述と同じように描画しますが、表示時にアンチエイリアシングを行います。 |
画像の描画関数
図形の描画は、次の関数になります。
この関数は、スプライトを使わない場合も利用可能です。
| 関数 | 説明 |
| pushImage(x, y, width, height, img); | 描画先（スプライトまたはディスプレイ）上の（x, y）の座標に画像の左上を合わせて表示します。 width、heightは、横、縦の比率（倍数）を指定します。 |
図形、文字の描画関数
スプライトへの図形、文字などの描画については、LovyanGFXのディスプレイへの描画と同じものが使用できます。
例えば以下のようになります。
sprite1.pushImage(0, 0, 100, 100, led_screen_img01); // 画像の描画
sprite1.fillRect(0, 0, 150, 50, BLACK); // 回転数表示域を塗りつぶし
sprite1.setTextColor(GREEN, BLACK); // テキストカラーの指定
sprite1.setCursor(10, 5, 7); // カーソル位置とフォントの設定
sprite1.print(rpm_str); // 文字の描画
基本的な描画関数については、次の記事で紹介しています。
すけろく 標準ライブラリでの画面描画はできた。 しかし、M5Stack向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5StickCや他のAruduino機器でも使えるものが必要[…]
なんか画面がチラチラする
センサーで取得したデータ値をディスプレイに表示する際や、図形や画像を使ってアニメーションさせる場合、draw系や、print系の処理を記述するだけだと画面にチラつきがみられる場合があります。
特にArduino などのloop関数内で繰り返し処理で、実行のたびに表示する内容が変わる場合などに顕著に現れます。
例えば次のようなイメージです。
メーターや数字部分がチカチカしていますよね。
これは、loop関数から呼び出す描画関数内で、draw系やprint系の処理を繰り返しているだけの場合になります。
これをSprite（スプライト）機能を使ってメモリに一度描画してからディスプレイに描画させるとどうなるでしょうか。
ちらつきがなくなり、見やすくなりました。
具体的にどういったことかを見ていきます。
単純な描画の繰り返しの場合
各処理が順番にディスプレイに表示されていくことの繰り返しが発生し、チラつく原因になります。
Sprite（スプライト）を使った描画の場合
メモリ上の仮想画面に一度描画してから、ディスプレイに描画することでチラつきが抑えられます。
編集後記
いかがだったでしょうか。
LovyanGFXのスプライト機能をご紹介しました。
スプライト機能は、スプライトの拡大、縮小、回転が容易に指定できるので、センサー値によるアニメーションなどに有効です。
ぜひ、皆さんもチャレンジしてみてくださいね！
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
これからはじめる方にお勧めの参考図書はこちら！
 |
  |
  |
  |
  |
| アイデアをカタチにする! M5Stack入門&実践ガイド | M5Stack&M5StickCではじめるIoT入門 | みんなのM5Stack入門 | ESP32&Arduino 電子工作 プログラミング入門 | みんなのArduino入門 |
| 確認する | 確認する | 確認する | 確認する | 確認する |
記事内でご紹介した商品はこちら！
M5Stack Core2 開発キット
Arduino、UIFlow、MicroPythonに対応している組み込み開発キットです。
タッチスクリーン、マイク、IMUを使うことができ、従来のM5Stackよりも多機能なモデルです。 バッテリーも搭載しています。一台でいろいろと遊べる機器なのでおススメです！
M5Stack の他の記事はこちらからどうぞ！
すけろく ううーん。 どうしたものか。 げんろく どうした？ 浮かない顔をして。 すけろく ChatGPTをマイコンから使ってみたいのだが、 どうすればよいのかわからなくてな。 げんろく そうか。 ChatGPTもAPIをもっているから、マイコンで文章を作って ChatGPT APIに送信すればよいと思うぞ。 今回はそのあたりを使ってみようか！ 皆さん、「ChatGPT」は活用されていますか？ 私 […]
すけろく 最近メダカの飼育が流行っているらしいの～ げんろく そうだな。日本の水質にも適用能力が高い魚だからな。 我が家でも飼育してみるか。 すけろく そうなると、メダカに快適な環境を整える必要があるな。 げんろく よし。 まずは、メダカが快適に過ごせる水温か確認するぞ！ 皆さん、お家で何か動植物を飼っていますか？ 今回、縁あって、げんろく宅にも「メダカ」さんがやってくることになりました。 メダカ […]
すけろく んーどうしたものか。 げんろく どうした？ 深刻な顔をして。 すけろく M5Stackにプログラムを書き込んだら 起動しなくなってな。 電源ON／OFFでも無理なのだ。 げんろく 書き込んだプログラムか、バッテリーの 過放電か。工場出荷時に戻してみてはどうだ？ この記事では、M5Stackにプログラムを書き込んだ結果、うまく動作しなくなった場合の対処方法を記載します。 ご紹介するのは「工 […]
すけろく んー。 どうしたものか… げんろく どうした？深刻な顔をして。 すけろく 「城の守りを固めるため、敵の接近を検知してみせよ！」 と殿から宿題をもらっての。 げんろく なるほど、それならば人感センサーを使ってみてはどうか？ 敵が勝手に部屋に入ったりするのを検知できるぞ！ この記事では、M5Stackと、「人感センサー（HC-SR501）」を使って、人が近づいた際に検知して反応するプログラム […]
すけろく 前回は、RTC非搭載のM5Stackでの時刻同期を行ったが、 RTC搭載の場合はどうするのかな。 げんろく うむ。 RTCは、M5Stack Core 2 などで搭載されている。 ちょっと、プログラム内容が異なるから、実装してみるか。 この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー）と時刻を同期する方法 […]
すけろく ん～。 げんろく どうした難しい顔をして。 すけろく M5Stackのディスプレイにいろいろ描画しているのだが。 画像がチラチラしてみずらいのだ。 げんろく 描画タイミングとか、メモリを使うとか しておるのか？ すけろく ・・・ げんろく 今回は、そのあたりを見てみようか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や画像を表示する際のちらつきや、安定 […]
すけろく M5StackでPCファンの回転を制御することはできたが LEDの点灯制御はまだだな。 げんろく そうだったな。 LEDの点灯制御もM5Stackで行うことができるぞ！ 実際に動かしてみよう この記事では、M5StackとLED搭載のパソコン用冷却ファンを使ったLED発光制御の方法について紹介します。 前回は、M5Stackで冷却ファンを使った回転速度制御をおこないましたが、今回 […]
すけろく M5Stackを使って、モーターをコントロールしてみたいな。 げんろく それならば、モーターコントロールを学べるPC冷却ファン制御というものをやってみるか。 すけろく ん？ パソコン用の冷却ファンをコントロールできるのか？ げんろく 仕組みはモーターと同じだからな。 とにかくやってみよう！ この記事では、M5Stackとパソコン用の冷却ファンを使って回転速度制御を行い […]
すけろく 標準ライブラリでの画面描画はできた。 しかし、M5Stack向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5StickCや他のAruduino機器でも使えるものが必要だな。 すけろく そのようなものがあるのか？ げんろく よし。今回は、汎用的に使えるライブラリを紹介しよう。 lovyan03さんが公開されている「Lovyan_GFX」だ。 この記事では、Arduino […]
すけろく M5Stackも時刻同期や日本語表示までできた。 うまくいっておるな。 げんろく ああ、「M5Stack」でもノウハウがたまってきている。 すけろく そういえば、大きな画面を活かしたものを 作ってみたいと思うのだが。 げんろく わかった。今回はM5Stackのディスプレイにおける 画面制御まわりを見てみるか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字 […]
すけろく M5Stackに英語表記で時計を表示することは 前回の記事で行えたが、日本語は表示できないのか？ げんろく いや、方法はあるぞ。 eFontライブラリをM5Stackで実行できるように 修正して提供してくれているものを使うのだ。 すけろく ぜひ、やってみたいの～ この記事では、Arduino IDEを使ってM5Stackのディスプレイに日本語を表示させるための方法を紹介します。 今回使用 […]
すけろく 前回は、Wi-Fiアクセスポイントに 接続することができた。 次は時刻同期かな。 げんろく うむ。 時刻同期は、全ての基本だからな。 実装してみるか。 この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー）と時刻を同期する方法について紹介します。 M5Stackは、内蔵タイマであるRTCが搭載されているモデル（例：M5St […]
すけろく M5Stackは、Wi-Fi機能がついているのか。 げんろく ESP32のおかげだな、2.4GhzのWi-Fi接続に 対応している。 すけろく では、早速Wi-Fi接続してみよう。 げんろく せっかくなので、microSDから読みだした Wi-Fi アクセスポイント情報を使って 接続してみよう！ この記事では、M5Stackに実装されているWi-Fi機能を使って、Wi-Fiルータに接続す […]
すけろく M5StackとほかのWebサービスなどとの データのやり取りにJSON形式を使いたいのだが。 げんろく うむ。 M5StackでもJSON形式が使えるか試してみるか。 この記事では、Arduino IDEを使ってM5StackのプログラムでJSON形式を取り扱う方法を紹介します。 JSON形式データは、Webサービスやほかのコンピュータとのやり取りにも使用される汎用形式なので、取り扱う […]
すけろく M5Stackは、各モデル共通でmicroSDカードの スロットが搭載されているな！ げんろく そうだな。microSDカードへの読み書きが できるのでログの記録や、データ読み出しからの 画面表示ができる。 すけろく ファイルの中身を画面に表示することができるのか！ それはいいな！ げんろく では、手始めにmicroSDカードに入っている テキストファイルの中身を表示してみよう。 この記 […]
すけろく M5StackをArduino IDEで使ってみたいのだが。 げんろく ライブラリも揃っているしな。 開発する前に、M5Stack用の設定をArduino IDEに 施す必要がある。 すけろく M5Stack開発ボードの登録とライブラリの インストールだな。 げんろく わかってきたではないか。 新しい機器をArduino IDEで使う場合の初期設定だな。 この記事では、Arduino I […]
すけろく 今回はM5Stackを取り上げたいと思うがどうだ？ げんろく なんだ、急にやる気を出して。 どういった風の吹き回しだ？ すけろく M5Stickとは異なり、いろいろな種類のモデルがあって 良さそうだからな。 げんろく 開発用モデルから、実用を意識したモデルまで 様々だからな。 面白い、やってみるか！ 今回の記事では、「M5Stack」を各モデルを比較して、用途に応じた使い方をまとめていま […]
