Skip to content

mongonta0716/M5Stack-Avatar-collection

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

M5Stack-Avatar-collection

M5StackでAvatarを表示するアプリです。

Avatar表示は、robo8080さんのM5Stack_WebRadio_Avatorをベースにさせていただきました。 M5Stack-avatarのオリジナルはmeganetaaanさんのm5stack-avatarです。

背景にJPGファイルを使用したかったのでm5stack-avatarの古いバージョンを利用しています。

Contents

Avatar_fugu2

image

Avatar_penguin

image

AvatarPngGirl1

image

使い方(Usage)

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);

Avatar_fugu2,Avatar_penguin

sketchbookフォルダにソースや元画像が入っています。

背景

背景はavatar_???bg.cにデータがあります。まずはavatar???_bg.jpgを作成します。

  • サイズは320×240
  • MicroSoftペイントは保存すればそのまま使えます。イラストレーターの場合はプログレッシブオフ、マット無しでWeb用に保存をします。
  • 背景を作成する場合は目が移動する部分のマージンを取る必要があるので注意してください。(bgColorと同色)

JPGデータをCのソースへ変換する

下記リンクにあるbin2code.pyを使用するとcのコードに変換できます。(要Pythonの実行環境) https://github.com/m5stack/M5Stack/tree/master/tools

目と口

目と口の変更はavatar.cppとavatar.hの変更をします。変更は下記のCommitが参考になるかと思います。

Change from Fugu to UMA

AvatarPngGirl1

sketchbookフォルダにソースがあります。(画像データは入れていません。) 画像はコミPo!で作成しました。 背景はJPGで320×240でトリミング、目の部分はPNGで5パターン用意して160x44にトリミングします。

PNGデータをCのソースへ変換する。

下記リンクにあるpng2code.pyを使用するとCのコードに変換できます。(要Pythonの実行環境) https://github.com/mongonta0716/M5Stack_Test_tools/tree/master/tools

目と口

目はeye.cppとeye.h,口の変更はavatar.cppとavatar.hの変更をします。

Requirement

コンパイルする場合は、以下のライブラリが必要です。

Licence

GPLv3

Author

Takao Akaki