Unity5のインベントリー作成チュートリアルの比較とやってはいけない動画

Youtubeで「unity inventory tutorial」と検索するとUnity5でインベントリー作成のチュートリアルが見つかります。ですが出版業界の人に編集してもらった動画ではないため、無駄に時間が長かったり、やってみない事には自分に合った動画かわかりません。いくつか動画の長さを調べたり、やってみたので感想を書きます。

Minecraftのインベントリー
マインクラフトのインベントリー 

やってはいけない動画

この動画に挑戦しましたがPart2で中断しました。最初は、動画一覧を見た時に、合計12個の動画で、最終更新は2015年9月、1つあたりの動画の長さも15分以内のため、自分に合ってそうなので始めてみました。

Part2で問題が出てきました。Unityは4.6からGUIシステムが新たに導入されたのですが、このチュートリアルではそのイベントシステムを使わずに、CameraをCanvas内に配置して、映し方をOrthographicにして実装していました。マインクラフトや3DゲームではPerspectiveなカメラを使うため、続きの動画はやってませんがここで中断しました。

また、当然Unity5.3では環境によってはうまく動作しないため、多くのコメントで、イベントシステムを使うべき事や、動かないという指摘がありました。よって、この動画はお勧めしません。

お勧め

インベントリー管理ではないですが、この動画シリーズは90分ぐらいでUnityのGUIの基礎が分かるためお勧めです。このカードゲームで基礎を学べばインベントリー作れそうです。この動画をやると、UnityのGUIのイベントシステムとEvent Triggerを使わずC#スクリプトのみで実装する方法の基礎がわかります。学習できるキーワードとしては以下になります。

  • Graphics Raycaster
  • Canvas Group – blockRaycasts
  • Layout Element
  • Layout Group
  • Event System
  • IBeginDragHandler, IDragHandler, IEndDragHandler
  • IPointerEnterHandler, IPointerExitHandler
  • IDropHandler

90分で現実的に学習できる時間なので、これでドラッグアンドドロップやUnity GUIの基礎を体得して、そこからキーワードなどを調べていくとインベントリーに限らずいろいろな応用ができそうです。

中途半端?

スクリーンショットがよさそうですが、動画の最後が中途半端に終わっていて、アイテム削除の方法は、最後の動画のコメントを見ろとなっています。寄付があれば動画を作ってくれるようです。

Unity 5 Tutorial: Survival Game Inventory C#(xOctoManx)

自分で実装できる人で、ワールド座標からアイテムを取得したりドロップしたい場合のテクニックを知りたい人向け。

xOctoManxのチュートリアルは、80分のチュートリアルなので実際に試してみました。このチュートリアルでは、マインクラフトのように、ワールド空間でEキーで、アイテムを取得して、インベントリーからアイテムを選択して、[Drop Button]でワールド座標にドロップすることができたので、インベントリーUIとワールド空間のやり取りが学べて良かったです。ただし、インベントリーは、アイテムの木と石を若干ハードコーディングしているので実用的ではありませんでした。インベントリーのUI上でアイテムをドラッグアンドドロップしたりする方法もないため、別途学ぶ必要があります。

このチュートリアル動画は、この動画で作ったインベントリーシステムをそのまま自分のプロジェクトに使うようなものではなく、この動画で学んだことを踏まえて自分で新たに作るためのチュートリアルでした。

 

長い

高度なインベントリーシステムを作る場合は参考になりそうですが、初心者向けではなさそうです。

まとめ

インベントリーを実装するためのYoutubeチュートリアルをいくつか見てみました。ひとりの作者の動画を参考するのではなく、できる範囲の動画をいくつかピックアップして、それを踏まえて独自に実装していけばよさそうです。

 

Unity5でオブジェクトをドラッグする方法

Unity5では小さなスクリプトを追加するだけでオブジェクトが掴めるようになります。Unityのスクリプトは、OnMouseDown関数とOnMouseDrag関数で、マウスのクリックとドラッグ状態を検知できます。そのため、マウスクリックしたときに、マウスカーソルと対象オブジェクトの位置を正確に計算できれば、あとは対象のオブジェクトをマウスカーソルに合わせて移動させればよいだけです。

このC#スクリプトの読むポイントとしては、Unityのシーン上にあるオブジェクトはワールド座標上にあり、マウスカーソルはスクリーン座標にある。という事を理解することです。スクリーン座標は単純に液晶モニターのXY座標です。ワールド座標は、無限に広がるXYZ座標で、ここにゲームオブジェクトが配置されています。

Unityでは、この座標の変換がよくあります。特にマウスカーソル使う場合はよく変換します。変換には、Camera.main(カメラ)から取得できるWorldToScreenPointとScreenToWorldPointを使います。この変換処理はよく使われるので、Unityの場合は、Cameraからすぐアクセスできるようになっています。なので初心者の方はいきなりCameraが出てきて驚くかもしれません。

スクリプトの割り当て

上記スクリプトは、GrappleObjectなどの適当なクラス名で作成し保存して、対象のオブジェクトに割り当てるだけです。

GrappleObjectのスクリプトを割り当てたところ
GrappleObjectのスクリプトを割り当てたところ

デモ

ファースト・パーソンでプレイヤーを動かしながら、このスクリプトでオブジェクトを掴めました!

Unityでは簡単にオブジェクトをつかめる!
Unityでは簡単にオブジェクトをつかめる!

Unity5で、ダメージ表示とヘルスバーを作成する

