結月ゆかりとマキさんとゆっくりのゲームを作ります!

結月ゆかり、弦巻マキ、ゆっくり霊夢が主人公の簡単なゲームを作成し始めました。以下のGifのように、見下ろし型のガン・シューティングゲームです。あまり大風呂敷を広げると途中で挫折してしまうので、まずは5分ぐらいで遊べるゲームを作ります。

A01
ゾンビだ!!

なので、最初のリリースをするまでの現在の残り作業は以下ぐらいです。

  • アイテムドロップと、取得して銃の性能アップをする仕組み
  • 敵をあと2,3種類は増やす。
  • 時間経過で、ウェーブ中の敵が多く強くなり、5分以上は無理な状態にする。
  • ライフバーやダメージテキストの表示
  • インベントリー管理は保留。

Blenderで結月ゆかりにアニメーションをつけてみました。

トップダウンシューティングのチュートリアルが完了したので、以前MagicaVoxelで作った結月ゆかりモデルにBlenderでアニメーションをつけて、Unityで動かしてみました。はじめてのモーション作成ですが、やっぱり自分で作ったキャラクターが動くのはいいですね!

Blenderでアニメーションを用意して、Unityで再生
Blenderでアニメーションを用意して、Unityで再生
002
.blendファイルとpngをドラッグアンドドロップするとfbxが作成される

Unityでは、Cubeなどを拡大縮小したり回転したりしてアニメーション・クリップを用意できますが、Blenderで作ったhumanoidベースのモデルの場合は、Unityでボーン修正してアニメーション作るのは簡単ではないようです。Unity上で試行錯誤しましたが、私は結局やり方が分からず、最終的にはBlender側でアニメーションを作成して、それをUnityに読み込むことにしました。

Unityでゲームを作る場合は、Blenderでモデリングとアニメーションをする人と、Unityでプログラミングをする人を明確に分けれるので、複数人がやりやすいと感じました。

FBXを生成する必要なし?

ネット上を見るとBlenderで、FBXファイルをエクスポートするという方法をよく見かけますが、特に細かい設定をしない場合は、そのまま.blendファイルを画像ファイルをUnityにドラッグアンドドロップすれば自動で、FBXが生成されるようです。

 

ImageEffectsをいろいろつけた
ImageEffectsをいろいろ試した

まとめ

Blenderでアニメーションを複数用意して、FBXファイルとしてエクスポートして、Unityで動作させる一連の作業フローが確立できました。まずはゲームを作るため適当なモーションになりますが、少しづつ磨き上げていこうと考えています。

 

次に作るゲームは、トップダウン形式のシューティングゲーム

MagicaVoxelを使うことで絵が描けなくても3Dモデリングができなくても、キャラクターを用意してリギングとアニメーションができそうなところまできました。実際に、先日の「MagicaVoxelで東方プロジェクトのキャラクターも作ってみました」では、簡単なキャラクターをつくりました。

A04

 

どのようなゲームにするか

ニコニコ動画に「Left 4 Ships」というトップダウンのシューティングゲームがありました。またちょうど、Sebastian Lagueさんがトップダウンゲームのチュートリアルを用意しているので、このチュートリアルを実装してトップダウンのシューティングゲームの基礎を手に入れて、MagicaVoxelで作ったキャラクターで遊べるようにしたいです。ゲームの概要

  • トップダウン(見下ろし)シューティングゲーム
  • ステージは、マップ・ジェネレーションで、1、2画面の無機質なステージ
  • 5分~10分で遊べるゲーム
  • アイテム要素、ショット切り替えなし
  • アニメーションなし

最初のゲームは上記のような感じで大風呂敷を広げません。とりあえずSebastian Lagueのチュートリアルの実装で、キャラクターをMagicaVoxelにするという感じです。これであれば、なんとか完了できそうです。

将来的な要素

以下があると本格的なトップダウンシューティングになりそうです。

  • ジャンプ、ドッジ(スピン)
  • ノックバック
  • ボム、詠唱、キャラクター・コレクション
  • コンビ技
  • ランキング
  • アニメーション
  • ステージテクスチャ
  • SE,BGM
  • 構造物破壊

Unity Create a Game Series (E06. enemy attacks)をやってみました。

 

Unity Create a Game Series

Sebastian LagueさんはUnity公式のチュートリアルページで、洞窟のプロシージャル・ジェネレーションのチュートリアルを書いた人です。Unity Create a Game Seriesはトップダウン式のガンシューティングゲームで、以下を網羅したチュートリアルです。

  • キャタクターや敵のウェーブ作成
  • 銃のリロード、将来、銃の切り替えに考慮した実装
  • マップ・ジェネレーション
  • 敵の追尾
  • メニューなどのGUI作成
  • ゲームオーバーシーン
  • パーティクル

アイテム取得やインベントリーなどはありませんが、別途して組み合わせることでゲームに面白さを追加できそうです。また基本的なマップ・ジェネレーションもあるので、ローグライクやハックアンドスラッシュ系のゲームのように、短い時間で無限に遊んでもらえるゲームを作れそうです。

