2D TOOLKIT でオリジナルボタンを作成する

20080522-1

というわけで今回は前回の「2D TOOLKIT にフォントを組み込む」で組み込んだフォントと、ボタン用に用意した画像を使ってオリジナルボタンを作成してみます。

というわけでドット絵は苦手ですががんばって Gale で描いてみました

ボタンのドット絵は 24 x 24 で上下左右の 8 ドットが外周になります。まぁ出来上がりを見てもらった方がわかりやすいと思いますのでテキパキと手順を書いていきます。フォントは前回組み込んだものを使用します。
2dtk20131024-001

作業の準備

プロジェクトを開いて新しいシーンを作って作業の準備をします。使用するプロジェクトは毎回同じ事書いてますが「2D TOOLKIT を使ってみようず(後編)」のプロジェクトに新しいを作成し、 sample006 フォルダを作成して sample006 という名前でシーンを保存します。
2dtk20131024-002

ボタン画像の組み込み

ボタン画像を用意します。さきほど Gale で作成したもので RGBA32 ビットのアルファチャンネル付きです。
2dtk20131024-002

sample006 という名前のスプライトコレクションを作成し、インポートしたボタン画像をスプライトコレクションに追加し、セッティングを行います。(スプライトコレクションのプレハブ作成時にダイアログ無しでいきなり生成された場合の手順説明は省略します)

スプライトコレクション sample006SC をエディタで開き、ボタン画像 Button001.png をスプライトコレクションに加え、セッティングでフィルタを Point に変更し、コミットしてスプライトコレクション編集ウインドウを閉じます。
2dtk20131024-003

スライスドスプライトの生成

ボタン画像を Hierarchy に追加します。Create → tk2d → Sliced Sprite で生成します。次にインスペクタで名前を「Button001」に変更し、スプライトコレクションの選択、サイズの設定、アンカーの設定、ボーダーの設定を行います。

スプライトコレクションは先ほど作成した sample006SC を選びます。

アンカーはいわゆるスプライトの中心となる部分です。デフォルトは画像の左下ですが画像の中央をスプライトの中心としたいので Middle Center にします。

サイズはボタンのサイズを指定します。横長ボタンにしたいのでとりあえず 160 x 50 にします。

ボーダーは今回の画像は 24 x 24 の大きさで、外周は上下左右 8 ドットなので、Left(左), Right(右), Top(上), Bottom(下)全て 8 に設定します。
2dtk20131024-004

ボタンテキストの追加とカメラの調整

ボタン画像に文字を追加します。文字を追加する対象である Button001 を Hierarchy で選択し、Create → tk2d → TextMesh で文字を追加します。

次に文字のインスペクタで 表示座標とサイズ、フォント、表示文字列及び、アンカーを設定します。

ちょっといい感じに見えるようにカメラも調整します。

Main Camera を選択して表示座標、Projection 及び、Size を指定します。

Projection はパース無し(つまり、カメラが遠ざかっても全て原寸で表示)、サイズはズーム指定のようなものです。
2dtk20131024-005

ボタンへの UI 機能の追加

ボタンに UI 機能を追加します。Hierarchy に Create → tk2d → UI Manager で UI マネージャを生成し、インスペクタの Ui Camera に Main Camera をドロップします。これで 2D TOOLKIT の UI 機能が有効になります。

ボタン Button001 を選択した状態でコンポーネントを2つ追加します。Component → 2D Toolkit → UI → Core → tk2dUIItem をクリックで tk2dUIItem コンポーネントが Button001 に追加されます。

このコンポーネントは今回はまだ使いませんが、クリック時にスクリプトのメソッドをコールする機能が使えるようになります。
2dtk20131024-006

さらに Button001 を選択した状態を維持して Component → 2D Toolkit → UI → tk2dUITweenItem でクリック時のアニメーション機能が追加されます。

このままですとまだボタンに当たり判定がないので Button001 を選択した状態でインスペクタの Create Box Collider で当たり判定を追加します。

ボタン機能を試したい場合は再生ボタンをクリックして実行を開始し、Game ビューに表示されたボタンをクリックします。設定がうまくできていれば、Tk 2d UITween Item コンポーネントの働きで一瞬ボタンが小さくなるアニメが再生されます。

これで作業完了です。最後に Ctrl + S でシーンを保存するのをお忘れなく。
2dtk20131024-007

お試しください

次回はスプライトとタイルマップに当たり判定を

もうそろそろゲームっぽいものを作る段階に入ってもいいんじゃなかろうか。

よし、これでやっとねれる。

「シェアする」

ツイートツイート