ImageAvatarLite for M5Stack Core2 and M5Stack Fire
ドキュメントも行き届いていません。その点はご了承ください。
あらかじめ用意した画像ファイル（BMP)とJSONファイルの設定を組み合わせてAvatarを作成できるアプリです。
- VSCode(Ver.1.55.1)
- PlatformIO
バージョンについてはplatformio.iniを見てください。
- LovyanGFX
LovyanGFXはVer.0.3.12までしか動きません。0.4.0以上ではメモリが足りないようで画面が表示されなくなります。 - ArduinoJSON
- ESP32-Chimera-Core
★ESP32-Chimera-CoreはボタンCの制御しか使っていないので必須ではありません。
メモリの都合上PSRAMが必要なのでM5Stack Core2とM5Stack Fireのみを対象にしています。 4bitBMPを使用し、カラーパレットを使用することにより他の機種でも動きますが手順が複雑なのでCore2のみとします。
- SDカードのルートにdataにあるフォルダ(bmp,json)をコピー
- プログラムを書き込むとAvatarが起動します。
- 口は開閉を繰り返すだけです。BtnCを押すと表情が切り替わります。
stack-chanとの組み合わせてサーボを使って動かす機能もあります。 ButtonBを押すとサーボが動き、もう一度ButtonBを押すとサーボが停止します。 サーボを利用しないときはmain.cppの下記の行をコメントにしてください。
// サーボを利用しない場合は下記の1行をコメントにしてください。
#define USE_SERVO
サーボの接続はデフォルトは21, 22となっています。別のピンを利用する場合はmain.cppの下記の行を変更してください。
#define SERVO1_PIN 21
#define SERVO2_PIN 22
/bmp/にはBMPファイル(サンプルでは全部で11ファイル)
/json/にはM5AvatarConfig.json
main.cppの下記の行を変更するとJSONファイルとBMPファイルの収納場所をSDかSPIFFSか指定できます。SPIFFSに置くと開発するときにVSCodeからUploadできるようになり、SDカードを抜き差しして書き換える手間が省けます。
fs::FS json_fs = SD; // JSONファイルの収納場所(SPIFFS or SD)
fs::FS bmp_fs = SD; // BMPファイルの収納場所(SPIFFS or SD)
ESP32 with VS Code and PlatformIO: Upload Files to Filesystem (SPIFFS)
自分で24bitか16bitのBMPファイルを用意すると好きな画像をAvatar化することが可能です。
サンプルの画像ファイルは全て24bitBMPファイルでWindows標準のペイントソフトを利用しています。
- 頭用BMP
背景となる画像ファイル320x240もしくは傾けるのであれば少し余裕が必要です。
開いた状態と閉じた状態の２種類×表情の数だけ必要です。(同じパーツを流用も可能)
- 開いた目と閉じた「右目」のパーツ（左目は右目を反転させて表示します。）
サンプルではnormal,sad,angryの3種類用意してあります。
- 開いた口と閉じた口のパーツ
サンプルでは開いた口normal,sad,angryの3種類と閉じた口は共通パーツとして用意してあります。
目と口の透明化したい部分は透明色(M5ImageAvatar.json)で塗りつぶします。サンプルでは緑（0x00FF00）になっています。
下記を参考にして、JSONファイルを書き換えてください。
{
"expression": [ // 表情（デフォルトは最大8パターンまで）
"normal",
"sad",
"angry"
],
"sprite_info": {
"psram": "true", // PSRAMの仕様有無（8bit以上ではtrueのまま）
"color_depth": 16, // 使用するBMPのカラー(4,8,16)
"swap_bytes": 0
},
"color_info": {
"skin" : "0xFF5B00", // 未使用
"eye_white" : "0xFFFFFF", // 未使用
"transparent" : "0x00FF00", // 透明色
},
"fixed_parts": [
{
"parts": "head",
"x": -10, // 頭部パーツの開始X座標
"y": -10, // 頭部パーツの開始y座標
"w": 340, // 頭部パーツの幅
"h": 260, // 頭部パーツの高さ
"filename": "/bmp/head.bmp" // 頭部パーツのファイル名
}
],
"mouth": [ // 口のパーツ設定
{
"normal": { // 表情"normal"の口設定
"x": 160, // 口パーツの開始x座標
"y": 200, // 口パーツの開始y座標
"w": 60, // 口パーツの幅
"h": 60, // 口パーツの高さ
"filename": {
"open": "/bmp/mouth_op_normal.bmp", // 開いた口
"close": "/bmp/mouth_cl_normal.bmp" // 閉じた口
},
"minScaleX": 1.0, // 未使用
"maxScaleX": 1.0, // 未使用
"minScaleY": 0.3, // Y軸の拡大率がこれより小さくなると閉じる
"maxScaleY": 1.0 // 未使用
}
},
{
"sad": { // 表情"sad"の口設定
"x": 160,
"y": 200,
"w": 60,
"h": 60,
"filename": {
"open": "/bmp/mouth_op_sad.bmp",
"close": "/bmp/mouth_cl_normal.bmp"
},
"minScaleX": 1.0,
"maxScaleX": 1.0,
"minScaleY": 0.3,
"maxScaleY": 1.0
}
},
{
"angry": { // 表情"angry"の口設定
"x": 160,
"y": 200,
"w": 60,
"h": 60,
"filename": {
"open": "/bmp/mouth_op_angry.bmp",
"close": "/bmp/mouth_cl_normal.bmp"
},
"minScaleX": 1.0,
"maxScaleX": 1.0,
"minScaleY": 0.3,
"maxScaleY": 1.0
}
}
],
"eye": [ // -------------------------------- 目の設定
{
"normal": { // 表情"normal"の目設定
"rx": 120, // 右目開始X座標
"ry": 100, // 右目開始Y座標
"lx": 200, // 左目開始X座標
"ly": 100, // 左目開始Y座標
"w": 40, // 目の幅
"h": 60, // 目の高さ
"filename": {
"open": "/bmp/eye_op_normal.bmp", // 開いた目のファイル名
"close": "/bmp/eye_cl_normal.bmp" // 閉じた目のファイル名
},
"minScaleX": 1.0, // 未使用
"maxScaleX": 1.0, // 未使用
"minScaleY": 0.3, // 拡大倍率がこれより小さくなると閉じる
"maxScaleY": 1.0 // 未使用
}
},
{
"sad": { // 表情"sad"の目設定
"rx": 120,
"ry": 100,
"lx": 200,
"ly": 100,
"w": 40,
"h": 60,
"filename": {
"open": "/bmp/eye_op_sad.bmp",
"close": "/bmp/eye_cl_sad.bmp"
},
"minScaleX": 1.0,
"maxScaleX": 1.0,
"minScaleY": 0.3,
"maxScaleY": 1.0
}
},
{
"angry": { // 表情"angry"の目設定
"rx": 120,
"ry": 100,
"lx": 200,
"ly": 100,
"w": 40,
"h": 60,
"filename": {
"open": "/bmp/eye_op_angry.bmp",
"close": "/bmp/eye_cl_angry.bmp"
},
"minScaleX": 1.0,
"maxScaleX": 1.0,
"minScaleY": 0.3,
"maxScaleY": 1.0
}
}
],
"init_param": [ // 初期設定（特に変更は必要ないですが表情の数必要です。）
{
"normal": {
"eye_l_ratio": 0.0, // 左目を開く倍率
"eye_r_ratio": 0.0, // 右目を開く倍率
"mouth_ratio": 0.0, // 口を開く倍率
"angle": 0.0, // Avatarの角度
"breath": 0 // Avatarが息使いする高さ
}
},
{
"sad": {
"eye_l_ratio": 0.0,
"eye_r_ratio": 0.0,
"mouth_ratio": 0.0,
"angle": 0.0,
"breath": 0
}
},
{
"angry": {
"eye_l_ratio": 0.0,
"eye_r_ratio": 0.0,
"mouth_ratio": 0.0,
"angle": 0.0,
"breath": 0
}
}
]
}
head.bmpをhead_potato.bmpに変更すると、〇ルカーっぽい何かになります。
このソフトを作成するにあたり、動きや構造の元となったM5Stack-Avatarを作成・公開してくださったmeganetaaan氏に感謝いたします。
ImageAvatarを実現するにあたり優れたパフォーマンス、機能を持ったLovyanGFXの作者lovyan03氏に感謝いたします。
ImageAvatar作成するにあたり、 初期の頃からたくさんのアドバイスを頂き、参考にさせていただいたM5Stack_WebRadio_Avatarの作者robo8080氏に感謝いたします。