Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
ラベル 2dToolkit の投稿を表示しています。 すべての投稿を表示
ラベル 2dToolkit の投稿を表示しています。 すべての投稿を表示

2014年3月12日水曜日

【Unity,NGUI3.x】2DToolkitのSpriteにNGUIでHPバー(HUD)を表示する


NGUIでHPバーを表示するだけでめっちゃ苦労しました。
ちなみにこういうのをHUD(HeadUpDisplay)って呼ぶらしいですね。

やりたいこと

・キャラクターは2DToolkitのtk2dSpriteでtk2dCameraに表示
・HPバーはNGUIのUISpriteでUICameraに表示

やりかた

下記クラスを作成し、キャラクターオブジェクトに追加

HeadUpDisplay.cs
using UnityEngine;

public class HeadUpDisplay : MonoBehaviour
{
  /// <summary>キャラクタを表示しているカメラ</summary>
  public Camera BaseCamera;
  /// <summary>HUDを表示するカメラ</summary>
  public Camera HudCamera;
  /// <summary>HUDプレハブ</summary>
  public GameObject HudPrefab;
  /// <summary>キャラクタ座標系でのHUDオフセット</summary>
  public Vector3 HudOffset;
  
  /// <summary>HUDインスタンス(自動生成)</summary>
  private GameObject hudObject;
  
  void Start ()
  {
    /// <summary>HUDを生成</summary>
    this.hudObject = Instantiate (this.HudPrefab, Vector3.zero, Quaternion.identity) as GameObject;
  }
  
  void Update ()
  {
    /// <summary>キャラクタのWorld座標をスクリーン座標に変換</summary>
    Vector3 hudViewportPoint = this.BaseCamera.WorldToViewportPoint (this.transform.position + this.HudOffset);
    /// <summary>スクリーン座標をHUDのWorld座標に変換</summary>
    Vector3 hudWorldPoint = this.HudCamera.ViewportToWorldPoint (hudViewportPoint);
    hudWorldPoint.z = 0.0f;
    this.hudObject.transform .position = hudWorldPoint;
  }
}

こんな感じで設定

大事なとこ

WorldToViewportPointとViewportToWorldPointだけ。
それぞれWorld座標からスクリーン座標(左下0,0右上1,1)に変換&戻しを行ってる。

うごいた


やれやれ。

Unity系記事まとめ

2014年2月24日月曜日

【Unity,2D Toolkit】tk2d Cameraについて


Unityのアセットの1つ、2DToolkitを久々に触ってみる。
覚えながら簡単な横スクロールアクションの1つでも作ってみたいなー。

今のところ何も知らないのでとりあえず公式ドキュメントを読みます。
適当に翻訳しながら自分で試したスクショを載せていきたいと思います。
(誤訳してたら教えてください英語できる人)

公式ドキュメント
http://www.unikronsoftware.com/2dtoolkit/docs/latest/

その中から今日はこちら

The tk2d Camera

http://www.unikronsoftware.com/2dtoolkit/docs/latest/tutorial/tk2dcamera.html

UnityはNGUIにしろ2DToolkitにしろ、事あるごとにカメラが出てきて難しいですね。
あれこれ考えても仕方ないのでやってみることにします。

環境

・Unity 4.3.2f1
・2D Toolkit 2.3.3

でははじめます〜

大事な事

スプライトとtk2dCameraをうまく連携させるためには、SpriteやFontに対してtk2dCameraと全く同じ表示設定を適用する必要があります。
これを最も簡単に行うには、tk2dCameraが既に存在する状態でSpriteCollectionを作成します。すると2dToolkitが自動的にカメラの設定を検出し、SpriteCollectionにセットします。

へぇ、便利。

tk2DCameraの作成

1、新規シーンを作成し、デフォルトのMainCameraを削除します。
2、Hierarchy->Create->tk2d->Camera
3、デフォルトの解像度を設定します。今回は1024*768を選択します。
  また、投影パラメータを設定します。ここでは1Pixel = 1Meterにします。
  適切なカメラサイズを選択する際の注意事項についてはこちらを参照してください。(難しそうだったので後回し)

  エラーしてる箇所はGameウィンドウの解像度が出るみたい。
  FreeAspectじゃなくてちゃんと選んだらエラー消えた。