E05までは、コード量は多めですがスムーズに進みましたが、E06は、敵の体当たりする位置の調整算出する方法が数学的で難しかったです。書いて動いてはいますが、一度別途プロジェクトを用意して、ベクトル計算部分を再学習しなければならないと感じました。

MagicaVoxelで東方プロジェクトのキャラクターも作ってみました。

A04

昨日はあまり実装する意欲がなかったので、東方プロジェクトのキャラクターの魂魄妖夢と十六夜咲夜を作ってみました。AH-SoftwareのVocaloid+と東方プロジェクトは、無償で二次創作をする際には、緩いライセンスのようで、ミニゲームを作るときのキャラクターとして使っても問題なさそうです。あと魔女っ娘も作ってみました。

以前、Blenderでリギングをしたので、これらモデルはボーンを簡単に入れられるはずなので、もう少しキャラクターを揃えてから、リギング作業をルーチンワークとして行い、作業手順を頭に叩き込みたいです。

 

MagicaVoxelで結月ゆかりなどを作ってみました。

プロシージャル・ジェネレーションの息抜きに、ゲーム動画の実況でよく使われているAH-Softwareの入力文字読み上げソフトVocaloid+のキャタクターをMagicaVoxelで作ってみました。作り方は、まず「MagicaVoxelで作ったプリキュアをUnityで動かす」のMagicaVoxel用素体と全く同じものを自分ではじめから作ってみました。これにより基本操作と頭身のバランスなどを理解できるようになりました。このモデルは体に厚みがなく、手足も1Voxel単位なので細かい表現は難しいですが、1つモデルを作ったらあとは髪の毛と色を調整すれば、それとなく別キャラクターが作れるのでとても便利でした。

1.モデルを複製しながら操作方法を覚える

001

2.結月ゆかりを作ってみる

002

 

3.弦巻マキは、髪型やヘッドセットは違うが、顔が平らで同じ大きさ、手足も1voxel単位で、縦横に伸びていて結月ゆかりと色が違うだけ。

003

3.いくつかモデルを作った後、オリジナルのゆっくり霊夢を作成。21x21x21の立方体のなかで小さく作ってしまったのでもっと大きくしてもよかった。

004

まとめ

MagicaVoxelだと絵が描けなくても、Googleで「ドット絵」と検索して、小さいモデルを作ればなんとかなりそうです。ハードマークやドル袋みたいなアイテムなども作ってUnityで動かしてみます。

 

ミニゲームJetpackYukarin

JetPackでFlappyBirdのようなゲームをUnity5で作ってみました。」の記事で作ったミニゲームを改造して、プレイヤーキャラクターをMagicaVoxelで作成した結月ゆかりと弦巻マキにしてみました。

001

いわゆるエンドレスゲームで、Flappy Bird(フラッピーバード)のようなゲームです。壁に衝突して戻されるとゲームオーバーではじめからなります。

操作方法

  • スペースキーでジェット噴射
  • Aキー、Dキーで左右移動

ゲームのダウンロード

http://hajimete-program.com/games/GameJetpackYukarin.zip

プロジェクトの配布

こちらはUnity5.3のプロジェクトになります。ソースコードや結月ゆかり、弦巻マキのモデルプレハブが含まれています。このミニゲームはシンプルなのでプログラミング初心者の参考になります。

http://hajimete-program.com/games/JetpackYukarin.zip

まとめとやってみたいこと

MagicaVoxelで簡単にキャラクターが作れました。SEやアイテムなどを用意したりアニメーションを作れるようになれば大分ゲームの印象が変わるので挑戦したいです。

MagicaVoxelで作ったモデルをUnityで動かす

MagicaVoxelで作ったプリキュアをUnityで動かす と そのニコニコ動画 を参考に、MagicaVoxelで作ったデータをUnityちゃんのアニメーションで動かしてみました。いくつか躓くポイントがあったので補足を書いておきます。

作業補足

Remove DoublesとSubdivideを必ずやる

動画を見ながら作業したのですが、ポイントとしては、「Remove Doubles」で頂点の削除、「Subdivide」で頂点を増やす作業を行わないと、Blenderの自動生成したボーンにうまくスキンが適用されずエラーが発生しました。Remobe Doublesは、立方体が2つ並んでいるときに、重なった頂点を削除する機能です。これを実行すると頂点数が減って綺麗になりますが、ボーンを適応するには少なすぎるため、Subdivideで頂点分割をします。なんで減らしたのに増やすの?と思いますが、頂点数が少なすぎてボーンがうまく適用できないようです。Voxelは頂点数が少ないので必ずこの作業はしましょう。

FBX出力時の調整

また、FBXで出力する際に、Scaleの調整(1.00?または100?)と、XYZの座標が異なるので、とりあえずZ Forwardにして、ArmatとMeshのみをShiftボタンを押しながら選択して、カメラやランプを出力しないようにしました。

001

Unityに取り込んだ後にテクスチャファイルを設定する

