--- title: ステートマシン・アニメーションのつくりかた date: 2020-11-18T00:00:00.000Z updated: 2026-01-08T14:50:52.757Z tags: - making-of - study - fsm-animation - "2020" - 2020/11 - 2020/11/18 url: https://baku89.com/ja/2020/11/18/state-machine-animation --- # ステートマシン・アニメーションのつくりかた ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_07.png) ![](https://wp.baku89.com/wp-content/uploads/2020/11/2020-11-17-21-57-58.2020-11-17-21_59_17.gif) **追記 21/05/04** Nishiki さんのご指摘で、[一部のゲームエンジンではステートマシン・アニメーションという呼称がある](https://x.com/asta18425/status/1389261997330423810?s=20)と教わったので、技法名を改題。 [もちが縦横無尽に跳ねる Web サイト](https://s.baku89.com/hamiltonian-mochi/)をつくるにあたって、[グラフを使ってもち達の動き方を生成する話](/2020/11/17/hamiltonian-mochi)というを書いたのですが、実はこのもちアニメーション自体もまたグラフ状の時間軸、いわゆるステートマシン図（状態遷移）のような構造をしたタイムラインを持っています。いきなりそんな言われても...って感じですが。個人的にまだこの手法掘れるなと感じたので、Hackintosh のセットアップがてら書き残しておきます。 --- Web 系の方はひと目見たら分かると思いますが、このもちは、もちの動き方の全パターンをタイル状に配置した動画素材（スプライトといいます）をうまい具合に切り抜き・配置・再生することで動かしています。頭の悪い方法ですが、映像畑のプリレンダ―脳にはやさしいやり方です。もちろん、個々のもちの動きはその場で生成しています 。 ※補足までに、スプライトは Houdini、Redshift、After Effects で作りました。左半分にカラー、右半分はチャンネルの R にもちのマスク、 G = 影、B = GI（照り返し）を割り当て、シェーダでもちをタイル状に配置するのと同時に Photoshop みたくレイヤー合成しています。 上下左右の 4 方向からやって来て、同じく 4 方向へと跳んでいくので 4 × 4 = 16 パターンを用意しました。注意したいのは、このスプライトはもち視点で「マスからマスへと動いていく」過程ではなく、マス視点で「もちがやって来て、去っていく」までの素材だということです。だからループのつなぎ目は、もちが次のマスへと動くその中間地点にあたります。マスの中央でピタリと静止したところをつなぎ目にすれば必要なパターン数も少なくできるので楽なんですが、なにせおもちは柔らかいので、向きを変えるにもモニュンとしてくれたほうが嬉しいですよね。 ここで、もちの経路に名前をつけます。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_06-1440x960.png) 例えば、上からやって来て右へとはけていくのは U-R' と表せます。このように、あるマスは「もちがいずれかの方向からやって来るところ」という 4 状態から、「いずれかの方向へと去っていくところ」という 4 状態への変化を繰り返しています。こんな仕組みを賢く書き表せるのがステートマシン図（状態遷移図）です。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_07-1440x960.png) 矢印を数えるとちょうど 16 本です。この矢印上を今回の場合、2 秒・60 フレームかけて遷移していきます。つまり、このもち動画素材のタイムラインは、普通のアニメーションのように一直線のものではなく、いくつもの「状態」同士をつなぐグラフ構造をしていることになります。 ちなみに、○ から ○' へと変化した（やって来たもちを押し出した）後は、自分の方を指し示す隣のマスを探せば次の状態がわかります。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_05-1440x960.png) 「上に D'がいれば U に」といった遷移のルール そして、もちがぶつからず動けるパターンを[ここで紹介した方法](/2020/11/17/hamiltonian-mochi)で再計算し、その方向へと再びもちを押し出すということを繰り返します。だからこの仕組みはある種の[セル・オートマトン](https://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%AB%E3%83%BB%E3%82%AA%E3%83%BC%E3%83%88%E3%83%9E%E3%83%88%E3%83%B3)として捉えることが出来ます。面白くないですか? --- こういう、タイムラインがステートマシン図のような構造をとったアニメーションを、さしあたり「ステートマシン・アニメーション」と呼んでみることにしました。ゲーム開発ツールでは実際そうした名前の機能があるようです。無意識でしたが、[group\_inou のフリーダウンロードシングル](https://baku89.com/work/mansion)や[uri gagarn のアルバム](http://urigagarn.jp/for/)のサイトを作ったときにもこの手法を試しています。 ![](https://wp.baku89.com/wp-content/uploads/2014/06/group_inou_2.gif) フリーダウンロードなので、現実には無い CD を自作してコマ撮りしました。クローズした今は[輪ゴムをかけてます](http://g-a-l.jp/group_inou/mansion/) ![](https://wp.baku89.com/wp-content/uploads/2020/11/for.gif) 紙ジャケを見せたかったのでこれもコマ撮り ちなみに uri gagarn の方のステートマシン図はこのような感じです。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_09-1-1440x960.png) そういえば、学生時代に芸祭フィナーレでやった（今見るとクソおもんない）プロジェクションマッピングの本編までのカウントダウン映像も、友達に描いてもらった数字をステートマシン・アニメ―ションさせていました。多分この手法好きなんですね…。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/musabi-mapping.gif) 図書館の壁面に薄っすいプロジェクションをしたのが懐かしい ![](https://wp.baku89.com/wp-content/uploads/2020/11/hamiltonian_08-1-1440x960.png) --- 最近、和田淳さんの「[マイエクササイズ](https://myex.jp/)」や、セールで 1200 円だったので買った「[フィンチ家の奇妙な屋敷でおきたこと](https://www.youtube.com/watch?v=FKrtsGS9nKs)」をプレイしていて思ったんですが、ゲームを無理やり映像作品として捉えるとならば、ステートマシン・アニメーションの一種といえます。おもちのサイトはゲームではないにせよ、せいぜい 8 種類の状態に 16 種類の遷移しか扱わなかったので全てをムービーとして予め用意する出来ました。しかしほとんどのゲームは、画面として表示され得る状態やそこからのインタラクションによる遷移は天文学的数に及ぶので、データ量の現実性からその場でレンダリングする手法をとっていると考えることもできます。（ちなみに小さい頃、ヨッシーストーリーのカートリッジには全通りのスクリーンショットが入ってると思ってました） 一方、ゲームのチェックポイントなど、ステートマシン図の一部が一本の矢印に「くびれた」箇所（= 全プレイヤーがかならず通過する遷移）ではムービーが流れたりします。プリレンダ―のものもありますよね。これが過剰になるといわゆるムービーゲーになります。ノベルゲームなんかも、そこまで状態遷移の種類が複雑ではないのでボイスが付いたりします。 Netflix の「ブラック・ミラー : バンダースナッチ」も実写版ステートマシン・アニメーションとして考えられます。こんな複雑なグラフ、よく撮ったなぁ…。 ![](https://wp.baku89.com/wp-content/uploads/2020/11/image-6-1440x1026.png) [FULL BANDERSNATCH FLOWCHART  - Reddit](https://www.reddit.com/r/blackmirror/comments/aajk5r/full_bandersnatch_flowchart_all_branches_story/) 現状、主要な映像ソフトはステートマシン・アニメーションには対応していせん。（UI/UX プロトタイプツールには近い考え方の機能があります）この先もしそういう機能が実現されたら、映像とインタラクティブは更に溶けていくんじゃないかと、ふと思いました。[Glisp](https://glisp.app/docs/)に実装したいなぁー。