M5AtomS3 で M5Stack-Avatar を使う

本記事について

M5AtomS3 で M5Stack-Avatar のサンプルを動かすと顔が画面に収まりません。(目だけが見える)

顔が画面内に表示されるようにします。

環境

• M5AtomS3
• M5Stack-Avatar 0.9.1

結論

main.cpp

#include <M5Unified.h>
#include <Avatar.h>

m5avatar::Avatar avatar;

void setupAvatar()
{
  avatar.setScale(0.4);
  avatar.setPosition(-56, -96);
  avatar.init();
}

void setup()
{
  auto cfg = M5.config();
  M5.begin(cfg);
  USBSerial.begin(115200);
  setupAvatar();
}

void loop()
{
}

これで行けました。

Scale

M5Stack-Avatar のサイズは 320x240 を想定して作られています。

Face.cpp

M5AtomS3 の解像度は 128x128 なので、横幅を合わせるために 0.4 倍にしています。

Position

void Avatar::setPosition(int top, int left)

setPosition

Scale は 320x240 で考えた時の中心を起点として働きます。
そのため、M5AtomS3 の中心から顔の中心までの距離を考えて、その分だけ左上にずらしています。

(320 - 128) / 2 = 96
(240 - 128) / 2 = 56

失敗した方法

320x240 ではなく 128x128 で設定したらどうなるかやってみました。

// 横幅128におけるFaceを作成する。もともとは320x240の設定のため、横幅にあわせて0.4倍に縮小する。
// 小数点は四捨五入

m5avatar::Face *face = new m5avatar::Face(
  new m5avatar::Mouth(20, 36, 2, 24),
  new m5avatar::BoundingRect(59, 65),
  new m5avatar::Eye(3, false),
  new m5avatar::BoundingRect(37, 36),
  new m5avatar::Eye(3, true),
  new m5avatar::BoundingRect(38, 92),
  new m5avatar::Eyeblow(13, 0, false),
  new m5avatar::BoundingRect(27, 38),
  new m5avatar::Eyeblow(13, 0, true),
  new m5avatar::BoundingRect(29, 92)
);

face->getBoundingRect()->setSize(128, 128);
avatar.setFace(face);

表示はできたのですが、アニメーションが320x240想定の動きなため単純なScaleになりませんでした。

具体的には breath アニメーションの影響値 (マジックナンバーの3) の影響です。

このあたりを頑張る意味はあまりないと思うので setScale , setPosition で対応するのが良さそうです。

サイズの調整

少し小さいので、目と口は大きくしてもいいかなと個人的には思いました。

.cpp

void setupAvatar()
{
  avatar.setScale(0.4);
  avatar.setPosition(-56, -96);

  // 目と口のサイズを1.5倍にする
  Face* face = avatar.getFace();
  face->setLeftEye(new Eye(12, false));
  face->setRightEye(new Eye(12, true));
  face->setMouth(new Mouth(50, 90, 6, 60));
  avatar.init();
}