ラベル uGUI の投稿を表示しています。 すべての投稿を表示
ラベル uGUI の投稿を表示しています。 すべての投稿を表示

2014年8月29日金曜日

【Unity、UniRx】クリック回数をトースト表示する


@Baiteen

ReactiveExtensionsがUnityでも使えるってのを今更知ったので、今更ながら使ってみた。その6。

やりたいこと

ReactiveExtensionsを使ってクリック回数をトースト表示する。

やったこと

(UniRxはインポート済み)
まずは、クリックするためのSphereを追加(Sphereじゃなくてもいい)
前回のなごりでPlaneを追加(Planeじゃなくてもいい)
トースト表示するためのText追加(せっかくなのでuGUI使いました)
それからC#Scriptを作成してコードを以下のように変更(今回もTestScriptにしました)
そしてTestScriptをSphereにドラッグ&ドロップしたら出来上がり
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UniRx;

static class ColorExt
{
  /// 
  /// Textのアルファ値をセットする拡張メソッド
  /// 
  /// uGUIのText
  /// アルファ値
  public static void setA (this UnityEngine.UI.Text text, float a)
  {
    text.color = new Color(text.color.r, text.color.g, text.color.b, a);
  }
}

public class test1script : ObservableMonoBehaviour
{
  /// トースト表示用オブジェクト
  public GameObject Toast;

  /// Scanで匿名クラス使うとなぜかエラーするので、クラス定義
  private class Delta
  {
    public float time{ get; set; }
    public float offset{ get; set; }
    public Delta(float t, float o){ time = t; offset = o; }
  }

  /// 
  /// 指定秒間だけEveryUpdateを発行する
  /// 
  /// 
  /// 秒
  private IObservable TakeSec (double value)
  {
    //0秒〜経過秒が値として発行される
    return Observable.EveryUpdate().Scan(
        new Delta( 0, Time.time)
        , (a, t)=>new Delta( Time.time - a.offset, a.offset)
      ).Select(delta => delta.time)
      .TakeUntil(Observable.Timer(System.TimeSpan.FromSeconds(value)));
  }

  ///  RXのサンプルがAwakeだったので、ここに書きました。 
  public override void Awake ()
  {
    //参考サイト:http://neue.cc/2010/07/28_269.html

    //トースト用オブジェクトからuGUIのTextを取り出して、透明にする
    var text = Toast.GetComponent ();
    text.setA(0);

    //nueuccさんのアドカレ記事をパクりました
    //クリック回数をトースト表示
    OnMouseDownAsObservable ()
      .Buffer (OnMouseDownAsObservable ().Throttle (System.TimeSpan.FromMilliseconds (250)))
      .Select (xs => xs.Count)
      .Do(cnt => text.text = string.Format ("{0} clicks", cnt))
      .SelectMany(cnt => 
        //1秒かけて0→1、また1秒かけて1→0ってなってほしいんだけど、0→1、1→2ってなる。意味不明。
        Observable.Concat(TakeSec(1).Do(t=>text.setA(t)), TakeSec(1).Do(t=>text.setA(2-t)))
      ).Subscribe (t=>Debug.Log(t));

    // If you use ObservableMonoBehaviour, must call base method ← サンプルにこう書いてますので、そのまま。
    base.Awake ();
  }

}

こんな感じ。
Hosted by UnityRoom.com

どうにか思ったとおりの動きになったんだけど、理解できない部分がいくつか。
・Scanのseedを匿名クラスにすると、なぜかCannot implicitly convert type `anonymous type' to `anonymous type'って怒られる
・1秒で終わるObservableをConcatで2つ繋げると、なぜか単体で動かすのと違う動きになる、気がする、、、

追記

neueccさんからアドバイス頂いてScanの理解できない件解決しました。
timeの型がintとfloatになってるだけでした。
seedをnew {time=0f, offset=Time.time}にしたらOKでした。はずかし。

Concatの件もいろいろ試してたら思った感じの動きになりました。
Observable.Concat(TakeSec(1).Do(t=>text.setA(t)), TakeSec(1).Do(t=>text.setA(2-t)))

