MacでStackChan物語 #7 オリジナルの表情を作る まばたき、呼吸、スピーク

今回の結果を動画にしました！

前回スタックチャンの標準の顔を差し替えるところまでやりました。
今回はそのせいで止めてしまった、
呼吸
まばたき
会話のときの口の開き
など、表情機能を復活させようと思います。

標準の画像を元に表情ケースを作成

blink.png ← まばたき
speaking.png ← 口が開いた状態
breath.png ← 少し上下に動いたような絵

呼吸は標準の画像に対して若干上にずらしただけですね。
この3枚が連動するだけでスタックチャンはかなりイキイキしそうです。

画像名がハードコーディングになったとしても、
命名規則だけまもれれば、他のキャラクター変えるのは簡単そうですね。

こっからはやったことをchatGPTにまとめてもらいました。

開発の目標

通常のStackChanは、

• ベクター画像で目や口を描画

• Modifierで目や口を動かす

という構成になっています。

しかし今回は、

完全オリジナルのイラストを使いたかったため、

PNG画像をそのまま表示する方式へ変更しました。

最終的な目標は、

• オリジナルキャラクター

• AI.AGENT対応

• 自然なアニメーション

です。

まずは画像を準備

今回用意した画像は4枚です。

neutral.png
通常の表情

blink.png
目を閉じた状態

speaking.png
口を開いた状態

breath.png
呼吸時（全体を8px上へ移動）

最初は240×240画像をそのまま表示していましたが、顔が小さく見えてしまいました。

そこで、

• 顔を画面いっぱいまで拡大

• 240×240へトリミング

することで、自然なサイズになりました。

ImageAvatarを新しく作成

従来のDefaultAvatarではなく、

新しく

ImageAvatar

を作成しました。

役割は非常にシンプルです。

PNG画像を表示するだけ

画像を切り替えることで、

表情を表現します。

image.h

image.hでは、

ImageAvatarの設計だけを定義しました。

例えば、

showNeutral()

showBlink()

showSpeaking()

showBreath()

などの関数を用意しています。

また、

neutral.png

blink.png

speaking.png

breath.png

を読み込むためのメンバーも追加しました。

image.cpp

こちらが実際の処理です。

ここでは

• PNGの読み込み

• 一定時間ごとのまばたき

• 会話中の口パク

• 呼吸アニメーション

を実装しています。

例えば

showBlink()

が呼ばれると、

_image->setSrc(&_blink_image);

となり、

表示画像が切り替わります。

stackchan_display.cc

このファイルは

AI.AGENT

↓

ImageAvatar

をつなぐ橋渡しです。

例えば、

AIが話し始めると、

setSpeaking(true)

AIが話し終えると、

setSpeaking(false)

となり、

ImageAvatar側で

neutral.png

↓

speaking.png

を繰り返すようになります。

画像アバター化で発生した問題

実はここが一番苦労しました。

StackChanは、

もともと

左目

右目

口

というFeatureを動かして表情を作っています。

しかし、

画像アバターには

左目

右目

口

という概念がありません。

そのため、

AI.AGENT起動直後に

Guru Meditation Error

が大量に発生しました。

原因は、

Modifierが

avatar.leftEye()

avatar.rightEye()

avatar.mouth()

へアクセスしていたためです。

画像アバターでは存在しないため、

NULL参照となっていました。

解決方法

ImageAvatarに

hasMovableFeatures()

を追加しました。

bool hasMovableFeatures() const override
{
    return false;
}

そして、

ModifierやDisplay側では、

if (avatar.hasMovableFeatures())
{
    avatar.mouth().setWeight(0);
}

のように、

Featureが存在するときだけ

処理を実行するよう修正しました。

この修正によって、

AI.AGENTは画像アバターでも

正常に動作するようになりました。

完成したアニメーション

現在は、

画像だけで

まばたき

neutral

↓

blink

↓

neutral

呼吸

neutral

↓

breath

↓

neutral

会話中

neutral

↓

speaking

↓

neutral

というアニメーションを実現しています。

修正した主なファイル

今回変更したファイルは次の3つです。

image.h

ImageAvatarの設計

image.cpp

画像切り替えとアニメーション

stackchan_display.cc

AI.AGENTとの連携

逆に、

stackchan.cpp

は一切変更していません。

今後やりたいこと

ここまでで、

画像アバターとしてはかなり完成形に近づきました。

今後は、

• 😊 Happy

• 🤔 Thinking

• 😴 Sleep

• 😲 Surprise

• 😢 Sad

など、

AIの感情に合わせて画像を切り替える仕組みを追加したいと思っています。

最終的には、

AIが感情に応じて自然に表情を変える、世界に一つだけのStackChanを目指しています。

【参考にしていただけましたら、よかったらフォローと、スキ❤️を、そしてX（Twitter）でシェアと感想を頂けると幸いです】