2015年1月21日水曜日

Unity2DでParticleが表示されないのを直す方法

Unity2DでParticleを使おうとしたら、背景の後ろに表示されてしまいました。



どうやらParticleがSorting Layerを持っているらしく、デフォルトでは「Default」になっているのでこのような現象が起こるようです。

スクリプトでParticleのSorting Layerを設定する方法もあるのですが、そうしなくても解決できる方法を見つけたのでご紹介します。

右上にある「Layers」から「Edit Layers…」を選択します。



Sorting Layersを開いて、「Default」を背景のあるレイヤーよりも前に移動させます。



ParticleのレイヤーがDefaultになってしまうのなら、背景をその後ろにしようというわけです。

これでParticleが背景の前に表示されるようになりました。



スクリプトを使わなくても対応できるので簡単ですね。

でも、以外と解決方法が分からなかったりしたので、覚えておくと良さそうです。



『パズ銭』はハマり過ぎ注意な中毒者続出のパズルゲーム

パズ銭 ~スワイプで両替パズル

2015年1月20日火曜日

Unity2dで何かをタップ(クリック)する方法

アプリだと何かをタップしたり、タップした場所に何かを出したりということを良くやります。

そのような処理をUnity2Dではどのようにやるのかを調べました。

ただし、PC上で動作するようにタップではなく、マウスクリックになっているのであしからず。


まずは、2Dプロジェクトを作成して、適当な背景を置いて、Directional lightも配置します。



次に3D ObjectのSphereを作成し、Sphere Colliderを削除、Circle Collider 2Dを追加したら、Prefab化しておきます。



最後にカメラあたりにスクリプトを追加して、以下のようなコードを書きます。


#pragma strict

//生成するオブジェクト
public var prefab : GameObject;

function Update () {
  //マウスが左クリックされた場合
  if (Input.GetMouseButtonDown(0)) {
    //マウスポインタの位置をワールド座標に変換
    var worldPoint : Vector2 = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    
    //クリックした位置に当たり判定があったかどうか
    var hit : RaycastHit2D = Physics2D.Raycast(worldPoint, Vector2.zero);
    
    if (hit) {
      //当たり判定があった場合は対象を削除
      Destroy(hit.collider.gameObject);
    } else {
      //当たり判定が無かった場合はオブジェクトを生成
      var bullet = Instantiate(prefab, worldPoint, Quaternion.identity);
    }
  }
}



コードを保存したら、プロパティ(prefab)にさっきのSphereを紐付けてください。




実行すると、何もない場所をクリックするとSphereが生成され、Sphereをクリックすると消滅します。



タップ(クリック)の処理も簡単に実装できてしまいました。

この調子で行けばすぐにゲームが作れちゃいそうですね。



『パズ銭』はハマり過ぎ注意な中毒者続出のパズルゲーム

パズ銭 ~スワイプで両替パズル

2015年1月18日日曜日

Unity2Dで自分の画像をプレイヤーとして動かしてみる

今回は、Unity2Dで自分で用意した画像をプレイヤーとして動かしてみたいと思います。

もちろん、動かすだけではなくキャラクターにアニメーションもさせたいですね。

ということで、まずは動かすキャラクターとして、このような画像を用意しました。


Unityではこのように複数の絵を一つの画像にしても、それを切り分けて使うことができます。

画像をプロジェクトに追加して選択したら、InspectorのSprite Modeを「Multiple」にして「Sprite Editor」をクリックすると新しいウィンドウに画像が表示されるので、1つ分の画像を範囲選択するとそれに名前をつけて別の画像として扱えるようになります。


とりあえず、右向きの画像を3つほど切り出すととProjectにこんな感じで表示されます。

元画像の横の「三角」で切り出した画像を個別に選択することができますね。



この画像の一つをSpriteで表示して、適当に背景を置きます。

SpriteにはRigidbody 2D, Box Collider 2Dを追加し、キャラクターが落ちないように地面あたりにもBox Collider 2Dを追加します。



次にこの配置したキャラクターにアニメーションをつけます。

HierarchyでSpriteを選択してから、「Window→Animation」を選択してAnimation Viewを表示します。

Animation Viewの再生ボタンの下をクリックして[Create New Clip]で新しいアニメーションを作れます。

では、歩いているアニメーションを作ってみます。



画像をタイムライン上にドラッグ&ドロップで追加してパラパラ漫画の感じで作ります。

同じ要領で静止時のアニメ(止まっているだけ)も作っておきます。



続いて、作った「歩く」「静止」のアニメーションをMecanimという仕組みでコントロールします。

アニメーションをつけたSpriteを選択してから、「Window→Animator」でAnimator Viewを開きます。

Animator Viewには「Any State」の他に「歩く」「静止」の2つの箱があるはずです。



「歩く」の箱を右クリックして「Make Transition」を選択後に「静止」の箱に矢印を引っ張ります。

同じように「静止」から「歩く」にも矢印を引っ張ります。

次にParametersの横の「+」をクリックして「Bool」を選択して「New Bool」を「IsWalk」に変更します。


