2D TOOLKIT で UI MASK

20080506-2b

■■■ 文字やスプライトを画面内でクリップする ■■■

たとえば、こんな事をやりたいとします。

こんな風に文字やアイコン等をスクロールさせ、ウインドウからはみ出た部分を非表示するための仕組みが 2D TOOLKIT に用意されています。

今回は 2D TOOLKIT のサンプルプロジェクトを使ってみます。

■■■■■ プロジェクトを準備する ■■■■■

では、Unity を起動して新規プロジェクトを作成、シーンを保存するところまでやってしまいましょう。

  • プロジェクトフォルダ保存先
    •  好みのフォルダ(自分は マイドキュメント\Group_Unity にしてます)
  • プロジェクトフォルダ名
    • 2dtoolkit_test_20140104a

プロジェクトの作成方法は「Unity3D / 新規プロジェクトの作成方法」を参考にしてください。

今回はアセットインポート時のサンプルシーンを使用しますので、特にシーンは作りません。

■■■■■ アセット 2D Toolkit をインポートする ■■■■■

次は 2D Toolkit をインポートします。

アセットのインポート方法は「Unity3D / カスタムアセットのインポート」を参考にしてください。

上記ページでは SmoothMoves の説明になっていますが、そのまま 2D Toolkit に読み替えてください。

■■■■■ サンプルシーンを開く ■■■■■

サンプルシーンを開きます。

Project ビュー Assets / TK2DROOT / tk2dUI_demo をクリックし、5 – ScrollableArea.unity をダブルクリックします。

とりあえず、実行してみましょう。再生ボタンをクリックしてください。

■■■■■ サンプルの動作を見る ■■■■■

実行すると、Game ビューにスクロール可能なウインドウが2つ表示されます。マウスでグリグリとドラッグしてスクロールさせる事ができます。ウインドウの枠からはみ出た画像や文字がきちんと非表示になっている事がわかります。

シーンビューを見てみましょう。実際のゲーム画面より広い範囲で見てみると、枠からはみ出た部分が「何か」に隠されている様子がわかります。

ここで「何か」を見えるようにしてみましょう。

Hierarchy ビュー ~1 – Manual Scrollable Area / ScrollableArea_Horizontal / Masks と
Hierarchy ビュー ~2 – Auto Scrollable Area / ScrollableArea_Horizontal / Masks それぞれの、LeftMask と RightMask を選択してみましょう。

Scene ビューの今までアイコン画像や文字を隠していた「何か」の部分が選択状態として浮かび上がってきます。

これが 2D TOOLKIT に用意された、UI Mask オブジェクトです。インスペクタはこのような感じになります。このように、UI Mask オブジェクトの中に入り込んだ 2D TOOLKIT のテキストやスプライトは非表示になります。

■■■■■ もうひとつのサンプル ■■■■■

サンプルシーンを開きます。

Project ビュー Assets / TK2DROOT / tk2dUI_demo をクリックし、5 – ScrollableArea.unity をダブルクリックし、シーンを開きます。

Hierarchy ビュー DepthMask を選択し、UI Mask を Scene ビューに表示させます。

このサンプルを見てもらうと、UI Mask は UI Mask の後ろにあるオブジェクトを隠すのではなく、UI Mask の中に入ったオブジェクトを隠すという事がわかると思います。

2D Toolkit で GUI を作る場合、このオブジェクトを使いこなすのが多分必須になると思います。

■■■■■ 書きたいネタはいっぱい ■■■■■

どうも、きちんとした書式にして説明画像も作成して・・・って感じできちんとした記事を作ろうとこだわってしまうせいで色々書きたいネタが積みあがってしまっちゃってます。

もうちょっと簡単に画像つき手順が作成できたらいいんですが、なかなか大変です。

とか思っていいのがないか探していたら良いプラグインを見つけました。Wordpress の ImagePaste です。そのままペーストで画像のアップロードができるのでとっても便利。(その後、アップロードした画像が管理画面に一覧表示されてなかったので未使用画像消去のプラグインを探す羽目になっちゃいましたけども)

■■■■■ nexus 買っちゃいました ■■■■■

手元に Android 端末のいいのがなかったので思い切って nexus 買ってきました。

2D Toolkit でどれくらいモバイル端末でええ感じに動くのか、ものすごく楽しみです。

それではまた~

「シェアする」

ツイートツイート