原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【Unity】Splineを使ってアニメーションは作れるか

通知

Xの「***さんからの最新ポスト」という通知は不要だと思っている狭量な皆さんこんにちは。何かしら有益な内容なら嬉しいのですが、大概において一言、二言の内容でワザワザ通知しらもらう必要のないものばかりです。また自分のポストの通知も他のアカウントに疎ましく思われていそうで鬱になるので「いいね」数を非表示するぐらいなら、こちらの通知機能を削除して欲しい。

 

ゆったり楽しむゲーム

スタティック(静的)パズルゲームはPC初期のマイコン時代から倉庫番を始めとして数多くリリースされており、一発のアイディアがそのままゲームの根幹をなせるので、今でも新しい形のパズルゲームが生み出されています。
その中でも目を引くぐらい新しい仕組み、アイディアを実装したパズルゲームを最近購入しました。

 

ゲームルールは一般的なスタティックパズル同様、プレイヤーの移動とオブジェクトの操作で目的地までの経路を繋げる事なんですが、一枚絵となっているマップには裏面が描かれており、マップを折り紙のように折ることでその裏面と表面の経路とを繋げて目的地までの道を作っていく、というゲームとなっています。

現実的な構造よりも視覚的な繋がりを重視して解法を見つけるゲームと言えばMonument Valleyが有名ですが、こちらはその2D版と言えるゲームでマップを折ることで見える裏面の絵柄を利用してパズルを解いていきます。マップを織り込む方向は「縦」「横」「斜め」とある程度決まっているので総当たりすれば正解にたどり着きそうなんですが、マップ中には所定の場所に移動しないといけない岩や特定の方向にしか移動できないギミック等が配置されており、意外と一筋縄ではいきません。論理的に最初に折りこむ方向をに推理し、その後一旦折りたたんだマップを広げて、今度は別方向から折って……。というように、考えないといけません。

このゲームのオリジナルな点は「マップを折る」というアイデア一本なんですが、そのアイデアを十二分に生かすためにアクション性を排除し、絵本のような絵柄とゆるやかなBGMでユーザがじっくりと解法を探りゲームを楽しめるようにデザインされています。
また、絵柄を折りたたむという仕組みを存分に生かしたストーリーテリングも非常に素晴らしく、一見の価値があります。
夏休み期間中、時間の空いた時にゆったりと楽しめるゲームではないでしょうか。

 

Splineツール

Unity 2022以降のバージョンではSplineツールがUnity公式からリリースされており、誰でも導入する事が出来ます。
Splineツールを使うとUnityエディタ上でSplineを作成する事ができ、それを利用してSplineに沿ったオブジェクトの移動や、オブジェクトの生成が行えます。

www.karvan1230.com

色々多機能なSplineツールですが作成した曲線自体はゲーム画面に表示されないので、曲線を表示したい場合にはSplineに沿った位置情報を取得し、位置情報に従ってLineRendererを繋げるか、ポリゴンを生成するか、Shapesのような複数点を繋げた線が引けるアセットを利用するか等々により曲線を表示することになります。
ちなみにSplineの位置情報、方向の取得など、スプラインをスクリプトから扱う方法については以下の記事に詳しくまとめられています。

nekojara.city

 

SplineからSplineへ

私の場合、ShapesのPolyLineを使ってSplineの位置情報から繋げた線を表示するようにしていますが、ある時、Splineを表示している位置情報(ポイント)を別のSplineの位置へ移動(変化)させれば、Splineを表示している線が動いて見えるのではないかと思い立ち、少し試してみました。

上の動画は人が直線(Spline)から立っている絵(Spline)→走っている絵(Spline)へと位置情報を変化された結果ですが、思った通りスムーズに線が変形しているように見えます。

ならばこれを利用してコマ割りアニメーションのように、連続した複数の絵をそれぞれSplineで作成して、それを連続で変化させればアニメーションが作れるのではないか?と思ったわけです。

 

お試し

最初に以下ような波を表現した線を作成、波が右側へ移動するようなアニメーションを想定します。

波の位置を段階的に右へ移動した絵(Spline)を3枚ほど用意し、スクリプトで各Splineのそれぞれ位置情報を取得。LitMotionを使ってPolyLineの各ポイントをSpline上の位置情報へ連続で変化させてみます。

ん~・・・
・・・なんか思っていたのと違う・・・

波の位置が右へ移って行っている事は確認できますが、その途中で波の形が大きく崩れていることも分かります。
よく考えると、Splineの各位置情報はSplineの始点から終点までを一括して均等に分割して取得しているので、波の形を構成している箇所が移動しているわけではありません

この為、SplineAからSplineBの位置情報へ変化させていくと、その途中はAとBの中間点を移動していく事になり、波の形は保たれなくなるのです。

対策として波形のSplineを一本のSplineで表現するのではなく、形が変化しても良い部分と形が変化して欲しくない部分に分けて、変化しても良い部分の形を変化させるSplineを作ることとしました。

 

SplineはSplineツールで簡単に分割する事が出来ます。Spline上の点を選択すると編集ウィンドウが開くので、下部にある「Split」ボタンを押下します。

分割したSplineはSplineContainer内に配列として保存され、SplineContainer.Splines[Index]で各Splineを取得する事ができます。今回はこんな感じで分割しました。

この対応を施し、上記のSpline0,3を変化させたSplineを使用すると

波の形は保ったまま波が移動するようなアニメーションになりました。

 

歩行アニメーション

ここまではそれとなく上手くいったので、今度は実用性のありそうな歩行アニメーションに挑戦してみます。
歩行アニメーションとはいえ、人体の絵をそのままSplineにするのは時間が掛かりすぎるため、人体パーツを表現する特定の部位のみをSplineで表現しています。

 

上のSplineをベースに歩行アニメーションになるよう、各Splineを変形させていきます。今回は10個ほど作ってみました(結果的にはもっと少なくても良かった)

 

で、これを先ほどの同じ要領で位置情報を連続で変化させていくと・・・

おお、歩いているように見える!

PolyLineで一本の線で結んでいるため、各パーツの間に線が見えますが歩行アニメーションを作ることが出来ました。

 

最後に

当初の思惑通りコマ割りしたSplineの位置情報を連続して変化させることでアニメーションを作ることが出来ました。何かしらの演出には使えそうですね。

 

が!

アニメーションに沿ったSplineを作るのは非常に面倒くさいので絵が描ける方は描いた方が早いと思います。

 

以上

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。