【ｽﾀｯｸﾁｬﾝ】PCにｽﾀｯｸﾁｬﾝを召喚、皆で愛(め)でよう！

1. ｽﾀｯｸﾁｬﾝをデスクトップ上に召喚したい！

　ｽﾀｯｸﾁｬﾝ界隈のみなさま、こんにちは。
　昨日(2024/10/06)に作業を行い、無事にWindowsデスクトップにｽﾀｯｸﾁｬﾝを召喚できましたので、忘れないうちにワイもメモを残しておければと思います。

　最初 イナバさん が年末年始のタイミングで 【ﾃﾞｽｸﾄｯﾌﾟﾁｬﾝ】 として召喚、X投稿していたのが気になっていました。今回 くうねるさん がデスクトップ音声でのリップシンクなﾃﾞｽｸﾄｯﾌﾟﾁｬﾝを公開してくれましたので 『これはやらない訳にはいかないな…』 なんて勝手に思っちゃいましたん！
　PCの再生に合わせたリップシンクができると、かなり色々な事ができるものと思います。当然、音楽再生に合わせて歌わせてみたり、生成AIを再生した際におくちを動かしてしゃべっている感を出したり。PCがベースですので、複数モニタの1つにﾃﾞｽｸﾄｯﾌﾟﾁｬﾝを常駐させ、そこで再生させるも良いし、ワイヤレスモニターにすれば、あたかも単独ロボとして見せるような小技もできるでしょう。これは夢が膨らみますねｗ

下記は最初にイナバさんが公開したネタです。

その後 Nekomimi LED でも有名な わししさん が、ビルド環境含めて公開されたメモがこちらです。

2. ビルド環境を整備しよう！

　今回、よくよく環境準備に漏れがなければ、そこまで難しい内容ではないものと思いますが、私も最初は上手くいかなかったのもあり、是非そこは後世にお伝えできればと思いましたｗｗｗ
　ちなみにですが…既にM5Stackデバイスを使ってｽﾀｯｸﾁｬﾝを召喚している方々は、M5Burnerを使って魂を注入するだけでなく、VSCodeを利用してご自身でソースを落としてビルドしている方も多いのではないかと思います。VSCodeの環境設定はそれだけで説明が長くなっちゃうのでここでは割愛しますが、VSCodeを落としてきてインストール、日本語化する…ってぐらいの意識で簡単に準備できるものと思います。他のｽﾀｯｸﾁｬﾝ関連サイトもご覧いただければ幸いです。

2-1. WindowsでGCCコンパイル

　ワイは まっく とハンドルネームを名乗っているにも関わらず、macOSはまったくわかりません。環境がないんですｗｗｗ。会社でも、自宅でももうずっと…MS-DOS 5.0、Win3.1時代からマイクロソフトで育ってきちゃいまして。(でもPC-UNIX系はSunOS4.1.3あたりから始まり、FreeBSDへ移行という流れも経験しているので、macOSがイヤイヤという訳でもないのです。偶々触る機会がないだけっすねー)

　…という事で、Winマシンでのビルド条件となる GCC を入れておきます。実際にGCCコンパイルする場合、今回紹介するMSYS2を使用する手法ではなく、別のGCC導入手法(直接MinGW64を配置)でもビルドは可能なはずですが、開発元の源流となるイナバさん環境に合わせるのが一番素直かと思いますので、今回は 【MSYS2】 をインストールします。ソフトウェア的な細かい話に関してもここではスキップ、このインストールはトータル開発ツール群を入れるよーと思っていただければ幸いです。

　まずはサイトに行き、必要なEXEをダウンロードします。これはPC毎に表示が異なるかもしれませんが、私の環境の場合はIntel CPU 64bitなのでX86のこちらが表示されました。

　後は、このEXEファイルをダブルクリックしてインストールを進めます。インストールディレクトリは C:\msys64 のままで良いかと思います。インストール手順は、上記サイトにキャプチャも貼られていますので、そちらをご覧ください。

　その後、無事にインストールされるとターミナルが起動します。そのターミナル内で下記を打ち込んでください。

pacman -S mingw-w64-ucrt-x86_64-gcc

