ニンジャのゲームを作る - ①3Dモデルを用意する

ドーモ、はじめまして。わたしは餅辺です。基本的にいろんな小説を書くニンジャヘッズですが、ゲーム作りもすることがあります。

今回は新しいニンジャスレイヤーのゲームを作ろうと思い立ち、その過程を連載することに決めました。ゲームを作りながらの平行連載です。

というのも、出来上がってから過程を書くと、どこから話していいか見当もつかなくなります。それに製作中に気分転換の場があれば、虚無の暗黒にも呑まれづらくなるだろう、とそんな理由からです。

連載内容としては、ゲーム製作の詳しい仕組みやプログラムではなく、こんな感じでゲームは動くんですよ、こういう手順でゲームを作ってるんですよ……といった、工場見学のめいた楽しみのある記事を目指そうと思っています。

どんなゲームを作るのか。それも3~4回目くらいで分かるようになっていますので、お楽しみに。

では、第一回の連載をはじめます。今回の題材はゲームに必要な素材……3Dモデルの作り方についてです。

Magica Voxelで3Dドットを打つ

3Dと書くと、とたんに難しそうなイメージが浮かんでくるものですが、このMagica Voxelを使えば簡単に作ることができます。順を追って見ていきましょう。

まずは2Dで描くように、普通にドット絵を描きます。

書きあがったものがこちらです。出来栄えについてはともかく、この段階ではただのドット絵に見えます。が……

横から覗いてみると、すでに3Dになっているのがわかります。先ほど打ったドット（ピクセル）の1つ1つが、すべて3Dの箱（ボックス）として出力されていたからですね。だから、こういう3Dドットをボクセルと呼んだりもします。

この段階でも一応3Dとして成立してはいるのですが、ペラペラすぎるので、このまま使うことはできません。なので、続いて厚みをデザインしていきましょう。

まず、先ほどのドットをコピーし、1マス手前にずらしてペースト。箱を重ねていきます。これを繰り返し、大まかな厚みを作っていきます。

（これは作りすぎです）

このくらいが丁度いいでしょう。大まかな形が出来上がったら、不恰好な部分を削っていきます。パッと目につくのは腕や足です。

出来上がった厚みを、ドット絵を描く要領で消しゴムをかけて削っていきます。実際の人の手足には、胴体とここまで極端な差はありませんが、デフォルメなので気にせずガンガン削っていきましょう。

さて、続いて問題なのが……

これです。こわいです。

影のかかり方でお気づきになられたでしょうか。これは頭を裏側から見た状態です。コピペを繰り返していった結果、金太郎飴のように正面と裏面がまったく同じになってしまったわけですね。これを手直しするためには、上から色を塗っていきます。

髪の毛の色で表面を塗りつぶし、ところどころのドットを髪型に合うように削ったり、足したりしていきます。ヤモト＝サンはマフラーもあるので、そこも付け足し、横から見て不恰好にならないよう、スカートの裾も膨らませ……

完成したのがこちらとなります。これにて3Dドットのモデルが出来上がりました。が、これをゲームで動かすためには、まだ足りていないものがあります。次の工程に移ります。モデルのデータをエクスポート（書き出し）し、Blenderというソフトに読み込ませます……

Blenderに3Dモデルを移す

ウワーッ！？

ム、ムゴイ！　なんたる悪夢的光景か！　おお、ブッダよ！　まだ寝ておられるのですか！

……というのは冗談で、このバラバラ状態はエクスポートの際に施した加工によるものです。その理由は……説明する前に、次の画像をご覧ください。

モデルの内部に、無数の点や線が引かれていますね。これが3Dモデルの中身です。3Dモデルはこのように頂点・辺・面の3要素で構成されています。順を追って解説しましょう。

3D空間上に、1つの四角形を用意しました。4つの●部分が頂点です。頂点と頂点の間は辺で繋がれ、辺で囲まれた空間に薄いオレンジ色の面が張られています。四角形のモデルは、こうして描画されているわけです。

