こんにちは、ニケです。
最近、Xで Stack-chan をよく見かけるようになりました。
小さな筐体にキャラクターが表示されて、音声で話したり、表情が変わったりするのを見ると、自分のキャラクターでも動かしたくなります。
というわけで、Stack-chan / Stack CoreS3向けの表情素材を作るためのローカルWebアプリ、StackFace Makerを作ってみました。
今回はこのツールの使い方を紹介していこうと思います。
リポジトリはこちらです。
このツールは、もともと EasyPNGTuber をベースに作りました。
ツール開発者のろてじんさん（@rotejin）には、この場を借りて改めてお礼を申し上げます。
StackFace Makerでできること
StackFace Makerは、ざっくり言うとキャラクター画像から標準表情を作り、そこから目ON/OFF × 口ON/OFFの4パターン x 表情差分を作るツールです。
もちろん、すでに標準表情の画像を用意できている場合は、標準表情生成を飛ばしてそのまま4パターン作成に進めます。
Stack CoreS3の画面は320x240なので、最終的にはこのサイズのPNGとして保存します。
セットアップ
まずはリポジトリをクローンします。
git clone https://github.com/tegnike/stackface-maker.git
cd stackface-maker依存関係は uv で入れます。
uv syncWebアプリを起動します。
uv run python web_app.py起動したらブラウザで http://127.0.0.1:8765 を開きます。
画像生成を使う場合は、画面上でGemini APIキーやOpenAI APIキーを入力できます。
未入力の場合は、環境変数 GEMINI_API_KEY / OPENAI_API_KEY を見に行くようになっています。
使ってみる
画面は左側に操作パネル、右側にマスクとプレビューがある構成です。
左側には「標準表情生成」「4パターン作成」「調整・保存」のタブがあります。
画像生成を使う場合は、最初にモデルとAPIキーを設定します。
任意: 最初の標準表情を作る
最初の標準表情画像がまだない場合は、「標準表情生成」タブを使います。
ここでは、作りたいキャラクター画像を選択して「標準表情を生成」を押します。
内部で、リポジトリに含まれている sample/standard/eyeON_mouthON.png を構図リファレンスとして使い、選択したキャラクター画像の髪型・目・雰囲気を反映した標準表情を生成します。
生成結果がよければ、「この画像を標準表情として使う」を押すと、そのまま「4パターン作成」タブに進めます。
少し違う結果になった場合は、追加指示を足して再生成しましょう。
すでに標準表情画像を用意できている場合は、このタブは飛ばして大丈夫です。
4パターンを作成する
まずは標準表情を読み込みます。
手元に標準表情画像がある場合は、ここでその画像を選択します。
「標準表情生成」タブで作った画像を使う場合は、生成結果を採用した時点で標準表情としてセットされます。
最終的に320x240のアスペクト比の画像を作成するので、横長4:3の画像が必要です。
目と口の状態は、どちらでも良いですが、両方ともON（開いている）にしておくのが好みの状態になりやすいです。
その後、反対状態の画像を生成します。
例えば標準画像が「目ON・口ON」なら、反対状態として「目OFF・口OFF」の画像を作ります。
「反対状態の画像を生成」を押すと、画像生成AIが反対状態の画像を作成します。
反対状態用プロンプトも入れられるので、たとえば次のような指示を足せます。
閉じている口は微笑んでいるような様子で。すでに反対状態の画像がある場合は、「反対状態の画像を選択」で手動指定することもできます。
マスクを調整する
標準画像と反対状態画像が用意できたら、「4パターンを作成」を押します。
すると、画像の位置合わせをしたうえで、目と口のマスクが自動生成されます。
赤い部分が差し替え対象のマスクです。
左側が目パーツ、下側が口パーツで、それぞれブラシで塗ったり消したりできます。
自動的に作成されたマスクでは、範囲が大きかったり、上手く選択できていないこともあるので、プレビューを見ながら必要な部分だけブラシで整えます。
マスクを編集すると、プレビューは自動で再反映されます。
フェザーはマスク境界をぼかす設定です。
少し入れると貼り付け感が減りますが、大きすぎると周囲の肌や髪も混ざります。
まずは5〜12pxくらいから試すのが良いと思いますが、デフォルトのままでも十分なことが多いです。
保存する
プレビューで問題なさそうなら、保存します。
保存時に「CoreS3用 320x240で保存」をONにしておくと、実機向けのサイズに縮小されます。
ZIPの中には感情名を含むフォルダが作られ、その中に4枚のPNGが入ります。
eyeOFF_mouthOFF.png
eyeON_mouthOFF.png
eyeOFF_mouthON.png
eyeON_mouthON.png表情差分を作成する
標準表情の4パターンが作れたら、同じ流れで別の表情も作れます。
「4パターン作成」タブで「喜び」「悲しみ」「怒り」「考え中」などの表情を選び、「この表情の画像を生成」を押すと、標準表情を元にした表情ベース画像を作成できます。
一覧にない表情を作りたい場合は、「驚き」「眠い」「ドヤ顔」のような名前をカスタム表情欄に入力すると、その表情名で生成できます。
感情画像用プロンプトを使うと、笑顔の強さや眉の角度など、その表情だけに追加したい指示も足せます。
表情ベース画像ができたら、あとは通常の手順と同じです。
その表情の反対状態の画像を生成または選択し、「4パターンを作成」で目ON/OFF × 口ON/OFFの素材を作ります。
表情ごとに保存すると、フォルダ名に表情名が入るので、後から整理しやすくなります。
作った素材を並べるとこんな感じです。
宣伝
普段XでAIツールやAIキャラクターについての発信をしているので、興味があったらフォローしていただけると大変喜びます🙇♀️
x.com