プログラミング初心者向けチュートリアルやUnity5やC#の記事を書いています。
結月ゆかり、弦巻マキ、ゆっくり霊夢が主人公の簡単なゲームを作成し始めました。以下のGifのように、見下ろし型のガン・シューティングゲームです。あまり大風呂敷を広げると途中で挫折してしまうので、まずは5分ぐらいで遊べるゲームを作ります。
なので、最初のリリースをするまでの現在の残り作業は以下ぐらいです。
MagicaVoxelを使うことで絵が描けなくても3Dモデリングができなくても、キャラクターを用意してリギングとアニメーションができそうなところまできました。実際に、先日の「MagicaVoxelで東方プロジェクトのキャラクターも作ってみました」では、簡単なキャラクターをつくりました。
ニコニコ動画に「Left 4 Ships」というトップダウンのシューティングゲームがありました。またちょうど、Sebastian Lagueさんがトップダウンゲームのチュートリアルを用意しているので、このチュートリアルを実装してトップダウンのシューティングゲームの基礎を手に入れて、MagicaVoxelで作ったキャラクターで遊べるようにしたいです。ゲームの概要
最初のゲームは上記のような感じで大風呂敷を広げません。とりあえずSebastian Lagueのチュートリアルの実装で、キャラクターをMagicaVoxelにするという感じです。これであれば、なんとか完了できそうです。
以下があると本格的なトップダウンシューティングになりそうです。
昨日はあまり実装する意欲がなかったので、東方プロジェクトのキャラクターの魂魄妖夢と十六夜咲夜を作ってみました。AH-SoftwareのVocaloid+と東方プロジェクトは、無償で二次創作をする際には、緩いライセンスのようで、ミニゲームを作るときのキャラクターとして使っても問題なさそうです。あと魔女っ娘も作ってみました。
以前、Blenderでリギングをしたので、これらモデルはボーンを簡単に入れられるはずなので、もう少しキャラクターを揃えてから、リギング作業をルーチンワークとして行い、作業手順を頭に叩き込みたいです。
プロシージャル・ジェネレーションの息抜きに、ゲーム動画の実況でよく使われているAH-Softwareの入力文字読み上げソフトVocaloid+のキャタクターをMagicaVoxelで作ってみました。作り方は、まず「MagicaVoxelで作ったプリキュアをUnityで動かす」のMagicaVoxel用素体と全く同じものを自分ではじめから作ってみました。これにより基本操作と頭身のバランスなどを理解できるようになりました。このモデルは体に厚みがなく、手足も1Voxel単位なので細かい表現は難しいですが、１つモデルを作ったらあとは髪の毛と色を調整すれば、それとなく別キャラクターが作れるのでとても便利でした。
1.モデルを複製しながら操作方法を覚える
2.結月ゆかりを作ってみる
3.弦巻マキは、髪型やヘッドセットは違うが、顔が平らで同じ大きさ、手足も1voxel単位で、縦横に伸びていて結月ゆかりと色が違うだけ。
3.いくつかモデルを作った後、オリジナルのゆっくり霊夢を作成。21x21x21の立方体のなかで小さく作ってしまったのでもっと大きくしてもよかった。
MagicaVoxelだと絵が描けなくても、Googleで「ドット絵」と検索して、小さいモデルを作ればなんとかなりそうです。ハードマークやドル袋みたいなアイテムなども作ってUnityで動かしてみます。
「JetPackでFlappyBirdのようなゲームをUnity5で作ってみました。」の記事で作ったミニゲームを改造して、プレイヤーキャラクターをMagicaVoxelで作成した結月ゆかりと弦巻マキにしてみました。
いわゆるエンドレスゲームで、Flappy Bird(フラッピーバード)のようなゲームです。壁に衝突して戻されるとゲームオーバーではじめからなります。
https://hajimete-program.com/games/GameJetpackYukarin.zip
こちらはUnity5.3のプロジェクトになります。ソースコードや結月ゆかり、弦巻マキのモデルプレハブが含まれています。このミニゲームはシンプルなのでプログラミング初心者の参考になります。
https://hajimete-program.com/games/JetpackYukarin.zip
MagicaVoxelで簡単にキャラクターが作れました。SEやアイテムなどを用意したりアニメーションを作れるようになれば大分ゲームの印象が変わるので挑戦したいです。
MagicaVoxelで作ったプリキュアをUnityで動かす と そのニコニコ動画 を参考に、MagicaVoxelで作ったデータをUnityちゃんのアニメーションで動かしてみました。いくつか躓くポイントがあったので補足を書いておきます。
動画を見ながら作業したのですが、ポイントとしては、「Remove Doubles」で頂点の削除、「Subdivide」で頂点を増やす作業を行わないと、Blenderの自動生成したボーンにうまくスキンが適用されずエラーが発生しました。Remobe Doublesは、立方体が２つ並んでいるときに、重なった頂点を削除する機能です。これを実行すると頂点数が減って綺麗になりますが、ボーンを適応するには少なすぎるため、Subdivideで頂点分割をします。なんで減らしたのに増やすの？と思いますが、頂点数が少なすぎてボーンがうまく適用できないようです。Voxelは頂点数が少ないので必ずこの作業はしましょう。
また、FBXで出力する際に、Scaleの調整(1.00?または100?)と、XYZの座標が異なるので、とりあえずZ Forwardにして、ArmatとMeshのみをShiftボタンを押しながら選択して、カメラやランプを出力しないようにしました。
さらに、FBXで出力していざUnityのシーンにドラッグアンドドロップしてもテクスチャが白いままでした。何か設定方法があるかもしれませんが、FBXをUnityにドロップした際にできたMetarialsフォルダーにpngファイルを配置し、それをマテリアルのAlbedoに設定する事で表示することができました。
このpngファイルは、おそらくMagicaPixelで.objにエクスポートした時にできたパレット情報のファイルです。
ここまでやってUnityちゃんを公式サイトからダウンロードして.unitypackageで取り込んで、Unityちゃんのアニメーションを適用することができました。
いくつか課題が見つかったのでメモ。
以下の方は、Blenderでアニメーションを作成しているようなので参考になりそうです。
ひとまず、MagicaVoxelで作ったモデルにBlenderでアーマーチェア（ボーン）を適用して、Unityでアニメーションさせることができました。あとは自分でアニメーションが作成できれば、MagicaVoxelでオブジェクトのモデリングができるため作業効率が上がります。今度は、自分でUnityまたはBlenderでアニメーションを作成してそれを動作させたいです。
MagicaVoxelは簡単に3Dボクセルを作成できますがUIが独特です。はじめての方向けに基本操作とUI、Unityで取り込める方法まで説明します。詳細な操作方法が知りたい場合は以下を参考にするとよいです。
https://voxel.codeplex.com/ にダウンロードボタンがあるのでダウンロードして、zip展開したら、MagicaVoxel-win.exeがあるので起動できます。
起動して、上部中央にnameと表示されるのでここでリネームができます。また、はじめて起動したときにnameを修正してフォーカスを外すと保存ダイアログが表示されます。試しにzzzで保存してみます。MagicaVoxel-0.97.4Voxフォルダー内にzzz.voxが保存されるようにダイアログが表示されるので保存します。
voxフォルダーに保存されると以下のように、右側の一覧に表示されるようになります。この右側はVoxフォルダー一覧で、上部の[Save]で保存、[As]で名前を付けて保存、[New]で新規作成になり、下部のゴミ箱アイコンで削除できます。リネームは先ほど入力欄で可能です。
また、MagicaVoxelはあらかじめいくつかサンプルモデルがあります。一覧からクリックするとロードできるので、chr_oldをクリックして、サンプルキャラクターを表示して、z_chr_oldに名前を変更します。
これで新規登録や名前変更、保存は右側でできるようになりました。もし初期サンプルを壊してしまった場合は、もう一度MagicaVoxelをzip展開すればよいと思われます。
左側がパレットになります。最初は菱形マーク（カラーパレット）が選択されている状態です。(見た目では選択状態が判断できないです。)この上部の[N]で新たなパレットを作成でき、[1][2]でデフォルトにある、グレースケールパレットなどに切り替えられます。はじめは特にパレットを追加する必要はないでしょう。
それで、左の[E]、[G]というのが、エッジとグランドです。グランドは地面の色です。変更したい場合は、パレットで色を選択した後に、[G]をクリックです。エッジは、ボクセルの現在の色です。これもパレットを選択した後に[E]をクリックです。パレットの色を[E]に割り当てるという考え方です。
パレットでエッジの色を選択する方法がわかったので、あとは1ボクセルごとに追加、削除ができれば一通りの作業ができます。
１ボクセルごとに修正する場合は、Brushメニューから[V]を選択し、[Attach]で追加できます。以下の例では爺さんキャラクターの頭を何回かクリックして髪を増やしました。
削除は[Erase]を選択すればできます。
[Paint]は、選択している色で塗ることができます。
[Move]は、つながっているボクセルをドラッグアンドドロップで移動できます。
[<]は、カラーピックアップです。
[>]は、モデルの同じ色の一括変換です。
ひとまずこれだけ分かればモデルが作成できます。
ボクセルの最大サイズが上記で、X=20, Y=21, Z= 20となっているので、値を変更してフォーカスを外すと、サイズが変更できます。
モデルを作成後、いくつかの形式でエクスポートできます。.objファイルで出力すれば、UnityやBlenderなど3Dモデリングソフトで取り込めます。操作は簡単で、[Export]タブをクリックして、[obj]ボタンをクリックで「名前を付けて保存」ダイアログが表示されるので、「保存」ボタンを押して終了です。
Exportで出来たファイルを、Unityにドラッグアンドドロップすれば、Unityで表示できます。
はじめての人向けにとりあえずの操作方法を説明しました。あとはいくつか便利機能があるので少しづつ覚えていきたいところです。またMagicaVoxelはアニメーションには対応していないので、Blenderなどでアニメーションをつければ、面白くなりそうです。
