【Unity初心者】Unityでネットゲームを作りたい【11】ゲームビュー、シミュレータ機種によって表示がずれる～画面の大きさ～カメラの関係（表示したい画像が出ない）

https://qiita.com/ysyss5500/items/4aeb23639a8cf3d67376
### ゲームビュー、シミュレータビューさらには機種によって表示がずれる
画像を配置したりして気になってたのが、場面によってビューの画像がずれる
何とかならないのかとまたお勉強
あーこうやって検索すると、メインカメラとかキャンバスなんかの項目いっぱい出てくるのね

こんな感じでずれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/6b587090-9caf-4961-4db8-5d4f0f9fe27d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/f2c5d5d8-a768-1015-bcaf-8dcb0b52d627.png)
[Unityの画面のアスペクト比と解像度を自動変換　全スマホ・複数解像度に対応させる](https://feynman.co.jp/unityforest/game-create-lesson/clicker-game/mobile-adjustment/)
こちらをコピペして
```
using UnityEngine;

public class AspectKeeper : MonoBehaviour
{
    [SerializeField]
    private Camera targetCamera; //対象とするカメラ

    [SerializeField]
    private Vector2 aspectVec; //目的解像度

    void Update()
    {
        var screenAspect = Screen.width / (float)Screen.height; //画面のアスペクト比
        var targetAspect = aspectVec.x / aspectVec.y; //目的のアスペクト比

        var magRate = targetAspect / screenAspect; //目的アスペクト比にするための倍率

        var viewportRect = new Rect(0, 0, 1, 1); //Viewport初期値でRectを作成

        if (magRate < 1)
        {
            viewportRect.width = magRate; //使用する横幅を変更
            viewportRect.x = 0.5f - viewportRect.width * 0.5f;//中央寄せ
        }
        else
        {
            viewportRect.height = 1 / magRate; //使用する縦幅を変更
            viewportRect.y = 0.5f - viewportRect.height * 0.5f;//中央余生
        }

        targetCamera.rect = viewportRect; //カメラのViewportに適用
    }
}
```
やってみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/bbc5b7ed-6c15-97b5-2405-203a88cb78be.png)
合うようになった！
___
### 画面の大きさ
悩んでいじってるときに、なんかカメラのサイズを500にしてたらしい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/ede97901-2de8-341a-f6e4-faa936e3c70e.png)
画像を画面に持ってくと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/0d180d8d-3864-7c8d-6fe9-d80a45c89e95.png)
この左下のオレンジのやつみたく小さい
一生懸命広げてたんだが、このカメラのサイズが原因みたいだ
別シーンを作ったときになんか変だなーと思ってたのが理解できた

アイコンとかを表示する予定（48×48とか、下手すりゃ16×16）
丁度いいのってどのぐらいかいろいろ読んだけどわからんな～

とりあえず500じゃでかすぎる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/8b6cdc93-d8a3-9d15-07a1-db2f9976e5e3.png)
1/10にしてみた
全部統一してみるか
ちなみに、小さくしたら初めこうなった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/09c56aeb-d470-2e26-01d2-0c5212709a88.png)
Canvasに入っている物はサイズに合わせて変更したが、それ以外は前のまま
なので、中に入れてみたら表示がおかしくならないので、Canvasに入れてサイズ変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/98a1a20d-5eab-416d-1def-04cc3da5195d.png)
一緒に小さくなりました
___
### アニメーション表示
アニメに出来そうな画像をゲットしたので挑戦
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/1715f0e4-ed0d-c834-8150-185355276fcc.png)
これをアニメにしてみる

ネットを徘徊してると、いろいろやらなきゃなのねっと思ってたが、なんか自動でしてくれる

「画像をドラッグアンドドロップするだけ」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/a0eb17f6-0340-1f11-1f91-db4d32e165c8.png)

これを、エディタに持ってくと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/a71e3b0e-eda6-6c97-eece-134e14257d3e.png)
こんな感じで出るので、好きな名前つけて保存

んで▶するともうアニメになってるｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/d56480e7-0af8-c84b-2576-5e40e424c729.png)
同じフォルダーに出来たこれをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/aa792404-7e58-a8b3-3d24-13415c590624.png)
なんか出てきた
０（さっき付けた名前）クリックすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/81345389-4c9e-235f-17eb-3e34401f4218.png)
こんなん出てくるので

速度速すぎるので、0.1に設定したらいい感じに動いた～

ver6は、ほかのサイトで紹介してるアニメのほぼすべてを自動でしてくれます
感謝（動画めんどいので省略）

ちなみに、作成と同時に出来たこれをクリックすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/f6d1a500-45ab-913e-b9e0-5c0417403bab.png)

こんな画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/decb58d2-dac3-70e8-7783-90d20e5f6395.png)
アニメの説明サイトまわってた時に見たのと似てる

▷sprite　の▷押すと　アニメのコマ割り画像が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/5275f5ec-5e9c-bb1d-9446-f96845f57f42.png)
もう自動で設定されてるから、特にいじりませんが、確認にはなるかな
途中の動きを遅くするとか、そこは瞬時に次画像とか、いじれそう
___
### カメラの関係（表示したい画像が出ない）
なぜか、Canvasに設定したimageの上にしか画像が表示されなくなった
通常のシーンでは表示されてるのに...さらにレイヤーいじっても、必要な画面が上に表示されない

ホント色々検索したけど、どこにも答えなし（検索の仕方が間違ってる
ｺﾏｯﾀ

２つ目のシーン（移動用で作ったやつ）は普通に表示されとる

ﾑｰ何が違うのか
探し当てました

シーン１つ目・メインカメラ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/d7481f3c-4860-d944-64b9-0406b531abd0.png)

シーン２つ目・メインカメラ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979014/9e69c68b-2c9b-ab57-422b-5757a6a1f729.png)

Canvasの項目を一生懸命見比べてたのに、ここか！

Zの値が違ってた
ｚを-10にしたらあら不思議
普通に画像をドラッグアンドドロップしても表示された！ﾖｶｯﾀﾖｶｯﾀ

いいじりまくってた時に数字変えたのね
なんか新しくプロジェクト作って全部やり直したくなってきましたｗ

←前  [【Unity初心者】Unityでネットゲームを作りたい【10】UIのスライダーを使ったスタミナ表示～とりあえずメイン画面に物を置いてみた](https://qiita.com/drafts/d07e96027ad50fec198f/edit)

[【Unity初心者】Unityでネットゲームを作りたい【12】所持しているアニメ画像を指定の場所に表示したい](https://qiita.com/ysyss5500/items/2e43376f58c48084b1db)　次→

https://qiita.com/ysyss5500/items/4aeb23639a8cf3d67376