ほっとぴぴ

自作アプリ開発の様子をまったり記録しています

カードを扇形に配置!手札のUI作成

こんにちは。ななつきです。
今回は、カードを扇形に表示します。

画面の様子

どんな実装か

配置自体はこちらの記事を参考にしたので、詳細は省略します。計算とか考えずに済んだので大変助かりました。

結構アレンジはしていて、半径いくつの円で、何度分の広がりでカードを表示するかを指定すると各カードの座標が計算されるようにしました。 また、半径分、y座標をずらすことで、半径を大きくするとどんどんUIが上に行ってしまう…ということがないようにしています。一応オプションで切り替えれるようにしました。

加えて、中心に向かってカードを回転させることで扇感を出しています。

1
2
3
4
5
6
7
var centerPosition = rect.position;
for (int elementId = 0; elementId < transform.childCount; elementId++)
{
    var child = transform.GetChild(elementId) as RectTransform;
    var rotaion = (centerPosition - child.position).normalized;
    child.transform.rotation = Quaternion.FromToRotation(Vector3.down, rotaion);
}

次回予告

カードが1枚や2枚になったとき開きがありすぎて見栄えが良くないなあ。と思っているので、どこかでひっそりと修正する予定です。それについては、ブログにまとめるか否かは未定です。

次回は、カードを選択できるようにします。


Share