現在の背景画像表示の問題点を整理
前回の記事までで、画像の表示まではできるようになりました。しかし現在の状態では、下記の問題が残っています。
①右に謎の空白が空いたまま
②本来の「wood_path.png」画像全体が全て表示されていない（切り取られている）
③ゲーム実行後、画面をドラッグして拡大・縮小させても画像がついてこない
今回は、これらの問題をFixしましょう。
Viewportの確認
これまでの説明で、現在のシーン構成は下記のようになっていると言ってきました。
+Control（ルートノード)
+TextureRect（ノード１：背景画像）
+VBoxContainer（ノード２：テキストと選択肢表示）
実は１つ黙っていたことがあります。この Control ノードの上に、さらにViewportというクラスがあります。これはユーザが意識する必要はないのですが、ユーザが見るビューを管理しているクラスで、このビューが画面の幅(Width)と高さ(Height)をデフォルトで決めています。[プロジェクト]→[プロジェクト設定]で、現在の設定値を見てみましょう。
Viewportの幅は 1152 ピクセル、Viewportの高さは 648 ピクセルでした。デフォルト値は色々考えて決められた値だと思いますのでいまはいじらないでおきましょう。
デフォルト値を確認できたところで、次にViewport画面を見てみましょう。森の画像はいまTextureRectに貼り付けられていますので、TextureRectの表示領域がそれに該当すると考えていいでしょう。実際のゲーム画面に相当するViewportですが、これは薄い青の線で示されている四角ですね。
手書きで引いた黄色の斜線が、画像を拡大してなくしたい余白で、手書きで引いた青色の斜線が、本来画像にあったけれどもカットされてしまった部分ですね。
ViewportのサイズにTextureRectのサイズを合わせる
端的にいうと、Viewportに対して、TextureRectのサイズが、縦は長すぎ、横は短いのです。であれば、TextureRectのサイズを Viewport のWidthとHeightに合わせれば話は早そうです。TextureRectのインスペクターで、TextureRectのExpand Modeプロパティを「Ignore Size」に、LayoutのTransformのSizeプロパティを「X: 1152, Y: 648」にそれぞれ変更します。
Expand Modeが「Keep Size」のままだと、Y座標を元の画像の縦幅より小さくすることができなくなります。
設定し終わると、Viewportでみても、両方の領域がぴったり重なっているのがわかると思います。
ここでいったん実行して確認してみます。
画像は期待どおりの大きさになりました。画像の下の部分も、カットされずにちゃんと表示されているようです。これで問題点の①と②はクリアしました。
さて③はどうでしょうか。ちょっと画面の端をつまんで拡大してみました。
ダメですね。画像がおいてけぼりになって、また無駄な余白が生まれてしまいます。
ゲームウィンドウの拡大／縮小にゲーム画面を追随させる
この拡大／縮小に合わせて画像を拡大／縮小させるのは、プロジェクト設定のようです。
ストレッチのモードを「disabled」→「canvas_items」に、アスペクトを「keep」→「ignore」にそれぞれ変更します。
これで実行してみると。。。
かなり小さくしても、
大きくしても、
画像がついてくるようになりました。これで問題点③も解消です！
まとめ
これで画像の調整はおわりです。ただみなさん既にお気づきだと思いますが、まだおかしいところが残っていますよね。
そう、このテキストが隠れる現象です。
次回の記事では、これをFixさせていきたいですね。
それでは今日はこのへんで。
コメント