M5StackでAvatarを表示するアプリです。
Avatar表示は、robo8080さんのM5Stack_WebRadio_Avatorをベースにさせていただきました。 M5Stack-avatarのオリジナルはmeganetaaanさんのm5stack-avatarです。
背景にJPGファイルを使用したかったのでm5stack-avatarの古いバージョンを利用しています。
buildフォルダにあるbinファイル,jpgフォルダ,jsonフォルダをmicroSDカードにコピーします。 M5Stack LovyanLauncherから起動します。 LovyanLauncherの詳しい使い方は下記のブログを参照してください。
M5Stack LovyanLauncherの使い方｜ラズパイ好きの日記
下記のIn_eSPI.hの500行目ぐらいに定義があります。
https://github.com/m5stack/M5Stack/blob/master/src/utility/In_eSPI.h
自分で色を作成したい場合はM5.Lcd.color565(int r, int g, int b)を使うと変換できます。
例、肌色 const unsigned int HADAIRO = M5.Lcd.color565(255,233,218);
sketchbookフォルダにソースや元画像が入っています。
背景はavatar_???bg.cにデータがあります。まずはavatar???_bg.jpgを作成します。
- サイズは320×240
- MicroSoftペイントは保存すればそのまま使えます。イラストレーターの場合はプログレッシブオフ、マット無しでWeb用に保存をします。
- 背景を作成する場合は目が移動する部分のマージンを取る必要があるので注意してください。(bgColorと同色)
下記リンクにあるbin2code.pyを使用するとcのコードに変換できます。（要Pythonの実行環境） https://github.com/m5stack/M5Stack/tree/master/tools
目と口の変更はavatar.cppとavatar.hの変更をします。変更は下記のCommitが参考になるかと思います。
sketchbookフォルダにソースがあります。（画像データは入れていません。） 画像はコミPo!で作成しました。 背景はJPGで320×240でトリミング、目の部分はPNGで５パターン用意して160x44にトリミングします。
下記リンクにあるpng2code.pyを使用するとCのコードに変換できます。（要Pythonの実行環境） https://github.com/mongonta0716/M5Stack_Test_tools/tree/master/tools
目はeye.cppとeye.h,口の変更はavatar.cppとavatar.hの変更をします。
コンパイルする場合は、以下のライブラリが必要です。