YKTのどっちがいいかな？

実世界連動地域貢献型すごろくゲームのアプリ開発状況を書いていきます。

Lv.13くらいから始める目的地制作

酔った勢いで始まった謎のブログ企画ですが、ついに担当日が回ってきてしまいました。まあ、日曜担当にも関わらず書き始めたのは水曜日なんですけどね。というか、みんなとりとめもない日常だとか感想だとか書いている中で私だけ開発の進捗状況とか内容ちょっとヘビーじゃないですか...？

さて、ブロブ設立当初は思いっきりリアル〇鉄とか至る所に書きまくってましたが、一般公開している手前どうなんだろうと思ったので、ちょっとぼかした表現に変えました。それから、もう8割方完成しているわけでどっから書いていこうか悩みましたが、開発モチベーションUPのためのブログなので、基本的にwhat's newを更新していくことにします。(開発が進まなかった週は昔話をするかもしれません。。。)

それでは早速、実世界連動地域貢献型すごろくゲーム（SUGOROKU game for community invigoration using real trains; 通称MOMO）の進捗を報告していきます。

目的地の制作

今週は目的地の3Dモデルを作成していきます。かなりシンプルなので、モデリングのチュートリアルとしてよい題材になるのではないでしょうか。特に豆腐のようなクマのスタンプ（クマのような豆腐？）を作ろうとしているそこのあなた！もう言い逃れはできませんよ？

作戦としては、概形のみモデリングしてdetailはテクスチャで作りこんでいくことにします。

モデリング

無料であることが驚きの万能（ただしクセが強い）モデリングソフト Blender を使って、こんな感じに"それっぽい"形（意味深）を作っていきます。

ini

まずBlender初心者が知るべきなのは選択操作が直観とは逆の"右クリック"だということ、そしてショートカットキーをある程度覚えないと正直厳しいということです。Blenderの基本的な操作はたくさんの親切な方がまとめてくれていますので、ある程度操作をマスターしてから望みましょう。例えば このサイト とか参考になりそうです。

とはいえ、今回はほとんどがただの立方体ですので、「オブジェクト モード」で追加(Shift+A)した立方体を拡縮(S)、移動(G)するだけです。唯一難しそうな屋根の部分は「編集モード」でこのように立方体の2頂点をピックアップし、中心で結合(Alt+M)して縮小・移動すれば綺麗に作れます。

yane

UV展開ーテクスチャの作成

次に、家の外壁にあたる部分に"それっぽい"イラスト（またまた意味深）を書いていきます。Blenderには3Dオブジェクトに直接絵を描ける機能が備わっています…が少なくとも私には使いこなせません。その場合、3Dモデルの展開図を作成してそこに色を塗っていきます。この展開図を作る工程のことを「UV展開」と言います。例えばYKTの髪の毛は以下のような画像（テクスチャ）が張られています。

さて、展開するためには、当然立体に"切れ目"を入れてやる必要があります。

まず、屋根側の面は隠れて見えませんので消去してしまいましょう。

続いて件の切れ目ですが、目視で影響がない程度に各面の隙間をナイフでぶった切…るなんてことはさすがになく、下図のように「編集モード」で展開時に切り離したい辺を選択してCtrl+Eメニューの[シームを付ける]を選択します。

さらに、

  1. 「編集モード」で頂点を全選択 - [Uキー] - [展開]
  2. 右上のマークを左に引っ張り出して二画面化
  3. 「UV/画像エディター」ビューに変更
  4. [UV] - [UV配置をエクスポート]を選択

すれば、このような展開画像が出力されます。

あとは、適当なペイントソフトをつかって仕上げましょう。YKTのときは こちらの神ブログ を参考に、画像に色と影を焼きこんでからiPad & apple pencilで仕上げましたが、今回は直線だけなのでマウスのほうがやりやすいかと思います。 ちなみにBlenderの「UV/画像エディター」ビューにもペイント機能が搭載されているので別のソフトを無理して用意しなくても作れます。

多分こんな感じで"それっぽく"なると思います。

色塗り＆テクスチャ貼り付け

作成したテクスチャをオブジェクトに貼り付けていきましょう。

「オブジェクトモード」で家の外壁パーツを選択し、右側の[マテリアル]タブから、[新規]を選択します。すると、下のような感じになると思います。ここで［シェーディング］の［放射］の値を1にしておきましょう。

続いて、お隣の［テクスチャ］タブを選択しましょう。すると、下のほうに［画像］- [開く]というボタンがありますので、ここから先ほど作成した画像を選ぶと無事テクスチャが貼られるかと思います。

同様にして、屋根と看板(?)にもマテリアルを設定します。屋根と看板にはテクスチャは貼らないので、[マテリアル]タブの[ディフューズ]欄で色を選びます。あとは各パラメータをいじって"いい感じ"にします。

