意匠部

面白法人カヤック デザイナーブログ

3Dモデリングのつまづきポイント: 「Swing Blade」開発の経験から

こんにちは。カジュアルゲームチーム意匠部の渡邊です! Webデザインやグラフィックデザインをやっていた私ですが、 昨年転職を機にハイパーカジュアルゲームのデザイナーとして働いています。

今回は私が初めてプロトタイプからリリースまで関わった「Swing Blade」というゲームの紹介に絡めながら、 3DモデルをBlenderで自作してUnityで連携するまでの過程とつまづいたことを覚書的にブログにしたいと思います。

また、12月はカジュアルゲームチームのデザイナーが3連載を行います。 こちらはその2回目です。前回の進藤のブログがハイパーカジュアルゲームの全体像の説明をしているのでぜひご覧ください。

designblog.kayac.com

SwingBladeというゲーム

play.google.com

apps.apple.com

Swing Bladeはステージ上に出てくる敵が襲ってくる前に手持ちの剣をブンブン振り回して倒していくゲームです。(良かったら遊んでみてください) 企画を起こしたディレクター、エンジニア、デザイナーの私という三人体制で開発が始まりました。 私の役割は、敵キャラクターの3Dモデルの作成、テクスチャ作成、全体の色調整などです。

このゲームはステージを追加すればするほどプレイタイムの伸びが見られたため、 アセットの3Dモデルを使いつつ世界観を伝えられるような自作3Dモデルを追加していきました。

3Dモデルの作成

まずはBlenderで3Dモデルを作成していきます。 ディレクターと相談して敵キャラの意匠はロボット型をメインにすることにしました。

作成したロボットの3Dモデル
作成したロボットの3Dモデル

これをfbx形式でエクスポートをします。 私はエクスポート時のパラメータ設定をこのようにしています。デフォルト設定から変更してる部分について紹介します。

  1. パスモードのメニューで「コピー」を選び、右横のボックスのようなアイコンをONにする:3Dモデルにテクスチャを埋め込む
  2. 内容の「Limit to」を「選択中のオブジェクト」にする:シーンで書き出したいオブジェクトを選択した状態で行うことでエクスポートの対象になる
  3. オブジェクトタイプで「アーマチュア」と「メッシュ」を選択する:カメラや光源などは必要がないのでアーマチュアとメッシュのみを対象とする
  4. トランスフォームから「トランスフォームを適応」にチェックを入れる:これをチェックしないとBlenderで操作した回転や拡大がUnityにインポートしたときに継承されてしまう

設定例
設定例

私は上記を「BlenderToUnity」という名称で設定保存しています。 「FBXをエクスポート」をクリックすると指定したディレクトリにfbxファイルが書き出されます。

BlenderToUnityというプリセット
BlenderToUnityというプリセット

第一つまづきポイント「スケール」

Unityにインポートしてみたところでかい!しかもスケールがxyz1にそろっていません。 Blenderの初期に出てくるオブジェクトは2m x 2m x 2mの立方体になっています。 Blender上で作業しいると私は忘れてしまいがちになるのですが、超巨大ロボットを作ってしまっていたようです。 ディレクター、エンジニアと相談し大きさをz軸が1.8mになるように調整、その後Ctrl+Aで適応することによって全てのスケールの倍率を1にそろえます。

第一つまづきポイント「スケール」
第一つまづきポイント「スケール」

第二のつまづきポイント「原点」

原点が足元にそろえないと左右で対象な動きをすることができないので原点をモデルの足元に合わせます。 xyz軸上でモデルの原点が(0,0,0)の位置にあるのが好ましいのでまずはカーソルをShift+Cで(0,0,0)の位置に戻し、 モデルを構成するアーマチュアやメッシュを選択してオブジェクト>原点を設定>原点を3Dカーソルに移動をクリックします。 これによりUnityにインポートした際に左右対称の動きができるようになりました。

第二つまづきポイント「原点」
第二つまづきポイント「原点」

第三つまづきポイント「テクスチャ」

ハイパーカジュアルゲームは世界中のプレイヤーに遊んでもらうことが前提にあります。 世界中の人がみんなiPhoneを持っていてリッチな描画が可能なわけではありません。 そのため、問題になってくるのがゲームの容量です。 今回のモデルは3色しか使わないので64 x 64pxの画像テクスチャで用意します。 ある程度大きさがあるテクスチャが扱いやすいのでこの大きさにしました。 メッシュのシームをマークして、UVに切り込みを入れていきます。 別々のパーツになったUVを移動させてそれぞれのメッシュで当てたい色の位置に移動していきます。

第三つまづきポイント「テクスチャ」
第三つまづきポイント「テクスチャ」

そうして出来上がった3Dモデルがゲーム内に

SwingBladeプレイ動画
SwingBladeプレイ動画

あとはエンジニアさんにfbxファイルをお渡ししてスクリプトと連携をしていただきます。 自分が作ったロボたちが動くのを見るとちょっと嬉しい気持ちになりますね(ぶった斬られるけど)

終わりに

最後まで読んでくださりありがとうございました! カジュアルゲームチームに入るまではUnityへの連携をほぼ考えたことすらなかった私ですが、 チームのデザイナー、エンジニアの方々に教えていただいて自作3Dモデルをゲーム内に入れられるようになりました。

自分の作ったものが世界中に配布されるゲーム内に実装されユーザーに直に評価されるのは時に緊張感もありますが、そこから改善を考える面白さもあります。 また、自分の持てるスキルをどんどん仕事の中で使えるというのも魅力の一つかなと思います。

カヤックカジュアルゲームチームは一緒に働く仲間を募集しています

もしこの記事を読んで、ハイパーカジュアルゲームの開発に興味を持ってくださった方がいましたら ぜひこちらからエントリーをお願いします!

www.kayac.com

面白法人カヤック意匠部では
一緒に働く仲間を募集しています

アートディレクターデザイナーデザインエンジニアグラフィッカーイラストレーター他