綴季の開発日誌

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

ゲーム「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

今後の投稿方針についての雑談

お久しぶりの投稿になります。間が空いてしまい申し訳ないです。

このブログは企画担当のsuminoが主に運営していますが、6月末は大学が忙しくて制作の進捗が上げられませんでした...

7月からはまたどんどん更新していくのでお楽しみに!

 

軽く今後の投稿方針についてお話したいと思います。

現在の当ブログは「ルリのキャラクターモデリング」についてが殆どを占めています。

カテゴリーから「DRESS > キャラクターモデリング」と進むと全ての記事が見れると思います。

僕らの活動は①CGアニメーション②音楽制作③ゲーム開発の3つを軸にしています。もちろん同じ世界観をベースにしているので横断する作業もありますが、キャラクターモデリングは①の活動の一つ、みたいなイメージです。

②の音楽制作については現在新曲を製作中です。こちらは9月初旬あたりに公開になるのかなと思います。そして③のゲーム開発についてですが、次回の記事からはそちらの企画も始めていこうと思います。

このブログはかなりニッチな内容になっていく気もしますが、後から見つけてくれた方がプロジェクト「DRESS」の軌跡を追えるものであるといいなと思います。たまにはこうして雑談回も交えるかもしれません。まだまだ方向性に悩みながらですが楽しく作っていきたいですね!

 

次回はゲーム「DRESS」の開発記事をスタートする予定です。それでは👋

 

「ルリ」のキャラクターモデリング進捗⑤ 上半身のモデリング

blenderのバージョン : ver3.3.0

 

はじめに

先日、ルリのキャラクターモデリングのタイムラプス動画YouTubeにアップしました!

www.youtube.com

こちらの記事では見れない細かいところまで動画になっているのでよければ是非見てください。

 

前回まで

前回は頭部のモデリングを行いました。

tsuzuki-color.hatenablog.com

 

今回は上半身のモデリングをしていきます。とても長いので要点をまとめる形でやっていきます。

上半身のモデリング

頭から首を伸ばし、鎖骨部分を作っていきます。次に肩の方に面を伸ばしていきます。

このとき首の面の数と肩周りの面の数が同じになるようにしておきます。

最後に首と肩の間の面を埋めていきます。基本的にはこれと同じような工程を繰り返して上半身を作っていきます。

背面を少し背中方向に伸ばしたら、胸回りを作っていきます。

UV球を変形させて画像のような面を作り、間に面を貼っておきます。

背中側から胸の横に面を繋いでいきます。脇の下になるのでねじれないように注意します。

肩回りの面を貼って腕へとつながる部分を整えておきます。

次に胸から下の面を作っていきます。肩回りと同じ要領で面の数を合わせながら伸ばしていきます。

同様に側面側も作っていきます。

ここまで終わるとトルソー部分が完成します。

 

上半身のモデリング

続いてお腹側をモデリングしていきます。

股の下を通してぐるっと一周、体のラインに合わせて面を伸ばしていきます。

股関節のライン→骨盤のラインの順に伸ばしていきます。正面と横面から見て形を整えながら作っていきます。最後に股関節と骨盤の間の面を埋めておきます。

腰から下の面を貼っていきます。同様に面の数に気をつけながら面を伸ばし、隙間を埋めていく手法です。真ん中に面を一周伸ばすとガイドラインになってくれるのでわかりやすいと思います。

面が貼れたら体のラインに合わせて調整していきます。多角形の面ができないように三角or四角ポリゴンにしておきます。骨盤あたりは少しサイドに膨らませると女性らしいシルエットになると思います。

最後におへそ部分を作っていきます。おへそ辺りの面を選択してIキーで面の差し込みを2回ほど行います。あとはGキーで適度に動かしてあげるとおへその窪みが出来ると思います。

こうして手足以外の体が完成しました!

おわりに

今回は上半身のモデリングを行いました。かなり画像が多くなってしまいました。体の作り方もモデラーさんによってそれぞれだと思います。服を常に着ている場合はポリゴン削減のために体を作っていないモデルも見たことがあります。3dモデルで何をするかに合わせて作り方も考えなければいけませんね。

 