　別途関連モジュール等がインストールされますが、これでGCC周りの準備はOKです。関連モジュールのインストールが終わったら正常に認識されているか？を下記コマンドを打って、バージョン情報が返ってくれば問題ありません。

gcc --version

2-2. Windows環境変数でPath登録

　ワイ、ここの文字列が間違っていて…上手くいかないなあ…なんてハマりがありましたのでお気をつけください。指差し確認大事ですｗ

　GCC環境のインストールが終わった後、Windowsでちゃんと実行ファイルが認識するようにPath登録を行います。みなさまのやり方がいくつかあろうかと思いますが、私が良くやる方法として、下記を紹介します。

　Windows環境変数を呼び出す際 【スタート】⇒【設定(歯車マーク)】 をクリックすると、下記の設定画面が表示されると思います。画面中央上の検索バーに システムの詳細設定の表示 と打ち込んでいくと、既に途中でアイコンが補完されて出てくると思いますので、これをクリックしてください。(他の行き方もありますが、これがなんだかんだで速いｗ)

下記の システムのプロパティ ポップアップウィンドウが表示されたら、すかさず 環境変数 ボタンをクリックします。

環境変数ですが、ワイは個別ユーザでなくシステム全体で登録したいと思い、下の赤枠のところをクリックして次画面へ移ります。

右ペインの 【新規】 ボタンを押し、一番下に1行追加され入力フィールドが出た状態になったら、次は 【参照】 を選びます。先ほどMSYS2がインストールされた3つの場所を指定してください。

C:\msys64\mingw64\bin
C:\msys64\ucrt64\bin
C:\msys64\usr\bin

2-3. SDL2の上書きコピー

　次にライブラリ関係のファイルコピーを行います。まずはSDL2と呼ばれるものをダウンロードしましょう。場所はこちらです。GitHubのリリースダウンロードから、SDL2系の一番新しいものを選んでください。(既にSDL3が表示されていると思いますが、こちらはワイの方では動作未確認となります。)

　ダウンロードするのは SDL2-devel-2.30.8-mingw.zip を選びました。このファイルは2024年10月7日現在のバージョンとなりますので、そこは上手に読み替えてください。

　ダウンロードしたZIPファイルをお手元で解凍します。そうしますと bin include lib share の4つのフォルダが出てきますので、これらをコピーし、先ほど 2-1. でインストールしたMSYS2のフォルダ C:\msys64\mingw64 以下に上書きコピーをしてください。

SDL2の解凍したフォルダ群

C:\msys64\mingw64 へ上書きコピー

3. 早速、ﾃﾞｽｸﾄｯﾌﾟﾁｬﾝを呼び出そう！

　これで環境は大体整いました。早速ﾃﾞｽｸﾄｯﾌﾟﾁｬﾝを呼び出してみましょう！

3-1. くうねるさんソースコードをVSCodeでビルド

今回、GitHubへリップシンクなﾃﾞｽｸﾄｯﾌﾟﾁｬﾝを公開してくれた、くうねるさんのリポジトリへソースコードを取りに行きます。

下記画面の緑色のボタン 【Code】 をクリックすると、その下に Download ZIP と表示されますのでこちらをクリックして、対象のコードをまるっとダウンロードします。

　ご自身が利用している環境に合わせて解凍をしてください。その後、VSCodeにて フォルダを開く 等を選び、ソースコードを確認します。ビルド方法のやり方はいくつかありますが、ワイは下のボタンを良く使います。
　Build ⇒ Upload と順番に押して、問題がなければ画面上にｽﾀｯｸﾁｬﾝが表示されるものと思います。何か音楽の再生やYouTube等を使って、ちゃんとおくちが動くか？を確認してください。

3-2. M5Stackフレームの表示、キャラクターの変更

　実は、M5Stack/M5StickC/M5Dialなどに合わせフレーム表示ができます。ｽﾀｯｸﾁｬﾝとして利用するならば、フレーム表示はあった方が見栄えは良いかもしれません。逆に他キャラクター表示だと邪魔になってしまうかもしれません。シチュエーションや利用方法によってお好みで、下記を参考に設定を変更してみてください。ちなみに、M5StickCやM5Dialは表示がずれます。顔表示の調整が必要ですので、そこは是非ご自身でチャレンジしてみてくださいね。