最後に「静止」から「歩く」の矢印を選択して、InspectorのConditionsにIsWalk,trueを追加します。
同じように「歩く」から「静止」にはIsWalk,falseを追加します。



後は、キャラクターを動かすスクリプトを書くだけです。

キャラクターのSpriteにスクリプトを追加して以下のようなコードを書きます。


#pragma strict

//方向(1:右、-1:左)
private var direction = 1;

function Update () {
  var animator = GetComponent(Animator);
  var h = Input.GetAxis("Horizontal");
  var walkSpeed : float;
  if (h < 0 || 0 < h) {
    //左右キーが押された場合
    walkSpeed = 10;
    
    //歩くアニメをスタート
    animator.SetBool("IsWalk", true);
  } else {
    walkSpeed = 0;
    
    //静止アニメをスタート
    animator.SetBool("IsWalk", false);
  }
  //横に移動
  rigidbody2D.velocity = Vector2(h * walkSpeed, rigidbody2D.velocity.y);
  
  //左右に反転する必要があるかどうか
  if ((h < 0 && direction > 0) || (h > 0 && direction < 0)) {
    //キャラクターを反転
    transform.localScale.x *= -1;
    
    //方向を反転
    direction *= -1;
  }
}



これで左右の方向キーでキャラクターが歩くようになりました!



Mecanimのあたりが少しややこしいですが、それでも割と直感的に作れると思います。

2Dは画像を用意するだけでゲームのキャラクターにできるので、見た目がオリジナルなゲームは作りやすいですね。



『パズ銭』はハマり過ぎ注意な中毒者続出のパズルゲーム

パズ銭 ~スワイプで両替パズル

2015年1月17日土曜日

Unity2Dを2D Platformerで試してみた

Unityは3Dゲームだけではなく、2Dゲームも作れるらしいので試してみました。

まずは2Dのプロジェクトを作ります。

Set up defaults for : 『2D』にして「Create Project」します。



とりあえず、サクッと動くものが作りたいので、『2D Platformer』をアセットストアから落とします。

これはUnityが用意してくれた「2D入門キット」みたいなアセットです。



アセットをインポートしたら「Sprites→_Environment」に背景に使えそうな画像があるので適当に配置します。

配置したらLayerをGround、Sprite RendererのSorting LayerをBackgroundにしておきます。

複数の背景画像を置く場合は、手前に表示したい方のSprite RendererのOrder in Layerを大きい値にします。


次に「Prefabs→Characters」にキャラクターが居るので、『hero』を配置します。

そして、カメラを調節して背景が全部映るような感じにします。

ここで実行すると、キャラクターが下に落ちていってしまいますね。



これは床の当たり判定が無いからですので、背景を選択して「Add Component→Physics 2D」から『Box Collider 2D』を追加し、床にあたる場所を四角く囲むようにCenterとSizeを調整します。



これで、キャラクターが床の上を歩けるようになったはずです。

←→で左右に動くし、スペースでジャンプ、controlで弾を撃つことができます。



さらに、3Dのオブジェクトを配置することも可能です。

3Dオブジェクトに2Dと同じ当たり判定を与えたければ『Box Collider 2D』を追加すればOKですし、重力を与えたければ『Rigidbody 2d』を追加します。


そして、Spriteを追加すれば画像を2Dオブジェクトとして配置できます。

その場合はSprite RendererのMaterialに画像を設定します。

もちろん3Dオブジェクトと同じように『Box Collider 2D』『Rigidbody 2d』を追加することも可能です。



こんな感じで2Dゲームもサクッと作れてしまいました。

しかも、3Dオブジェクトも使えるし、画像を2Dオブジェクトとして使うこともできます。

2DゲームでもUnityは使い勝手が良さそうですね。



『パズ銭』はハマり過ぎ注意な中毒者続出のパズルゲーム

パズ銭 ~スワイプで両替パズル

2015年1月16日金曜日

Unity,uGUIのテキストをスクリプトで編集する方法

Unityでは4.6からUIを表示する部品がuGUIという新しいモノに変わりました。

書籍ではテキストを表示する際に「GUI Text」を使うという古いやり方だった為、新しいやり方を調べましたのでここに記載しておきます。



まず、テキストを表示する場合は「Create→UI→Text」を選択します。



すると、Canvasが自動で追加され、その子要素としてTextが配置されます。


これでとりあえず実行してみると、ちゃんとテキストが表示されます。


次に、このテキストをスクリプトで変更するやり方です。

『Canvas』の方に以下のようなスクリプトを追加します。


public var TestText : UI.Text;

function OnGUI() {
  TestText.text = "Change Text";
}


そして、プロパティのTestTextに変更したいTextを紐付けます。



これで実行すると、ちゃんとテキストが変更されました。



Unityは物凄いスピードで進化して行って、どんどんやり方も変わっていくので大変ですがなんとかついて行きましょう。



『パズ銭』はハマり過ぎ注意な中毒者続出のパズルゲーム

パズ銭 ~スワイプで両替パズル