はじめにも書きましたが、YouTubeにてタイムラプス動画をUPしました。僕自身3dcgモデラーとしてはまだまだ素人同然ですが、挑戦してみたい人にとっては何かしらの参考になると思います。是非見てみてください!

紫髪の巫女「ルリ」キャラクターモデリング / Original Character Modeling【Timelapse】 - YouTube

 

次回は手足/服のモデリングを行う予定です。

「ルリ」のキャラクターモデリング進捗④ 前髪/横髪のモデリングと頭部の完成

blenderのバージョン : ver3.3.0

 

前回まで

前回は顔のパーツのモデリングを行いました。

 

tsuzuki-color.hatenablog.com

今回は前髪/横髪をモデリングし、頭部を完成させるのが目標です。

前髪/横髪のモデリング

まずは前髪をモデリングしていきます。前髪は左右対称ではないので、ミラーモディファイアを使用することはできません。

まずは正面のイラストに合わせて頂点を編集していきます。このとき、髪の先端の頂点をマージしないように気をつけます。(左図)

次にループカットを加えて整えていきます。先ほど先端の頂点をマージしているとループカットを加えることができないので注意が必要です。(右図)

次に横面図に合わせていきます。奥側は三面図に描かれていないので、顔に埋もれない範囲で想像しながら整えていきます。

 

 

次に横髪をモデリングしていきます。こちらは左右対称なのでミラーモディファイアを使用します。まずは前髪と同様に①横面図に合わせて大まかな形を作り②ループカットを加えて正面図に合わせていきます。(どちらの方向から合わせてもいいと思いますが、横髪の場合は横面図の方が合わせやすそうでした)

 

髪のモデリングの方法は他にもありますが、今回は頂点から丁寧に作る方法を選びました。後に後髪を作る際にはカーブから髪の毛を作る方法を用いています。

頭部のキバのモデリング

続いて頭部のキバのモデリングです。こちらはルリのキャラクターデザインの大きな特徴の一つです。

基本的にはCubeにサブディビジョンサーフェスモディファイアを用いて、大まかに形を整えていきます。正直ここは無機物のモデリングと大して変わらないと思います。少し3dcgを勉強していれば作れる形ではないでしょうか。

横面図とも合わせていきますが、完璧に揃える必要はありません。細かい位置はベールを作ってから調整した方がいいかもしれません。

ベールのモデリング

最後にベールのモデリングです。こちらもキバと並んでルリの大きな特徴の一つです。

袋状なので少し難しいですが、頂点を編集してベールの輪郭部分を形成してから、横面図に合わせてEキーで伸展していきます。

Fキーで面を張って袋状にします。横面図に丁寧に合わせるとかなりいい形になるはずです。

ルリのベールは金属のアクセサリーで先端がまとめられています。先端側も同様にして形を作っていきます。形状がやや複雑ですが、布のふんわり感が出るように形を整えていきます。アクセサリー部分はとりあえず円柱のオブジェクトを変形して作ります。細かい部分は後から修正する予定です。

 

これでベール部分が完成しました。頭部全体で見るとこのようになりました!

かなりキャラクターの雰囲気が出てきたんじゃないでしょうか?

おわりに

今回は頭部のモデリングを行いました。淡々と過程を書いていくだけのブログであまり面白味に欠けるかなと最近思っています。もう少し工夫しないといけないですね。

キャラクターモデリングはすでに終了しているので、近いうちにタイムラプス動画をYouTubeにアップする予定です。そちらの方が分かりやすく過程が見られる気がします。ぜひお楽しみに!

 

次回は体のモデリングを行う予定です。

「ルリ」のキャラクターモデリング進捗③ 顔のパーツのモデリング

blenderのバージョン : ver3.3.0

 

前回まで

前回は顔のモデリングを行いました。

 

tsuzuki-color.hatenablog.com

今回は顔のパーツのモデリングをやっていきたいと思います。

 

目と眉のモデリング

まずは目からモデリングしていきます。

顔のモデリングの時と同様に、ミラーモディファイアを使って黒目部分を作ります。

これ以降も左右対称のパーツを作るときはミラーモディファイアを使っていきます。

続きを読む