【Unity】セガサターンのCD再生画面を再現する - その1【Blender】

f:id:amayoshitqs:20201028002756p:plain

セガサターンに一般的な音楽CDを入れるとそのままCDプレイヤーとして機能します。
そしてこの画面、音の強弱に合わせて左右の立方体が球体に近づき、拡大縮小し、色が変わり、回転します。

これからUnityとBlenderを使ってこの画面を再現していきます。
Blenderの知識は特に必要としないため、今回初めて触る人もご心配なく。

今回はBlenderでシェイプキーを仕込んだモデルを作るところまでを書きます。
多分Blenderを使うのは今回きりです。

目コピ

www.youtube.com

まず動画を見てどんな機能が必要か考えてみます。
左右の立方体だけを取っても必要な工程は以下の通り。

  1. 音に合わせて球体に変形する
  2. 音に合わせて拡大する
  3. 音に合わせて緑色 -> 赤色に近づける
  4. 再生中は無造作に回転、未再生ではx軸回転?

こんな具合です。
今回は個人的に一番厄介な1.の球体変形を行います。
と言ってもBlenderを使えば無料で簡単に作れますが。 ​

セットアップ

Blenderのインストールを済ましてある体で進めます。
各種設定などは私も日本語化ぐらいしかしてないので特に言及することはありません。
ちなみに私はSteam版を使ってます、作業時間が累積されるので。

また、Blenderの操作に関してはあまり細かくは説明できないと思いますので、
躓いたら機能ごとに別途調べていただければ解決できるかと思います。 ​

球体化

f:id:amayoshitqs:20201028005022p:plain f:id:amayoshitqs:20201028005155p:plain

デフォルトで配置されているCubeを使います。
「編集モード」に移行してCubeを選択します。
「ループカット」を使って64等分しましょう。

そして64個の立方体をすべて選択し、球体化を試してみましょう。

「選択 -> 全て」で選択します。
「Alt + Shift + S」を押すと球体化モードになるため、その状態でマウスを左右に動かしてみてください。
ムクムクっと丸くなると思います。

f:id:amayoshitqs:20201028005533p:plain

ちなみにこのコマンドで球体化を行うと画面左下にダイアログが表示され、そこで数値を入力して細かく調整できます。

​ では一旦立方体に戻して、今度はシェイプキーの登録を行いましょう。 ​

球体化するシェイプキー

f:id:amayoshitqs:20201028010420p:plain

シェイプキーの登録を行うためにまず「オブジェクトモード」に移行します。
そしてプロパティ画面の「オブジェクトデータプロパティ」を開きます。
そこにある「シェイプキー」のタブを開きましょう。

f:id:amayoshitqs:20201028010749p:plain

既に「ベース」というキーが登録されていると思うので、その下にキーを新しく生成します。
右側の+ボタンで簡単追加です。
名前はなんでもいいです。
日本語でも大丈夫だと思いますが、不安なら英語でどうぞ。

では、新しく作ったシェイプキーを選択した状態で、
「編集モード」に移行し、先ほどと同じように球体化を行います。

目いっぱい球体化させた状態で「オブジェクトモード」に戻ると、立方体に戻ってしまっています。
そこで先ほどのシェイプキーの右の値を上げると、画面のCubeが球体になっています!

これにて作成完了となります!
fbxエクスポートを行いましょう。

FBXエクスポート

f:id:amayoshitqs:20201028011645p:plain

エクスポート画面で特に説明することは無いのですが、
オブジェクトは「メッシュ」のみでOKです。

Unityにインポート

f:id:amayoshitqs:20201028011841p:plain

出力された「sample.fbx」をUnityのProjectにドロップします。
fbxファイルはこんな感じの構成になっています。

ではsampleをHierarchyにドロップしてみましょう。

f:id:amayoshitqs:20201028012036p:plain

実に素直に追加されました。
ここでsampleオブジェクトをインスペクタで確認してみましょう。

f:id:amayoshitqs:20201028012245p:plain

「Skinned Mesh Rendererコンポーネント「BlendShapes」に見覚えのあるキーがあります。
このスライダーを右に動かすと...

f:id:amayoshitqs:20201028012446p:plain

球体化しました!

これにて「立方体を球体に変形するモデル」の完成となります!!

ついでに

ここで終わっても良いのですが、折角なのでスクリプトから数値を変更できるようにするまで進めちゃいましょう。
一応本職はプログラマーなのでね。

という訳で以下のスクリプトをMainCamera等に取り付けて下さい。

using UnityEngine;

public class SaturnManager : MonoBehaviour
{
    [SerializeField] SkinnedMeshRenderer skinnedMeshRenderer = default;
    int m_index;

    void Start()
    {
        // 自分で定義したシェイプキーを指定する
        m_index = skinnedMeshRenderer.sharedMesh.GetBlendShapeIndex("スフィア");
    }

    public void OnChangeValue(float value)
    {
        skinnedMeshRenderer.SetBlendShapeWeight(m_index, value);
    }
}

SkinnedMeshRenderer.sharedMesh.GetShapeIndex()ブレンドシェイプのインデックスを取得し、
SkinnedMeshRenderer.SetBlendShapeWeightブレンドシェイプの値を変化させます。

ではSerializeFIeldのskinnedMeshRendererに先ほどのオブジェクトを参照させます。

f:id:amayoshitqs:20201028231035p:plain

そして今回はテスト用にSliderを雑に設置し、以下の設定を行います。

  • MinValueは0
  • MaxValueは100
  • OnValueChangedにSaturnManager.OnChangeValueを登録

それではゲームを実行し、Sliderを動かしてみましょう!

完成

f:id:amayoshitqs:20201028231235p:plain f:id:amayoshitqs:20201028231240p:plain

このようにSliderの動きに合わせて球体化するようになりました!!
今後も音の強弱を取得できるようになるまではこのSliderを活用していきます。

今回はここまでとなります。
セガハードが好きなのでUnityを触り始めた頃から再現してみたいと思いつつも、Unityだけで立方体を球体に変形させるのは余りにも厳しいので想像だけで終わっていたのですが、
そこはやっぱり餅は餅屋、Blenderを使えば簡単に表現できましたね。

こんなことを言ってる時点でお察しかと思いますが、私がBlenderを触ったのは今回がほぼ初めてです。
それでもネットで調べながら2時間ほどでシェイプキー設定からUnityインポートまで辿り着けたので、苦手意識のあるエンジニアさんも是非!