時職人の作り方 (1)
前回の記事で、「時職人」を軽く紹介しましたが、
このアプリがどういった仕組みで構築されているかを
少しづつ紹介していこうと思います。
今回は、ステージ選択画面について。
ステージ選択画面は以下の様な構成になっています
・上部：ステージを選択するためのアイコン、
・中部：エリアの番号表示とエリア切り替えのためのボタン
・下部：ステージ情報表示
また、以下２つのカメラでそれぞれの表示部分を
分けて表示しています。
サブカメラ：アイコン選択部分用カメラ（上部）
メインカメラ：２ステージ情報＆エリア切り替えUI用カメラ（中部、下部）
メインカメラの方を手前に表示して、その後ろに
サブカメラの画面を投影している形です。
この使い分けによって、サブカメラだけ移動させて、
部分的にスクロールするという表現をしています。
また、ステージ情報は、全ステージ分一気に描画しておき、
そこをカメラが左右に移動する仕組みです。
これにより、後はカメラ移動させるだけで、スクロールが表現できます。
場合によっては、メモリの節約のために、
移動時に、移動先を描画し、移動前のところを消して…
などの処理が必要になると思いますが、
今回はそんなにオブジェクトの数もないため、
この仕組にしています。
また、メニューの一番左は、タイトルに戻る為のホームボタンになってるのですが、
あらかじめカメラの移動先の左端にエディタ上でボタンを設置しています。
今回のつくりの場合、今どこをスクロールしてるかを判断し、
描画するオブジェクトを変える処理がいらないので、ボタンの変更があっても
エディタ上の処理で済むので楽です。
ちなみに、カメラの移動にはiTweenを利用して、
スクロールを滑らかにしています。
複数のカメラを使うと、移動させたくないUIと
移動する画面を切り分けれるので便利です。
次回は、ストップウォッチを止める部分の処理を紹介予定です。
