1. 問題の背景
背景画像のさまざまな解像度に動的に適応する方法は?
解像度の異なるデバイスでは、背景画像に伸縮、圧縮、歪みなどの問題が発生する可能性があるため、背景画像を適切にスケーリングおよび調整して、異なる解像度で適切な外観を維持できるようにする必要があります。
第二に、解決策
このコード サンプルを使用するには、次の手順に従う必要があります。
-
Unity エディターで、新しい空のオブジェクトを作成し、BackgroundScaler という名前を付けます。
-
BackgroundScaler.cs スクリプト ファイルを BackgroundScaler オブジェクトに追加します。
-
プロジェクト フォルダーに Backgrounds というサブフォルダーを作成し、このフォルダーに背景画像を追加します。
-
BackgroundScaler.cs スクリプト ファイルで、backgroundSprite 変数を、追加した背景画像のスプライトに設定します。
-
シーンに BackgroundScaler オブジェクトを追加します。
-
シーンを実行し、さまざまな解像度のデバイスで背景画像の適応効果をテストします。
三、注意事項
このコード例を使用する場合は、次の点に注意してください。
-
背景画像は、さまざまな解像度で適切に表示されるように、適切な縦横比にする必要があります。
-
順応効果をテストするときは、さまざまな解像度のデバイスを使用してテストし、背景画像が引き伸ばされたり、圧縮されたり、歪んだりしていないかを観察してください。
-
背景画像が大きすぎたり小さすぎたりすると、フィット感に影響する場合があります。適切な画像編集ツールを使用して背景画像をスケーリングまたはトリミングして、正しいサイズであることを確認してください。
第四に、コード共有
このコード サンプルを使用すると、背景画像をさまざまな解像度に動的に適応させ、さまざまな解像度で適切な外観を確保できます。実際の開発では、ニーズに合わせて特定の状況に応じてコードを変更および最適化できます。
具体的なコードは次のとおりです。
using UnityEngine;
using UnityEngine.UI;
public class BackgroundScaler : MonoBehaviour
{
public Sprite backgroundSprite; // 存储背景图
private Image backgroundImage;
void Awake()
{
backgroundImage = GetComponent<Image>();
// 获取当前设备的分辨率
float screenHeight = Screen.height;
float screenWidth = Screen.width;
// 计算目标背景图的宽高比
float targetAspect = screenWidth / screenHeight;
// 获取背景图的宽高比
float imageAspect = backgroundSprite.rect.width / backgroundSprite.rect.height;
// 如果目标宽高比小于背景图宽高比，则以宽度为基准进行缩放
if (targetAspect < imageAspect)
{
float scaleFactor = backgroundSprite.rect.width / screenWidth;
float scaledHeight = backgroundSprite.rect.height / scaleFactor;
// 设置背景图的大小和位置
backgroundImage.rectTransform.sizeDelta = new Vector2(screenWidth, scaledHeight);
backgroundImage.rectTransform.position = Vector3.zero;
}
// 如果目标宽高比大于或等于背景图宽高比，则以高度为基准进行缩放
else
{
float scaleFactor = backgroundSprite.rect.height / screenHeight;
float scaledWidth = backgroundSprite.rect.width / scaleFactor;
// 设置背景图的大小和位置
backgroundImage.rectTransform.sizeDelta = new Vector2(scaledWidth, screenHeight);
backgroundImage.rectTransform.position = Vector3.zero;//new Vector2(screenWidth / 2, screenHeight / 2);
}
// 设置背景图的 sprite
backgroundImage.sprite = backgroundSprite;
}
}
五、実用化
キャンバスのサイズと画面の比率に従って、背景のスケーリングを決定します。
using UnityEngine;
using UnityEngine.UI;
public class BackgroundScaler : MonoBehaviour
{
public Canvas BackgroundCanvas;
private Image backgroundImage;
private void Start()
{
if (BackgroundCanvas != null)
{
backgroundImage = GetComponent<Image>();
UpdateBackgroundSize();
}
}
private void UpdateBackgroundSize()
{
RectTransform rt = backgroundImage.rectTransform;
float screenWidth = BackgroundCanvas.GetComponent<RectTransform>().rect.width; //Screen.width;
float screenHeight = BackgroundCanvas.GetComponent<RectTransform>().rect.height; //Screen.height;
float screenRatio = screenWidth / screenHeight;
float bgRatio = rt.rect.width / rt.rect.height;
if (screenRatio > bgRatio)
{
rt.sizeDelta = new Vector2(screenWidth, screenWidth / bgRatio);
}
else
{
rt.sizeDelta = new Vector2(screenHeight * bgRatio, screenHeight);
}
rt.anchoredPosition = new Vector2(0, 0);
}
}