M5stack きゃらっく作成方法

#きゃらっくとは？
英文字だと、charac ですね。
まあ、M5stackでキャラクターを動かしたい。でもどうするの？
難しすぎて．．．。

調べても、なかなか出てこないのを、ちょっとまとめています。

#環境
M5stack BASIC ＋SDカード16GB
PC Win10
Paint
Arduino 1.8.19

#お絵描き
元絵は、なんでもいいのですが、
わかりやすいようにWin10の標準ペイントで書いてみます。

画像サイズは320x240で用意。
ネコの絵を書きます。
24bitBMPでface16_2で保存します。

これで、元絵は完成です。

ここから作業です。
目を切り取ります。eye16で保存

目周辺を切り取ります。開始位置をメモって下さい。sp_eye16で保存します

目を修正します。eye16.bmpを開いて、目の周辺を白(0xFFFF)で塗りつぶします。そして上書き保存
目周辺を修正します。sp_eye16.bmpを開いて、目を白目にします（0xFFFF)で塗りつぶします。
できたら、上書き保存。

あとは、下記サンプルコードで試してください。
コード最後に、M5Display.cppより、BMPから配列にいれる為、関数をコピペして、修正する必要があります

#include <M5Stack.h>
#include "M5Display.h"


TFT_eSprite img   = TFT_eSprite(&M5.Lcd);
TFT_eSprite img2  = TFT_eSprite(&M5.Lcd);


int x = 57;
int y = 75;
int w = 135;


int flag = 0;


uint32_t sTime ;


void setup() {
  // put your setup code here, to run once:
  M5.begin();
  M5.Power.begin();

  M5.Lcd.setBrightness(30);
  M5.Lcd.clear();

  img.createSprite(250, 118); // 下記sp_eye16.bmpのpix値を入れる 値はファイル右クリックのプロバディ詳細に書いてある
  img2.createSprite(42, 70);  // eye16.bmpのpix値を入れる


  M5.Lcd.drawBmpFile(SD, "/img/face16_2.bmp", 0, 0);    //画面に描画
 
  drawBmpFile_saka(SD, "/img/sp_eye16.bmp", 0, 0, img); //ファイルからimgスプライトに描画

  drawBmpFile_saka(SD, "/img/eye16.bmp", 0, 0, img2);   //ファイルからimg2スプライトに描画

  face_up(); //スプライトを画面に描画コール
  sTime = millis();
}

void loop()
{
  if ((flag == 0) & (millis() - sTime > 1000)) {//1秒単位毎描画、"1000"を"random(10)*100"にすれば1秒～0.1秒で動く
    face_up();
    sTime = millis();
  }

}


void face_up() {

  x = random(20) + 57; // 目の開始位置x座標+20pixの目の動き乱数
  y = random(20) + 75; // 目の開始位置y座標+20pixの目の動き乱数

  img.pushSprite (30   , 56);         //メモった目の枠の位置に描く
  img2.pushSprite(x    ,  y, 0xFFFF); //右目描く
  img2.pushSprite(x + w,  y, 0xFFFF); //左目描く w=目の幅
  img.pushSprite (30   , 56, 0xFFFF); //再度目の白（0xffff)を透明にして描く
}

//下記M5Display.cppより該当するものをコピペし修正する。
// read16｛～｝,read32｛～｝,drawBmpFile｛～｝を下記にはりつけ、修正する。下記は修正した行しか記載していない

uint16_t s_read16(fs::File & f) {

uint32_t s_read32(fs::File & f) {

void drawBmpFile_saka(fs::FS & fs, const char *path, uint16_t x, uint16_t y, TFT_eSprite & tmpimg) {
  if ((x >= 320) || (y >= 240)) return;
  if (s_read16(bmpFS) == 0x4D42) {
    s_read32(bmpFS);
    s_read32(bmpFS);
    seekOffset = s_read32(bmpFS);
    s_read32(bmpFS);
    w = s_read32(bmpFS);
    h = s_read32(bmpFS);
    if ((s_read16(bmpFS) == 1) && (s_read16(bmpFS) == 24) && (s_read32(bmpFS) == 0)) {
      M5.Lcd.setSwapBytes(true);
         tmpimg.pushImage(x, y--, w, 1, (uint16_t*)lineBuffer);

以上