さらに、FBXで出力していざUnityのシーンにドラッグアンドドロップしてもテクスチャが白いままでした。何か設定方法があるかもしれませんが、FBXをUnityにドロップした際にできたMetarialsフォルダーにpngファイルを配置し、それをマテリアルのAlbedoに設定する事で表示することができました。

002

003

このpngファイルは、おそらくMagicaPixelで.objにエクスポートした時にできたパレット情報のファイルです。

ここまでやってUnityちゃんを公式サイトからダウンロードして.unitypackageで取り込んで、Unityちゃんのアニメーションを適用することができました。

A04

課題

いくつか課題が見つかったのでメモ。

  1. Unityちゃんのアニメーションを取り込んだら、新規にアニメーションクリップを作成できなくなった。どうやったらアニメーションクリップを作成できるか?
  2. また、Blenderでアニメーションを作成してみる

以下の方は、Blenderでアニメーションを作成しているようなので参考になりそうです。

まとめ

ひとまず、MagicaVoxelで作ったモデルにBlenderでアーマーチェア(ボーン)を適用して、Unityでアニメーションさせることができました。あとは自分でアニメーションが作成できれば、MagicaVoxelでオブジェクトのモデリングができるため作業効率が上がります。今度は、自分でUnityまたはBlenderでアニメーションを作成してそれを動作させたいです。

MagicaVoxelの簡単な操作方法チュートリアル

MagicaVoxelは簡単に3Dボクセルを作成できますがUIが独特です。はじめての方向けに基本操作とUI、Unityで取り込める方法まで説明します。詳細な操作方法が知りたい場合は以下を参考にするとよいです。

ダウンロードと起動

https://voxel.codeplex.com/ にダウンロードボタンがあるのでダウンロードして、zip展開したら、MagicaVoxel-win.exeがあるので起動できます。

新規作成、保存、リネーム

001

起動して、上部中央にnameと表示されるのでここでリネームができます。また、はじめて起動したときにnameを修正してフォーカスを外すと保存ダイアログが表示されます。試しにzzzで保存してみます。MagicaVoxel-0.97.4\Voxフォルダー内にzzz.voxが保存されるようにダイアログが表示されるので保存します。

002

voxフォルダーに保存されると以下のように、右側の一覧に表示されるようになります。この右側はVoxフォルダー一覧で、上部の[Save]で保存、[As]で名前を付けて保存、[New]で新規作成になり、下部のゴミ箱アイコンで削除できます。リネームは先ほど入力欄で可能です。

003

また、MagicaVoxelはあらかじめいくつかサンプルモデルがあります。一覧からクリックするとロードできるので、chr_oldをクリックして、サンプルキャラクターを表示して、z_chr_oldに名前を変更します。

004

これで新規登録や名前変更、保存は右側でできるようになりました。もし初期サンプルを壊してしまった場合は、もう一度MagicaVoxelをzip展開すればよいと思われます。

パレットの表示とエッジとグランド

005

左側がパレットになります。最初は菱形マーク(カラーパレット)が選択されている状態です。(見た目では選択状態が判断できないです。)この上部の[N]で新たなパレットを作成でき、[1][2]でデフォルトにある、グレースケールパレットなどに切り替えられます。はじめは特にパレットを追加する必要はないでしょう。

それで、左の[E]、[G]というのが、エッジとグランドです。グランドは地面の色です。変更したい場合は、パレットで色を選択した後に、[G]をクリックです。エッジは、ボクセルの現在の色です。これもパレットを選択した後に[E]をクリックです。パレットの色を[E]に割り当てるという考え方です。

1つ1つ追加したり削除したり

パレットでエッジの色を選択する方法がわかったので、あとは1ボクセルごとに追加、削除ができれば一通りの作業ができます。

1ボクセルごとに修正する場合は、Brushメニューから[V]を選択し、[Attach]で追加できます。以下の例では爺さんキャラクターの頭を何回かクリックして髪を増やしました。

006

削除は[Erase]を選択すればできます。

007

[Paint]は、選択している色で塗ることができます。

[Move]は、つながっているボクセルをドラッグアンドドロップで移動できます。

[<]は、カラーピックアップです。

[>]は、モデルの同じ色の一括変換です。

ひとまずこれだけ分かればモデルが作成できます。

ボクセル最大サイズの変更

008

ボクセルの最大サイズが上記で、X=20, Y=21, Z= 20となっているので、値を変更してフォーカスを外すと、サイズが変更できます。

エクスポート

009

モデルを作成後、いくつかの形式でエクスポートできます。.objファイルで出力すれば、UnityやBlenderなど3Dモデリングソフトで取り込めます。操作は簡単で、[Export]タブをクリックして、[obj]ボタンをクリックで「名前を付けて保存」ダイアログが表示されるので、「保存」ボタンを押して終了です。010

Unityへの取り込み

011

Exportで出来たファイルを、Unityにドラッグアンドドロップすれば、Unityで表示できます。

012

まとめ

はじめての人向けにとりあえずの操作方法を説明しました。あとはいくつか便利機能があるので少しづつ覚えていきたいところです。またMagicaVoxelはアニメーションには対応していないので、Blenderなどでアニメーションをつければ、面白くなりそうです。