4、tk2dCameraはGameウィンドウの解像度でうまく動くようにがんばるらしい。
  Gameウィンドウで選択する解像度をtk2dCameraにセットしてやればいいってことかな?

5、Spriteを追加してみる。
  ・Hierarchy->Create->tk2d->Sprite
  ・DemoCameraSpriteCollectionとheart_emptyを選択

え?何もでないけど…
SpriteCollectionとtk2dCameraの設定が違ってて大きく(もしくは小さく)表示された場合は1:1ボタン押してねって書いてある。けどきっと関係ないな。
画面外に出てるだけかな?とりあえず進めよ

6、Spriteの座標を(100,100,0)に。さっきカメラの設定を1Pixel=1Meterにしたからうまいこと100,100Pixelの位置にくるらしい。

ちゃんとでましたわ〜。いいねいいね。

オーバーライド

tk2dCameraは実行時の解像度に基づいて自身のサイズを変更できます。
Gameウィンドウの解像度を変えることで色々な端末で実行する際にどのように表示されるか確認することができます。

アンカー

tk2dCameraはアンカーをサポートしてます。角と中心の計9カ所に固定できます。

1、前ステップで作ったtk2dCameraを選択しましょう。
2、アンカーを追加します。
  Hierarchy->Create->tk2d->Camera Anchor
3、これだけで固定場所とオフセットを設定できます。

4、アンカーの場所は常にこの設定に基づいて決定されます。このアンカーに接続したSpriteは常にその場所を基準とした座標となります。
  例えばハートを画面右上に固定した場合、実行時の解像度に関わらず常に右上に表示されます。

アンカーを右上に固定し、
Spriteをアンカーにぶら下げて座標を調整
いい感じになりました。

まとめ

いいねー簡単ですねー。
カメラの解像度と端末の解像度が違った場合どう引き延ばされたりするのか気になるけど今はまだいいや。そのうち試してみよう。

最近PHPばっか触っててUnity久々。やっぱ楽しい♪

2013年7月6日土曜日

【Unity】はじめての2D Toolkit

Unity 2D Toolkit

Unityで2Dゲーム

飽きもせずにUnityのこと調べてます。
Unityで2Dゲームを作る方法を調べると大体下の2つに行きつく様子。
  • NGUI
    GUI(ボタンとかメニューとか)の作成に強い。
  • 2DToolkit
    AngryBirdみたいなのを作るのに強み。見た目通りの当たり判定を付けたりだとか。
GUI主体ならNGUI、動きのある感じなら2DToolkitって感じかも?
組み合わせて使えるのかな?色々試してみるけど。


見た目通りの衝突判定のあるゲームが作りたいので2DToolkitポチりました。

どうやって使うん

早速インポートしてデモ見てたんだけど…使い方が全く分からん!
ググっても日本語の情報少なめ。
本家のドキュメントをがんばって読むかーと諦めかけたころに下記サイトを見つけました。
ありがたやー。ここみながらやってみたことをメモ。

できたものはこんなの。
ゴロゴロするだけ
  • 重力でゴロゴロ
  • 見た目に合った当たり判定

作り方

1.インポート

・Unity->Windows->Asset Store
・2D Toolkitをインポート
・Demoも含め全部入れた
バージョンはこんなの
全部いりで

2.SpriteCollectionの作成

Spriteの情報はまとめてSpriteCollectionっていうものに入れるらしい。
同一のSpriteCollectionに入ってる画像は一括で描画してくれるとかなんとか。

SpriteCollectionの作成

・(準備)Projectビュー->Create->Folder
  MySpriteCollectionって名前のフォルダ作った
・Projectビュー->Create->tk2d->Sprite Collection
・名前をMySpriteCollectionに変更
SpriteCollectionが出来た

SpriteCollectionに画像を追加

・作ったSpriteCollectionのInspectorビューにあるOpenEditorを押すと
 SpriteCollectionEditorが開く。
Editorを開く
こんなの
・Projectビュー->TK2DROOT->tk2d_demo->demospritecollection->spritesから
 下記3つをSpriteCollectionEditorにドラッグ&ドロップ