　-DM5GFX_SHOW_FRAME 行を追加することでフレーム表示が可能となります。

　また -DM5GFX_SCALE=1 の部分の調整で大きさを変更できます。こちらも利用方法によって調整ください。

platformio.ini

build_flags = -O0 -xc++ -std=c++14
    -lSDL2                               ; for Display avatar
    -DM5GFX_SHOW_FRAME                   ; M5Stack/Stick/Dial等のフレーム表示有無
    -DM5GFX_BOARD=board_M5Stack          ; for Display avatar M5Stack
    ; -DM5GFX_BOARD=board_M5StackCore2   ; for Display avatar M5StackCore2
    ; -DM5GFX_BOARD=board_M5StackCoreS3  ; for Display avatar M5StackCoreS3
    ; -DM5GFX_BOARD=board_M5StackCoreInk ; for Display avatar M5StackInk
    ; -DM5GFX_BOARD=board_M5StickCPlus   ; for Display avatar M5StickCPlus
    ; -DM5GFX_BOARD=board_M5StickCPlus2  ; for Display avatar M5StickCPlus2
    ; -DM5GFX_BOARD=board_M5Dial         ; for Display avatar M5Dial
    -DM5GFX_SCALE=1                      ; avatarサイズの大きさ設定 1～3 ぐらい
    -lmmdevapi -luuid -lole32            ; for Get Desktop Volume

キャラクター変更は main.cpp の86行目以降の項目で調整します。
　利用したいキャラクターに対して、カスタムアバターの部分のコメントを外してビルドしましょう。キャラクターによっては、バックグラウンドカラーを 黒 ⇒ 白 へ、顔表示を 白 ⇒ 黒 へ変更が必要なものがあります。(例えば ちいかわ とか) そちらに関しては下記の行の部分のコメント・コメントアウトを入れ替えて色を逆転させてご利用ください。

    cp->set(COLOR_PRIMARY, TFT_WHITE);
    cp->set(COLOR_BACKGROUND, TFT_BLACK);
    // cp->set(COLOR_PRIMARY, TFT_BLACK);
    // cp->set(COLOR_BACKGROUND, TFT_WHITE);

main.cpp

void setup() {
    M5.begin();

    // カラーセット変更用
    // デフォルト
    // COLOR_PRIMARY -> TFT_WHITE
    // COLOR_BACKGROUND -> TFT_BLACK
    ColorPalette *cp;
    cp = new ColorPalette();
    cp->set(COLOR_PRIMARY, TFT_WHITE);
    cp->set(COLOR_BACKGROUND, TFT_BLACK);
    // cp->set(COLOR_PRIMARY, TFT_BLACK);
    // cp->set(COLOR_BACKGROUND, TFT_WHITE);
    avatar.setColorPalette(*cp);

    // カスタムアバター（サンプル、未定義の場合デフォルトのｽﾀｯｸﾁｬﾝの顔）
    // avatar.setFace(new AsciiFace());
    // avatar.setFace(new ChiikawaFace());
    // avatar.setFace(new DanboFace());
    // avatar.setFace(new GirlFace());
    // avatar.setFace(new KenFace());
    // avatar.setFace(new MaroFace());

    avatar.init(8);
}

っということでこんな感じに表示されます。
どうでしょう？上手くいきましたか？

4. 最後に…

　取り急ぎ、自分メモのような形で書きなぐりましたが、これで忘れないかと思います。ワイの中でのポイントはPath設定でした。この部分、手打ちして脱字があったようで、最初はビルドに失敗していました。
　ちょうど昨日はおうちの事をやっていて集中して対応できない中、Xに投稿していたら、みなさま気にかけていただき、問題はすぐに解決できて良かったです。ｽﾀｯｸﾁｬﾝ界隈の重鎮の方々のコメントが非常に参考となりました。
また、何か機会があれば書き残していければと思います。

ではではｗ

2024/10/08 追記

おくちの動きをもっと柔軟にさせるため、パラメータで可変できるように少し void loop() を改修しました。詳しくはこちら。

Credit

• くうねるさん
• イナバさん
• わししさん
• タカヲさん
• まっく＠まるちぷろとこる