Unity5で剣の攻撃とエフェクトを作ってみる

Unity5で見下ろし型のガン・シューティングを作っていますが、近接攻撃も作ってみたいので、実験用プロジェクトを作成しました。

剣を振る動作をどうやって実現するか

Unityでは、剣の攻撃のアニメーションを作る方法として大きく3つ考えられます。

  1. Blenderなどモデリングソフトでアニメーションを用意する。
  2. Mecanimで、Transformを修正してアニメーションを作成する。
  3. C#スクリプトで、Transformを全部操作する。

1つのアニメーションを作成する場合は、3の方法で問題ありませんが、アニメーションの数が多くなるとそれをすべてコードで書くのはかなり面倒なので、近接攻撃のアニメーションのようにいろいろ増えそうな場合は2の方法が簡単です。デザイナー・モデラーがいるプロジェクトの場合は、1の方法が最適です。

今回は頭から胴に斬るアニメーションと、胴を横に斬るアニメーションを2つ用意し、将来的にはもっと増やしたいので、2の方法を選択しました。以下は縦に剣を振るアニメーションです。

A02

剣にアニメーションを付けたら、それはPrafabにして、PlayerにEmpty Object(この場合EquipPointという名前)を用意してそこに持たせるようにします。

Empty Objectを用意して、そこに剣を装備させる
Empty Objectを用意して、そこに剣を装備させる

ゲームが開始したときに、PlayerBehaviour C#スクリプトのStartメソッドで、Sword Prefabをインスタンス化して、sword.transform.setParent(親オブジェクト, false);で、先ほどのEquipPointに装備させます。

あとは、マウスの左クリックで、縦のスイング、右クリックで、横のスイングのアニメーションを呼び出すようにしました。このStartメソッドのインスタンス化する方法とアニメーションを呼び出す方法は、よく使われるコードなので、お約束として覚えてしまえばいいです。

 

 

マウスカーソルの方向にプレイヤーを向ける

Playerオブジェクトの向きを変更するのは、transform.LookAt(向きベクトル);です。これはメソッド名からすぐにイメージできると思います。難しいのは向きベクトルを求めるところです。

  1. 仮の地面(tmpPlane)を用意する
  2. カメラからマウスカーソルへの光線(Ray)を用意する。
  3. 光線を仮の地面(tmpPlane)へ照射(Raycast)して、カメラからその地面までの光線の長さを求める。
  4. 光線の長さがわかったので、その点(point)を求める。
  5. Playerの高さを考慮して、LookAtで向きを変更する。

上記のように、レイキャストで求める必要があります。一度この仕組みをしっかり学べば理解しやすいです。しかし私も、昔ながらの物理エンジンがないゲームライブラリなどでは、光線の概念がないため、はじめて学習したときは結構理解するのが大変でした。

パーティクルの作成

パーティクルは、項目数が多いため、誰かが作ったものを参考にして、自分でいろいろパラメータを修正しながら作って慣れていくしかありません。

小さな四角形が落ちるエフェクト
小さな四角形が落ちるエフェクト
003
パーティクルは

パーティクルの基本は、Duration, Start Lifetime, Start Speedです。Durationは、この秒数、パーティクルを放射します。この例の場合は、0.15秒つまりかなり身近時間の放射です。Start Lifetimeは、生存期間で、放射したものが2秒生き続けます。2秒すぎると消えます。Start Speedは、そのまま速度で、これを速くすれば、遠くまで飛ばせます。

EmissionのRateは、量です。この場合1秒に100個ぐらいパーティクルを放射します。エフェクトを選択すると、Sceneビューに以下のGUIが表示されて、この部分でパーティクルの起動、ポーズ、停止ができます。また一番下に現在生成されているパーティクル数も表示されるのでいろいろデバッグに役立ちます。

006

Gravity Modifier: 2.5と指定しているので、重力の影響を受けて地面に落ちるようになります。これが0だと、横に飛び続けます。

004

上記では、Collisionを有効にして、[World]をターゲットにしているので、地面に当たった場合に貫通しないようになります。このパーティクルでは、Voxelモデルを倒したときのパーティクルにしたいため、Render Modeをメッシュにして、Materialを新規に作成(Shader: Sprites/Default)して割り当てています。通常のパーティクルの場合は、これをする必要ありません。

005

作成したパーティクルはPrefab化しておきます。

剣で斬られたら、パーティクルを生成する

敵オブジェクト(Enemy)に、Enemyスクリプトを割り当てて、Swordが衝突したら、InstantiateでParticleSystemを生成します。あとは、ParticleSystem.startLifeTimeで、開始からの生存秒数が取得できるので、この秒数後にDestroyメソッドを呼び出して、Particleを破棄しています。

 

剣の軌跡

Trail Rendererを使えば簡単に剣の軌跡を作れます。Swordプレハブに、Empty GameObjectを子要素として追加して、名前をTrailにしています。これにTrail Rendererコンポーネントを追加し、各種設定を行います。

007

このプロジェクトの配布

Unity5.4で作成しました。

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

まとめ

