よこぼと申します。
超初心者です🔰
同じような初心者・初学者の方にも、
育成や普及活動を進める立場の方にも、
参考になるような記事をあげていけたらと思います。
よろしくお願いします🙇
=======================
魔法使いになりたいだろう？
多くのみなさんが一度は夢見たであろう
「魔法使いになりたい」
私が叶えて差し上げましょう👍
さっそくですが、こちらをお試しください。（iPhoneでも動きました）
https://yokobo103.github.io/AI-Lab-Site/ar/interactive_ar_magic3.html
※webカメラへのアクセス許可が必要です
というわけで、今回はMediaPipeを使って
指の本数を認識して魔法を発動する「インタラクティブAR」にチャレンジしました！！
苦労もしたけれども楽しかったです❗️
≪指の本数：発動する魔法≫
0：水魔法
1：雷魔法
2：炎魔法
3：毒魔法
4～5：防御魔法
=======================
なぜこれを作ろうと思ったのか？
きっかけは、4才の息子がショッピングモールで
"インタラクテイブな反応をするモニター"にドハマりしたことです。
（説明下手なんですが、モニターに自分の姿が映し出されて、手を振るとモニター上の魚が逃げてく、みたいなやつです）
これ自分で作れたら楽しそうだな、
ということで「インタラクティブAR」にチャレンジしてみることにしました。
ひとまず指の本数に従って魔法を出してみる、
みたいなイメージは早めにできあがったので、
あとはやってみるのみです！
=======================
Step1 まずは指の本数を数えてもらう
指の本数を数えられないと先に進めないので、
まずはそこからスタート！！
がしかし、意外と難しいんですね・・・
例えば次の画像。
「1」と表示してほしいのに「2」となってしまってます。
これは、親指が立っている認定されるせいなんですね😅やってみるとなかなか勉強になります📝
技術的な話なんですが、
最初はTensorFlowのHandposeを使っていたのですが、
手1本しか認識できなかったり精度が・・・だったりしたので、
GoogleのMediaPipe Handsを使用しました。
MediaPipeは手の21点のランドマークを検出してくれます。
（ランドマークを可視化するとこんな感じ）
ランドマーク間の距離から指の本数を認識するしくみになっています。
左手用と右手用で別々のコードを作ってもらいました。
=======================
Step2 プロトタイプをつくる
指の本数に従って魔法が出てほしいなぁ🤔
→GPTさんはすぐに作ってくれました。
これは早かった。
本当に最初のプロトタイプは、
2：炎魔法
5：バリア
しか出せませんでした。
ここでクライアント（息子）から
雷魔法、水魔法、毒魔法の要望がありましたので対応しました。
こんな感じですね↓
プロトタイプ1
https://yokobo103.github.io/AI-Lab-Site/ar/interactive_ar_magic.html
プロトタイプ2
https://yokobo103.github.io/AI-Lab-Site/ar/interactive_ar_magic2.html
=======================
Step3 魔法をもっとかっこよくする
まあここまででほぼほぼ目的達成したようなもんなんですが、
魔法はかっこよくなければいけません。
そこでアニメーションを付けようと思いました。
しかしながら、僕は動画AI無課金勢なので・・・
どうしたもんかと🤔
最初はRunwayで効果（短い動画）を作ってもらったんですが・・・
ウォーターマークが・・・（泣）
（まばゆいばかりの火炎弾とrunwayの弾幕）
runwayの利用規約上、ウォーターマークをトリミングするのはよくなさそうだったので、泣く泣く断念😭
というわけで次の手段として、
画像生成AIに「スプライトシート」というものを作ってもらうことにしました。
スプライトシートとは・・・
「複数の小さな画像を1枚の大きな画像ファイルにまとめたもの」のこと。
主にゲーム開発やWebデザインで、キャラクターのアニメーションやアイコンを表示するために使われます。
これは安定するまでなかなか時間がかかりました…
まあでもなんやかんやあって、ある程度安定して作れるようになりました👍
こんな感じです。
ちなみに炎魔法のスプライトシート生成プロンプトはこちら↓
Create a sprite sheet of a fireball magic effect. The sheet should be in a 3x4 grid (3 columns, 4 rows), totaling 12 frames. Each frame shows the same fireball in the exact same position, with a consistent camera angle, identical size and silhouette. The fireball is a glowing orb of swirling blue-orange flames, with a bright magical core and small sparks around it. The animation between frames should be subtle and smooth: only tiny flame deformation, small particle movement, no changes in size, no shifts in position, no rotation of the camera. Use a transparent background or a perfectly clean dark background with no artifacts. Do not add borders between the frames. Keep the spacing uniform so the image forms a clean grid. Style: fantasy VFX, high detail, crisp edges, no smoke, no extra objects. The output should look like a sprite sheet for a game or AR effect.
（横並びのスプライトシートはうまく作れなかったので、3x3や3x4で作ってもらった後に、Pythonで横並びに変換しました。GPT-image-1.5ならうまくいくかも？？）
ちなみにバリアと雷魔法だけ2種類のスプライトシートを使って少しだけ凝ってます👀⚡️
（発動のスプライトシートを別で作ってます）
あと、バリアで他の魔法を消せるようにしました！これはCodexたんにお願いしました。
=======================
念のためもう一回URL載せておきます！
https://yokobo103.github.io/AI-Lab-Site/ar/interactive_ar_magic3.html
今回はタイトルのステューピファイは打てないので、
今後改良していこうと思います‼️
いつかXRもやりたいなー✨✨
〜いまさら解説〜
【ステューピファイ】主に『ハリー・ポッター』シリーズに登場する呪文で、相手を麻痺させたり、気絶させたりする効果がある。
最後までお読みいただきありがとうございました‼️🐈