この一見丸々しい丸型も、よく見ると64個の頂点と辺で構成されていることがわかります。これでも十分に丸いのですが、構成する頂点を増やせば、さらに丸くすることも可能です。

が、しません。面倒というのもありますが、一番の理由はコンピューターに無理をさせないためです。

頂点が増えれば増えるほど、描写は細かくなっていきます。ですが、それに伴ってコンピューターが処理する情報も増えていきます。情報が増えれば、当然処理は重く（時間が掛かるように）なります。

美しいグラフィックのゲームを遊ぼうとしたとき、動作がカクついて困った経験はありませんか？　要求される処理に対し、コンピューターの性能が追いついていないと、こういう現象が起きます。

なめらかな映像は、1秒間に何十枚もの画像を描写することで実現しています。ですが、それぞれの画像に必要な処理が重いと、1秒間に数枚とか、ひどい時は3秒間に1枚の画像を描写するのがやっと。すると結果として、なめらかな映像など実現せず、カクついた映像が出力されてしまうわけです。

当然ながら、それはゲームの楽しさを大きく損なってしまいます。これを避けるには、頂点の数を必要十分な量にとどめることが重要になってきます。

さて、話をヤモト＝サンのモデルをバラバラにした非道行為にまで戻しましょう。Magica Voxelではモデルをエクスポートする際、余分な頂点を減らしてくれる機能がついています。

モデルを横から眺めれば一目瞭然です。何枚もの箱を重ねて作ったモデルですので、当然中にはギッシリと箱が詰まっており、描写されない箇所に大量の頂点が残っているはずです。ですが、覗いてみればこの通り。

Magica Voxelが頂点をまとめてくれたため、このようにスッキリした中身になっているわけですね。実際ありがたい機能です。……なのですが、少し困ったことが起こる場合があります。

こちらはバラバラ処理を行わずにインポートしたヤモト＝サンです。ここでちょっと腕を振ってもらいましょう。

ワッザ！？　……というように、出力時にマフラーと腕のドットをまとめた結果、腕を動かすとマフラーも同時に動いてしまうようになったのです。ちなみに胴体も一緒に動いているため、服の袖がおかしなことになってしまってもいます。

バラバラの処理は、これを回避するために行われたのです。無論、バラバラのまま利用したりはしません。各箇所を本来ある場所へ移動させ、元どおりにすれば……

見た目は同じですが、今度はマフラーと腕の頂点が別々になりました。ですので、ご覧の通り腕だけが動きます。これにて用意したデータの移行は完了です。次はこのモデルに骨を入れ、アニメーションをさせる作業へと移ります。

Blenderで骨組みを入れる

こちらが骨組みです。英語ではボーンと言います。……というより、ボーンと呼ばれることの方が多いので、今後はボーンと呼びます。

ボーンは頂点と対応づけることが出来ます。例えば、腕の頂点に対応させたボーンをこのように曲げれば……

頂点も追従し、ボーンに対応した位置へと動きます。結果として、腕が曲がって見えるというわけです。これを連続して行うことでアニメーションを作っていきます。これにはタイムラインという機能を使用します。

モデルの下に表示されているのがタイムライン。格好よく言うと、時間の流れを視覚化したものです。ここにボーンの回転・位置・大きさなどの情報を登録することが出来ます。

何やら1・15・20の位置に3本の黄色い線が立っていますが、これは黄色い線が立っているタイミングにボーンの情報が登録されていることを意味します。

タイムラインを1から15に動かせば、15に登録されたボーンの情報が反映され、このようにモデルが動きます。また、再生ボタンを押せば、1から20まで、登録された動作を連続して行ってくれます。こうしてアニメーションを作っていくのです。

しかし……1・15・20？　その合間の動きは作らなくていいのでしょうか？　いいのです。なぜなら合間の動作はBlenderが自動で補完してくれるからです。未来感……！

Blender上でボーンを埋め込み、ゲーム上で行わせたいアクションに対応するアニメーションを1つ1つ作り終えれば、いよいよゲーム本体の製作に取り掛かります。

【続く】