プレイヤーをマウスカーソルに向けて、近接武器である剣を振るようにして、ダメージの視覚化としてパーティクルを生成するようにしました。また斧やハンマーにしたときに簡単にモーションを追加できるようにMecanimでアニメーションを作成しました。

 

Unity5でクラッシーロードのようなIsometric(アイソメトリック)な画面の作成

クラッシーロードのような画面はISOMETRIC(アイソメトリック)と呼ばれ、日本語では等角を意味します。Unity5では位置と回転を調節するだけで、2,3分で簡単にIsometricなカメラを作成することができます。それではやってみましょう。

001

 

1.GameObjectを作成し、RotationをX:30,Y:45にして、Main Cameraを子要素にする。

002

2.Main CameraはPositionをX:0,Y:0,Z:-10にして、ProjectionをOrthographicにして、お好みでSizeを調整します。

003

できた!!

004

 

Perspectiveカメラで同じような感じを出してみる。

1.GameObjectを作成し、RotationをX:45,Y:45

101

2.Cameraを子要素にして、Position Z:-45、Projection:Perspective, Field of View を 30以下。

102

等角ではない感じですが、Perspectiveカメラでも近い感じにできました。もしかするとPerspectiveでももっと等角にできる正確な値があるのかもしれません。

103

 

参考資料

http://answers.unity3d.com/questions/12027/how-to-do-a-camera-that-is-top-downisometric.html

 

このプロジェクトの配布

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

 

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

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

A01
ゾンビだ!!

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

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

Unity5でオーディオヴィジュアライザーを作りました。

結月ゆかり、弦巻マキ、ゆっくり霊夢のゲームを作る過程で、オーディオ・スペクトラムの取得方法など調べているうちに、一度オーディオ・ヴィジュアライザーを作ったほうが理解しやすいのでUnity5で作成しました。

画像の青いスペクトラムのソースコードが以下になります。

まず、プリミティブのキューブを2048個並べます。手動で並べるのは面倒なので、for文とInstantiateで生成します。キューブは、CreatePrimitiveで作成しても構いません。キューブは当然Transformコンポーネントを持っているので、localScaleプロパティーで、サイズを変更できます。

CreatePrimiviteでキューブを作成する場合は、GameObject.CreatePrimitiveです。

 

スペクトラムを取得するには、GetSpectrumDataを使います。Unity5.3場合は、第一引数にあらかじめ、領域確保した配列を渡して呼び出せば、結果としてそこにデータが返ってきます。以前のAPIでは戻り値でデータを取得しましたが今は非推奨です。このサンプルでは、配列のサイズは2048にしていますが、2のN乗の値であれば問題ないようです。

あとは、gameobject.transform.localScaleのY軸にこのスペクトラムデータと倍率を渡して、キューブのY座標が大きく増減するようにしています。これでオーディオヴィジュアライザーの完成です。

キューブを円状に並べる場合は、Mathf.Cos、Mathf.Sinで単位円(半径1の円)のXY座標が求められるので、radiusで大きくしてあげればよいです。これはUnityに限らず三角関数のお約束みたいなコードです。

 

このプロジェクトの配布

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

音声ファイルは、二次配布になるため削除しています。http://www.d-elf.com/ さんに良い曲がいっぱいあります。

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

A04

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

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

 

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でアニメーションを作成してそれを動作させたいです。

Voxelの情報収集

Blenderでモデリングにはとても時間がかかるので、ちょっとしたゲームならVoxelを作ってしまうのもよいかもしれません。いろいろ検索していたらちょうどUnity向けの情報を見つけました。

MagicaVoxelで作ったプリキュアをUnityで動かすで紹介されているMagicaVoxelを使うと簡単にボクセルが作れそうです。UnityのストアやGoogleで、ゲーム関連のキーワードで検索するとVoxelのキャラクターがたくさん見つかるので、こういうのを参考にオリジナルを作って行けそうです。

What do a tiger, pig, llama, rabbit, owl and lion have in common?

Voxel用無料エディター

MagicaVoxel

001

MagicaVoxelのUI説明

MagicaVoxelは独特のUIですが一度以下で、一通りUIを学ぶとすんなり作業に入れます。

 

 

Voxelで結月ゆかりさんのゲームを作っている方

http://oyadimaker.com/blog/

ちょっと気になったゲーム

「Super Phantom Cat」https://www.techjo.jp/2016/01/472975/

「Looty Dungeon」https://www.techjo.jp/2016/05/486085/

MagicaVoxelとUnityの連携記事

MagicaVoxelで作ったプリキュアをUnityで動かす

MagicaVoxelで作ったプリキュアをUnityで動かす(daishi blog) では、MagicaVoxelの素材と、素材用アーマチェア(=Blenderのボーン)を配布してくれていて、リギングの手順なども丁寧に説明してくれています。新しいアニメーションを作る場合は別途情報が必要ですが、まずMagicaVoxelのデータを作って、Unityで動かすという作業手順を確立するための最適な入門情報です。またdaishiさんは、MagicaVoxelで結構記事を書かれているので、参考になりそうです。

モーション(アニメーション)を作るためのとっかかり情報

まだいろいろわからない事が多いのですが、上記などからキーワードを参考にするとモーションを作れそうです。