最終調整

だいぶ雰囲気が出て来たところで、ゲーム内のアングルからの見栄えが良くなるようにサイズ感を微修正します。屋根は"よく見る"と四角錐だったので修正しました。また屋根の縁には謎の黄色い枠が"あった"ので追加しました。こっそりとテクスチャの作成もやり直しています。モデリングはこれで終了です。

レンダリング

せっかく3Dモデルを作ったので目的地以外の駅のマスに使う画像をレンダリングで作成してしまいましょう。ポイントをまとめると，

  • テンキーの0をおすと編集画面がカメラからのビューに切り替わります（カメラがない場合はShift+Aで追加しましょう）。
  • Nキーを押して出てくるメニューの［カメラをビューにロック］にチェックを入れておくと，カメラに映る描画を直感的に操作できます。
  • 描画を「レンダーモード」にしておくと，見た目が簡易レンダリングした感じになります。
  • 解像度でアスペクト比を整えます（今回は正方形にします）
  • [Freestyle]にチェックをいれておくとセル画のように輪郭が描画されるようになります。

さらに，画像のように[World]の[水平色]から背景色を指定し，カメラのレンズを平行投影にしておきましょう。

うまいことモデルをフレームに収めたら上のメニューから[レンダー]を選びます。するとこのようにレンダリングされるので，F3キーを押して保存します。

Unityへのインポート

いよいよ作成した3Dモデルをゲームエンジン Unity にインポートします。

モデルのエクスポート

その前にBlenderからモデルをUnityで使える形式にエクスポートしておきましょう。（実はBlenderの標準保存形式.blendのままでも読み込めるんですが，まあ儀式みたいなもんです。）

[ファイル] - [エクスポート] - [FBX(.fbx)]を選んで，.fbx形式に変換しておきましょう。

モデルのインポート＆テクスチャ貼り付け

Unityを開いたら，.fbxファイルをAssetsフォルダにドラッグ＆ドロップします。するとプレハブというタイプのオブジェクトができるので，これをシーンにドラッグ＆ドロップすると，3Dモデルがゲーム上に現れます。

しかし，マテリアルで設定した色は反映されているものの，貼り付けたテクスチャは剥げ落ちてしまっています。なんかゴニョゴニョすればテクスチャも反映した状態でエクスポートできるようなのですが，私は成功した試しがありません。ということで別途テクスチャを反映しましょう。

  1. .fbxファイルのときと同じように，ペイントソフトで作成したテクスチャ画像をAssetsフォルダにD&Dします。
  2. Assetsフォルダの空いているスペースで[右クリック] - [Create] - [Material]を選びます。
  3. 追加したMaterialの[Inspector]タブの[Shader]を"Standard"から"Unlit/Texture"に変更します（ここは見え方の好みで変えてください）。
  4. Base(RGB)の右側にある四角のところにインポートしたテクスチャファイルをD&Dします。
  5. 3Dモデルのプレハブの[Inspector]タブを開き，壁面に対応するマテリアルの部分に作成したマテリアルをD&Dし[Apply]を押します。壁面のマテリアル名はBlenderで設定していたものと同じです。

これで目的地の完成です。

普通の駅マスの作成

最後に，レンダリングした画像を使って普通の駅のマスを作成します。

まず，上記の1.-4.と同様の方法でレンダリング画像のマテリアルを作成しておきましょう。 続いて[Hierarchy]タブの[Create] - [3D Object] - [Cube]を選択して，立方体を作り，[Inspector]タブのScaleをいじって平べったくします。

作成しておいたマテリアルをCubeにD&Dすればテクスチャが反映されます。しかしながら，このやり方では立方体の6面全てにテクスチャが貼られてしまうのであまり見栄えがよくありません。

これを回避するために，白い立方体の上にテクスチャを貼り付けた平面を重ねることにします。 続いて[Hierarchy]タブの[Create] - [3D Object] - [Quad]を選択して，平面を作ります。この平面にマテリアルを適用して，Cubeの上にピッタリ重なるようにのせれば完成です。ほんの少しCubeから浮かせるように配置したほうがきれいに仕上がるかと思います。

おわりに

MOMOプロジェクトは多くのブロガーの善意の上に成り立っています。今回自分でもhow toをまとめてみましたが，いやもう労力がすごい。わかりやすくまとめてくださっている方々には頭が下がります。

さて，今回目的地＆駅が完成したことで3Dモデルの素材がすべて揃いました。つまりBlenderに関する記事はこれが最初で最後になります(笑)次週はUI周りの素材制作をお届けする予定です。

それから先程グーグルホームと連動する赤外線リモコンユニットをポチりましたので近々レビューしたいと思います。

今週は以上です。