SpriteCollectionEditorに追加
・画像が追加されたらEditor右上のCommitを押す
  Editorに変更を加えたら必ずCommitすること。
Commit
でけた
-tk2dってファイルもできるみたいだけど何だろうね。

3.Spriteの配置

・Hierarchy->Create->tk2d->Sprite
 ランダム?な画像が選ばれてるのでさっき作ったMySpriteCollectionにある画像を選びなおす。
・Inspectorビュー->Tk 2d Sprite->CollectionをMySpriteCollectionに変更
・Inspectorビュー->Tk 2d Sprite->Spriteをcrateに変更
Spriteを変更した
・同じようにして適当にground,crate,rockを配置
 名前も分かりやすいように変えとく
・サイズを変える場合はTransform.Scaleではなく、Tk2dSprite.Scaleを変更するらしい
なんかそれっぽくなってきた
まだ再生しても何も動きません。

4.Rigidbodyをつける

重力で動くようにするため配置したSpriteにRigidbodyをつける。

・Inspectorビュー->AddComponent->Physics->Rigidbody

Groundは落ちてっちゃ困るのでIsKinematicをONに。

このまま再生すると地面以外全部落ちてく。

5.当たり判定(Collider)をつくる

1個1個のスプライトに当たり判定を設定していく。

・SpriteCollectionEditorを開き、ColliderType->Box Trimmedを選択
 これで画像に合わせて四角い当たり判定ができるみたい。
 ここもCommitを忘れずに。
Box Trimmed
 groundとcrateはこれでOK。
ななめからみると枠ができてる
Rockについては四角じゃ困るので多角形のColliderを作る必要がある。

・SpriteCollectionEditorでRockを選択し、ColliderTypeをPolygonにする
・緑の枠と白いポッチが出てくるのでこれをマウスで編集する。
Polygon Colliderの編集
・マウスホイールで拡大縮小
・頂点はマウスで移動
・辺をダブルクリックで頂点追加
・頂点をクリックしたままDeleteかBackSpaceで頂点削除
こんな感じ。
ここまでで動かすといくつか不具合が…

岩が前後に落ちていく

手前に落下
2D表示だけど演算は3Dなので当たり前ですね。
各RigidbodyのConstraintsを設定して解決。
奥行き方向をロック

岩の重心がおかしい

岩がうまく転がらずに止まっちゃいました。どうも重心が変みたい。
SpriteCollectionEditorのAnchorをCustomにすることで調整できた。
重心を調整

岩と岩が重なる

岩はColliderTypeをPolygonに設定したんだけどこれだとMeshColliderっていうのになるみたい。
Unityのマニュアルによるとメッシュコライダ同士は衝突できないそうな。
これを解決するためにConvexをオンにする必要があるらしい。

SpriteCollectionEditorのColliderTypeにあるConvexをオンにすることで解決できた。
Convexをオン

6.固定のオブジェクトをまとめる(Static Sprite Batcher)

今回の床のように動かないものはStatic Sprite Batcherっていうものでまとめることができるらしい。
まとめることで以下のようなメリットがある。
  • Hierarchyビューがすっきりする。
  • 描画が軽くなる。
使える条件としては同一のSpriteCollectionを利用している必要があるみたい。
あともしカメラに写りきらない広いステージの場合は複数のStaticSpriteBatcherを使うこと。

・Hierarchy->Create->tk2d->Static Sprite Batcher
・追加したStaticSpriteBatcherにGroundをドラッグ&ドロップ
StaticSpriteBatcherを作成
この状態でStaticSpriteBatcherのInspectorにあるCommitを押すと…
3つのGroundが消えた
Commitの文字がEditに代わり、3つのGroundがHierarchyから消える。
これで複数のオブジェクトが1つになって軽くなるらしい。
再編集したければEditで。

とりあえずこんなぐらいかな。
できた

まとめ

参照したサイトにはRigidbodyのこととか書いてなかったので手探り。
もっといい方法があるのかもしれない。
でもコーディング0でここまでできるのはすごいなぁ。

Related Posts Plugin for WordPress, Blogger...