TakeSec(1).Do(t=>text.setA(t)).Last().SelectMany(_=>TakeSec(1).Do(t=>text.setA(1-t)))
てしたらそれっぽくなりました。全然わからん。



2014年8月22日金曜日

【Unity、uGUI】チュートリアル見ながら触ってみる。01.Canvas

ついにUnity4.6のベータ版が来ましたね。

Unity 4.6オープンβスタート。新GUI「uGUI」の試用が可能に | テラシュールブログ

待ちに待ったuGUIがやっと使えます。

ここにチュートリアルがあるようなのでのんびり見てみようと思います。
UI チュートリアル | Unity 公式

01. UI CANVAS

動画はここ 01. UI CANVAS
実際に動画見ながら試してたらむっちゃ時間かかった

Canvas

キャンバスはUI要素を表示するための重要なコンポーネント
Hierarchy->Create->UI->Canvasで作成可能。
すべてのUI要素はキャンバスの子供にする必要がある

キャンバスは2つ以上配置することもできる

新規UI要素を配置する際、シーンに一つもキャンバスが存在しない場合は自動的に作られる。
こんな感じでいきなりボタンなどを配置するとキャンバスも作られる

RenderMode

Canvasごとに異なるRenderModeを設定できる

Screen Space Overlay : RenderMode

もっとも基本的なRenderModeであり、規定値。
これを選択するとUIはシーン上にオーバーレイ表示され、最前面に描画される。
カメラなしでも表示できる。
このモードの場合、Canvasのサイズは自動的にスクリーンサイズに合うように変更される。
また、スクリーンサイズが変更になる場合も自動的に追従する。
よくあるGUI(操作ボタンとか)はこれで問題なさそうね。

Rect Transform

Canvasを含むすべてのUI要素はこのコンポーネント(RectTransformComponent)を持ってる。
UI要素はこのコンポーネントに基づいて動作する。(らしい、よく理解できんかった)
RenderModeにScreen Space Overlayを選んでいる場合、Canvasのこのコンポーネントの値はすべて自動的に入力される。(画面サイズとかに基づいて)
Rect Transformの詳細についてはこちら

CanvasのRectTransformを変更する必要があるのは後述するWorldSpaceに置いたときだけかな?
Buttonなどの子要素を移動する場合はこのコンポーネントを操作すればいいみたい。

PixelPerfectオプションがある。選択するとUI要素は描画時に一番近いPixelに合うように調整される。より鮮明にUI要素を描画したいときに選択するといい。
NGUIにもPixelPerfectってあったけど正直いつ使うのかわからない。

Screen Space Camera : RenderMode

ScreenSpaceOverlayによく似たRenderMode。
特定のカメラに連動して動作する。
だけどカメラなしでも表示できるっぽい。
(Render Cameraをセットしない場合Overlayと同じ動作なのかな?)


こんな感じでRenderCameraにカメラをセットして使う
Perspectiveカメラとの連動が分かりやすい。
ボタンのRectTransformComponentのRotationYを30度傾けてみた。

ScreenSpaceOverlay(上)とScreenSpaceCamera(下)を並べて
同じように30度傾けてみた。違いがわかりやすい。

もちろん連動したカメラのViewPort設定などが反映される。

カメラとの距離はPlaneDistanceで設定可能
カメラごとのClearFlagsやCallingMask、カメラ深度なども適用される。
カメラについての詳細はこちら

World Space : RenderMode

これを選択するとUI要素はシーン内に他のオブジェクト同様に配置される
これはカメラ必須。
このモードのときはRectTransformを自由に書き換えることができ、Scene内の好きな場所に配置できる

イベントカメラはどのカメラがイベントを受け取るかの設定に必要。
主にクリックイベントの取得とか。
※Receives Events って項目ないな。

キャラクター上にHPバーを表示したりとか、そういうときに使うのかな。

Sorting Layer

よくわからんかった。
描画順を制御できるらしい。
詳細はこちら

描画順

キャンバス内での描画順は上から。
これは直感的でいいね



今日はここまで~。

Unity系記事まとめ
Related Posts Plugin for WordPress, Blogger...