LovyanGFX入門 その6 スプライトの基礎

概要

LovyanGFX入門 その5 画像描画

概要前回は仕組みの部分を紹介しましたが、今回は画像を表示する方法を紹介したいと思います。複数の方法がありますので、状況に応じて使い分けてください。画像データの準備横72、縦60ドットの画像を適当に作り、これを表示してみたいと思います。一度J...

lang-ship.com

2020.10.28

前回までにメモリの関係と画像を説明しました。今回はスプライトを実際に利用して描画する方法を説明したいと思います。

スプライトとは？

メモリ上に確保されている仮想的な画面です。lcdやM5.Lcdなどとほぼ同じ関数が利用できます。実際のlcdなどに描画した場合には、実はどのタイミングで画面に反映されているのかがわかりません。

上記のように画面クリアをされた直後に反映された場合には、一瞬画面が消えてその後描画される様子が見えてしまいます。この動作が画面がちらつく原因になっています。

そこで、上記のようにメモリ上のスプライトに逐次描画し、描画が完成してから画面に一括転送することが可能です。一括転送中に画面に反映された場合にもおかしな状態で描画はされてしまいます。

上記のように左上から右下に対して転送をしていくイメージです。この場合でも転送途中のものが反映されて中途半端な表示はされてしまいます。

真ん中の黒い四角が移動した次の画面の例です。黄色のまるで囲った場所まで左上から転送が終わっています。スプライトを使ってもこのようにいつ反映されるかわからない問題は残ります。

ただし、直接画面に描画すると背景の赤で塗り潰した画面が表示されてから、黒い四角が描画されますので、確実にチラツキが感じられると思います。

スプライトの用途

スプライトの用途には複数あります。用途別に解説をしたいと思います。

チラツキ防止

広範囲に動きが多いものを描画する場合、直接画面に描画すると冒頭で紹介したとおりチラツキが発生します。そこで一度スプライトに描画してから一括転送をすることでチラツキを低減させることが可能です。

ただし、問題がありましてM5StickCなどの小さい画面の場合にはよいのですが、M5Stackなどの画面の場合、メモリ量が足りないので画面全体のスプライトを確保することができません。

LovyanGFX入門 その4 描画の仕組み

概要前回は日本語フォントでしたが、今回はLovyanGFXを使う上で知っておいた方がよい描画周りの仕組みを解説したいと思います。LovyanGFXは複数の環境で動きますが、今回はESP32に特化した内容になります。概要説明なので、適当に端折...

lang-ship.com

2020.10.21

詳細は前々回にまとめた内容になります。回避方法などはのちほど解説したいと思います。

素材置場

本来スプライトはこちらを指すほうが一般的な用語だと思います。アイコンや画像などを読み込んでおき、描画を行います。シューティングゲームなどで自機や敵のことをスプライトと表現することが多いと思います。

LovyanGFX入門 その5 画像描画

概要前回は仕組みの部分を紹介しましたが、今回は画像を表示する方法を紹介したいと思います。複数の方法がありますので、状況に応じて使い分けてください。画像データの準備横72、縦60ドットの画像を適当に作り、これを表示してみたいと思います。一度J...

lang-ship.com

2020.10.28

上記でも紹介していますが、RGB565画像をスケッチに埋め込む場合にはpushImage()関数で直接可能ですので、スプライトを利用する必要はありません。

変形可能素材置場

スプライトの利点は変形できるところにあります。

• 拡大・縮小
• 回転
• アンチエイリアス
• アフィン変換

上記みたいなことが実現可能です。

Core2が来たのと、M5stackFireの中にLovyanGFXのアフィン変換を利用して3Dの箱に絵を貼り付けてみたがチラつきまくるものができた記念動画。よし、まずはご飯だ… pic.twitter.com/Rk22wTHX9n

— Y6 (@SourPomeloY6) October 31, 2020

他の人の例で恐縮ですが、上記は3D表示に対してアフィン変換でテクスチャを描画しています。直接LCDに描画している例なのでちょっとちらついていますね。ちらついていない例もあるのですが、チラツキの説明にもなるので、ちょっと古い例を埋め込ませていただきました。

とはいえ、アフィン変換はちょっとむずかしいので私も使ったことがありません。。。

実際の使い方

宣言方法

#define LGFX_AUTODETECT
#include <LovyanGFX.hpp>
static LGFX lcd;                      // LGFXのインスタンスを作成。
static LGFX_Sprite sprite(&lcd);      // lcdに描画するスプライト作成
static LGFX_Sprite sprite2(&sprite);  // spriteに描画するスプライト作成
static LGFX_Sprite sprite3;           // デフォルト描画先設定がないスプライト作成
void setup() {
  lcd.init();
}
void loop() {
}

上記のようにLGFX_Spriteクラスで変数を定義します。この時点ではクラスの箱だけで実際の描画バッファは確保されていません。

&で渡している値が、デフォルトの描画先になります。無指定でも構いませんが、描画時に指定をする必要があります。

上記の関係になります。spriteが無指定で描画をしたい場合にはlcdになります。スプライトからスプライトに描画することもできます。

単純な関係の場合には宣言時に指定したほうがわかりやすくなると思いますが、複雑な使い方をする場合には描画時に指定したほうがわかりやすいと思います。

sprite.pushSprite(0, 64);