前回、前々回で、Unity5で、ダメージ表示用のFloatingTextとlocalScaleを使ったライフバーを作成しました。また小さなBillboardスクリプトでカメラのほうに向くようにしました。これによりリアルタイム・ストラテジー・ゲームで使われるような表示が可能になりました。

びるぼー
ビルボードで、ダメージ表示とライフバーを表示、ピンクオブジェクトはY軸で回転してる。

テキストを表示する方法

Render Modeを「World Space」にしたUI Canvasを用意してもテキストは綺麗に表示されませんでした。どうやらCanvas Scaler (Script)を修正すればひとまず綺麗に表示できるようです。とはいえ細かく調べていないので、デバイスごとに修正する必要があるかもしれません。

002
Dynamic Pixels Per Unitを1000に変更

ビルボードの挙動

ヘルスバー用のCanvasと、ダメージテキスト用のCanvasを2つ用意して、それぞれにBillboardスクリプトを設定したら、ダメージテキストは文字が逆さまになり反転してしまいました。何か設定がまずいのかもしれませんが、ひとまずVector3.up,Vector3.forwardなど反転して対応しました。

最適化

おそらく、Canvasを1つにしたほうがパフォーマンスが良いです。ただパラメータが多すぎるので、多くを把握するためには時間が必要です。たとえばレベルアップ用のジャンプアップテキストをさらに追加する場合は、もっと知識が付くまでは、べたですが新たにCanvasを作成して別途スクリプトを書こうと考えてます。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx) and DamageText.zip

要望があればチュートリアルを作成しますが、ひとまずプロジェクトを配布します。

Unity5でビルボードに対応したヘルスバーを作成する

xOctManxさんのUnity5チュートリアル動画である、「Eash Health Bar C# using localScale」と「Health Bar Look To Camera C#」で、ストラテジーゲームで使われるヘルスバーを3D空間で作成することができました。ポイントとしては、2つあって、1つは、Unity5で新たに用意されたWorldScaleのCanvasを使うことです。通常のCanvasはスクリーン座標ですが、この機能で、ワールド座標でキャンバスを使えます。

ビルボード
ビルボード

また2個目の動画で作成したビルボードは凄くシンプルなスクリプトで以下のようになります。カメラの傾きの逆の傾きをVector3.back、Vector3.downで考慮することで、傾きが相殺されて、結果的にカメラに対してオブジェクトが向き合う形になります。そのためこのビルボードの仕組みは、このCanvsに特化したスクリプトでははなく、Unityのすべてのオブジェクトに対して使用できるスクリプトでした。

 

これでヘルスバーやマジックポイント用のバーをさくせいすることができたのであとは、ダメージテキストを組み合わせることで、敵やプレイヤーの基本UIを作成できそうです。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx).zip

 

Unity5でポップアップのダメージ表示を行う

Youtubeのチュートリアルを参考に3D上で、ポップアップのダメージ表示を実装してみました。これにより結月ゆかりのゲームにダメージ表示ができるようになります。あとは、視点移動したときに、ヘルスバーが表示できれば基本的な状態表示が完了します。

 

カメラが移動してもテキストがターゲットを起点として表示される。

細かい計算を想定していたのですが、実際は、UnityEngine.UI.Textは、スクリーン座標で表示され、シーン上のオブジェクトはワールド座標で表示されるので、それをCamera.main.worldToScreenPointで正しく変換させるだけでした。

テキストが上下に移動するのは、何か特殊な処理をしているわけではなく、UnityEngine.UI.Textを通常のオブジェクトと同様にアニメーションで、座標移動させているだけです。

 

 

このプロジェクトの配布

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

 

 

Unity5で簡単なヘルスバーを作成する

体力バー、ヘルスバーはいろいろな作り方がありますが、とりあえずほしい場合のチュートリアルとして以下が9分の動画で簡単でした。

ソースコードは特に難しいことはなく、ボタンを押したときに0から1の値をランダムで取得してそれをImageのfillAmountに指定することで、体力の赤色のイメージのサイズを変更するだけでした。

コードよりもUnityエディターでのオブジェクトの設定が初心者には参考になりました。ImgeのTypeをFilled(埋める)という形式にして、メソッドをHorizontalにすると、Fill Amountの0~1で、ライフバーになります。またFill Originで、左を起点にするか右を起点にするか指定できます。もちろんFill MethodをVerticalにすれば、縦のライフバーも作成できます。

001
Fill MethodをHorizontalにして、Fill Amountを0~1にしてライフバーになる
002
Fill Amountを0.4にしたとき

 

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

結月ゆかり、弦巻マキ、ゆっくり霊夢が主人公の簡単なゲームを作成し始めました。以下の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/ さんに良い曲がいっぱいあります。

UnityでMaterialの色を曲に合わせて変えたい

こちらのデモは曲中に、シェーダーを操作して色を変えています。シェーダーを使わない場合でもMaterialの色を曲に合わせて変更する際の参考になりそうなのでブックマークしておきます。それにしてもシェーダーまで触れるようになると詳細な表現ができそうですね。

ソースコード

https://github.com/hecomi/CyalumeLive/blob/master/Assets/CyalumeLive/Scripts/CyalumeAudioBridge.cs

Unity5でオーディオヴィジュアライザー作るための情報

Unityでは、GetSpectrumDataなどのが用意されているので、音量やスペクトラムデータを簡単に取得できます。Youtubeに短いチュートリアルがあるのでこれでオーディオ回りのキーワードがわかります。