行楽シーズンなので・・・
コンサートを観にいったら斜め後ろに頭に鉢巻を巻いたセーラー服姿のオッサンがいて、めっちゃ気になるけど見ちゃいけない、いや、やっぱり気になるけれど万が一、目が合ったら怖い、、云々で、ステージより斜め後ろのオッサンの動向のほうが気になって仕方ない、みたいな集中力が散漫になる週末を過ごしたのですが、終演後に振り返ったらそのオッサンの姿はどこにもなかったのであれは幻だったのかもしれない。
まぁいいでしょう
UIデザインについて
元よりデザイン系の才能については全般的に自信がないのでキャラクターやオブジェクト、イメージに関してはほぼ購入したものを使っている(前作はロゴも発注したし)のですが、特にUIのデザインについては毎度頭が痛いです。
色々と試行錯誤を繰り返して、作っては変え、作っては変え、とゲームのメイン部分のコーディングよりも時間が掛かったりします。
現在製作中の「Dull Things No Life」でも同様でステージ選択の画面とかどうやっても厨二病っぽい仕上がりになっちゃう。
仕方ないので画面を表示する時にお洒落っぽいアニメ動作を入れて誤魔化そう、と考えて、前々回でも照会したUIアニメーションのテンプレートアセットを使用することに
で、今回は
こんな感じでメニュー画面を表示するようにしました。
アニメ動作的には簡単な動作で、メニュー画面の親となっているマスクのサイズを変えているだけなのですが、そこでちょっとしたヒントを発見。
Spriteマスクと違ってImageのマスクは、マスクをかけるImageはマスクの子オブジェクトでなくてはいけません。
このため、マスク側のサイズをScaleで変更しようとすると当然、子オブジェクトのImage側もサイズが変更されてしまいます。
なので、これまではマスク側は不動で、Image側を動かして表示するようにしていたのですが、今回のアニメ動作の場合はImage側(メニュー画面)は不動で、マスク側のサイズが変更される動作となっています。
マスク側のサイズを変える
これはAnimation画面をみればわかるのですが、マスク側のDeltaSizeの値を変えています。
今回の場合、マスクのサイズは520*360なので、最初のDeltaSizeには「-520,-360」を指定、それを徐々に変えていくことでマスクのサイズを大きく＝メニュー画面が徐々に表示される、仕組みとなっています。
これが
これに代わる
ただ、マスクやImageのサイズはAnchorsPositionも関ってくるので一概にDeltaSizeの値だけ注目すればいい、ということもないので注意が必要です。
ここら辺の話はRectTransfromについて纏めた以下の記事が参考なると思います。
