綴季の開発日誌

ゲーム開発/楽曲制作に関する進捗ブログ

ゲーム「DRESS」の開発記録① Unityでの2D Animationの実装

Unityのバージョン : 2021.3.27f1

はじめに

今回からゲーム開発に関する企画をスタートします。「DRESS」は私たちのプロジェクト名でもありますが、最終的に完成を目指すゲームのタイトルでもあります。音楽やCGアニメーションなど、様々な方法を通じて楽しく制作を進めながら、最後はゲームという形で少女ルリの物語を体験していただきたいと思っています。

こちらの企画の内容は技術ブログに寄ってしまうかもしれませんが、世界観に関する記事は「世界観」カテゴリーにまとめていくので、そちらだけ見ていただいても大丈夫です✨

 

ゲーム「DRESS」について

◆ストーリーのあらすじ

とある宗教の巫女「ルリ」の支配する、黄泉の入り口と謳われる宗教都市「リア」。

そこに攫われてやってきた少女「ミライ」の脱出の冒険を描いた物語。

◆ルリについて

ルリについては以前に記事を書きました↓

tsuzuki-color.hatenablog.com

普通の少女だったルリは不思議な出会いをきっかけに異形へと姿を変えてしまいます。

そんな彼女の支配する街が、DRESSの舞台となる宗教都市「リア」です。

◆ミライについて

そしてゲーム「DRESS」の主人公であるミライを紹介します。

近隣の村からリアへと攫われてやってきた少女。臆病で怖がりな性格だが、家族の元に帰りたい一心で懸命に脱出の糸口を探す。しかしリアに潜む謎を垣間見たミライに数々の試練が襲いかかる。

今回もイラスト担当のセラススさん(https://twitter.com/cerasus_sussu)に描いていただきました!三つ編みが特徴的な可愛らしい少女に仕上げていただきました。

より詳しい内容は「世界観」カテゴリーの記事でまとめ直そうと思います。

 

Unityでの2D Animaitonの実装

ここからは開発記録の内容に入っていきます。

まずはゲームエンジン「Unity」でミライを2dキャラクターとして動かすことを目標にします。

◆PSBファイルのインポート

今回の開発では、Unityのバージョンは2021.3.27f1のLTS版を使用しています。

現在(2023年7月)リリースされているLTS(Long Term Support : 長期的にサポートしてくれてるバージョン)であれば、プロジェクトを作る際に2Dゲームのテンプレートを選択すると、2D PSD Importerというパッケージが導入されていると思います。

このパッケージがあれば、psbファイルをそのままUnityに読み込むことが可能です。

※注意点

似たファイル形式にpsdがあると思います。あまり詳しくないですが、psbファイルはphotoshopでのみ作成できる形式のようです。ただ、psdファイルの拡張子を直接psbに書き換える形でも機能するので、photoshopを持っていなくても大丈夫(らしい)です。

Projectウィンドウにドラッグ&ドロップしてSprite Editorを開くと下の画像のようになると思います。

 

◆Boneの追加

まずはCreate BoneからBoneを追加していきます。今回は腕のポーズを2種類用意してみました。どちらにもボーンを追加し、アニメーションする際は表示/非表示を切り替える方法を取ってみます。(ベストかは分からないので今後変更の可能性あり)

かばんの紐や三つ編みなどの揺れものに対してもボーンを追加します。

 

◆Bone Influenceの設定

次にボーンがどのSpriteに影響を与えるかを設定します。Bone Influenceを選択し、関連づけたいSpriteとBoneを選択して右下の+ボタンを押します。

 

◆Auto Weightの設定

関連付けが終わったら、Weightをつけていきます。Boneを動かした時にSpriteがどれくらい動くのかを決める工程です。BoneとSpriteが1:1に対応している部分は、ただSpriteがBoneに沿って動いてくれるだけですが、複数のBoneが1つのSpriteに関連づけられている場合はSpriteが変形するようになります。

画像で言うと体部分のSpriteには黄色と緑のBoneが関連づけられており、腰の部分で曲げ伸ばしができるようになっています。

 

こうしてミライのpsbファイルをAnimationさせることができるようになりました!

 

おわりに

次回は実際にAnimationを作っていきます。オリジナルのキャラクターが動き出すのはワクワクしますね!それでは✨

 

今回参考にさせていただいた記事はこちらです↓

hiyotama.hatenablog.com

learn.unity.com