0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-01-23

ゲームビュー、シミュレータビューさらには機種によって表示がずれる

画像を配置したりして気になってたのが、場面によってビューの画像がずれる
何とかならないのかとまたお勉強
あーこうやって検索すると、メインカメラとかキャンバスなんかの項目いっぱい出てくるのね

こんな感じでずれる
image.png
image.png
Unityの画面のアスペクト比と解像度を自動変換 全スマホ・複数解像度に対応させる
こちらをコピペして

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
合うようになった!


画面の大きさ

悩んでいじってるときに、なんかカメラのサイズを500にしてたらしい
image.png
画像を画面に持ってくと
image.png
この左下のオレンジのやつみたく小さい
一生懸命広げてたんだが、このカメラのサイズが原因みたいだ
別シーンを作ったときになんか変だなーと思ってたのが理解できた

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

とりあえず500じゃでかすぎる
image.png
1/10にしてみた
全部統一してみるか
ちなみに、小さくしたら初めこうなった
image.png
Canvasに入っている物はサイズに合わせて変更したが、それ以外は前のまま
なので、中に入れてみたら表示がおかしくならないので、Canvasに入れてサイズ変更
image.png
一緒に小さくなりました


アニメーション表示

アニメに出来そうな画像をゲットしたので挑戦
image.png
これをアニメにしてみる

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

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

image.png

これを、エディタに持ってくと、
image.png
こんな感じで出るので、好きな名前つけて保存

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

image.png
同じフォルダーに出来たこれをクリック

image.png
なんか出てきた
0(さっき付けた名前)クリックすると
image.png
こんなん出てくるので

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

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

ちなみに、作成と同時に出来たこれをクリックすると
image.png

こんな画面
image.png
アニメの説明サイトまわってた時に見たのと似てる

▷sprite の▷押すと アニメのコマ割り画像が表示されます
image.png
もう自動で設定されてるから、特にいじりませんが、確認にはなるかな
途中の動きを遅くするとか、そこは瞬時に次画像とか、いじれそう


カメラの関係(表示したい画像が出ない)

なぜか、Canvasに設定したimageの上にしか画像が表示されなくなった
通常のシーンでは表示されてるのに...さらにレイヤーいじっても、必要な画面が上に表示されない

ホント色々検索したけど、どこにも答えなし(検索の仕方が間違ってる
コマッタ

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

ムー何が違うのか
探し当てました

シーン1つ目・メインカメラ
image.png

シーン2つ目・メインカメラ
image.png

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

Zの値が違ってた
zを-10にしたらあら不思議
普通に画像をドラッグアンドドロップしても表示された!ヨカッタヨカッタ

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

←前 【Unity初心者】Unityでネットゲームを作りたい【10】UIのスライダーを使ったスタミナ表示~とりあえずメイン画面に物を置いてみた

【Unity初心者】Unityでネットゲームを作りたい【12】所持しているアニメ画像を指定の場所に表示したい 次→

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?