まえおき
unity5初心者です。
デザイナに大切（？）なのは素材のサイズ。デザインサイズにも関わってきます。
なので、ワールド座標とローカル座標周りに関してのメモ。これからアニメーションウィンドウを使ってトゥイーンアニメーションやエフェクトウィンドウでエフェクト追加するためにも押さえておきたいところ。なお、2Dでの話となります。
検証する内容
- ワールド座標とローカル座標の変換や素材のサイズの変わりに関して理解できるようにカメラのサイズ違いをキャプチャを通して確認。
- ワールド座標とローカル座標で親要素が変わってものレイアウトで、素材の大きさが変わらないようにするためにどうしたら良いのかの検証。
検証の設定
メインカメラ
| 項目 | 設定内容 |
|---|---|
| 画面比率 | 16:9 |
| スクリーンサイズ | 1920*1080 |
| 画面向き | 縦型 |
| カメラサイズ | 8（または10） |
canvas
| 項目 | 設定内容 | 説明 |
|---|---|---|
| Render Mode | Screen Space-Camera | UI をスクリーンに描画するか、3D 空間のオブジェクトとして存在させるかの方式。 |
| PixelPerfect | true | 精度維持のために UI をアンチエイリアス無しで描画するか。 |
| RenderCamera | MainCamera | UI を描画するカメラ（詳細は下記）。 |
| PlaneDistance | 100 | UI の平面が描画担当のカメラの前からどのくらい離れて配置されるか。 |
| SortingLayer | Default | レイヤーの重なり |
| OrderinLayer | 9 | レイヤーの深度設定 |
素材に関して
| canvas内 | canvas外 |
|---|---|
| RecTransform(x,y,0) | Transform(x,y,0)説明 |
| 180*180のpng画像 | 180*180のpng画像 |
| scaleは１ | scaleは１ |
| Sprite Renderer | Image(UI) |
検証結果
- ワールド座標のspriteの大きさはカメラに依存しないのでカメラサイズが変わっても変わらない。
- ローカル座標のImageの大きさはカメラに依存するcanvasに含まれるのでカメラサイズが変わると大きさが変わる。
位置に関しては画面比率と同じにするとマス目＝比率そのままなので分かりやすい。
・ 9:16 = 1080:1920画像のサイズはカメラサイズを10にすると素材の大きさが揃う。
・ １マスのサイズが１辺96pxとして計算できる。
・ カメラサイズ８だと、１マスのサイズが１辺120pxとして計算になるので素材が小さくなる。
・ 同じ大きさを割る数が変わるので、カメラサイズ８の方がカメラサイズ10よりもワールド座標では1.25倍大きくなる。ローカル座標ではピクセルサイズは変わらないので反対に小さくなる。ややこしい。unityの1unitのサイズ
・ peference Pixels per Uniで設定できるサイズが素材のサイズに大きく関与しているみたい。
・ peference Pixels per Uniの数値が100の時はカメラサイズが１０だと等倍になります。
画面キャプチャ
それぞれのカメラサイズのピンクのグー画像を確認するとよくわかります。
なお、アプリにパッケージ化しても当たり前ですが同じです。
カメラサイズ 8
※カメラサイズ８にしているのは縦のアスペクト比が16なので、中心０として上下８マスずつとなるためカメラサイズ８なのです
カメラサイズ 10
まとめ
アスペクト比含め、peference Pixels per Uniでの設定でカメラサイズを決めるのがいいと思いました。ワールド座標とローカル座標の関連が反対のようで反対でなく比例もしているややこしい関係ということがわかった。デザインサイズはアスペクト比カメラサイズ現在の端末の解像度含め総合して判断が必要になってくる。
3D空間においてシェードにより画像のピクセルを再描画するから、意図としない画像の劣化が起こらないようにするためにも必要十分な画像データを用意するために検討する材料になると思いました。