上記の場合にはspriteのデフォルトはlcdなので、以下の指定と同じになります。

sprite.pushSprite(&lcd, 0, 64);

このように第一引数で描画先を指定できます。

描画例

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  sprite.pushSprite(0, 0);

大きさの異なるスプライトを３つ作成し赤、青、緑に塗ってから描画した例です。

描画結果は上記になります。

緑のsprite3からsprite2に描画。sprite2からspriteに描画。spriteからlcdに描画されています。さて、注意点ですがsprite3は宣言時にデフォルト描画先が指定されていません。

  sprite3.pushSprite(0, 0);

上記のように、描画先を指定せずに実行するとリセットがかかるので気をつけましょう！

スプライトへの基本描画

LovyanGFX入門 その1 基本描画系

概要らびやんさん作のLovyanGFXを、自作M5Liteライブラリなどで利用させていただいていますが、描画系の解説用として、LovyanGFXの使い方を確認しなおしたいと思います。上記にまとめた資料が置いてあります。LovyanGFXとは...

lang-ship.com

2020.09.30

スプライトも画面も同じ描画クラスから派生していますので、基本的には同じことが可能です。上記で説明したライン命令などの基本描画の他にテキスト描画なども可能です。

特殊描画系

pushSprite() 別画面に描画

先程使いましたが、他の画面にそのまま全体描画する場合にはpushSprite()関数を利用します。左上座標の他に、透過色の指定もあります。

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  sprite.pushSprite(0, 0);
  sprite.pushSprite(64, 0, TFT_RED); // 赤を透明色に指定

先ほどの最後に横64ドットずらして、赤色を透明色に指定して描画しています。

すると赤色を除いて他の色のみ描画されています。四角以外の画像データを背景ありの場所に描画する場合には透明色指定を使ってみてください。

pushRotateZoom() 回転と拡大縮小

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  sprite.pushSprite(0, 0);
  sprite.setPivot(sprite.width()/2.0, sprite.height()/2.0);
  sprite.pushRotateZoom(120, 120, 45, 2.0, 3.0);

setPivot()で回転する場合の原点を指定します。初期値は左上の(0, 0)だと思いますが、画像の中心で回したいので横幅と縦幅の半分を指定しています。

pushRotateZoom()で画面上の(120, 120)の座標に45度右回転し、横2.0倍、縦3.0倍した画像を描画しています。

実行結果が上記です。spriteの原点部分が画面上の(120, 120)になっていますね。ちなみに今回は指定していませんが透明色も指定できます。

pushRotateZoomWithAA() アンチエイリアス付き回転と拡大縮小

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  sprite.pushSprite(0, 0);
  sprite.setPivot(sprite.width()/2.0, sprite.height()/2.0);
  sprite.pushRotateZoomWithAA(120, 120, 45, 2.0, 3.0);

pushRotateZoom()の変わりにpushRotateZoomWithAA()を使うと、アンチエイリアス付きの描画になります。

ちょっとこれだけだとわかりにくいですね。拡大してみます。

エッジの部分がアンチエイリアスがかかっていますね。

通常描画の場合にはエッジが見えています。どっちのほうがきれいかは状況によるので、使い分けてみてください。ただし、アンチエイリアスは結構重い処理になりますのでご注意を！

pushAffine() アフィン変換描画

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  float matrix[6] = {2.0,   // 横2倍
                     -1.0,  // 横傾き
                     100.0, // X座標100
                     0.1,   // 縦傾き
                     3.0,   // 縦3倍
                     10.0   // Y座標10
                    };
  sprite.pushAffine(matrix);

指定が難しいです、、、本当は行列計算でパラメーターをセットしたほうがいいのかな？

上記みたいな出力になりました。傾きは１でこれだけ傾くってことは、度ではなくてラジアンですね。

pushAffineWithAA() アンチエイリアス付きアフィン変換描画

  sprite.createSprite(64, 64);
  sprite2.createSprite(32, 32);
  sprite3.createSprite(16, 16);
  sprite.fillScreen(TFT_RED);
  sprite2.fillScreen(TFT_BLUE);
  sprite3.fillScreen(TFT_GREEN);
  sprite3.pushSprite(&sprite2, 0, 0);
  sprite2.pushSprite(0, 0);
  float matrix[6] = {2.0,   // 横2倍
                     -1.0,  // 横傾き
                     100.0, // X座標100
                     0.1,   // 縦傾き
                     3.0,   // 縦3倍
                     10.0   // Y座標10
                    };
  sprite.pushAffineWithAA(matrix);

こちらも関数がpushAffineWithAA()に変わっただけです。

アンチエイリアス付きで出力されていますね。

拡大してみました。

※（追記）今回本文で利用している画面キャプチャですが、取得ロジックがおかしかったようで少しおかしな画像になっています。本当は上記の斜めのエッジはもう少しきれいに表示されています。

まとめ

アフィン変換難しい、、、

さて、今回は基礎だけで終わってしまいました。次回以降にもう少し突っ込んだ高速化とメモリマネージメントのノウハウを紹介したいと思います。

続編

LovyanGFX入門 その7 スプライトの中身

概要前回はスプライトの概要説明で終わってしまいました。今回は実際に使う上での注意点を説明したいと思っています。色数lcd.setColorDepth(16);sprite.setColorDepth(16);上記のようにLCDとスプライトは...

lang-ship.com

2020.11.09