ESP32マイコンでビデオゲーム ２（グラフィックス命令）

基本グラフィックス命令

　らびやんさんのLovyanGFXライブラリを使用するときに、たなかまさゆきさんのブログ「Lang-ship」に「LovyanGFX入門 その1 基本描画系」のサイトが参考になりました。

    書き込んだサンプルプログラムや上記サイトを見ると「drawLine」、「drawRect」、「fillRect」、「drawCircle」、「fillCircle」を使うと、グラフィックを使用できることが分かります。また、文字も「print」命令で出力できるため、この命令だけでかなりのUI(User Interface)を作ることができます。

オリジナル画像を表示させる

　参考にさせて頂いているブログ「Lang-ship」を読み進めると、「LovyanGFX入門 その5 画像描画」の記事に、LovyanGFXライブラリを使うとpng画像などの画像ファイルを「drawPng」命令で表示できるとあり、まずはサンプルを実行させました。

　

　自分で作成した画像を表示させます。ブログに従い、データファイルを作ります。

　Lang-shipサイトの「画像変換」を開き、画像ファイルを指定します。

　データ形式は「RAW Dump」にしました。

　

　送信ボタンを押すと、データが出来上がります。

　このデータをコピーして、ArduinoIDEの新規タブからファイル名「image.h」追加して、貼り付けます。

　「xxx.ino」のプログラムの先頭で「image.h」をインクルードします。これで、画像ファイルを組み込むことができます。

　実行したプログラム(setup、loop部のみ)

#include "image.h"
LGFX gfx;

void setup() {
  gfx.init();
}
void loop() {
  int x = rand() % gfx.width();
  int y = rand() % gfx.height();
  gfx.drawPng((std::uint8_t*)img, sizeof(img), x, y);
  delay(300);
}

　画像を表示させる命令は「drawPng」命令です。画像ファイルと座標を指定しています。

　データを作成するときの「RAW Dump」は画像データをそのまま16進データに変換していますので、メモリを必要とします。メモリが限られるマイコンなどでは色数を落としてデータを作る必要があります。RGB565では、1ピクセル16ビットデータに変換されます。

　画像をランダムな座標に表示しています。